/* ============ TOKENS ============ */
  :root{
    /* dark-first palette (bare :root = dark) */
    --bg: #0a0f1c;
    --bg-soft: #0d1424;
    --surface: #121a2c;
    --surface-hover: #182238;
    --border: rgba(150,165,214,0.14);
    --border-strong: rgba(150,165,214,0.26);
    --text: #e9edf7;
    --text-dim: #98a3bc;
    --text-faint: #667089;
    /* accent: overridden at runtime by applyAccent(); these are the pre-JS fallback (yellow, default) */
    --accent: #f0b429;
    --accent-ink: #201700;
    --accent-soft: rgba(240,180,41,0.16);
    --accent-text: #f0b429;
    --success: #38d39a;
    --success-soft: rgba(56,211,154,0.13);
    --warning: #f5b942;
    --warning-soft: rgba(245,185,66,0.13);
    --danger: #f8697a;
    --danger-soft: rgba(248,105,122,0.13);
    --discord: #5865f2;
    --discord-hover: #4954d6;
    --shadow: 0 18px 40px -18px rgba(0,0,0,0.55);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      --bg: #eef1f8; --bg-soft: #e5e9f3; --surface: #ffffff; --surface-hover: #f4f6fb;
      --border: rgba(30,41,74,0.11); --border-strong: rgba(30,41,74,0.20);
      --text: #161c2c; --text-dim: #545e78; --text-faint: #838ca4;
      --success: #12986a; --success-soft: rgba(18,152,106,0.10);
      --warning: #a2650c; --warning-soft: rgba(162,101,12,0.10);
      --danger: #d13b4d; --danger-soft: rgba(209,59,77,0.10);
      --shadow: 0 18px 40px -20px rgba(30,41,74,0.25);
    }
  }
  :root[data-theme="light"]{
    --bg: #eef1f8; --bg-soft: #e5e9f3; --surface: #ffffff; --surface-hover: #f4f6fb;
    --border: rgba(30,41,74,0.11); --border-strong: rgba(30,41,74,0.20);
    --text: #161c2c; --text-dim: #545e78; --text-faint: #838ca4;
    --success: #12986a; --success-soft: rgba(18,152,106,0.10);
    --warning: #a2650c; --warning-soft: rgba(162,101,12,0.10);
    --danger: #d13b4d; --danger-soft: rgba(209,59,77,0.10);
    --shadow: 0 18px 40px -20px rgba(30,41,74,0.25);
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; } }
  h1,h2,h3{ font-family:var(--font-display); text-wrap:balance; margin:0; }
  p{ margin:0; }
  button{ font-family:inherit; }
  a{ color:inherit; }
  ::selection{ background:var(--accent-soft); }
  :focus-visible{ outline:2px solid var(--accent-text); outline-offset:2px; border-radius:4px; }
  .hidden{ display:none !important; }
  .mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

  /* ============ LOGIN SCREEN ============ */
  #login-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; position:relative; overflow:hidden; }
  #login-screen::before{ content:""; position:absolute; inset:-20%; background: radial-gradient(560px 360px at 18% 12%, var(--accent-soft), transparent 60%), radial-gradient(620px 420px at 85% 85%, rgba(92,141,246,0.10), transparent 60%); pointer-events:none; }
  .login-card{ position:relative; width:100%; max-width:400px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:36px 32px 28px; text-align:center; }
  .login-mark{ width:56px; height:56px; margin:0 auto 18px; border-radius:16px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; }
  .login-mark svg{ width:30px; height:30px; stroke:var(--accent-text); }
  .login-card h1{ font-size:22px; font-weight:700; letter-spacing:-0.01em; }
  .login-card .org{ font-size:13px; color:var(--accent-text); font-weight:600; margin-top:4px; }
  .login-card .desc{ font-size:13px; color:var(--text-dim); margin:14px auto 26px; max-width:30ch; }
  .discord-btn{ width:100%; display:flex; align-items:center; justify-content:center; gap:10px; background:var(--discord); color:#fff; border:none; border-radius:var(--radius-sm); padding:13px 16px; font-size:14px; font-weight:700; cursor:pointer; transition:background .15s ease, transform .1s ease; }
  .discord-btn:hover{ background:var(--discord-hover); }
  .discord-btn:active{ transform:scale(0.98); }
  .discord-btn:disabled{ opacity:.75; cursor:default; }
  .discord-btn svg{ width:18px; height:18px; flex-shrink:0; }
  .login-status{ margin-top:16px; font-size:12.5px; color:var(--text-dim); display:flex; align-items:center; justify-content:center; gap:8px; min-height:16px; }
  .spinner{ width:14px; height:14px; border-radius:50%; border:2px solid var(--border-strong); border-top-color:var(--accent-text); animation:spin .7s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .login-demo{ margin-top:22px; padding-top:18px; border-top:1px dashed var(--border-strong); }
  .login-demo p{ font-size:11px; color:var(--text-faint); margin-bottom:8px; text-transform:uppercase; letter-spacing:.06em; }
  .demo-link{ background:none; border:none; color:var(--text-dim); font-size:12px; cursor:pointer; text-decoration:underline; text-underline-offset:2px; padding:2px 6px; }
  .demo-link:hover{ color:var(--text); }
  .access-denied{ display:none; }
  .access-denied.show{ display:block; }
  .access-denied .icon{ width:52px; height:52px; border-radius:14px; margin:0 auto 16px; background:var(--danger-soft); display:flex; align-items:center; justify-content:center; }
  .access-denied .icon svg{ width:26px; height:26px; stroke:var(--danger); }
  .access-denied h1{ font-size:19px; }
  .access-denied .desc{ margin-top:10px; }
  .role-pill{ display:inline-flex; margin-top:14px; font-family:var(--font-mono); font-size:11px; background:var(--surface-hover); border:1px solid var(--border-strong); color:var(--text-dim); padding:5px 10px; border-radius:999px; }
  .retry-btn{ margin-top:20px; width:100%; background:transparent; border:1px solid var(--border-strong); color:var(--text); border-radius:var(--radius-sm); padding:11px 16px; font-size:13.5px; font-weight:600; cursor:pointer; transition:background .15s ease; }
  .retry-btn:hover{ background:var(--surface-hover); }

  /* ============ APP SHELL ============ */
  #app-shell{ display:flex; min-height:100vh; }
  .sidebar{ width:264px; flex-shrink:0; background:var(--bg-soft); border-right:1px solid var(--border); display:flex; flex-direction:column; height:100vh; position:sticky; top:0; }
  .brand{ display:flex; align-items:center; gap:10px; padding:18px 18px 16px; border-bottom:1px solid var(--border); }
  .brand-mark{ width:34px; height:34px; border-radius:10px; flex-shrink:0; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; }
  .brand-mark svg{ width:19px; height:19px; stroke:var(--accent-text); }
  .brand-text{ min-width:0; }
  .brand-text .name{ font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-0.01em; white-space:nowrap; }
  .brand-text .tag{ font-size:11px; color:var(--text-faint); white-space:nowrap; }
  .beta-chip{ margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--warning-soft); color:var(--warning); padding:3px 7px; border-radius:6px; flex-shrink:0; }
  .profile{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border); }
  .avatar{ width:38px; height:38px; border-radius:10px; flex-shrink:0; background:var(--accent-soft); color:var(--accent-text); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:13px; overflow:hidden; }
  .avatar img{ width:100%; height:100%; object-fit:cover; }
  .profile-text{ min-width:0; }
  .profile-text .pname{ font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .profile-text .prole{ font-size:11.5px; color:var(--accent-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  nav.nav{ flex:1; overflow-y:auto; padding:14px 12px; }
  .nav-label{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); padding:10px 10px 6px; }
  .nav-item{ display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; text-align:left; color:var(--text-dim); font-size:13.5px; font-weight:600; padding:9px 10px; border-radius:var(--radius-sm); cursor:pointer; transition:background .12s ease, color .12s ease; }
  .nav-item svg{ width:16.5px; height:16.5px; flex-shrink:0; stroke:currentColor; }
  .nav-item:hover{ background:var(--surface-hover); color:var(--text); }
  .nav-item.active{ background:var(--accent-soft); color:var(--accent-text); }
  .nav-group-btn{ display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; text-align:left; cursor:pointer; color:var(--text-dim); font-size:13.5px; font-weight:600; padding:9px 10px; border-radius:var(--radius-sm); transition:background .12s ease, color .12s ease; }
  .nav-group-btn:hover{ background:var(--surface-hover); color:var(--text); }
  .nav-group-btn svg{ width:16.5px; height:16.5px; flex-shrink:0; stroke:currentColor; }
  .nav-group-btn svg.chev{ margin-left:auto; width:14px; height:14px; transition:transform .15s ease; }
  .nav-group-btn.open svg.chev{ transform:rotate(180deg); }
  .nav-sub{ padding-left:14px; margin-top:2px; margin-bottom:4px; border-left:1px solid var(--border-strong); margin-left:19px; }
  .nav-sub .nav-item{ font-size:13px; padding:8px 10px; }
  .sidebar-footer{ padding:12px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
  .footer-row{ display:flex; align-items:center; gap:6px; }
  .icon-btn{ width:32px; height:32px; border-radius:var(--radius-sm); background:none; border:1px solid transparent; color:var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .12s ease, color .12s ease; position:relative; }
  .icon-btn svg{ width:16px; height:16px; stroke:currentColor; }
  .icon-btn:hover{ background:var(--surface-hover); color:var(--text); border-color:var(--border-strong); }
  .version-tag{ font-size:10.5px; color:var(--text-faint); font-family:var(--font-mono); }
  .logout-btn{ margin-left:auto; }
  .sync-pill{ display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--text-faint); padding:0 2px; }
  .sync-dot{ width:6px; height:6px; border-radius:50%; background:var(--text-faint); flex-shrink:0; }
  .sync-pill.live .sync-dot{ background:var(--success); }
  .sync-pill.saving .sync-dot{ background:var(--warning); animation:pulse 1s ease-in-out infinite; }
  .sync-pill.local .sync-dot{ background:var(--text-faint); }
  .sync-pill.readonly .sync-dot{ background:var(--danger); }
  @keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

  /* color picker popover */
  .color-pop{ position:absolute; bottom:38px; left:0; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius); box-shadow:var(--shadow); padding:10px; z-index:70; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; width:168px; }
  .color-dot{ width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .color-dot.active{ border-color:var(--text); }
  .color-dot svg{ width:14px; height:14px; stroke:#fff; opacity:0; }
  .color-dot.active svg{ opacity:1; }

  /* ============ MAIN ============ */
  .main{ flex:1; min-width:0; display:flex; flex-direction:column; }
  .readonly-banner{ background:var(--warning-soft); color:var(--warning); font-size:12px; padding:8px 30px; display:flex; align-items:center; gap:8px; }
  .readonly-banner svg{ width:14px; height:14px; stroke:currentColor; flex-shrink:0; }
  .topbar{ padding:22px 30px 18px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
  .topbar-title{ display:flex; align-items:center; gap:14px; }
  .topbar-icon{ width:42px; height:42px; border-radius:12px; flex-shrink:0; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; }
  .topbar-icon svg{ width:21px; height:21px; stroke:var(--accent-text); }
  .topbar-title h1{ font-size:21px; font-weight:700; letter-spacing:-0.01em; }
  .topbar-title p{ font-size:12.5px; color:var(--text-dim); margin-top:2px; }
  .topbar-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .search-box{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:8px 12px; min-width:220px; }
  .search-box svg{ width:15px; height:15px; stroke:var(--text-faint); flex-shrink:0; }
  .search-box input{ border:none; background:none; outline:none; color:var(--text); font-size:13px; width:100%; font-family:var(--font-body); }
  .search-box input::placeholder{ color:var(--text-faint); }
  .btn{ display:inline-flex; align-items:center; gap:7px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font-size:12.5px; font-weight:700; padding:8px 13px; cursor:pointer; transition:background .12s ease, border-color .12s ease; white-space:nowrap; }
  .btn svg{ width:14px; height:14px; stroke:currentColor; }
  .btn:hover{ background:var(--surface-hover); }
  .btn:disabled{ opacity:.5; cursor:not-allowed; }
  .btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
  .btn-primary:hover{ filter:brightness(1.06); background:var(--accent); }
  .btn-ghost{ background:none; border-color:transparent; color:var(--text-dim); }
  .btn-ghost:hover{ background:var(--surface-hover); color:var(--text); }
  .btn-danger{ background:none; border-color:var(--danger); color:var(--danger); }
  .btn-danger:hover{ background:var(--danger-soft); }
  .btn-block{ width:100%; justify-content:center; }

  .page-content{ padding:22px 30px 40px; flex:1; }
  .stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:18px; }
  .stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; }
  .stat-card .label{ font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
  .stat-card .value{ font-family:var(--font-display); font-size:24px; font-weight:700; margin-top:6px; }
  .stat-card .sub{ font-size:11.5px; color:var(--text-dim); margin-top:4px; }

  .panel{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
  .panel-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:16px 20px; border-bottom:1px solid var(--border); }
  .panel-head .results{ font-size:12px; color:var(--text-dim); }
  .panel-head .results b{ color:var(--text); font-family:var(--font-mono); }
  .table-wrap{ overflow-x:auto; }
  table{ width:100%; border-collapse:collapse; min-width:560px; }
  thead th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); font-weight:700; padding:11px 20px; border-bottom:1px solid var(--border); white-space:nowrap; cursor:pointer; user-select:none; }
  thead th:hover{ color:var(--text-dim); }
  thead th .th-inner{ display:flex; align-items:center; gap:5px; }
  thead th svg{ width:11px; height:11px; opacity:.5; }
  tbody td{ padding:12px 20px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:middle; }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr{ transition:background .1s ease; }
  tbody tr:hover{ background:var(--surface-hover); }
  .cell-person{ display:flex; align-items:center; gap:10px; }
  .cell-person .cavatar{ width:30px; height:30px; border-radius:9px; background:var(--accent-soft); color:var(--accent-text); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; font-family:var(--font-display); flex-shrink:0; overflow:hidden; }
  .cell-person .cavatar img{ width:100%; height:100%; object-fit:cover; }
  .cell-person .cname{ font-weight:700; font-size:13px; }
  .badge{ display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent-text); }
  .badge.success{ background:var(--success-soft); color:var(--success); }
  .badge.warning{ background:var(--warning-soft); color:var(--warning); }
  .badge.danger{ background:var(--danger-soft); color:var(--danger); }
  .badge.grade{ background:var(--surface-hover); color:var(--text-dim); border:1px solid var(--border-strong); }
  .row-actions{ display:flex; gap:6px; justify-content:flex-end; }
  .row-actions .icon-btn{ width:28px; height:28px; }
  .row-actions .icon-btn svg{ width:14px; height:14px; }
  .empty-note{ padding:30px 20px; font-size:12.5px; color:var(--text-dim); text-align:center; }
  .notice{ display:flex; align-items:flex-start; gap:10px; background:var(--warning-soft); border:1px solid rgba(245,185,66,0.35); color:var(--warning); border-radius:var(--radius); padding:12px 14px; font-size:12.5px; margin-bottom:16px; }
  .notice svg{ width:16px; height:16px; flex-shrink:0; margin-top:1px; stroke:currentColor; }
  .notice b{ color:var(--text); }
  .notice.info{ background:var(--accent-soft); color:var(--accent-text); border-color:transparent; }
  .notice.info b{ color:var(--text); }

  /* storage tabs + grid */
  .storage-tabs{ display:flex; gap:24px; border-bottom:1px solid var(--border); margin-bottom:18px; }
  .storage-tab{ display:flex; align-items:center; gap:7px; background:none; border:none; padding:9px 1px 12px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-faint); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .12s ease; }
  .storage-tab svg{ width:15px; height:15px; stroke:currentColor; }
  .storage-tab:hover{ color:var(--text-dim); }
  .storage-tab.active{ color:var(--accent-text); border-bottom-color:var(--accent-text); }

  .storage-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:4px 6px; }
  .item-card{ background:transparent; border:1px solid transparent; border-radius:var(--radius); padding:16px 10px 14px; text-align:center; cursor:pointer; transition:background .12s ease; }
  .item-card:hover{ background:var(--surface-hover); }
  .item-card .icon-tile{ width:64px; height:64px; border-radius:14px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:transparent; }
  .item-card .icon-tile.preset{ background:var(--surface-hover); }
  .item-card .icon-tile svg{ width:30px; height:30px; stroke:var(--text-faint); }
  .item-card .icon-tile img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.35)); }
  .item-card .iname{ font-size:13px; font-weight:700; line-height:1.25; }
  .item-card .iqty{ font-size:12px; color:var(--text-dim); margin-top:4px; font-family:var(--font-mono); }
  .item-card.low .iqty{ color:var(--warning); }
  .item-card.empty{ opacity:.55; }

  /* addon / item-def rows */
  .addon-row{ display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--border); }
  .addon-row:last-child{ border-bottom:none; }
  .addon-icon{ width:42px; height:42px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; overflow:hidden; background:transparent; }
  .addon-icon.preset{ background:var(--surface-hover); }
  .addon-icon svg{ width:20px; height:20px; stroke:var(--text-faint); }
  .addon-icon img{ width:100%; height:100%; object-fit:contain; }
  .addon-info{ flex:1; min-width:0; }
  .addon-info .aname{ font-weight:700; font-size:13.5px; }
  .addon-info .adesc{ font-size:12px; color:var(--text-dim); margin-top:2px; font-family:var(--font-mono); }

  /* forms */
  .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:20px; }
  .form-grid.full{ grid-template-columns:1fr; }
  .field label{ display:block; font-size:11.5px; font-weight:700; color:var(--text-dim); margin-bottom:6px; }
  .field .hint{ font-size:11px; font-weight:500; color:var(--text-faint); margin-top:5px; }
  .field input, .field select, .field textarea{ width:100%; background:var(--bg-soft); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:10px 12px; color:var(--text); font-size:13px; font-family:var(--font-body); outline:none; }
  .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent-text); }
  .field-span2{ grid-column:1 / -1; }
  .form-actions{ display:flex; justify-content:flex-end; gap:10px; padding:16px 20px; border-top:1px solid var(--border); }

  .upload-drop{ display:flex; align-items:center; gap:12px; border:1px dashed var(--border-strong); border-radius:var(--radius-sm); padding:10px; background:var(--bg-soft); }
  .upload-preview{ width:44px; height:44px; border-radius:10px; background:var(--surface-hover); flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; }
  .upload-preview img{ width:100%; height:100%; object-fit:cover; }
  .upload-preview svg{ width:18px; height:18px; stroke:var(--text-faint); }
  .upload-drop input[type=file]{ font-size:11.5px; color:var(--text-dim); width:100%; }

  /* activity log */
  .log-list{ display:flex; flex-direction:column; }
  .log-row{ display:flex; gap:12px; padding:14px 20px; border-bottom:1px solid var(--border); }
  .log-row:last-child{ border-bottom:none; }
  .log-icon{ width:30px; height:30px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); }
  .log-icon svg{ width:14px; height:14px; stroke:var(--accent-text); }
  .log-icon.out{ background:var(--danger-soft); }
  .log-icon.out svg{ stroke:var(--danger); }
  .log-icon.in{ background:var(--success-soft); }
  .log-icon.in svg{ stroke:var(--success); }
  .log-text{ font-size:12.5px; }
  .log-text b{ font-weight:700; }
  .log-reason{ color:var(--text-dim); font-style:italic; margin-top:2px; }
  .log-time{ margin-left:auto; font-size:11px; color:var(--text-faint); font-family:var(--font-mono); white-space:nowrap; flex-shrink:0; }

  /* toggle switch (kept for future use) */
  .toggle{ position:relative; width:38px; height:22px; border-radius:999px; background:var(--surface-hover); border:1px solid var(--border-strong); cursor:pointer; flex-shrink:0; }
  .toggle::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--text-faint); transition:transform .15s ease, background .15s ease; }
  .toggle.on{ background:var(--accent-soft); border-color:var(--accent-text); }
  .toggle.on::after{ transform:translateX(16px); background:var(--accent-text); }

  /* modal */
  .modal-overlay{ position:fixed; inset:0; background:rgba(6,9,18,0.6); display:flex; align-items:center; justify-content:center; z-index:90; padding:20px; }
  .modal{ width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-lg); box-shadow:var(--shadow); max-height:88vh; overflow-y:auto; }
  .modal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 20px; border-bottom:1px solid var(--border); }
  .modal-head h3{ font-size:15.5px; font-weight:700; }
  .modal-body{ padding:20px; display:flex; flex-direction:column; gap:14px; }
  .qty-stepper{ display:flex; align-items:center; gap:10px; }
  .qty-stepper button{ width:38px; height:38px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--bg-soft); color:var(--text); font-size:18px; font-weight:700; cursor:pointer; flex-shrink:0; }
  .qty-stepper button:hover{ background:var(--surface-hover); }
  .qty-stepper input{ flex:1; text-align:center; background:var(--bg-soft); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:9px; color:var(--text); font-size:15px; font-family:var(--font-mono); }
  .dir-toggle{ display:flex; gap:8px; }
  .dir-btn{ flex:1; padding:10px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--bg-soft); color:var(--text-dim); font-size:12.5px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; }
  .dir-btn svg{ width:14px; height:14px; stroke:currentColor; }
  .dir-btn.active.deposit{ background:var(--success-soft); border-color:var(--success); color:var(--success); }
  .dir-btn.active.withdraw{ background:var(--danger-soft); border-color:var(--danger); color:var(--danger); }
  .modal-item-head{ display:flex; align-items:center; gap:12px; }
  .modal-item-head .icon-tile{ width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; background:transparent; }
  .modal-item-head .icon-tile.preset{ background:var(--surface-hover); }
  .modal-item-head .icon-tile svg{ width:24px; height:24px; stroke:var(--text-faint); }
  .modal-item-head .icon-tile img{ width:100%; height:100%; object-fit:contain; }
  .modal-item-head .stock{ font-size:11.5px; color:var(--text-dim); font-family:var(--font-mono); }
  .modal-error{ font-size:12px; color:var(--danger); }

  .toast-wrap{ position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:100; }
  .toast{ background:var(--surface); border:1px solid var(--border-strong); box-shadow:var(--shadow); color:var(--text); font-size:12.5px; padding:11px 15px; border-radius:var(--radius-sm); display:flex; align-items:center; gap:9px; min-width:220px; animation:toast-in .18s ease; }
  .toast svg{ width:15px; height:15px; stroke:var(--accent-text); flex-shrink:0; }
  @keyframes toast-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

  @media (max-width: 860px){
    .sidebar{ position:fixed; z-index:60; transform:translateX(-100%); transition:transform .18s ease; box-shadow:var(--shadow); }
    .sidebar.open{ transform:translateX(0); }
    .mobile-menu-btn{ display:flex !important; }
    .page-content{ padding:18px 16px 32px; }
    .topbar{ padding:16px 16px; }
    .form-grid{ grid-template-columns:1fr; }
  }
  .mobile-menu-btn{ display:none; }

