@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;700;800&display=swap');

    :root {
      --bg:      #08090f;
      --surface: #0f1117;
      --border:  #1a2235;
      --text:    #e2e8f0;
      --long:    #00e5a0;
      --short:   #ff4466;
      --anal:    #f7c35f;
      --back:    #7b8cff;
      --thought: #c084fc;
      --warn:    #fb923c;
      --purp:    #d946ef;
      --neutral: #38bdf8;
    }

    body {
      background: var(--bg); color: var(--text);
      font-family: 'Space Mono', monospace; min-height: 100vh;
      background-image:
        radial-gradient(ellipse at 5% 0%,   rgba(0,229,160,0.05)  0%, transparent 45%),
        radial-gradient(ellipse at 95% 95%, rgba(123,140,255,0.05) 0%, transparent 45%);
    }

    .syne { font-family: 'Syne', sans-serif; }
    .hidden-view { display: none !important; }

    /* ── MODAL ── */
    .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.82); z-index:50; display:flex; align-items:center; justify-content:center; padding:16px; }
    .modal-box { background:#0f1117; border:1px solid #1a2235; border-radius:12px; padding:28px; width:100%; max-width:640px; max-height:90vh; overflow-y:auto; }

    /* ── LIGHTBOX ── */
    .lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:100; display:flex; align-items:center; justify-content:center; cursor:pointer; }
    .lightbox img { max-width:92vw; max-height:88vh; border-radius:8px; object-fit:contain; }

    /* ── RADIO BUTTONS ── */
    .radio-group { display:flex; gap:10px; }
    .radio-btn { flex:1; }
    .radio-btn input { display:none; }
    .radio-btn label {
      display:block; text-align:center; padding:8px; border-radius:6px; cursor:pointer;
      border:1px solid #1a2235; font-size:11px; font-weight:700; text-transform:uppercase;
      letter-spacing:1px; transition:all 0.15s; color:#4a5568;
    }
    .radio-btn input:checked + label.long-label  { border-color:var(--long);  color:var(--long);  background:rgba(0,229,160,0.1); }
    .radio-btn input:checked + label.short-label { border-color:var(--short); color:var(--short); background:rgba(255,68,102,0.1); }
    .radio-btn input:checked + label.pb-yes      { border-color:var(--purp);  color:var(--purp);  background:rgba(217,70,239,0.1); }
    .radio-btn input:checked + label.pb-no       { border-color:#4a5568;      color:#e2e8f0;      background:rgba(255,255,255,0.05); }

    /* ── TABLE ── */
    .tbl { width:100%; border-collapse:collapse; }
    .tbl th { background:#0a0c12; color:#4a5568; font-size:9px; text-transform:uppercase; letter-spacing:2px; padding:14px 12px; text-align:left; border-bottom:1px solid #1a2235; white-space:nowrap; }
    .tbl td { padding:12px; border-bottom:1px solid #0f1520; font-size:11px; vertical-align:middle; }
    .tbl tr:hover td { background:rgba(255,255,255,0.02); }
    .tbl tr.row-long  td:first-child { border-left:3px solid var(--long); }
    .tbl tr.row-short td:first-child { border-left:3px solid var(--short); }
    .tbl tr.row-pb    td:first-child { border-left:3px solid var(--purp); }

    /* ── BADGES ── */
    .badge { padding:2px 8px; border-radius:4px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
    .badge-long  { background:rgba(0,229,160,0.12);  color:var(--long); }
    .badge-short { background:rgba(255,68,102,0.12); color:var(--short); }
    .badge-pb    { background:rgba(217,70,239,0.12); color:var(--purp); }

    /* ── ANALYTICS BARS ── */
    .bar-bg { background:#1a2235; border-radius:3px; height:6px; overflow:hidden; }
    .bar-fill { height:100%; border-radius:3px; transition:width 0.5s ease; }

    /* ── FORM INPUTS ── */
    .fi { width:100%; background:#0a0c12; border:1px solid #1a2235; border-radius:6px; padding:8px 10px; font-size:12px; color:var(--text); font-family:'Space Mono',monospace; outline:none; transition:border-color 0.15s; }
    .fi:focus { border-color:#2a3a55; }
    .fi-label { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:#4a5568; display:block; margin-bottom:5px; }

    /* ── THOUGHT CARD ── */
    .thought-card { background:#0a0c12; border:1px solid #1a2235; border-radius:8px; padding:16px; }
    .thought-card:hover { border-color:#2a3a55; }
    .thought-text { font-size:12px; line-height:1.7; color:#94a3b8; }
    .thought-text.expanded { color:var(--text); }

    /* ── THUMBNAIL ── */
    .thumb { width:48px; height:36px; object-fit:cover; border-radius:4px; cursor:pointer; border:1px solid #1a2235; transition:border-color 0.15s; }
    .thumb:hover { border-color:var(--back); }

    /* ── SCROLLBAR ── */
    ::-webkit-scrollbar { width:5px; }
    ::-webkit-scrollbar-track { background:var(--bg); }
    ::-webkit-scrollbar-thumb { background:#1a2235; border-radius:3px; }

    /* ── SECTION CARD ── */
    .card { background:#0f1117; border:1px solid #1a2235; border-radius:10px; }