/* Pure Community shared design system — extracted from index.html (brand-locked) */
/* === DESIGN SYSTEM v2 === */
    :root {
      --orange: #f1420b;
      --blue: #2a93c1;
      --bg: #080a12;
      --text: #e8edf5;
      --muted: #9ca3af;
      --border: rgba(255,255,255,0.08);
      --green: #16a34a;
      --purple: #7c3aed;
      --amber: #d97706;
      --slate: #475569;

      --blue-dim: rgba(42,147,193,0.12);
      --blue-glow: rgba(42,147,193,0.3);
      --blue-border: rgba(42,147,193,0.25);
      --card: linear-gradient(145deg, rgba(13,26,42,0.85) 0%, rgba(8,10,18,0.9) 100%);
      --gradient-btn: linear-gradient(135deg, #2a93c1 0%, #1a7aaa 100%);
      --gradient-btn-hover: linear-gradient(135deg, #3aa8da 0%, #2a93c1 100%);
      --shadow-card: 0 4px 20px rgba(0,0,0,0.5), 0 1px 3px rgba(42,147,193,0.1);
      --shadow-hover: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(42,147,193,0.15);

      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-pill: 999px;
      --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      color: var(--text);
      background:
        radial-gradient(ellipse at 20% 20%, rgba(42,147,193,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(42,147,193,0.04) 0%, transparent 50%),
        #080a12;
      background-attachment: fixed;
      -webkit-font-smoothing: antialiased;
      line-height: 1.5;
    }

    h1,h2,h3,h4,.oswald {
      font-family: 'Oswald', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 600;
    }

    /* BUTTONS */
    .btn-primary {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 10px 18px; font-size: 14px; font-weight: 600; color: #fff;
      border: none; border-radius: var(--radius-sm);
      background: var(--gradient-btn);
      box-shadow: 0 2px 8px rgba(42,147,193,0.25);
      cursor: pointer; transition: var(--transition); font-family: inherit;
    }
    .btn-primary:hover {
      background: var(--gradient-btn-hover);
      box-shadow: 0 4px 16px rgba(42,147,193,0.4), 0 0 0 1px var(--blue-border);
      transform: translateY(-1px);
    }
    .btn-ghost {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 8px 16px; font-size: 14px; font-weight: 500; color: var(--text);
      background: transparent; border: 1px solid var(--border);
      border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition);
      font-family: inherit;
    }
    .btn-ghost:hover { border-color: var(--blue-border); background: var(--blue-dim); }
    .btn-sm { padding: 6px 14px; font-size: 13px; }

    /* CARD */
    .card {
      background: var(--card); border: 1px solid var(--blue-border);
      border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
      padding: 20px; backdrop-filter: blur(10px); transition: var(--transition);
    }
    .card:hover { transform: translateY(-2px); border-color: var(--blue-glow); box-shadow: var(--shadow-hover); }

    /* BADGES */
    [class^="badge-"] {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 9px; font-size: 11px; font-weight: 700;
      border-radius: var(--radius-pill); line-height: 1;
    }
    .badge-show-tell { color: #ff7a4d; background: rgba(241,66,11,0.12); border: 1px solid rgba(241,66,11,0.25); }
    .badge-win { color: #4ade80; background: rgba(22,163,74,0.12); border: 1px solid rgba(22,163,74,0.25); }
    .badge-question { color: #a78bfa; background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.25); }
    .badge-tutorial { color: #fbbf24; background: rgba(217,119,6,0.12); border: 1px solid rgba(217,119,6,0.25); }
    .badge-ai-showcase { color: #5cc4ec; background: var(--blue-dim); border: 1px solid var(--blue-border); }
    .badge-discussion { color: #94a3b8; background: rgba(71,85,105,0.18); border: 1px solid rgba(71,85,105,0.3); }

    /* AVATAR */
    .avatar {
      width: 40px; height: 40px; border-radius: 50%;
      background: linear-gradient(135deg, #2a93c1 0%, #1a5a7a 100%);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0;
      transition: var(--transition);
    }
    .avatar:hover { box-shadow: 0 0 0 3px var(--blue-glow); }
    .avatar.lg { width: 48px; height: 48px; font-size: 16px; }
    .avatar.sm { width: 32px; height: 32px; font-size: 12px; }
    .avatar.v2 { background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%); }
    .avatar.v3 { background: linear-gradient(135deg, #16a34a 0%, #14532d 100%); }
    .avatar.v4 { background: linear-gradient(135deg, #d97706 0%, #7c2d12 100%); }
    .avatar.v5 { background: linear-gradient(135deg, #db2777 0%, #831843 100%); }
    .avatar.v6 { background: linear-gradient(135deg, #0891b2 0%, #155e75 100%); }

    /* XP BAR */
    .xp-bar { width: 100%; height: 6px; background: rgba(255,255,255,0.06); border-radius: var(--radius-pill); overflow: hidden; }
    .xp-fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, #1a7aaa 0%, #2a93c1 60%, #3aa8da 100%); box-shadow: 0 0 8px var(--blue-glow); }

    /* LEVEL BADGE */
    .level-badge {
      display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
      font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
      border-radius: var(--radius-pill); color: #5cc4ec;
      background: var(--blue-dim); border: 1px solid var(--blue-border);
    }

    /* REACTION BUTTONS */
    .reaction-btn {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 5px 10px; font-size: 13px; font-weight: 500; color: var(--muted);
      background: transparent; border: 1px solid var(--border);
      border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition);
      font-family: inherit;
    }
    .reaction-btn:hover { color: var(--blue); background: var(--blue-dim); border-color: var(--blue-border); }
    .reaction-btn.active { color: #fff; background: var(--gradient-btn); border-color: transparent; box-shadow: 0 0 12px var(--blue-glow); }

    /* SAVE BUTTON */
    .save-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 32px; height: 32px; color: var(--muted);
      background: transparent; border: 1px solid var(--border);
      border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition);
    }
    .save-btn:hover { color: var(--blue); border-color: var(--blue-border); background: var(--blue-dim); }
    .save-btn.saved { color: #fff; background: var(--gradient-btn); border-color: transparent; }

    /* ANIMATIONS */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .fade-in { animation: fadeInUp 200ms cubic-bezier(0.4,0,0.2,1) both; }

    @keyframes pulse-live {
      0%  { transform: scale(1);   opacity: 1; }
      50% { transform: scale(1.4); opacity: 0.6; }
      100%{ transform: scale(1);   opacity: 1; }
    }
    .live-dot {
      display: inline-block; width: 8px; height: 8px; border-radius: 50%;
      background: var(--orange); box-shadow: 0 0 8px rgba(241,66,11,0.6);
      animation: pulse-live 2s ease-in-out infinite;
    }

    /* NOTIFICATION BADGE */
    .notif-badge {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 18px; height: 18px; padding: 0 5px;
      font-size: 10px; font-weight: 700; color: #fff;
      background: var(--orange); border-radius: var(--radius-pill);
    }

    /* SIDEBAR NAV */
    .nav-item {
      display: flex; align-items: center; gap: 11px; padding: 9px 14px;
      font-size: 14px; font-weight: 500; color: var(--muted);
      border-left: 3px solid transparent;
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      cursor: pointer; transition: var(--transition); text-decoration: none;
    }
    .nav-item:hover { color: var(--text); background: var(--blue-dim); }
    .nav-item.active { color: #fff; background: var(--blue-dim); border-left-color: var(--blue); }
    .nav-item svg { flex-shrink: 0; opacity: 0.7; }
    .nav-item.active svg { opacity: 1; }

    /* WIDGET */
    .widget {
      background: var(--card); border: 1px solid var(--border);
      border-radius: var(--radius-md); box-shadow: var(--shadow-card);
      padding: 16px; margin-bottom: 14px; backdrop-filter: blur(10px);
    }
    .widget-title {
      font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
      text-transform: uppercase; color: var(--muted); margin: 0 0 12px;
    }

    /* POST CARD */
    .post-card {
      background: var(--card); border: 1px solid var(--blue-border);
      border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
      padding: 20px; margin-bottom: 14px; backdrop-filter: blur(10px);
      transition: var(--transition);
    }
    .post-card:hover { transform: translateY(-2px); border-color: var(--blue-glow); box-shadow: var(--shadow-hover); }

    /* === APP LAYOUT === */
    .app { display: flex; flex-direction: column; min-height: 100vh; }

    .topnav {
      position: fixed; top: 0; left: 0; right: 0; height: 60px; z-index: 200;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 20px;
      background: rgba(8,10,18,0.9); backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
    }
    .topnav-left { display: flex; align-items: center; gap: 14px; }
    .topnav-right { display: flex; align-items: center; gap: 10px; }
    .logo { display: flex; align-items: center; gap: 8px; font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 0.08em; cursor: pointer; }
    .logo .pb-blue { color: #2a93c1; }
    .logo .pb-white { color: #e8edf5; }

    .icon-btn {
      position: relative; display: inline-flex; align-items: center; justify-content: center;
      width: 38px; height: 38px; border-radius: var(--radius-sm);
      background: transparent; border: 1px solid var(--border);
      color: var(--muted); cursor: pointer; transition: var(--transition);
    }
    .icon-btn:hover { color: var(--text); background: var(--blue-dim); border-color: var(--blue-border); }
    .icon-btn .notif-badge { position: absolute; top: -4px; right: -4px; }

    /* ---- AVATAR MENU (Profile / Saved / Settings) ---- */
    .avatar-menu-wrap { position: relative; display: inline-flex; }
    .avatar-trigger { background: transparent; border: none; padding: 0; cursor: pointer; display: inline-flex; border-radius: 50%; }
    .avatar-trigger:focus-visible { outline: 2px solid var(--blue-border); outline-offset: 2px; }
    .avatar-menu {
      position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px;
      background: var(--surface, #12151d); border: 1px solid var(--border);
      border-radius: var(--radius-sm); box-shadow: 0 12px 28px rgba(0,0,0,0.35);
      padding: 6px; z-index: 200; display: none;
    }
    .avatar-menu.open { display: block; }
    .avatar-menu-item {
      display: flex; align-items: center; gap: 10px; padding: 9px 12px;
      font-size: 13px; font-weight: 600; color: var(--text); border-radius: 8px;
      text-decoration: none; transition: var(--transition);
    }
    .avatar-menu-item svg { width: 16px; height: 16px; opacity: 0.85; }
    .avatar-menu-item:hover { background: var(--blue-dim); color: var(--text); }

    .main-layout {
      display: flex; padding-top: 60px; min-height: 100vh;
    }

    /* SIDEBAR */
    .sidebar {
      position: fixed; top: 60px; left: 0; bottom: 0; width: 240px;
      overflow-y: auto; overflow-x: hidden;
      background: rgba(8,10,18,0.8); backdrop-filter: blur(10px);
      border-right: 1px solid var(--border);
      padding: 16px 8px;
      display: flex; flex-direction: column;
      z-index: 100;
    }
    .sidebar-section { margin-bottom: 8px; }
    .sidebar-label {
      font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--muted);
      padding: 4px 14px 8px;
    }
    .user-status {
      margin-top: auto; padding: 16px 14px;
      background: var(--blue-dim); border-radius: var(--radius-md);
      border: 1px solid var(--blue-border);
    }
    .user-status-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .user-status-name { font-size: 14px; font-weight: 600; }
    .user-status-sub { font-size: 11px; color: var(--muted); }
    .xp-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin: 6px 0 4px; }
    .user-status-arc { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
    .user-status-arc .arc-meta { flex: 1; }

    /* FEED AREA */
    .feed-area {
      flex: 1; margin-left: 240px; margin-right: 340px;
      padding: 24px 24px 100px;
      min-width: 0;
    }
    .feed-column { max-width: 720px; margin: 0 auto; }

    /* CREATE POST */
    /* Clickable member name / avatar -> their profile page (profile.html?id=). */
    a.pc-profile-link { text-decoration: none; color: inherit; cursor: pointer; }
    a.pc-profile-link:hover { text-decoration: underline; }
    /* On the dedicated profile page the profile card fills the column (it's a full
       page, not a floating 520px popup). The members-page in-page preview card keeps
       its own narrow width — this override is scoped to data-page="profile" only. */
    body[data-page="profile"] .post-card[data-profile-card] { max-width: 100% !important; }

    /* ── Read-more truncation on long post bodies ── */
    .post-body.pc-clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
      overflow: hidden; }
    .pc-readmore { background: none; border: none; color: var(--blue, #5cc4ec); font-family: inherit;
      font-size: 13px; font-weight: 600; cursor: pointer; padding: 2px 0 6px; }
    .pc-readmore:hover { text-decoration: underline; }
    /* Read-only engagement counts on visitor preview cards. */
    .pc-preview-counts { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--muted); }

    /* ── Profile Pages v2 (panel consensus) ── */
    .pv2 { max-width: 720px; margin: 0 auto; }
    .pv2-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
    .pv2-header .avatar { width: 88px; height: 88px; font-size: 30px; flex-shrink: 0; }
    .pv2-id { flex: 1; min-width: 0; }
    .pv2-name { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.02em;
      font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .pv2-specialty { color: var(--text); font-size: 14px; margin-top: 4px; }
    .pv2-role { color: var(--muted); font-size: 13px; margin-top: 2px; }
    .pv2-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--muted); }
    .pv2-tier { font-size: 11px; }
    .pv2-model { font-size: 11px; color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
    .pv2-actions { flex-shrink: 0; text-align: right; }
    .pv2-nudge { font-size: 11px; color: var(--muted); margin-top: 6px; max-width: 170px; }
    .pv2-bio { color: var(--text); font-size: 14px; line-height: 1.6; white-space: pre-wrap; margin: 4px 0 16px; }
    .pv2-stats { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 0; font-size: 13px; color: var(--muted);
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 18px; }
    .pv2-stats strong { color: var(--text); }
    .pv2-band { margin-bottom: 20px; }
    .pv2-band-title { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.04em;
      font-size: 13px; color: var(--muted); margin-bottom: 10px; }
    .pv2-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
    .pv2-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted);
      font-family: inherit; font-size: 14px; font-weight: 600; padding: 8px 12px; cursor: pointer; }
    .pv2-tab.active { color: var(--text); border-bottom-color: var(--blue); }
    .pv2-typefilter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
    .pv2-typebtn { padding: 4px 12px; font-size: 12px; font-weight: 600; border-radius: var(--radius-pill);
      border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; font-family: inherit; }
    .pv2-typebtn:hover { border-color: var(--blue-border); color: var(--text); }
    .pv2-typebtn.active { border-color: var(--blue); color: var(--blue); background: var(--blue-dim); }
    .pv2-reply { padding: 10px 0; border-bottom: 1px solid var(--border); }
    .pv2-reply-ctx { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
    .pv2-reply-body { font-size: 14px; color: var(--text); }
    .pv2-reply-time { font-size: 11px; color: var(--muted); margin-top: 4px; }

    /* Profile round-2: cover band, avatar overlap, About card, owner analytics. */
    .pv2-cover { position: relative; width: 100%; aspect-ratio: 4 / 1; min-height: 120px;
      border-radius: 14px; overflow: hidden; }
    .pv2-cover-lockup { position: absolute; right: 12px; bottom: 10px; font-size: 11px;
      font-weight: 600; color: #fff; background: rgba(8,10,18,0.55);
      border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; padding: 3px 10px;
      backdrop-filter: blur(4px); }
    .pv2-hascover .pv2-header { align-items: flex-start; margin-top: 12px; position: relative; z-index: 2; }
    /* The avatar must sit ABOVE the cover. .pv2-cover is position:relative (for its
       lockup), which in CSS paint order renders it OVER a non-positioned sibling — so
       without this the cover's bottom edge clips the avatar's top (obvious on a photo
       avatar, subtle on AI initials). Positioning the avatar with a higher z-index puts
       it cleanly on top, half-in/half-out, identical for human and AI. */
    .pv2-hascover .pv2-avatar { position: relative; z-index: 3; margin-top: -52px;
      border: 3px solid var(--bg); box-shadow: 0 2px 12px rgba(0,0,0,0.45); }
    .pv2-about { border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; margin-bottom: 18px; }
    .pv2-about-row { margin-bottom: 12px; }
    .pv2-about-row:last-child { margin-bottom: 0; }
    .pv2-about-label { font-family: 'Oswald', sans-serif; text-transform: uppercase;
      letter-spacing: 0.04em; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
    .pv2-about-val { font-size: 14px; color: var(--text); }
    .pv2-analytics { border: 1px solid var(--blue-border); background: var(--blue-dim);
      border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; }
    .pv2-stat-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px;
      padding: 6px 0; border-bottom: 1px solid var(--border); }
    .pv2-stat-row:last-child { border-bottom: none; }
    .pv2-stat-row strong { color: var(--text); white-space: nowrap; }
    .pv2-stat-row span { color: var(--muted); }
    .pc-edit-cover { width: 100%; aspect-ratio: 4 / 1; border-radius: 10px;
      border: 1px solid var(--border); background-color: rgba(255,255,255,0.04);
      background-size: cover; background-position: center; }

    @media (max-width: 640px) {
      .pv2-header { flex-wrap: wrap; }
      .pv2-actions { text-align: left; width: 100%; }
    }

    .create-post {
      background: var(--card); border: 1px solid var(--blue-border);
      border-radius: var(--radius-lg); padding: 16px 20px;
      margin-bottom: 20px; backdrop-filter: blur(10px);
    }
    .create-post-row { display: flex; align-items: center; gap: 12px; }
    /* Real composer: one-line title input; the rest reveals when .create-post.expanded. */
    .create-title {
      flex: 1; background: rgba(255,255,255,0.04); border: 1px solid var(--border);
      border-radius: var(--radius-sm); padding: 10px 14px; font-size: 14px;
      color: var(--text); font-family: inherit; transition: var(--transition);
    }
    .create-title::placeholder { color: var(--muted); }
    .create-title:focus { outline: none; border-color: var(--blue-border); background: var(--blue-dim); }
    .create-post .create-expand { display: none; }
    .create-post.expanded .create-expand { display: block; }
    .create-body {
      width: 100%; box-sizing: border-box; margin: 12px 0 0;
      background: rgba(255,255,255,0.04); border: 1px solid var(--border);
      border-radius: var(--radius-sm); padding: 10px 14px; font-size: 14px;
      color: var(--text); font-family: inherit; line-height: 1.5; resize: none;
      min-height: 74px; transition: border-color var(--transition);
    }
    .create-body::placeholder { color: var(--muted); }
    .create-body:focus { outline: none; border-color: var(--blue-border); background: var(--blue-dim); }
    .create-count { font-size: 12px; color: var(--muted); margin-right: auto; }
    .btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; }
    .type-pills { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
    .type-pill {
      padding: 4px 12px; font-size: 12px; font-weight: 600;
      border-radius: var(--radius-pill); border: 1px solid var(--border);
      background: transparent; color: var(--muted); cursor: pointer; transition: var(--transition);
      font-family: inherit;
    }
    .type-pill:hover { border-color: var(--blue-border); color: var(--text); background: var(--blue-dim); }
    .type-pill.selected { border-color: var(--blue); color: var(--blue); background: var(--blue-dim); }
    .create-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
    /* "Add image" — a quiet secondary affordance next to Post, not competing with the CTA. */
    .create-image-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 12px; font-size: 13px; font-weight: 600; font-family: inherit;
      border-radius: var(--radius-pill); border: 1px solid var(--border);
      background: transparent; color: var(--muted); cursor: pointer; transition: var(--transition);
    }
    .create-image-btn:hover { border-color: var(--blue-border); color: var(--text); background: var(--blue-dim); }
    .create-image-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
    /* Chosen-image thumbnail with a remove control + upload status. */
    .create-image-preview { position: relative; margin: 10px 0 0; }
    .create-image-preview img { display: block; max-width: 220px; max-height: 160px; width: auto; border-radius: var(--radius-md); border: 1px solid var(--border); }
    .create-image-remove {
      position: absolute; top: -8px; left: 204px; width: 24px; height: 24px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%; border: 1px solid var(--border); background: var(--card);
      color: var(--text); cursor: pointer; font-size: 15px; line-height: 1; padding: 0;
    }
    .create-image-remove:hover { border-color: var(--err, #f87171); color: var(--err, #f87171); }
    .create-image-status { font-size: 12px; color: var(--muted); margin-top: 6px; }

    /* POST CARD INTERNALS */
    .post-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
    .post-meta { flex: 1; min-width: 0; }
    .post-author { font-size: 14px; font-weight: 700; color: var(--text); }
    .post-ai { font-size: 12px; color: var(--blue); font-weight: 600; }
    .post-time { font-size: 12px; color: var(--muted); }
    .post-company { font-size: 12px; color: var(--muted); }
    .post-sub-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .post-sub-row .dot { color: var(--muted); }
    .post-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
    .post-title { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 22px; font-weight: 700; letter-spacing: 0.03em; color: var(--text); margin: 0 0 10px; line-height: 1.25; }
    .post-body { font-size: 14px; color: var(--text); margin: 0 0 14px; line-height: 1.6; opacity: 0.85; }
    .post-image { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, rgba(42,147,193,0.12), rgba(13,26,42,0.8)); border-radius: var(--radius-md); margin-bottom: 14px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; overflow: hidden; }
    .post-image-placeholder { opacity: 0.4; font-style: italic; }
    /* Real attached post photo. Wrapper caps height + crops overflow so a tall image
       never dominates the feed; wide images show in full. width:100% keeps it responsive
       (looks right down to 375px). */
    .post-photo { margin: 0 0 14px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); max-height: 420px; background: rgba(255,255,255,0.02); }
    .post-photo img { display: block; width: 100%; height: auto; }
    .post-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
    .tag { padding: 3px 9px; font-size: 12px; color: var(--muted); background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--radius-pill); cursor: pointer; transition: var(--transition); }
    .tag:hover { color: var(--blue); border-color: var(--blue-border); background: var(--blue-dim); }
    .post-actions { display: flex; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
    .post-actions .spacer { flex: 1; }
    .pin-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue); background: var(--blue-dim); border-radius: var(--radius-pill); border: 1px solid var(--blue-border); }

    /* RIGHT RAIL */
    .right-rail {
      position: fixed; top: 60px; right: 0; bottom: 0; width: 340px;
      overflow-y: auto; padding: 20px 16px 80px;
      border-left: 1px solid var(--border);
      background: rgba(8,10,18,0.6); backdrop-filter: blur(10px);
    }

    /* LEADERBOARD */
    .lb-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-bottom: 1px solid var(--border); }
    .lb-row:last-child { border-bottom: none; }
    .lb-rank { width: 22px; text-align: center; font-size: 13px; font-weight: 700; }
    .lb-rank.gold { color: #f59e0b; }
    .lb-rank.silver { color: #94a3b8; }
    .lb-rank.bronze { color: #cd7c54; }
    .lb-name { flex: 1; font-size: 14px; font-weight: 600; }
    .lb-pts { font-size: 13px; color: var(--blue); font-weight: 700; }
    .lb-you { background: var(--blue-dim); border-radius: var(--radius-sm); }
    .lb-your-rank { font-size: 12px; color: var(--muted); margin-top: 8px; text-align: center; }
    .lb-footer { margin-top: 10px; text-align: center; }
    .lb-link { font-size: 12px; color: var(--blue); font-weight: 600; cursor: pointer; text-decoration: none; }
    .lb-link:hover { text-decoration: underline; }

    /* LIVE SESSION CARD */
    .live-card { background: var(--blue-dim); border: 1px solid var(--blue-border); border-radius: var(--radius-md); padding: 12px; margin-bottom: 10px; }
    .live-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .live-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange); background: rgba(241,66,11,0.12); border-radius: var(--radius-pill); border: 1px solid rgba(241,66,11,0.3); }
    .live-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
    .live-meta { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
    .rsvp-btn { width: 100%; }

    /* CHALLENGE CARD */
    .challenge-card { background: linear-gradient(135deg, rgba(42,147,193,0.08), rgba(8,10,18,0.9)); border: 1px solid var(--blue-border); border-radius: var(--radius-md); padding: 20px; }
    .challenge-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .challenge-title { font-size: 15px; font-weight: 700; color: var(--text); }
    .xp-pill { padding: 3px 10px; font-size: 12px; font-weight: 700; color: #fbbf24; background: rgba(217,119,6,0.15); border-radius: var(--radius-pill); border: 1px solid rgba(217,119,6,0.3); }
    .challenge-req { font-size: 12px; color: var(--muted); margin: 0 0 10px; padding-left: 18px; }
    .challenge-req li { margin-bottom: 3px; }
    .challenge-sub { font-size: 12px; color: var(--muted); margin-bottom: 10px; }

    /* SPOTLIGHT */
    .spotlight-member { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
    .spotlight-name { font-size: 14px; font-weight: 700; }
    .spotlight-role { font-size: 12px; color: var(--muted); }
    .spotlight-quote { border-left: 3px solid var(--orange); padding-left: 12px; font-size: 14px; font-style: italic; color: var(--text); opacity: 0.9; line-height: 1.6; }
    .spotlight-badge { margin-top: 6px; }

    /* MOBILE BOTTOM NAV */
    .mobile-nav {
      display: none; position: fixed; bottom: 0; left: 0; right: 0; height: 64px;
      background: rgba(8,10,18,0.95); backdrop-filter: blur(16px);
      border-top: 1px solid var(--border); z-index: 300;
      align-items: center; justify-content: space-around;
    }
    .mobile-nav-item {
      display: flex; flex-direction: column; align-items: center; gap: 3px;
      color: var(--muted); cursor: pointer; transition: var(--transition); padding: 4px 8px;
      font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    }
    .mobile-nav-item.active { color: var(--blue); }
    .mobile-nav-item svg { width: 22px; height: 22px; }

    /* PULSE WAVE DIVIDER */
    .pulse-divider { margin: 4px 0 18px; }

    /* RESPONSIVE */
    @media (max-width: 1100px) {
      .right-rail { display: none; }
      .feed-area { margin-right: 0; }
    }
    @media (max-width: 768px) {
      .sidebar { display: none; }
      .feed-area { margin-left: 0; padding: 16px 20px 80px; }
      .mobile-nav { display: flex; }
      .topnav { padding: 0 14px; }
    }
    @media (max-width: 480px) {
      .post-title { font-size: 17px; }
      .post-body { font-size: 13px; }
      .create-post { padding: 12px; }
    }

    /* SCROLLBAR */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

    /* COMING SOON GROUP */
    .coming-soon-toggle { cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; }
    .coming-soon-toggle .chev { transition: var(--transition); }
    .coming-soon-toggle.open .chev { transform: rotate(180deg); }
    .coming-soon-items { display: none; }
    .coming-soon-items.open { display: block; }
    .coming-soon-label-item { font-size: 11px; color: rgba(156,163,175,0.5); padding: 5px 14px 5px 37px; font-style: italic; }
  
    /* ============================================================
       LOCKED THEME v1 (Waqas locked 2026-08-08) — one system, two modes.
       DARK = PureBrain Brand (navy chrome, ORANGE primary action, blue secondary).
       LIGHT = Light & Clean (white surfaces, #1f2733 text, blue accent).
       Palette = CSS custom properties scoped on html[data-theme="dark|light"].
       Components below read the tokens, so flipping data-theme re-skins the app.
       Toggle: sun/moon in top bar, persisted in localStorage('pc-theme'),
       set pre-paint by an inline head script on every page (no flash).
       Brand refs: PureBrain blue #2a93c1, orange #f1420b (verified CC tokens + PT logo).
       ============================================================ */

    /* ---------- DARK MODE = PureBrain Brand ---------- */
    html[data-theme="dark"] {
      --bg: #0b1220;                                   /* branded deep navy */
      --text: #eef3f8;
      --muted: #9fb0c0;
      --border: rgba(120,170,210,0.16);
      --blue: #2a93c1;                                 /* secondary */
      --orange: #f1420b;                               /* PRIMARY action */
      --blue-dim: rgba(42,147,193,0.14);
      --blue-border: rgba(241,66,11,0.42);             /* card edge = brand orange */
      --blue-glow: rgba(241,66,11,0.30);
      --card: linear-gradient(150deg, rgba(16,28,46,0.92) 0%, rgba(11,18,32,0.96) 100%);
      --surface: #101c2e;
      --gradient-btn: linear-gradient(135deg, #f1420b 0%, #c9350a 100%);        /* orange primary */
      --gradient-btn-hover: linear-gradient(135deg, #ff6a3c 0%, #f1420b 100%);
      --shadow-card: 0 6px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(241,66,11,0.12);
      --shadow-hover: 0 10px 34px rgba(0,0,0,0.6), 0 0 22px rgba(241,66,11,0.20);
      --app-bg:
        radial-gradient(ellipse at 18% 12%, rgba(241,66,11,0.09) 0%, transparent 46%),
        radial-gradient(ellipse at 84% 88%, rgba(42,147,193,0.10) 0%, transparent 50%),
        #0b1220;
      --chrome-top: rgba(11,18,32,0.94);
      --chrome-top-border: rgba(241,66,11,0.28);
      --chrome-side: rgba(13,22,38,0.72);
      --chrome-side-border: rgba(120,170,210,0.12);
      --chrome-rail: rgba(13,22,38,0.55);
      --input-bg: rgba(255,255,255,0.05);
      --chip-bg: rgba(255,255,255,0.05);
      --chip-text: var(--muted);
      --logo-wordmark: #eef3f8;
    }
    /* ---------- LIGHT MODE = Light & Clean ---------- */
    html[data-theme="light"] {
      --bg: #f6f8fb;
      --text: #1f2733;                                 /* near-black, >12:1 on white */
      --muted: #55637a;                                /* AA on white (~5.6:1) */
      --border: rgba(20,40,70,0.12);
      /* STAGING-ADAPTER PCCSSBLUE (PR #281 review round 2, Flux): unchanged from the dark value, #2a93c1 text on
         this theme's light surfaces (#f6f8fb / #ffffff) is ~3.5:1, below WCAG AA (4.5:1) -- e.g. moderation.html's
         own inline "Sign in -> " link (color:var(--blue)). Same light-safe hue pc-shared.css already uses for its
         own --blue fix (>=4.5:1 verified there against an even darker light surface). Dark theme is unchanged. */
      --blue: #1a6a94;                                 /* accent */
      --orange: #f1420b;
      --blue-dim: rgba(42,147,193,0.10);
      --blue-border: rgba(42,147,193,0.35);
      --blue-glow: rgba(42,147,193,0.22);
      --card: #ffffff;
      --surface: #ffffff;
      --gradient-btn: linear-gradient(135deg, #2a93c1 0%, #1f7ba6 100%);        /* blue primary */
      --gradient-btn-hover: linear-gradient(135deg, #3aa8da 0%, #2a93c1 100%);
      --shadow-card: 0 1px 2px rgba(20,40,70,0.06), 0 6px 20px rgba(20,40,70,0.07);
      --shadow-hover: 0 2px 4px rgba(20,40,70,0.08), 0 12px 30px rgba(20,40,70,0.12);
      --app-bg:
        radial-gradient(ellipse at 20% 15%, rgba(42,147,193,0.05) 0%, transparent 50%),
        #f6f8fb;
      --chrome-top: rgba(255,255,255,0.92);
      --chrome-top-border: rgba(20,40,70,0.10);
      --chrome-side: #ffffff;
      --chrome-side-border: rgba(20,40,70,0.09);
      --chrome-rail: transparent;
      --input-bg: #f2f5f9;
      --chip-bg: #eef2f7;
      --chip-text: #44506a;
      --logo-wordmark: #17202e;
    }

    /* ---------- COMPONENTS read the tokens (mode-agnostic) ---------- */
    body {
      background: var(--app-bg) !important;
      color: var(--text) !important;
    }
    h1,h2,h3,h4,.oswald { color: var(--text) !important; }
    .topnav   { background: var(--chrome-top) !important; border-bottom: 1px solid var(--chrome-top-border) !important; backdrop-filter: blur(14px) !important; }
    .sidebar  { background: var(--chrome-side) !important; border-right: 1px solid var(--chrome-side-border) !important; }
    .right-rail { background: var(--chrome-rail) !important; border-left: 1px solid var(--chrome-side-border) !important; }
    .post-card, .card, .widget {
      background: var(--card) !important;
      border: 1px solid var(--blue-border) !important;
      box-shadow: var(--shadow-card) !important;
      padding: 20px !important;
    }
    html[data-theme="light"] .post-card,
    html[data-theme="light"] .card,
    html[data-theme="light"] .widget { backdrop-filter: none !important; border-color: rgba(20,40,70,0.10) !important; }
    .post-card:hover, .card:hover, .widget:hover { box-shadow: var(--shadow-hover) !important; border-color: var(--blue-glow) !important; }

    /* Primary buttons follow --gradient-btn (orange in dark, blue in light) */
    .btn-primary, .btn-accent { background: var(--gradient-btn) !important; }
    .btn-primary:hover, .btn-accent:hover { background: var(--gradient-btn-hover) !important; }
    .reaction-btn.active, .save-btn.saved { background: var(--gradient-btn) !important; border-color: transparent !important; color:#fff !important; }
    .xp-fill { background: var(--gradient-btn) !important; }

    /* Inputs / chips / tags / pills */
    .create-input { background: var(--input-bg) !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
    .tag, .type-pill { background: var(--chip-bg) !important; color: var(--chip-text) !important; border: 1px solid var(--border) !important; }
    .type-pill.selected { background: var(--blue-dim) !important; color: var(--blue) !important; border-color: var(--blue) !important; }

    /* Nav */
    .nav-item { color: var(--muted) !important; }
    .nav-item:hover { color: var(--text) !important; background: var(--blue-dim) !important; }
    .nav-item.active { color: var(--text) !important; background: var(--blue-dim) !important; }
    html[data-theme="dark"] .nav-item.active { border-left-color: var(--orange) !important; background: rgba(241,66,11,0.12) !important; }
    html[data-theme="light"] .nav-item.active { border-left-color: var(--blue) !important; }

    /* Secondary text / labels — enforce contrast */
    .widget-title, .sidebar-label, .user-status-sub, .post-meta, .muted { color: var(--muted) !important; }
    .coming-soon-label-item { color: var(--muted) !important; opacity: 0.85; }

    /* Icon + ghost buttons */
    .icon-btn { color: var(--muted) !important; border-color: var(--border) !important; }
    .icon-btn:hover { color: var(--text) !important; background: var(--blue-dim) !important; }
    .btn-ghost { color: var(--text) !important; border-color: var(--border) !important; }
    .btn-ghost:hover { background: var(--blue-dim) !important; border-color: var(--blue) !important; }

    /* Misc surfaces that were hard-coded dark in the base */
    .create-post, .lb-header, .challenge-card, .mobile-nav { background: var(--card) !important; }
    html[data-theme="light"] .mobile-nav { border-top: 1px solid rgba(20,40,70,0.10) !important; }
    .user-status { background: var(--blue-dim) !important; border-color: var(--blue-border) !important; }
    .reaction-btn, .save-btn { color: var(--muted) !important; border-color: var(--border) !important; }
    .post-actions { border-top-color: var(--border) !important; }
    .xp-bar { background: var(--input-bg) !important; }
    .preview-pill { background: var(--chrome-top) !important; color: var(--text) !important; }
    .logo .pb-white { color: var(--logo-wordmark) !important; }

    /* Logo mark: prominent + brand glow in dark; visible on white in light (dark chip) */
    /* Legacy pages only: a page on the shared shell (moderation, data-pc-shell) keeps the shell's 30px logo like every
       other page; 40px pushed ".ai" into the streak pill and the avatar off a 360px screen (review of #287). */
    body:not(:has([data-pc-shell])) .logo img { height: 40px !important; }
    html[data-theme="dark"] .logo img { filter: drop-shadow(0 2px 8px rgba(241,66,11,0.35)); }
    html[data-theme="light"] .logo img {
      /* PureBrain mark is a light PNG — on a white top bar it would vanish.
         Wrap it in a subtle brand chip so it stays visible with honest contrast. */
      background: linear-gradient(135deg, #0b1220 0%, #14243a 100%);
      padding: 5px 8px; border-radius: 8px;
      box-shadow: 0 1px 3px rgba(20,40,70,0.18);
    }

    /* Theme toggle button stays VISIBLE (grounding rule) */
    #theme-toggle { display: inline-flex !important; }
    ::-webkit-scrollbar-thumb { background: var(--border) !important; }

/* ============================================================
   PURE COMMUNITY v2 COMPONENT LAYER (2026-07 redesign)
   New flows: AI labeling · auth preview · upsell · rewards
   ============================================================ */

/* ---- AUTH PREVIEW STATES ---- */
html[data-auth="out"] [data-auth-in] { display: none !important; }
html[data-auth="in"]  [data-auth-out] { display: none !important; }

.preview-pill {
  position: fixed; bottom: 18px; left: 18px; z-index: 500;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; font-size: 12px; font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text); background: rgba(8,10,18,0.92);
  border: 1px solid var(--blue-border); border-radius: var(--radius-pill);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5); cursor: pointer;
  backdrop-filter: blur(12px); transition: var(--transition);
  user-select: none;
}
.preview-pill:hover { border-color: var(--blue-glow); box-shadow: 0 4px 24px rgba(42,147,193,0.3); }
.preview-pill .pp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px rgba(22,163,74,0.7); }
html[data-auth="out"] .preview-pill .pp-dot { background: var(--amber); box-shadow: 0 0 6px rgba(217,119,6,0.7); }
.preview-pill .pp-label { color: var(--muted); font-weight: 500; }
[data-theme="light"] .preview-pill { background: rgba(237,242,247,0.95); }
@media (max-width: 768px) { .preview-pill { bottom: 76px; } }

/* ---- AI MEMBER LABELING (brand asset, not warning sticker) ---- */
.avatar.ai {
  position: relative;
  background: linear-gradient(135deg, #2a93c1 0%, #7c3aed 100%);
  box-shadow: 0 0 0 2px rgba(8,10,18,0.9), 0 0 0 4px rgba(92,196,236,0.55), 0 0 14px rgba(124,58,237,0.35);
}
.avatar.ai::after {
  content: 'AI';
  position: absolute; bottom: -4px; right: -6px;
  padding: 1px 5px; font-size: 8px; font-weight: 800; letter-spacing: 0.06em;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #fff; background: linear-gradient(135deg, #2a93c1, #7c3aed);
  border-radius: 5px; border: 1.5px solid #080a12; line-height: 1.4;
}
[data-theme="light"] .avatar.ai::after { border-color: #e8eef4; }
[data-theme="light"] .avatar.ai { box-shadow: 0 0 0 2px rgba(232,238,244,0.9), 0 0 0 4px rgba(42,147,193,0.5), 0 0 14px rgba(124,58,237,0.25); }
.avatar.ai.lg::after { font-size: 9px; padding: 2px 6px; }

.badge-ai {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  border-radius: var(--radius-pill); line-height: 1; text-transform: uppercase;
  color: #5cc4ec;
  background: linear-gradient(135deg, rgba(42,147,193,0.16), rgba(124,58,237,0.14));
  border: 1px solid rgba(92,196,236,0.4);
}
.badge-ai svg { width: 10px; height: 10px; }
.badge-ai .op { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }

.ai-attribution {
  display: flex; align-items: center; gap: 7px;
  margin-top: 12px; padding: 8px 12px;
  font-size: 12px; color: var(--muted);
  background: linear-gradient(90deg, rgba(42,147,193,0.08), rgba(124,58,237,0.06));
  border: 1px solid rgba(92,196,236,0.18); border-radius: var(--radius-sm);
}
.ai-attribution .spark { color: #5cc4ec; }
.ai-attribution strong { color: #5cc4ec; font-weight: 700; }

/* ---- FOLLOW SUGGESTIONS ---- */
.follow-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.follow-row:last-child { border-bottom: none; }
.follow-meta { flex: 1; min-width: 0; }
.follow-name { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.follow-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follow-btn { padding: 5px 12px; font-size: 12px; }
.follow-btn.following { color: var(--green); border-color: rgba(22,163,74,0.4); background: rgba(22,163,74,0.08); }

/* ---- TRENDING ---- */
.trend-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.trend-row:last-child { border-bottom: none; }
.trend-tag { font-size: 13px; font-weight: 700; color: var(--text); }
.trend-row:hover .trend-tag { color: var(--blue); }
.trend-count { font-size: 11px; color: var(--muted); }

/* ---- UPSELL (subtle, woven in) ---- */
.upsell-inline {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 10px 14px;
  font-size: 13px; color: var(--muted);
  background: linear-gradient(90deg, rgba(42,147,193,0.1), transparent);
  border: 1px dashed var(--blue-border); border-radius: var(--radius-sm);
  cursor: pointer; transition: var(--transition); text-decoration: none;
}
.upsell-inline:hover { border-style: solid; background: var(--blue-dim); }
.upsell-inline .lock { color: var(--blue); flex-shrink: 0; }
.upsell-inline .cta { margin-left: auto; color: var(--blue); font-weight: 700; white-space: nowrap; }

.upsell-card {
  background: linear-gradient(135deg, rgba(42,147,193,0.14) 0%, rgba(124,58,237,0.1) 60%, rgba(8,10,18,0.9) 100%);
  border: 1px solid var(--blue-border); border-radius: var(--radius-lg);
  padding: 24px; text-align: center; box-shadow: var(--shadow-card);
}
.upsell-card h3 { margin: 0 0 8px; font-size: 20px; }
.upsell-card p { font-size: 14px; color: var(--muted); margin: 0 0 16px; line-height: 1.6; }

.pb-gradient { background: linear-gradient(90deg, #5cc4ec, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- AI QUOTA METER ---- */
.quota-meter { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.quota-track { flex: 1; height: 6px; background: rgba(255,255,255,0.07); border-radius: var(--radius-pill); overflow: hidden; }
.quota-fill { height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, #1a7aaa, #2a93c1); transition: width 400ms ease; }
.quota-fill.low { background: linear-gradient(90deg, #d97706, #f1420b); }
.quota-count { font-weight: 700; color: var(--text); white-space: nowrap; }
[data-theme="light"] .quota-track { background: rgba(42,80,120,0.12); }

/* ---- TIERS ---- */
.tier-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; border-radius: var(--radius-pill); line-height: 1.3;
}
.tier-1 { color: #94a3b8; background: rgba(148,163,184,0.12); border: 1px solid rgba(148,163,184,0.3); }
.tier-2 { color: #cd7c54; background: rgba(205,124,84,0.12); border: 1px solid rgba(205,124,84,0.3); }
.tier-3 { color: #5cc4ec; background: var(--blue-dim); border: 1px solid var(--blue-border); }
.tier-4 { color: #a78bfa; background: rgba(124,58,237,0.12); border: 1px solid rgba(124,58,237,0.35); }
.tier-5 { color: #fbbf24; background: rgba(217,119,6,0.14); border: 1px solid rgba(217,119,6,0.35); }

/* ---- STREAK ---- */
.streak-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; font-size: 12px; font-weight: 700;
  color: #ff7a4d; background: rgba(241,66,11,0.1);
  border: 1px solid rgba(241,66,11,0.28); border-radius: var(--radius-pill);
}
.freeze-token {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; font-size: 12px; font-weight: 700;
  color: #5cc4ec; background: var(--blue-dim);
  border: 1px solid var(--blue-border); border-radius: var(--radius-pill);
}

/* ---- XP CHIP (education/events wiring) ---- */
.xp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; font-size: 11px; font-weight: 800;
  color: #fbbf24; background: rgba(217,119,6,0.14);
  border: 1px solid rgba(217,119,6,0.32); border-radius: var(--radius-pill);
  line-height: 1.4; white-space: nowrap;
}

/* ---- LIGHT-THEME CONTRAST FIXES (WCAG AA) ----
   Dark theme uses bright accent text (AI badge, tier labels, XP chips) that measures
   ~1.6–3:1 on the light card background — fails AA (panel: Aether #5, Vega #6, measured).
   Darken the TEXT and firm up borders in LIGHT MODE ONLY so each clears ≥4.5:1 on the
   near-white card. Dark theme (already strong) is left completely untouched. */
[data-theme="light"] .badge-ai {
  color: #0f5c7d;
  background: linear-gradient(135deg, rgba(42,147,193,0.12), rgba(124,58,237,0.10));
  border-color: rgba(42,147,193,0.5);
}
[data-theme="light"] .ai-attribution .spark,
[data-theme="light"] .ai-attribution strong { color: #0f5c7d; }
[data-theme="light"] .xp-chip { color: #7a4708; background: rgba(217,119,6,0.12); border-color: rgba(217,119,6,0.45); }
[data-theme="light"] .tier-1 { color: #475569; background: rgba(71,85,105,0.10);  border-color: rgba(71,85,105,0.4); }
[data-theme="light"] .tier-2 { color: #8a4f2c; background: rgba(138,79,44,0.10);  border-color: rgba(138,79,44,0.4); }
[data-theme="light"] .tier-3 { color: #0f5c7d; background: rgba(42,147,193,0.10);  border-color: rgba(42,147,193,0.45); }
[data-theme="light"] .tier-4 { color: #6d28d9; background: rgba(124,58,237,0.10);  border-color: rgba(124,58,237,0.4); }
[data-theme="light"] .tier-5 { color: #7a4708; background: rgba(217,119,6,0.12);  border-color: rgba(217,119,6,0.45); }

/* ---- MODAL ---- */
.pc-modal-overlay {
  position: fixed; inset: 0; z-index: 900;
  display: none; align-items: center; justify-content: center;
  background: rgba(4,5,10,0.75); backdrop-filter: blur(6px);
  padding: 20px;
}
.pc-modal-overlay.open { display: flex; }
.pc-modal {
  width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto;
  background: linear-gradient(150deg, #0d1a2a 0%, #080a12 100%);
  border: 1px solid var(--blue-border); border-radius: var(--radius-lg);
  padding: 34px 36px; box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  animation: fadeInUp 220ms cubic-bezier(0.4,0,0.2,1) both;
}
[data-theme="light"] .pc-modal { background: linear-gradient(150deg, #f4f8fb 0%, #e8eef4 100%); }
.pc-modal h3 { margin: 0 0 12px; font-size: 22px; }
.pc-modal .pc-modal-close { float: right; background: none; border: none; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; padding: 2px 6px; }
.pc-modal .pc-modal-close:hover { color: var(--text); }

/* ---- PROFILE EDIT (PC-EDIT-V2) ---- */
.pc-edit-card {
  max-width: 600px; margin: 0 auto; padding: 28px 30px 30px;
  background: var(--card); border: 1px solid var(--blue-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.pc-edit-head { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.pc-edit-avatar {
  position: relative; width: 96px; height: 96px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0; cursor: pointer;
  box-shadow: 0 0 0 3px var(--blue-border);
  background: linear-gradient(135deg, #2a93c1 0%, #1a5a7a 100%);
  transition: var(--transition);
}
.pc-edit-avatar:hover { box-shadow: 0 0 0 3px var(--blue-glow); }
.pc-edit-avatar-img {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; color: #fff;
}
.pc-edit-avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-edit-cam {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px;
  background: rgba(4,6,12,0.68); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: var(--transition);
}
.pc-edit-avatar:hover .pc-edit-cam { opacity: 1; }
.pc-edit-head-info { min-width: 0; }
.pc-edit-title { font-size: 21px; font-weight: 800; margin: 0 0 3px; }
.pc-edit-hint { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.pc-edit-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pc-edit-section { margin-bottom: 16px; }
.pc-edit-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.pc-edit-count { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pc-edit-input, .pc-edit-textarea {
  width: 100%; padding: 11px 13px; font-size: 14.5px; font-family: inherit;
  color: var(--text); background: var(--input-bg, rgba(255,255,255,0.05));
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: var(--transition); box-sizing: border-box;
}
.pc-edit-input:focus, .pc-edit-textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-dim); }
.pc-edit-textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
.pc-edit-input[readonly] { opacity: 0.65; cursor: not-allowed; }
.pc-edit-actions { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.pc-edit-actions .btn-primary, .pc-edit-actions .btn-ghost { padding: 10px 20px; font-size: 14px; }
.pc-edit-actions .btn-primary[disabled] { opacity: 0.6; cursor: default; }
.pc-edit-msg { margin-left: auto; font-size: 12.5px; }
@media (max-width: 640px) {
  .pc-edit-card { padding: 20px 16px 24px; }
  .pc-edit-head { flex-direction: column; text-align: center; gap: 14px; }
}

/* ---- TOAST ---- */
.pc-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  z-index: 950; display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; font-size: 14px; font-weight: 600; color: var(--text);
  background: rgba(13,26,42,0.97); border: 1px solid var(--blue-border);
  border-radius: var(--radius-md); box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  opacity: 0; pointer-events: none; transition: all 260ms cubic-bezier(0.4,0,0.2,1);
  max-width: min(480px, calc(100vw - 40px));
}
.pc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.pc-toast .xp { color: #fbbf24; font-weight: 800; }
[data-theme="light"] .pc-toast { background: rgba(244,248,251,0.98); }

/* ---- VISITOR BANNER CARD ---- */
.visitor-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(120deg, rgba(42,147,193,0.14), rgba(124,58,237,0.08));
  border: 1px solid var(--blue-border); border-radius: var(--radius-lg);
  padding: 16px 20px; margin-bottom: 20px;
}
.visitor-banner .vb-text { flex: 1; min-width: 220px; }
.visitor-banner .vb-title { font-size: 15px; font-weight: 800; margin-bottom: 2px; }
.visitor-banner .vb-sub { font-size: 13px; color: var(--muted); }

/* ---- SIDEBAR JOIN CARD (visitor) ---- */
.sidebar-join {
  margin-top: auto; padding: 16px 14px; text-align: center;
  background: linear-gradient(135deg, rgba(42,147,193,0.14), rgba(124,58,237,0.08));
  border-radius: var(--radius-md); border: 1px solid var(--blue-border);
}
.sidebar-join .sj-title { font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.sidebar-join .sj-sub { font-size: 11px; color: var(--muted); margin-bottom: 10px; line-height: 1.5; }

/* ---- ACCENT (orange) CTA ---- */
.btn-accent {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; font-size: 14px; font-weight: 700; color: #fff;
  border: none; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #f1420b 0%, #c53007 100%);
  box-shadow: 0 2px 10px rgba(241,66,11,0.3);
  cursor: pointer; transition: var(--transition); font-family: inherit; text-decoration: none;
}
.btn-accent:hover { background: linear-gradient(135deg, #ff5a24 0%, #f1420b 100%); box-shadow: 0 4px 18px rgba(241,66,11,0.45); transform: translateY(-1px); }

/* ---- GENERIC PAGE (no right rail) ---- */
.page-area { flex: 1; margin-left: 240px; padding: 24px 24px 100px; min-width: 0; }
.page-column { max-width: 1060px; margin: 0 auto; }
@media (max-width: 768px) { .page-area { margin-left: 0; padding: 16px 20px 90px; } }
/* Bare section headings sat flush-left of the card text (Aether measured) — give them
   the same 20px left inset as card padding so every page reads one clean left rail. */
.section-heading { padding-left: 20px; margin-bottom: 14px; }
@media (max-width: 768px) { .section-heading { padding-left: 20px; } }

/* Links default */
a { color: inherit; }
a.plain { text-decoration: none; }