/* ============ CONTRIBUTIONS PAGE ============ */
.contrib-list{ display:flex; flex-direction:column; }
.contrib-row{ border-bottom:1px solid var(--border); }
.contrib-row:last-child{ border-bottom:none; }
.contrib-summary{ display:flex; align-items:center; gap:14px; padding:14px 20px; cursor:pointer; transition:background .1s ease; }
.contrib-summary:hover{ background:var(--surface-hover); }
.contrib-summary .cavatar{ width:34px; height:34px; border-radius:10px; background:var(--accent-soft); color:var(--accent-text); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; font-family:var(--font-display); flex-shrink:0; overflow:hidden; }
.contrib-summary .cavatar img{ width:100%; height:100%; object-fit:cover; }
.contrib-summary .cname{ font-weight:700; font-size:13.5px; }
.contrib-summary .crank{ font-size:11.5px; color:var(--text-dim); }
.contrib-summary .ctotal{ margin-left:auto; text-align:right; }
.contrib-summary .ctotal .amt{ font-family:var(--font-mono); font-weight:700; font-size:15px; }
.contrib-summary .ctotal .sub{ font-size:10.5px; color:var(--text-faint); }
.contrib-summary .chev{ width:16px; height:16px; stroke:var(--text-faint); transition:transform .15s ease; flex-shrink:0; }
.contrib-row.open .chev{ transform:rotate(180deg); }
.contrib-detail{ display:none; padding:4px 20px 20px 68px; }
.contrib-row.open .contrib-detail{ display:block; }
.contrib-cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin-bottom:14px; }
.contrib-cat{ background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; }
.contrib-cat .cat-label{ font-size:11px; color:var(--text-faint); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.contrib-cat .cat-row{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; gap:8px; }
.contrib-cat .cat-pts{ font-family:var(--font-mono); font-weight:700; font-size:15px; }
.contrib-cat .cat-value{ font-size:11px; color:var(--text-dim); font-family:var(--font-mono); }
.contrib-cat .cat-edit{ width:26px; height:26px; border-radius:7px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contrib-cat .cat-edit:hover{ background:var(--surface-hover); color:var(--text); }
.contrib-cat .cat-edit svg{ width:13px; height:13px; stroke:currentColor; }
.contrib-xp-list{ display:flex; flex-direction:column; gap:6px; }
.contrib-xp-row{ display:flex; align-items:center; gap:10px; font-size:12.5px; padding:7px 10px; background:var(--bg-soft); border-radius:var(--radius-sm); border:1px solid var(--border); }
.contrib-xp-row .xm{ color:var(--text-dim); font-family:var(--font-mono); }
.contrib-xp-row .xv{ font-weight:700; font-family:var(--font-mono); }
.contrib-xp-row .xe{ margin-left:auto; color:var(--text-dim); font-family:var(--font-mono); }
.section-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); margin:2px 0 8px; }

/* login error banner injected by app.js when /auth redirects back with ?login=... */
.login-error{ margin-top:14px; font-size:12px; color:var(--danger); background:var(--danger-soft); border-radius:var(--radius-sm); padding:9px 12px; text-align:left; }