/* ══════════════════════════════════════════════════════════════
   AMAZE CONSORTIUM — MEMBERS PORTAL
   Visual system: deep-space dark, emerald accent, hairline borders,
   layered surfaces with soft depth. Every class the app renders is
   defined here — the markup and behaviour are unchanged, only the look.
   ══════════════════════════════════════════════════════════════ */

  :root {
    /* ── surfaces ─────────────────────────── */
    --bg:          #07080a;
    --bg2:         #0b0d10;
    --bg3:         #101317;
    --surface:     #121519;
    --surface2:    #181c21;
    --surface3:    #222730;
    --border:      rgba(255,255,255,0.065);
    --border2:     rgba(255,255,255,0.11);
    --border3:     rgba(255,255,255,0.19);

    /* ── accent ───────────────────────────── */
    --accent:      #00db92;
    --accent2:     #00c47f;
    --accent3:     #2bffb9;
    --accent-dim:  rgba(0,219,146,0.09);
    --accent-dim2: rgba(0,219,146,0.17);
    --accent-line: rgba(0,219,146,0.30);
    --accent-glow: 0 0 0 1px rgba(0,219,146,0.22), 0 8px 26px -12px rgba(0,219,146,0.55);
    --accent-grad: linear-gradient(135deg, #00f0a0 0%, #00c47f 100%);

    /* ── type ─────────────────────────────── */
    --text:        #edf1f0;
    --text2:       #8d9499;
    --text3:       #545c64;
    --text4:       #30363d;

    /* ── status ───────────────────────────── */
    --danger:      #ff6b6b;
    --danger-dim:  rgba(255,107,107,0.10);
    --success:     #00db92;
    --info:        #6f9dff;
    --info-dim:    rgba(111,157,255,0.10);
    --gold:        #d8b859;
    --gold-dim:    rgba(216,184,89,0.10);
    --purple:      #b073f7;
    --silver:      #b3bcc4;
    --bronze:      #d68a45;

    /* ── shape & depth ────────────────────── */
    --font:        'Inter', system-ui, -apple-system, sans-serif;
    --mono:        'JetBrains Mono', 'Courier New', ui-monospace, monospace;
    --radius:      8px;
    --radius-lg:   13px;
    --radius-xl:   18px;
    --shadow-1:    0 1px 2px rgba(0,0,0,0.35);
    --shadow-2:    0 6px 22px -10px rgba(0,0,0,0.7);
    --shadow-3:    0 20px 60px -20px rgba(0,0,0,0.85);
    --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    min-height: 100vh;
    line-height: 1.62;
    letter-spacing: 0.1px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  /* ambient depth behind everything */
  body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(900px 520px at 78% -8%, rgba(0,219,146,0.055), transparent 62%),
      radial-gradient(700px 460px at 4% 102%, rgba(111,157,255,0.035), transparent 60%);
  }
  ::selection { background: var(--accent-dim2); color: var(--accent3); }
  ::-webkit-scrollbar { width: 9px; height: 9px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--surface3); border-radius: 100px;
    border: 2px solid transparent; background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: #333b45; background-clip: content-box; }

  /* elements gated behind a section permission stay out of the layout
     entirely until access is confirmed (see js/permissions.js) */
  [hidden] { display: none !important; }

  a { color: inherit; }

  /* ── LOADING ─────────────────────────────────── */
  #loading-screen {
    position: fixed; inset: 0;
    background: var(--bg);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 9999; gap: 20px; overflow: hidden;
  }
  .loading-glow {
    position: absolute; width: 620px; height: 620px; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,219,146,0.10) 0%, transparent 62%);
    animation: breathe 3.6s ease-in-out infinite;
  }
  @keyframes breathe {
    0%,100% { transform: scale(0.92); opacity: 0.65; }
    50%     { transform: scale(1.06); opacity: 1; }
  }
  .loading-wordmark {
    position: relative;
    font-size: 11px; letter-spacing: 5px; text-transform: uppercase;
    color: var(--text2); font-weight: 500;
  }
  .loading-wordmark span { color: var(--accent); }
  .spinner {
    position: relative;
    width: 26px; height: 26px;
    border: 1.5px solid var(--border2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-sub {
    position: relative;
    font-size: 10px; color: var(--text3); letter-spacing: 2.5px; text-transform: uppercase;
  }

  /* ── LOGIN ───────────────────────────────────── */
  #login-page {
    min-height: 100vh;
    display: none; align-items: center; justify-content: center;
    background: var(--bg);
    position: relative; overflow: hidden; padding: 24px;
  }
  #login-page::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(0,219,146,0.022) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,219,146,0.022) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
    pointer-events: none;
  }
  #login-page::after {
    content: '';
    position: absolute; top: -340px; left: 50%; transform: translateX(-50%);
    width: 900px; height: 900px;
    background: radial-gradient(circle, rgba(0,219,146,0.07) 0%, transparent 62%);
    pointer-events: none;
  }
  .login-box {
    background: linear-gradient(180deg, rgba(255,255,255,0.032) 0%, rgba(255,255,255,0.008) 100%), var(--surface);
    border: 1px solid var(--border2);
    border-radius: var(--radius-xl);
    padding: 46px 42px 40px;
    width: 100%; max-width: 410px;
    position: relative; z-index: 1;
    box-shadow: var(--shadow-3);
    animation: riseIn 0.55s var(--ease) both;
  }
  .login-box::before {
    content: '';
    position: absolute; top: 0; left: 22%; right: 22%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
  }
  @keyframes riseIn {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }
  .login-logo { margin-bottom: 34px; }
  .login-logo-inner { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
  .login-logo-img { height: 34px; width: auto; }
  .login-logo-text-wrap { display: flex; flex-direction: column; gap: 2px; }
  .login-logo-name { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 1px; text-transform: lowercase; }
  .login-logo-tag { font-size: 9px; color: var(--text3); letter-spacing: 3px; text-transform: uppercase; }
  .login-title {
    font-size: 10px; color: var(--text3); letter-spacing: 2.5px; text-transform: uppercase;
    margin-top: 22px; padding-top: 20px;
    border-top: 1px solid var(--border);
  }
  .login-title span { color: var(--accent); }
  .form-group { margin-top: 16px; }
  .form-group label {
    display: block; font-size: 9px; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--text3); margin-bottom: 8px;
  }
  .form-group input {
    width: 100%;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    color: var(--text);
    font-family: var(--font); font-size: 13px;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; outline: none;
  }
  .form-group input:focus {
    border-color: var(--accent-line);
    background: var(--bg3);
    box-shadow: 0 0 0 3px rgba(0,219,146,0.08);
  }
  .form-group input::placeholder { color: var(--text4); }
  .btn-primary {
    width: 100%;
    background: var(--accent-grad); color: #04120c;
    border: none; border-radius: var(--radius);
    padding: 13px; margin-top: 22px;
    font-family: var(--font); font-size: 11px;
    font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: filter 0.2s, transform 0.12s, box-shadow 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 10px 30px -14px rgba(0,219,146,0.9);
  }
  .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 14px 34px -14px rgba(0,219,146,1); }
  .btn-primary:active { transform: scale(0.985); }
  .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
  .login-error {
    background: var(--danger-dim); border: 1px solid rgba(255,107,107,0.22);
    border-radius: var(--radius); padding: 11px 14px;
    color: var(--danger); font-size: 12px; margin-top: 14px; display: none;
  }
  .login-symbol {
    font-size: 10px; color: var(--text4); text-align: center;
    margin-top: 26px; letter-spacing: 1.5px;
  }

  /* ── TOPBAR ──────────────────────────────────── */
  #dashboard-page { display: none; min-height: 100vh; }
  .topbar {
    background: rgba(7,8,10,0.82);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--border);
    padding: 0 26px; height: 60px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 200;
  }
  .topbar-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
  .topbar-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .topbar-logo-img { height: 26px; width: auto; }
  .topbar-logo-name { font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: 0.5px; text-transform: lowercase; }
  .topbar-sep { width: 1px; height: 18px; background: var(--border2); }
  .topbar-label { font-size: 9px; color: var(--text3); letter-spacing: 2.5px; text-transform: uppercase; white-space: nowrap; }
  .topbar-right { display: flex; align-items: center; gap: 10px; }
  .admin-badge {
    background: var(--accent-dim); border: 1px solid var(--accent-line);
    color: var(--accent); font-size: 9px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 100px;
    display: inline-flex; align-items: center;
  }
  .staff-badge {
    background: var(--info-dim); border: 1px solid rgba(111,157,255,0.28);
    color: var(--info); font-size: 9px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 100px; cursor: help;
    display: inline-flex; align-items: center;
  }
  .member-chip {
    display: flex; align-items: center; gap: 9px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 100px; padding: 4px 14px 4px 5px;
    transition: border-color 0.2s;
  }
  .member-chip:hover { border-color: var(--border2); }
  .member-avatar {
    width: 27px; height: 27px; border-radius: 50%;
    background: var(--accent-dim); border: 1px solid var(--accent-line);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: var(--accent); flex-shrink: 0;
  }
  .member-chip-name {
    font-size: 12px; font-weight: 500; color: var(--text);
    max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .btn-signout {
    background: transparent; border: 1px solid var(--border2);
    border-radius: var(--radius); padding: 7px 13px;
    color: var(--text2); font-size: 11px; font-weight: 500;
    cursor: pointer; font-family: var(--font);
    transition: all 0.2s; letter-spacing: 0.4px;
  }
  .btn-signout:hover { border-color: rgba(255,107,107,0.45); color: var(--danger); background: var(--danger-dim); }

  /* ── LAYOUT ──────────────────────────────────── */
  .layout { display: flex; min-height: calc(100vh - 60px); position: relative; }
  /* the sidebar itself is sticky and only one viewport tall, so the rail it
     sits in is painted on the layout — otherwise long pages show a seam
     where the sidebar's background stops */
  .layout::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 218px;
    background: rgba(11,13,16,0.6); border-right: 1px solid var(--border);
    pointer-events: none;
  }
  .sidebar {
    width: 218px; background: transparent;
    padding: 14px 0 24px; flex-shrink: 0;
    position: sticky; top: 60px; height: calc(100vh - 60px);
    overflow-y: auto; z-index: 1;
  }
  .nav-group { padding: 0 12px; margin-bottom: 2px; }
  .nav-group-label {
    font-size: 8.5px; font-weight: 700; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--text4);
    padding: 0 10px; margin: 18px 0 7px;
  }
  .nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px; border-radius: var(--radius);
    cursor: pointer; transition: color 0.15s, background 0.15s;
    font-size: 12.5px; font-weight: 500; color: var(--text2);
    margin-bottom: 2px; user-select: none; position: relative;
  }
  .nav-item::before {
    content: ''; position: absolute; left: 0; top: 50%;
    width: 2px; height: 0; border-radius: 2px;
    background: var(--accent); transform: translateY(-50%);
    transition: height 0.22s var(--ease);
  }
  .nav-item:hover { background: var(--surface); color: var(--text); }
  .nav-item.active {
    background: linear-gradient(90deg, var(--accent-dim), transparent 92%);
    color: var(--accent);
  }
  .nav-item.active::before { height: 17px; }
  .nav-icon { width: 17px; text-align: center; font-size: 13px; opacity: 0.75; transition: opacity 0.15s; }
  .nav-item.active .nav-icon, .nav-item:hover .nav-icon { opacity: 1; }
  .nav-sym { font-size: 10px; color: var(--text4); padding: 0 22px; margin-top: 14px; }

  /* ── MAIN ────────────────────────────────────── */
  .main { flex: 1; padding: 30px 34px 64px; overflow-x: hidden; min-width: 0; }
  .section-view { display: none; }
  .section-view.active {
    display: block; max-width: 1440px; margin: 0 auto;
    animation: sectionIn 0.32s var(--ease) both;
  }
  @keyframes sectionIn {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
  }

  /* ── PAGE HEADER ─────────────────────────────── */
  .page-header {
    margin-bottom: 26px; padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: 18px; flex-wrap: wrap;
    position: relative;
  }
  .page-header::after {
    content: ''; position: absolute; left: 0; bottom: -1px;
    width: 54px; height: 2px; border-radius: 2px;
    background: var(--accent-grad);
  }
  .page-header-eyebrow {
    font-size: 9px; font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: 6px;
  }
  .page-header h2 {
    font-size: 23px; font-weight: 650; color: var(--text);
    letter-spacing: -0.5px; margin-bottom: 5px; line-height: 1.2;
  }
  .page-header p { font-size: 12.5px; color: var(--text2); max-width: 640px; }
  .page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

  /* section label used above sub-grids ("// my badges" etc.) */
  .empty-state {
    background: var(--surface); border: 1px dashed var(--border2);
    border-radius: var(--radius-xl); padding: 46px 24px;
    text-align: center; color: var(--text3); font-size: 12px;
  }

  /* ── BUTTONS ─────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: var(--radius); padding: 8px 14px;
    font-size: 11px; font-weight: 600; font-family: var(--font);
    cursor: pointer; transition: all 0.16s var(--ease); white-space: nowrap;
    letter-spacing: 0.3px; text-decoration: none; line-height: 1.4;
  }
  .btn:active { transform: scale(0.975); }
  .btn-ghost {
    background: var(--surface); border: 1px solid var(--border2); color: var(--text2);
  }
  .btn-ghost:hover { background: var(--surface2); color: var(--text); border-color: var(--border3); }
  .btn-accent {
    background: var(--accent-dim); border: 1px solid var(--accent-line); color: var(--accent);
  }
  .btn-accent:hover { background: var(--accent-dim2); border-color: rgba(0,219,146,0.55); }
  .btn-danger {
    background: transparent; border: 1px solid rgba(255,107,107,0.26); color: var(--danger);
  }
  .btn-danger:hover { background: var(--danger-dim); border-color: rgba(255,107,107,0.5); }
  .btn-solid {
    background: var(--accent-grad); border: none; color: #04120c;
    font-weight: 700; letter-spacing: 0.4px;
    box-shadow: 0 8px 22px -14px rgba(0,219,146,0.95);
  }
  .btn-solid:hover { filter: brightness(1.08); }
  .btn-solid:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }

  /* ── PROFILE ─────────────────────────────────── */
  .profile-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.022), transparent 60%), var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl); padding: 28px 30px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
    max-width: 720px; box-shadow: var(--shadow-2);
  }
  .pf-field { display: flex; flex-direction: column; gap: 6px; }
  .pf-label {
    font-size: 9px; font-weight: 700; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--text3);
  }
  .pf-value { font-size: 16px; font-weight: 550; color: var(--text); }
  .pf-value.accent { color: var(--accent); }
  .pf-value.mono { font-family: var(--mono); font-size: 13px; color: var(--text2); letter-spacing: 1.6px; }
  .pf-full { grid-column: 1 / -1; }
  .pf-notice {
    grid-column: 1 / -1;
    background: var(--gold-dim); border: 1px solid rgba(216,184,89,0.16);
    border-radius: var(--radius); padding: 11px 14px;
    font-size: 11px; color: var(--text2);
    display: flex; align-items: center; gap: 9px;
  }

  /* small caption used throughout ("// meeting history") */
  .section-caption {
    font-size: 9px; color: var(--text3); letter-spacing: 2.5px;
    text-transform: uppercase; margin-bottom: 12px;
  }

  /* ── LEADERBOARD ─────────────────────────────── */
  .lb-wrap {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-xl); overflow: hidden; margin-top: 18px;
    box-shadow: var(--shadow-2);
  }
  .lb-table { width: 100%; border-collapse: collapse; }
  .lb-table thead th {
    background: var(--bg2); padding: 12px 16px;
    text-align: left; font-size: 9px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--text3); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 1;
  }
  .lb-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.14s; }
  .lb-table tbody tr:last-child { border-bottom: none; }
  .lb-table tbody tr:hover { background: var(--surface2); }
  .lb-table tbody td { padding: 13px 16px; font-size: 12.5px; color: var(--text); }
  .rank-cell {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    font-size: 11px; font-weight: 700;
  }
  .rank-1 { background: var(--gold-dim); color: var(--gold); border: 1px solid rgba(216,184,89,0.35); box-shadow: 0 0 14px -4px rgba(216,184,89,0.5); }
  .rank-2 { background: rgba(179,188,196,0.09); color: var(--silver); border: 1px solid rgba(179,188,196,0.24); }
  .rank-3 { background: rgba(214,138,69,0.09); color: var(--bronze); border: 1px solid rgba(214,138,69,0.24); }
  .rank-n { background: var(--bg2); color: var(--text3); border: 1px solid var(--border); }
  .credit-val { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .credit-pos { color: var(--accent); }
  .credit-neg { color: var(--danger); }
  .credit-zero { color: var(--text3); }
  .pos-tag {
    display: inline-block; background: var(--surface2); border: 1px solid var(--border);
    border-radius: 100px; padding: 3px 10px;
    font-size: 10px; color: var(--text2); white-space: nowrap;
  }
  .me-row td { background: rgba(0,219,146,0.035) !important; }
  .me-row:hover td { background: rgba(0,219,146,0.06) !important; }
  .me-indicator {
    display: inline-block; width: 5px; height: 5px;
    background: var(--accent); border-radius: 50%;
    margin-left: 7px; vertical-align: middle;
    box-shadow: 0 0 8px var(--accent);
  }

  /* ── CREDIT LOG / ACTIVITY LOG SHELL ─────────── */
  .log-wrap {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-xl); overflow: hidden; margin-top: 18px;
    max-height: 68vh; overflow-y: auto; box-shadow: var(--shadow-2);
  }
  .log-empty { padding: 52px; text-align: center; color: var(--text3); font-size: 12px; letter-spacing: 0.4px; }
  .log-entry {
    padding: 15px 20px; border-bottom: 1px solid var(--border);
    display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start;
    transition: background 0.14s;
  }
  .log-entry:last-child { border-bottom: none; }
  .log-entry:hover { background: var(--surface2); }
  .log-name { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
  .log-reason { font-size: 11.5px; color: var(--text2); }
  .log-actor { display: block; font-size: 10.5px; color: var(--text3); margin-top: 5px; }
  .log-actor strong { color: var(--info); font-weight: 600; }
  .log-actor.muted { color: var(--text4); }
  .log-meta { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
  .log-delta { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .log-delta.pos { color: var(--accent); }
  .log-delta.neg { color: var(--danger); }
  .log-badge { font-size: 9px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; }
  .log-badge.add { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(0,219,146,0.18); }
  .log-badge.sub { background: var(--danger-dim); color: var(--danger); border: 1px solid rgba(255,107,107,0.18); }
  .log-badge.reset { background: var(--info-dim); color: var(--info); border: 1px solid rgba(111,157,255,0.18); }
  .log-time { font-size: 10px; color: var(--text3); white-space: nowrap; }

  /* ── ACTIVITY LOG ────────────────────────────── */
  .act-count { font-size: 11px; color: var(--text3); margin-left: auto; }
  .act-entry {
    display: grid; grid-template-columns: auto 1fr auto; gap: 14px;
    padding: 14px 20px; border-bottom: 1px solid var(--border);
    align-items: start; transition: background 0.14s;
  }
  .act-entry:last-child { border-bottom: none; }
  .act-entry:hover { background: var(--surface2); }
  .act-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    background: var(--info-dim); color: var(--info); border: 1px solid rgba(111,157,255,0.25);
  }
  .act-avatar.is-admin { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-line); }
  .act-body { min-width: 0; }
  .act-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  .act-actor { font-size: 12.5px; font-weight: 600; color: var(--text); }
  .act-verb {
    font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    padding: 3px 8px; border-radius: 100px;
    background: var(--surface3); color: var(--text2); border: 1px solid var(--border2);
  }
  .act-verb.create, .act-verb.enroll, .act-verb.submit { background: var(--accent-dim); color: var(--accent); border-color: rgba(0,219,146,0.2); }
  .act-verb.update, .act-verb.award  { background: var(--info-dim); color: var(--info); border-color: rgba(111,157,255,0.2); }
  .act-verb.delete, .act-verb.revoke { background: var(--danger-dim); color: var(--danger); border-color: rgba(255,107,107,0.2); }
  .act-verb.reset, .act-verb.grant   { background: var(--gold-dim); color: var(--gold); border-color: rgba(216,184,89,0.22); }
  .act-target { font-size: 12.5px; color: var(--text2); }
  .act-details { font-size: 11px; color: var(--text3); margin-top: 4px; line-height: 1.55; }
  .act-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
  .act-section {
    font-size: 9.5px; letter-spacing: 0.8px; text-transform: lowercase; white-space: nowrap;
    color: var(--text2); background: var(--bg2); border: 1px solid var(--border);
    border-radius: 100px; padding: 3px 9px;
  }
  .act-time { font-size: 10px; color: var(--text3); white-space: nowrap; }

  /* ── HALL OF RECORDS ─────────────────────────── */
  .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; margin-top: 18px; }
  .stat-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.022), transparent 55%), var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 22px 24px;
    transition: border-color 0.2s, transform 0.2s var(--ease);
  }
  .stat-card:hover { border-color: var(--border2); transform: translateY(-2px); }
  .stat-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
  }
  .stat-card-label {
    font-size: 9px; font-weight: 700; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--text3);
  }
  .stat-card-sym { font-size: 13px; color: var(--text4); }
  .stat-entry { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
  .stat-entry:last-child { margin-bottom: 0; }
  .stat-entry-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .stat-season { font-size: 10.5px; color: var(--text3); letter-spacing: 0.4px; }
  .stat-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
  .stat-period { font-size: 10.5px; color: var(--text2); }
  .stat-badge {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    padding: 4px 11px; border-radius: 100px;
    font-size: 10px; font-weight: 600;
  }
  .stat-badge.ongoing { background: var(--accent-dim); border: 1px solid rgba(0,219,146,0.22); color: var(--accent); }
  .stat-badge.past    { background: var(--gold-dim); border: 1px solid rgba(216,184,89,0.22); color: var(--gold); }
  .stat-badge.alltime { background: var(--info-dim); border: 1px solid rgba(111,157,255,0.22); color: var(--info); }
  .stat-divider { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
  .stat-edit-btn {
    display: none; background: transparent; border: 1px solid var(--border2);
    border-radius: var(--radius); padding: 4px 9px;
    color: var(--text3); font-size: 10px; cursor: pointer;
    font-family: var(--font); transition: all 0.15s;
  }
  .stat-edit-btn:hover { color: var(--accent); border-color: var(--accent-line); }

  /* ── ADMIN PANEL ─────────────────────────────── */
  .admin-section { margin-bottom: 36px; }
  .admin-section-title {
    font-size: 9px; font-weight: 700; letter-spacing: 3px;
    text-transform: uppercase; color: var(--accent);
    margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
  }
  .admin-section-title::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
  }
  .admin-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .admin-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 50%), var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 22px;
    box-shadow: var(--shadow-1);
  }
  .admin-card h3 { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
  .admin-card p { font-size: 11px; color: var(--text3); margin-bottom: 16px; line-height: 1.55; }
  .admin-note {
    background: var(--bg2); border: 1px solid var(--border);
    border-left: 2px solid var(--accent-line);
    border-radius: var(--radius); padding: 9px 12px;
    font-size: 10.5px; color: var(--text2); line-height: 1.6; margin: 4px 0 12px;
  }
  .admin-note strong { color: var(--text); font-weight: 600; }
  .admin-pointer-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .admin-pointer {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 16px 18px;
  }
  .admin-pointer > div { flex: 1; min-width: 0; }
  .admin-pointer-icon {
    width: 36px; height: 36px; border-radius: var(--radius); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 15px;
    background: var(--accent-dim); border: 1px solid var(--accent-line); color: var(--accent);
  }
  .admin-pointer-title { font-size: 13px; font-weight: 600; color: var(--text); }
  .admin-pointer-desc { font-size: 11px; color: var(--text3); }

  .form-row { margin-bottom: 13px; }
  .form-row label {
    display: block; font-size: 9px; font-weight: 700;
    letter-spacing: 1.8px; text-transform: uppercase;
    color: var(--text3); margin-bottom: 7px;
  }
  .form-row input, .form-row select, .form-row textarea {
    width: 100%; background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 10px 13px;
    color: var(--text); font-family: var(--font); font-size: 12px;
    outline: none; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  }
  .form-row input:focus, .form-row select:focus, .form-row textarea:focus {
    border-color: var(--accent-line); background: var(--bg3);
    box-shadow: 0 0 0 3px rgba(0,219,146,0.07);
  }
  .form-row input::placeholder, .form-row textarea::placeholder { color: var(--text4); }
  .form-row select { cursor: pointer; }
  .form-row select option { background: var(--surface2); color: var(--text); }
  .form-row textarea { resize: vertical; min-height: 72px; line-height: 1.6; }
  .form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .form-row-split .form-row { margin-bottom: 13px; }

  .creds-table-wrap {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
  }
  .creds-table { width: 100%; border-collapse: collapse; }
  .creds-table th {
    background: var(--bg2); padding: 11px 15px;
    text-align: left; font-size: 9px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--text3); border-bottom: 1px solid var(--border);
  }
  .creds-table td { padding: 11px 15px; font-size: 12px; border-bottom: 1px solid var(--border); color: var(--text); }
  .creds-table tr:last-child td { border-bottom: none; }
  .creds-table tr:hover td { background: var(--surface2); }
  .mono { font-family: var(--mono); letter-spacing: 1px; font-size: 11px; color: var(--text2); }
  .pwd-col { color: var(--accent); font-family: var(--mono); font-size: 11px; letter-spacing: 0.5px; }

  /* ── ACCESS CONTROL ──────────────────────────── */
  .perm-toolbar { display: flex; gap: 8px; margin-bottom: 10px; }
  .perm-checklist {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 400px; overflow-y: auto; padding-right: 5px;
  }
  .perm-option {
    display: flex; align-items: flex-start; gap: 11px;
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 10px 12px;
    cursor: pointer; transition: all 0.16s;
  }
  .perm-option:hover { border-color: var(--border2); background: var(--bg3); }
  .perm-option.on { border-color: var(--accent-line); background: var(--accent-dim); }
  .perm-option input[type="checkbox"] { accent-color: var(--accent); margin-top: 3px; cursor: pointer; flex-shrink: 0; }
  .perm-option-icon { font-size: 13px; width: 16px; text-align: center; color: var(--text2); flex-shrink: 0; }
  .perm-option.on .perm-option-icon { color: var(--accent); }
  .perm-option-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .perm-option-label { font-size: 12px; font-weight: 600; color: var(--text); }
  .perm-option.on .perm-option-label { color: var(--accent); }
  .perm-option-desc { font-size: 10.5px; color: var(--text3); line-height: 1.5; }

  .perm-summary-list { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
  .perm-holder-row {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 11px 13px;
  }
  .perm-holder-row.is-admin { border-color: var(--accent-line); background: var(--accent-dim); }
  .perm-holder-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    background: var(--surface2); color: var(--text2); border: 1px solid var(--border2);
  }
  .perm-holder-row.is-admin .perm-holder-avatar { background: rgba(0,219,146,0.14); color: var(--accent); border-color: var(--accent-line); }
  .perm-holder-info { flex: 1; min-width: 0; }
  .perm-holder-name { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .perm-locked-tag { font-size: 9px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
  .perm-holder-perms { display: flex; gap: 5px; flex-wrap: wrap; }
  .perm-holder-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .perm-chip {
    font-size: 9.5px; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 100px;
    background: var(--info-dim); border: 1px solid rgba(111,157,255,0.22); color: var(--info);
    white-space: nowrap;
  }
  .perm-chip.full { background: var(--accent-dim2); border-color: var(--accent-line); color: var(--accent); }
  .perm-empty { font-size: 11.5px; color: var(--text3); padding: 14px 4px; }

  /* ── MODAL ───────────────────────────────────── */
  .modal-bg {
    position: fixed; inset: 0; background: rgba(3,4,5,0.72);
    z-index: 1000; display: none;
    align-items: center; justify-content: center;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    padding: 20px 0;
  }
  .modal-bg.open { display: flex; animation: fadeIn 0.18s ease both; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  .modal {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 40%), var(--surface);
    border: 1px solid var(--border2);
    border-radius: var(--radius-xl); padding: 30px;
    width: 100%; max-width: 430px; margin: 0 16px;
    position: relative; box-shadow: var(--shadow-3);
    animation: riseIn 0.28s var(--ease) both;
  }
  .modal-close {
    position: absolute; top: 15px; right: 15px;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius); width: 29px; height: 29px;
    color: var(--text2); cursor: pointer; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; z-index: 2;
  }
  .modal-close:hover { border-color: rgba(255,107,107,0.4); color: var(--danger); background: var(--danger-dim); }
  .modal h3 { font-size: 17px; font-weight: 650; margin-bottom: 5px; letter-spacing: -0.2px; }
  .modal-sub { font-size: 11.5px; color: var(--text2); margin-bottom: 22px; }
  .modal-sub strong { color: var(--accent); font-weight: 600; }
  .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; }

  /* ── CONFIRM ─────────────────────────────────── */
  .confirm-bg {
    position: fixed; inset: 0; background: rgba(3,4,5,0.74);
    z-index: 1100; display: none;
    align-items: center; justify-content: center;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .confirm-bg.open { display: flex; animation: fadeIn 0.18s ease both; }
  .confirm-box {
    background: var(--surface); border: 1px solid var(--border2);
    border-radius: var(--radius-xl); padding: 26px;
    max-width: 380px; width: 100%; margin: 0 16px;
    box-shadow: var(--shadow-3);
    animation: riseIn 0.26s var(--ease) both;
  }
  .confirm-box h3 { font-size: 15px; font-weight: 650; margin-bottom: 9px; }
  .confirm-box p { font-size: 12px; color: var(--text2); margin-bottom: 22px; line-height: 1.65; }
  .confirm-btns { display: flex; gap: 8px; justify-content: flex-end; }

  /* ── TOAST ───────────────────────────────────── */
  .toast {
    position: fixed; bottom: 26px; right: 26px;
    background: var(--surface2); border: 1px solid var(--border2);
    border-radius: var(--radius-lg); padding: 13px 18px;
    font-size: 12px; color: var(--text); font-weight: 500;
    z-index: 9999; opacity: 0; transform: translateY(10px);
    transition: all 0.24s var(--ease); max-width: 320px; pointer-events: none;
    box-shadow: var(--shadow-3);
  }
  .toast.show { opacity: 1; transform: translateY(0); }
  .toast.success { border-left: 3px solid var(--accent); }
  .toast.danger  { border-left: 3px solid var(--danger); }
  .toast.info    { border-left: 3px solid var(--info); }

  /* ── MISC ────────────────────────────────────── */
  .table-scroll { overflow-x: auto; }
  .section-sym { font-size: 9px; color: var(--text3); letter-spacing: 2px; margin-bottom: 6px; }
  .delete-btn {
    background: transparent; border: 1px solid rgba(255,107,107,0.22);
    border-radius: var(--radius); padding: 4px 9px;
    color: var(--danger); font-size: 10px; cursor: pointer;
    font-family: var(--font); transition: all 0.15s;
  }
  .delete-btn:hover { background: var(--danger-dim); border-color: rgba(255,107,107,0.45); }

  /* ── ATTENDANCE ──────────────────────────────── */
  .att-summary-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 14px; margin-bottom: 26px;
  }
  .att-summary-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.022), transparent 60%), var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 19px 21px;
    transition: border-color 0.2s, transform 0.2s var(--ease);
  }
  .att-summary-card:hover { border-color: var(--border2); transform: translateY(-2px); }
  .att-summary-label {
    font-size: 9px; font-weight: 700; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--text3); margin-bottom: 10px;
  }
  .att-summary-val {
    font-size: 30px; font-weight: 700; color: var(--text); line-height: 1;
    margin-bottom: 6px; letter-spacing: -1px; font-variant-numeric: tabular-nums;
  }
  .att-summary-sub { font-size: 11px; color: var(--text2); }
  .att-excused-note { color: var(--info); }
  .att-excused-count {
    color: var(--info); font-weight: 600;
  }
  .att-pct-bar-wrap { margin-top: 12px; }
  .att-pct-bar-track {
    height: 4px; background: var(--surface3);
    border-radius: 100px; overflow: hidden;
  }
  .att-pct-bar-fill {
    height: 100%; border-radius: 100px;
    background: var(--accent-grad); transition: width 0.6s var(--ease);
    box-shadow: 0 0 10px -2px rgba(0,219,146,0.8);
  }
  .att-pct-bar-fill.warn { background: linear-gradient(90deg, #e0c96a, var(--gold)); box-shadow: none; }
  .att-pct-bar-fill.bad  { background: linear-gradient(90deg, #ff8a8a, var(--danger)); box-shadow: none; }

  .att-table-wrap {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-xl); overflow: hidden; margin-top: 4px;
    box-shadow: var(--shadow-2);
  }
  .att-table { width: 100%; border-collapse: collapse; }
  .att-table thead th {
    background: var(--bg2); padding: 11px 16px;
    text-align: left; font-size: 9px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--text3); border-bottom: 1px solid var(--border);
  }
  .att-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.14s; }
  .att-table tbody tr:last-child { border-bottom: none; }
  .att-table tbody tr:hover { background: var(--surface2); }
  .att-table tbody td { padding: 12px 16px; font-size: 12px; color: var(--text); }
  .att-present {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--accent-dim); border: 1px solid rgba(0,219,146,0.22);
    color: var(--accent); border-radius: 100px;
    padding: 4px 10px; font-size: 10px; font-weight: 600; white-space: nowrap;
  }
  .att-absent {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--danger-dim); border: 1px solid rgba(255,107,107,0.18);
    color: var(--danger); border-radius: 100px;
    padding: 4px 10px; font-size: 10px; white-space: nowrap;
  }
  .att-excused {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--info-dim); border: 1px solid rgba(111,157,255,0.2);
    color: var(--info); border-radius: 100px;
    padding: 4px 10px; font-size: 10px; white-space: nowrap;
  }
  .att-type-tag {
    display: inline-block; padding: 3px 9px; border-radius: 100px;
    font-size: 10px; background: var(--surface2);
    border: 1px solid var(--border); color: var(--text2); white-space: nowrap;
  }
  .att-type-tag.general   { border-color: rgba(0,219,146,0.22);  color: var(--accent); background: var(--accent-dim); }
  .att-type-tag.executive { border-color: rgba(216,184,89,0.22); color: var(--gold);   background: var(--gold-dim); }
  .att-type-tag.webinar   { border-color: rgba(111,157,255,0.22); color: var(--info);  background: var(--info-dim); }
  .att-type-tag.other     { border-color: var(--border2); color: var(--text2); background: var(--surface2); }

  /* admin attendance manager */
  .att-admin-table-wrap {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-xl); overflow: hidden; margin-top: 4px;
    max-height: 60vh; overflow-y: auto;
  }
  .att-admin-table { width: 100%; border-collapse: collapse; }
  .att-admin-table th {
    background: var(--bg2); padding: 10px 14px; position: sticky; top: 0; z-index: 2;
    text-align: left; font-size: 9px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--text3); border-bottom: 1px solid var(--border);
  }
  .att-admin-table td { padding: 10px 14px; font-size: 12px; border-bottom: 1px solid var(--border); color: var(--text); }
  .att-admin-table tr:last-child td { border-bottom: none; }
  .att-admin-table tr:hover td { background: var(--surface2); }
  .att-admin-table tr.is-excused td { opacity: 0.62; }
  .att-late-join {
    font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--info); background: var(--info-dim);
    border: 1px solid rgba(111,157,255,0.2); border-radius: 100px;
    padding: 1px 7px; margin-left: 6px; white-space: nowrap;
  }
  .att-status-select {
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 6px 10px;
    color: var(--text); font-family: var(--font); font-size: 11px;
    outline: none; cursor: pointer; transition: all 0.15s; min-width: 150px;
  }
  .att-status-select:focus { border-color: var(--accent-line); }
  .att-status-select.present { border-color: rgba(0,219,146,0.3);  color: var(--accent); }
  .att-status-select.absent  { border-color: rgba(255,107,107,0.25); color: var(--danger); }
  .att-status-select.excused { border-color: rgba(111,157,255,0.3); color: var(--info); }
  .att-status-select option { background: var(--surface2); color: var(--text); }
  .att-filter-row {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    margin-bottom: 16px;
  }
  .att-filter-row select, .att-filter-row input {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 8px 13px;
    color: var(--text); font-family: var(--font); font-size: 12px;
    outline: none; transition: border-color 0.2s, box-shadow 0.2s;
  }
  .att-filter-row input { min-width: 240px; }
  .att-filter-row select { cursor: pointer; }
  .att-filter-row select:focus, .att-filter-row input:focus {
    border-color: var(--accent-line); box-shadow: 0 0 0 3px rgba(0,219,146,0.07);
  }
  .att-filter-row input::placeholder { color: var(--text4); }
  .att-filter-row select option { background: var(--surface2); }

  /* ── SCHEDULE ────────────────────────────────── */
  .schedule-list { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
  .schedule-empty {
    background: var(--surface); border: 1px dashed var(--border2);
    border-radius: var(--radius-xl); padding: 48px;
    text-align: center; color: var(--text3); font-size: 12px;
  }
  .schedule-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 17px 20px;
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 18px; align-items: start;
    transition: background 0.15s, border-color 0.2s, transform 0.2s var(--ease);
    position: relative; overflow: hidden;
  }
  .schedule-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  }
  .schedule-card:hover { background: var(--surface2); border-color: var(--border2); transform: translateX(2px); }
  .schedule-card.upcoming::before { background: var(--accent-grad); }
  .schedule-card.past::before { background: var(--border2); }
  .schedule-card.past { opacity: 0.68; }
  .schedule-date-block {
    display: flex; flex-direction: column; align-items: center;
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 9px 13px;
    min-width: 56px; text-align: center;
  }
  .schedule-date-day   { font-size: 21px; font-weight: 700; color: var(--text); line-height: 1; letter-spacing: -0.5px; }
  .schedule-date-month { font-size: 9px; color: var(--text3); letter-spacing: 2px; text-transform: uppercase; margin-top: 3px; }
  .schedule-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .schedule-title-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
  .schedule-name { font-size: 14px; font-weight: 600; color: var(--text); }
  .schedule-meta { font-size: 11px; color: var(--text2); }
  .schedule-meta span { color: var(--text4); margin: 0 6px; }
  .schedule-desc { font-size: 12px; color: var(--text3); margin-top: 3px; line-height: 1.6; }
  .schedule-actions { display: flex; gap: 6px; flex-shrink: 0; }
  .schedule-filter-row {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px;
  }
  .schedule-filter-row select {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 8px 13px;
    color: var(--text); font-family: var(--font); font-size: 12px; outline: none; cursor: pointer;
  }
  .schedule-filter-row select:focus { border-color: var(--accent-line); }
  .schedule-filter-row select option { background: var(--surface2); }
  .schedule-filter-chip {
    padding: 7px 16px; border-radius: 100px; font-size: 11px; font-weight: 500; cursor: pointer;
    border: 1px solid var(--border); background: var(--surface); color: var(--text2);
    font-family: var(--font); transition: all 0.16s;
  }
  .schedule-filter-chip:hover { border-color: var(--border3); color: var(--text); }
  .schedule-filter-chip.active {
    background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent);
  }

  /* ── PROGRAMS ────────────────────────────────── */
  .programs-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 16px; margin-top: 18px;
  }
  .program-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-xl); overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color 0.2s, background 0.18s, transform 0.22s var(--ease), box-shadow 0.22s;
    cursor: pointer;
  }
  .program-card:hover {
    border-color: var(--border2); background: var(--surface2);
    transform: translateY(-3px); box-shadow: var(--shadow-2);
  }
  .program-card-banner { height: 4px; width: 100%; }
  .program-card-banner.general  { background: linear-gradient(90deg, var(--accent3), var(--accent2)); }
  .program-card-banner.advanced { background: linear-gradient(90deg, #eccb6d, var(--gold)); }
  .program-card-banner.workshop { background: linear-gradient(90deg, #93b6ff, var(--info)); }
  .program-card-banner.other    { background: linear-gradient(90deg, var(--surface3), var(--border3)); }
  .program-card-body { padding: 19px 21px; flex: 1; display: flex; flex-direction: column; gap: 9px; }
  .program-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  .program-card-title { font-size: 14.5px; font-weight: 650; color: var(--text); line-height: 1.35; letter-spacing: -0.2px; }
  .program-card-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
  .prog-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 100px; font-size: 10px; white-space: nowrap;
  }
  .prog-tag.public   { background: var(--accent-dim); border: 1px solid rgba(0,219,146,0.22);  color: var(--accent); }
  .prog-tag.private  { background: var(--gold-dim); border: 1px solid rgba(216,184,89,0.22); color: var(--gold); }
  .prog-tag.open     { background: var(--accent-dim); border: 1px solid rgba(0,219,146,0.16); color: var(--accent); }
  .prog-tag.closed   { background: var(--danger-dim); border: 1px solid rgba(255,107,107,0.2); color: var(--danger); }
  .prog-tag.enrolled { background: var(--info-dim); border: 1px solid rgba(111,157,255,0.22); color: var(--info); }
  .program-card-desc {
    font-size: 12px; color: var(--text2); line-height: 1.6;
    display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .program-card-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
  .prog-meta-item { font-size: 10px; color: var(--text3); display: flex; align-items: center; gap: 5px; }
  .prog-meta-item strong { color: var(--text2); font-weight: 600; }
  .program-card-footer {
    padding: 13px 21px; border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--bg2);
  }
  .prog-enrolled-count { font-size: 11px; color: var(--text3); }
  .btn-enroll {
    background: var(--accent-grad); color: #04120c; border: none;
    border-radius: var(--radius); padding: 7px 17px;
    font-size: 11px; font-weight: 700; font-family: var(--font);
    cursor: pointer; transition: all 0.16s; letter-spacing: 0.3px;
    box-shadow: 0 8px 20px -14px rgba(0,219,146,0.95);
  }
  .btn-enroll:hover { filter: brightness(1.08); }
  .btn-enroll.enrolled-btn {
    background: transparent; border: 1px solid rgba(111,157,255,0.32); color: var(--info); box-shadow: none;
  }
  .btn-enroll.enrolled-btn:hover { background: var(--info-dim); filter: none; }

  /* ── PROGRAM DETAIL ──────────────────────────── */
  #prog-detail-view { display: none; }
  #prog-detail-view.active { display: block; }
  .prog-detail-header {
    margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border);
  }
  .prog-detail-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--text3); cursor: pointer;
    margin-bottom: 16px; transition: color 0.15s;
    background: transparent; border: none; font-family: var(--font); padding: 0;
  }
  .prog-detail-back:hover { color: var(--accent); }
  .prog-detail-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .prog-detail-title { font-size: 24px; font-weight: 700; color: var(--text); margin-bottom: 6px; letter-spacing: -0.6px; }
  .prog-detail-eyebrow { font-size: 9px; color: var(--accent); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 7px; font-weight: 700; }
  .prog-detail-meta-row { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 16px; }
  .prog-detail-meta-item { display: flex; flex-direction: column; gap: 3px; }
  .prog-detail-meta-label { font-size: 9px; color: var(--text3); letter-spacing: 2px; text-transform: uppercase; font-weight: 600; }
  .prog-detail-meta-val { font-size: 12.5px; color: var(--text2); }
  .prog-detail-meta-val.accent { color: var(--accent); }
  .prog-detail-desc {
    margin-top: 16px; font-size: 13px; color: var(--text2); line-height: 1.75;
    max-width: 760px;
  }

  .prog-enrolled-panel {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 17px 19px; margin-bottom: 22px;
  }
  .prog-enrolled-panel-title {
    font-size: 9px; color: var(--text3); letter-spacing: 2.5px; text-transform: uppercase;
    margin-bottom: 12px; font-weight: 700;
  }
  .prog-enrolled-chips { display: flex; gap: 8px; flex-wrap: wrap; }
  .prog-enrolled-chip {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: 100px; padding: 5px 13px;
    font-size: 11px; color: var(--text2);
  }

  .prog-structure { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
  .prog-item {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: border-color 0.2s;
  }
  .prog-item:hover { border-color: var(--border2); }
  .prog-item.open { border-color: var(--accent-line); }
  .prog-item-header {
    padding: 15px 19px; display: flex; align-items: center; gap: 13px;
    cursor: pointer; transition: background 0.14s; user-select: none;
  }
  .prog-item-header:hover { background: var(--surface2); }
  .prog-item-icon {
    width: 34px; height: 34px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
  }
  .prog-item-icon.video       { background: rgba(255,107,107,0.1);  border: 1px solid rgba(255,107,107,0.2); }
  .prog-item-icon.exam        { background: var(--gold-dim); border: 1px solid rgba(216,184,89,0.2); }
  .prog-item-icon.quiz        { background: var(--info-dim); border: 1px solid rgba(111,157,255,0.2); }
  .prog-item-icon.assignment  { background: var(--accent-dim);  border: 1px solid rgba(0,219,146,0.2); }
  .prog-item-icon.group       { background: rgba(179,188,196,0.1); border: 1px solid rgba(179,188,196,0.15); }
  .prog-item-icon.masterclass { background: var(--gold-dim); border: 1px solid rgba(216,184,89,0.2); }
  .prog-item-icon.resource    { background: var(--info-dim); border: 1px solid rgba(111,157,255,0.2); }
  .prog-item-icon.pdf         { background: rgba(255,107,107,0.1);  border: 1px solid rgba(255,107,107,0.2); }
  .prog-item-icon.certificate { background: rgba(216,184,89,0.13); border: 1px solid rgba(216,184,89,0.26); }
  .prog-item-info { flex: 1; min-width: 0; }
  .prog-item-type { font-size: 9px; color: var(--text3); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 3px; font-weight: 600; }
  .prog-item-title { font-size: 13px; font-weight: 600; color: var(--text); }
  .prog-item-subtitle { font-size: 11px; color: var(--text2); margin-top: 2px; }
  .prog-item-chevron { font-size: 11px; color: var(--text3); transition: transform 0.25s var(--ease); }
  .prog-item.open .prog-item-chevron { transform: rotate(90deg); color: var(--accent); }
  .prog-item-body { display: none; padding: 0 19px 18px; border-top: 1px solid var(--border); }
  .prog-item.open .prog-item-body { display: block; }

  .prog-video-wrap {
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
    border-radius: var(--radius); margin-top: 15px;
    background: var(--bg2); border: 1px solid var(--border);
  }
  .prog-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
  .prog-video-desc { font-size: 12px; color: var(--text2); margin-top: 11px; line-height: 1.65; }

  .prog-pdf-wrap {
    height: 560px; border-radius: var(--radius); overflow: hidden;
    background: var(--bg2); border: 1px solid var(--border);
  }
  .prog-pdf-wrap iframe { width: 100%; height: 100%; border: none; }
  @media (max-width: 700px) { .prog-pdf-wrap { height: 420px; } }

  .prog-form-wrap { margin-top: 15px; }
  .prog-form-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent-grad); color: #04120c; border: none;
    border-radius: var(--radius); padding: 10px 19px;
    font-size: 12px; font-weight: 700; font-family: var(--font);
    cursor: pointer; text-decoration: none; transition: all 0.16s;
    box-shadow: 0 8px 22px -14px rgba(0,219,146,0.95);
  }
  .prog-form-btn:hover { filter: brightness(1.08); }
  .prog-form-btn.info-btn {
    background: var(--info-dim); border: 1px solid rgba(111,157,255,0.3); color: var(--info); box-shadow: none;
  }
  .prog-form-btn.info-btn:hover { background: rgba(111,157,255,0.16); filter: none; }
  .prog-form-btn.gold-btn {
    background: var(--gold-dim); border: 1px solid rgba(216,184,89,0.3); color: var(--gold); box-shadow: none;
  }
  .prog-form-btn.gold-btn:hover { background: rgba(216,184,89,0.16); filter: none; }
  .prog-form-desc { font-size: 12px; color: var(--text2); margin-top: 11px; line-height: 1.65; }

  .prog-assignment-wrap { margin-top: 15px; }
  .prog-assignment-desc { font-size: 12px; color: var(--text2); line-height: 1.65; margin-bottom: 13px; }
  .prog-submit-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .prog-submit-input {
    flex: 1; min-width: 200px;
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 9px 13px;
    color: var(--text); font-family: var(--font); font-size: 12px; outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .prog-submit-input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px rgba(0,219,146,0.07); }
  .prog-submit-input::placeholder { color: var(--text4); }
  .prog-submit-btn {
    background: var(--accent-grad); color: #04120c; border: none;
    border-radius: var(--radius); padding: 9px 18px;
    font-size: 11px; font-weight: 700; font-family: var(--font);
    cursor: pointer; transition: all 0.16s; white-space: nowrap;
  }
  .prog-submit-btn:hover { filter: brightness(1.08); }
  .prog-submission-status {
    margin-top: 9px; font-size: 11px; color: var(--text2);
    padding: 8px 12px; background: var(--bg2); border-radius: var(--radius);
    border: 1px solid var(--border); display: none;
  }

  .prog-masterclass-wrap { margin-top: 15px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .prog-masterclass-info { flex: 1; }
  .prog-masterclass-date { font-size: 12px; color: var(--text2); margin-bottom: 5px; }
  .prog-masterclass-note { font-size: 11px; color: var(--text3); }
  .prog-join-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent-grad); color: #04120c; border: none;
    border-radius: var(--radius); padding: 11px 21px;
    font-size: 12px; font-weight: 700; font-family: var(--font);
    cursor: pointer; text-decoration: none; transition: all 0.16s;
    white-space: nowrap; box-shadow: 0 8px 22px -14px rgba(0,219,146,0.95);
  }
  .prog-join-btn:hover { filter: brightness(1.08); }

  .prog-group-wrap { margin-top: 15px; }
  .prog-group-desc { font-size: 12px; color: var(--text2); margin-bottom: 11px; line-height: 1.65; }

  .prog-order-badge {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--bg2); border: 1px solid var(--border);
    font-size: 10px; color: var(--text3); font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

  .enroll-modal-bg {
    position: fixed; inset: 0; background: rgba(3,4,5,0.78);
    z-index: 1050; display: none; align-items: center; justify-content: center;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .enroll-modal-bg.open { display: flex; animation: fadeIn 0.18s ease both; }
  .enroll-box {
    background: var(--surface); border: 1px solid var(--border2);
    border-radius: var(--radius-xl); padding: 30px;
    max-width: 390px; width: 100%; margin: 0 16px;
    box-shadow: var(--shadow-3); animation: riseIn 0.26s var(--ease) both;
  }
  .enroll-box h3 { font-size: 16px; font-weight: 650; margin-bottom: 7px; }
  .enroll-box p { font-size: 12px; color: var(--text2); margin-bottom: 20px; line-height: 1.65; }

  /* program builder */
  .prog-builder-section {
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 15px 17px; margin-bottom: 10px;
    position: relative;
  }
  .prog-builder-section-title {
    font-size: 10px; color: var(--accent); letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 12px; font-weight: 700;
  }
  .prog-builder-remove {
    background: transparent; border: 1px solid rgba(255,107,107,0.22);
    border-radius: 6px; padding: 3px 8px;
    color: var(--danger); cursor: pointer; font-size: 11px; font-family: var(--font);
    transition: all 0.15s;
  }
  .prog-builder-remove:hover { background: var(--danger-dim); }
  .prog-builder-actions { position: absolute; top: 11px; right: 11px; display: flex; gap: 6px; }
  .prog-builder-move {
    background: transparent; border: 1px solid var(--border2);
    border-radius: 6px; padding: 3px 10px;
    color: var(--text2); cursor: pointer; font-size: 12px; font-family: var(--font); line-height: 1.4;
    transition: all 0.15s;
  }
  .prog-builder-move:hover:not(:disabled) { background: var(--surface2); color: var(--text); border-color: var(--border3); }
  .prog-builder-move:disabled { opacity: 0.3; cursor: not-allowed; }
  .prog-add-item-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
  .prog-add-item-btn {
    background: var(--surface); border: 1px solid var(--border2);
    border-radius: var(--radius); padding: 7px 13px;
    font-size: 11px; color: var(--text2); cursor: pointer;
    font-family: var(--font); transition: all 0.16s;
  }
  .prog-add-item-btn:hover { background: var(--surface2); color: var(--accent); border-color: var(--accent-line); }

  .prog-admin-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
  .prog-admin-row {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 15px 19px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    transition: border-color 0.2s;
  }
  .prog-admin-row:hover { border-color: var(--border2); }
  .prog-admin-row-info { flex: 1; min-width: 0; }
  .prog-admin-row-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
  .prog-admin-row-meta { font-size: 11px; color: var(--text3); }
  .prog-admin-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

  /* ── BADGES ──────────────────────────────────── */
  .badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
  .badge-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 17px; display: flex; gap: 13px;
    position: relative; transition: transform 0.2s var(--ease), border-color 0.2s;
  }
  .badge-card:hover { transform: translateY(-2px); border-color: var(--border2); }
  .badge-card.locked { opacity: 0.38; filter: grayscale(0.65); }
  .badge-card-acquired-mark {
    position: absolute; top: 11px; right: 11px; width: 19px; height: 19px;
    border-radius: 50%; background: var(--accent-dim2); color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-size: 10px;
  }
  .badge-icon-wrap {
    width: 50px; height: 50px; border-radius: var(--radius); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    background: var(--surface2); border: 1px solid var(--border2);
  }
  .badge-icon-wrap.common     { background: rgba(255,255,255,0.05); border-color: var(--border3); }
  .badge-icon-wrap.uncommon   { background: var(--accent-dim);  border-color: rgba(0,219,146,0.28); }
  .badge-icon-wrap.rare       { background: var(--info-dim);    border-color: rgba(111,157,255,0.32); }
  .badge-icon-wrap.epic       { background: rgba(176,115,247,0.11); border-color: rgba(176,115,247,0.32); }
  .badge-icon-wrap.legendary  { background: var(--gold-dim);    border-color: rgba(216,184,89,0.38); box-shadow: inset 0 0 22px -12px var(--gold); }
  .badge-name { font-size: 13px; font-weight: 650; color: var(--text); margin-bottom: 4px; }
  .badge-desc { font-size: 11px; color: var(--text2); margin-bottom: 7px; line-height: 1.55; }
  .badge-tier-label {
    display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
    padding: 2px 0; color: var(--text2);
  }
  .badge-tier-label.common     { color: var(--text2); }
  .badge-tier-label.uncommon   { color: var(--accent); }
  .badge-tier-label.rare       { color: var(--info); }
  .badge-tier-label.epic       { color: var(--purple); }
  .badge-tier-label.legendary  { color: var(--gold); }
  .badge-tier-filter-row { display: flex; gap: 6px; flex-wrap: wrap; }
  .badge-tier-chip {
    font-size: 10px; letter-spacing: 0.4px; padding: 6px 13px; border-radius: 100px;
    background: var(--surface); border: 1px solid var(--border2); color: var(--text2);
    cursor: pointer; user-select: none; transition: all 0.16s;
  }
  .badge-tier-chip:hover { border-color: var(--border3); color: var(--text); }
  .badge-tier-chip.active { background: var(--accent-dim); border-color: var(--accent-line); color: var(--accent); }
  .badge-admin-row {
    display: flex; align-items: center; gap: 13px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 15px;
    transition: border-color 0.2s;
  }
  .badge-admin-row:hover { border-color: var(--border2); }
  .badge-admin-row-info { flex: 1; min-width: 0; }
  .badge-admin-row-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
  .badge-admin-row-meta { font-size: 11px; color: var(--text3); }
  .badge-admin-row-actions { display: flex; gap: 8px; flex-shrink: 0; }
  .aff-member-check-list {
    max-height: 230px; overflow-y: auto; border: 1px solid var(--border);
    border-radius: var(--radius); padding: 8px 12px; background: var(--bg2);
  }
  .aff-member-check-row {
    display: flex; align-items: center; gap: 9px; padding: 7px 2px;
    border-bottom: 1px solid var(--border);
  }
  .aff-member-check-row:last-child { border-bottom: none; }
  .aff-member-check-row input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
  .aff-member-name-label { flex: 1; font-size: 12px; color: var(--text); cursor: pointer; }

  /* ── RESOURCES ───────────────────────────────── */
  .resources-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
  .resource-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 17px; display: flex; gap: 13px; align-items: flex-start;
    transition: transform 0.2s var(--ease), border-color 0.2s, background 0.18s;
  }
  .resource-card:hover { transform: translateY(-2px); border-color: var(--border2); background: var(--surface2); }
  .resource-card-icon {
    width: 42px; height: 42px; border-radius: var(--radius); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    background: var(--surface2); border: 1px solid var(--border2);
  }
  .resource-card { flex-wrap: wrap; }
  .resource-card-title { font-size: 13px; font-weight: 650; color: var(--text); margin-bottom: 4px; }
  .resource-card-desc { font-size: 11px; color: var(--text2); margin-bottom: 7px; line-height: 1.55; }
  .resource-card-meta {
    display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--text3);
  }
  /* actions drop onto their own line so a card with edit + remove stays compact */
  .resource-card-actions {
    display: flex; gap: 6px; flex-basis: 100%; justify-content: flex-end;
    padding-top: 12px; border-top: 1px solid var(--border);
  }
  /* the add/edit form lives in the resources section itself — keep it readable */
  #resource-admin-box .admin-card { max-width: 820px; }

  /* ── ANNOUNCEMENTS ───────────────────────────── */
  #announcements-list { display: flex; flex-direction: column; gap: 14px; }
  .ann-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 45%), var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 20px 22px;
    transition: border-color 0.2s, transform 0.2s var(--ease);
  }
  .ann-card:hover { border-color: var(--border2); transform: translateY(-2px); }
  .ann-card-header {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px;
  }
  .ann-card-title { font-size: 14.5px; font-weight: 650; color: var(--text); letter-spacing: -0.2px; }
  .ann-new-badge {
    flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
    color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-line);
    border-radius: 100px; padding: 3px 10px;
  }
  .ann-card-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
  .ann-meta-item { font-size: 11px; color: var(--text3); }
  .ann-meta-item strong { color: var(--text2); font-weight: 600; }
  .ann-card-desc { font-size: 12.5px; color: var(--text2); line-height: 1.7; white-space: pre-wrap; }
  .ann-card-link { margin-top: 14px; }
  .ann-card-actions { display: flex; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }

  /* ── PROJECTS ────────────────────────────────── */
  .projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .proj-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 45%), var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 20px 22px; display: flex; flex-direction: column;
    transition: border-color 0.2s, transform 0.2s var(--ease);
  }
  .proj-card:hover { border-color: var(--border2); transform: translateY(-2px); }
  .proj-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
  .proj-card-title { font-size: 14.5px; font-weight: 650; color: var(--text); letter-spacing: -0.2px; }
  .proj-status-badge {
    flex-shrink: 0; font-size: 9px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase;
    border-radius: 100px; padding: 3px 10px; white-space: nowrap;
  }
  .proj-status-badge.status-active           { color: var(--accent); background: var(--accent-dim); border: 1px solid rgba(0,219,146,0.28); }
  .proj-status-badge.status-partially-active { color: #e8c04a; background: rgba(232,192,74,0.12); border: 1px solid rgba(232,192,74,0.28); }
  .proj-status-badge.status-less-active      { color: #e8904f; background: rgba(232,144,79,0.12); border: 1px solid rgba(232,144,79,0.28); }
  .proj-status-badge.status-inactive         { color: var(--text3); background: rgba(255,255,255,0.05); border: 1px solid var(--border); }
  .proj-card-badges { margin-bottom: 11px; }
  .proj-type-tag {
    font-size: 10px; color: var(--text2); background: var(--bg2); border: 1px solid var(--border);
    border-radius: 100px; padding: 3px 11px; display: inline-flex; align-items: center; gap: 5px;
  }
  .proj-card-desc { font-size: 12px; color: var(--text2); line-height: 1.65; margin-bottom: 13px; }
  .proj-card-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 15px; }
  .proj-progress-wrap { margin-bottom: 6px; }
  .proj-progress-label {
    display: flex; justify-content: space-between; font-size: 10px; font-weight: 600;
    color: var(--text3); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 7px;
  }
  .proj-progress-bar { height: 6px; background: var(--bg2); border-radius: 100px; overflow: hidden; border: 1px solid var(--border); }
  .proj-progress-fill {
    height: 100%; background: var(--accent-grad); border-radius: 100px; transition: width 0.5s var(--ease);
    box-shadow: 0 0 12px -3px rgba(0,219,146,0.9);
  }
  .proj-join-box { margin-top: 13px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 13px; }
  .proj-join-label { font-size: 9px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text3); margin-bottom: 5px; }
  .proj-join-text { font-size: 11px; color: var(--text2); line-height: 1.6; }
  .proj-card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 16px; }

  /* ── SUBMISSIONS MODAL ───────────────────────── */
  .sub-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 0; border-bottom: 1px solid var(--border);
  }
  .sub-row:last-child { border-bottom: none; }
  .sub-row-info { min-width: 0; flex: 1; }
  .sub-row-name { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
  .sub-row-link {
    display: block; font-size: 11px; color: var(--accent); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px;
  }
  .sub-row-link:hover { text-decoration: underline; }
  .sub-row-date { font-size: 10px; color: var(--text3); }

  /* ── AFFILIATIONS ────────────────────────────── */
  .aff-record-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 15px 17px; display: flex; gap: 13px; align-items: flex-start;
    transition: border-color 0.2s;
  }
  .aff-record-card:hover { border-color: var(--border2); }
  .aff-record-body { flex: 1; min-width: 0; }
  .aff-record-title { font-size: 13px; font-weight: 650; color: var(--text); margin-bottom: 7px; }
  .aff-record-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .aff-type-tag {
    display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
    padding: 3px 9px; border-radius: 100px; border: 1px solid var(--border2); color: var(--text2);
  }
  .aff-type-tag.program  { color: var(--accent); border-color: rgba(0,219,146,0.28); background: var(--accent-dim); }
  .aff-type-tag.event    { color: var(--info);   border-color: rgba(111,157,255,0.28); background: var(--info-dim); }
  .aff-type-tag.course   { color: var(--gold);   border-color: rgba(216,184,89,0.32); background: var(--gold-dim); }
  .aff-type-tag.subteam  { color: var(--purple); border-color: rgba(176,115,247,0.32); background: rgba(176,115,247,0.1); }
  .aff-type-tag.other    { color: var(--text2); border-color: var(--border2); background: var(--surface2); }
  .aff-role-badge {
    font-size: 9px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text2);
    padding: 3px 9px; border-radius: 100px; background: var(--surface2); border: 1px solid var(--border);
  }
  .aff-role-input {
    width: 108px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    padding: 5px 9px; color: var(--text); font-family: var(--font); font-size: 11px; outline: none;
    transition: border-color 0.2s;
  }
  .aff-role-input:disabled { opacity: 0.32; }
  .aff-role-input:focus { border-color: var(--accent-line); }

  /* ── RESPONSIVE ──────────────────────────────── */
  @media (max-width: 1100px) {
    .admin-pointer-row { grid-template-columns: 1fr; }
  }
  @media (max-width: 900px) {
    .sidebar, .layout::before { width: 190px; }
    .main { padding: 22px 20px 56px; }
    .admin-cards { grid-template-columns: 1fr; }
    .projects-grid { grid-template-columns: 1fr; }
    .page-header h2 { font-size: 20px; }
  }
  @media (max-width: 680px) {
    .layout { flex-direction: column; }
    .layout::before { display: none; }
    .lb-table th, .lb-table td { white-space: nowrap; }
    .sidebar {
      width: 100%; height: auto; position: sticky; top: 60px; z-index: 150;
      border-right: none; border-bottom: 1px solid var(--border);
      padding: 10px; background: rgba(7,8,10,0.94);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    }
    .nav-group { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 4px; }
    .nav-group-label { display: none; }
    .nav-item { margin-bottom: 0; padding: 7px 11px; font-size: 12px; }
    .nav-item::before { display: none; }
    .nav-item.active { background: var(--accent-dim); border-radius: 100px; }
    .nav-sym { display: none; }
    .profile-card { grid-template-columns: 1fr; padding: 22px; }
    .stats-grid, .programs-grid, .resources-grid, .badges-grid { grid-template-columns: 1fr; }
    .form-row-split { grid-template-columns: 1fr; }
    .topbar { padding: 0 14px; }
    .topbar-label, .topbar-sep { display: none; }
    .member-chip-name { max-width: 90px; }
    .main { padding: 20px 14px 48px; }
    .schedule-card { grid-template-columns: auto 1fr; }
    .schedule-actions { grid-column: 1 / -1; }
    .log-entry, .act-entry { grid-template-columns: 1fr; }
    .log-meta, .act-meta { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
    .act-entry { grid-template-columns: auto 1fr; }
    .act-meta { grid-column: 1 / -1; }
    .prog-detail-meta-row { gap: 16px; }
    .prog-masterclass-wrap { flex-direction: column; align-items: flex-start; }
    .att-filter-row input { min-width: 0; width: 100%; }
    .toast { left: 14px; right: 14px; bottom: 14px; max-width: none; }
  }