:root {
  --bg:#07070f; --card:#0e0e1c; --hover:#141428;
  --border:#1a1a32; --border-hi:#2a2a52;
  --cyan:#00D4FF; --cyan-dim:rgba(0,212,255,.10);
  --violet:#7B2FBE; --vlt:#a78bfa;
  --magenta:#E91E8C;
  --text:#dde1f0; --muted:#5a5a8a; --faint:#12122a;
  --ok:#22c55e; --err:#ef4444; --warn:#f59e0b;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:'Outfit','Segoe UI',sans-serif;min-height:100vh}
.mono{font-family:'JetBrains Mono','Courier New',monospace}
button{font-family:'Outfit','Segoe UI',sans-serif;cursor:pointer}

/* HEADER */
#hdr{background:rgba(14,14,28,.94);border-bottom:1px solid var(--border);padding:.75rem 1rem;position:sticky;top:0;z-index:50;backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem}
.brand-bar{width:6px;height:24px;background:linear-gradient(to bottom,var(--cyan),var(--violet));border-radius:3px;flex-shrink:0}
.brand-title{font-weight:800;font-size:.95rem;letter-spacing:-.02em}
.brand-sub{color:var(--muted);font-size:.65rem}
#nav{display:flex;gap:.3rem;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
#nav::-webkit-scrollbar{display:none}
.nb{flex-shrink:0;background:transparent;border:1px solid var(--border);color:var(--muted);padding:.3rem .7rem;border-radius:5px;font-size:.72rem;font-weight:600;display:flex;align-items:center;gap:.3rem;transition:all .15s}

/* MAIN */
#main{max-width:680px;margin:0 auto;padding:1rem}
.mod-title{font-weight:700;font-size:1.1rem;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}

/* CARDS */
.card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:.85rem 1rem;margin-bottom:.5rem}

/* TAB TOGGLE */
.tabs{display:flex;gap:.4rem;margin-bottom:1rem}
.tab-btn{background:transparent;border:1px solid var(--border);color:var(--muted);padding:.4rem 1rem;border-radius:4px;font-size:.78rem;font-weight:600;transition:all .15s}

/* SELECTOR CHIPS */
.chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.75rem}
.chip{background:transparent;border:1px solid var(--border);color:var(--muted);padding:.25rem .55rem;border-radius:4px;font-size:.78rem;transition:all .15s}
.chip.mono{font-family:'JetBrains Mono',monospace}

/* VOCAB */
.vocab-item{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:.65rem 1rem;display:grid;grid-template-columns:1fr 1.2fr;gap:.5rem;align-items:center;margin-bottom:.4rem}
@media(max-width:480px){.vocab-item{grid-template-columns:1fr}}

/* CONJ TABLE */
.conj-table{background:var(--card);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:.5rem}
.conj-head{background:rgba(123,47,190,.22);padding:.5rem 1rem;border-bottom:1px solid var(--border);font-weight:600;font-size:.85rem;color:var(--vlt)}
.conj-row{display:flex;justify-content:space-between;align-items:center;padding:.55rem 1rem;border-bottom:1px solid var(--border)}
.conj-row:last-child{border-bottom:none}
.conj-row:nth-child(even){background:var(--faint)}
.conj-pr{color:var(--muted);font-size:.78rem}
.conj-val{font-family:'JetBrains Mono',monospace;font-size:.95rem;font-weight:500}

/* QUIZ */
.quiz-meta{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.72rem;color:var(--muted)}
.prog-wrap{height:2px;background:var(--border);border-radius:2px;margin-bottom:1.25rem}
.prog-fill{height:100%;border-radius:2px;transition:width .3s}
.quiz-q{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:1rem;margin-bottom:1rem}
.quiz-q-text{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.93rem;color:var(--text)}
.quiz-q-hint{color:var(--muted);font-size:.72rem;margin-top:.25rem}
.opt-btn{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:.7rem 1rem;color:var(--text);text-align:left;font-family:'JetBrains Mono',monospace;font-size:.88rem;display:block;width:100%;margin-bottom:.45rem;transition:all .15s}
.opt-btn:not([disabled]):hover{border-color:var(--border-hi)}
.opt-btn.correct{background:rgba(34,197,94,.12)!important;border-color:var(--ok)!important;color:var(--ok)!important}
.opt-btn.wrong{background:rgba(239,68,68,.12)!important;border-color:var(--err)!important;color:var(--err)!important}
.next-btn{background:rgba(0,0,0,0);border:1px solid var(--cyan);color:var(--cyan);padding:.5rem 1.25rem;border-radius:4px;font-size:.85rem;font-weight:600;float:right;transition:all .15s}
.next-btn:hover{background:var(--cyan-dim)}
.quiz-end{text-align:center;padding:2.5rem 1rem}
.quiz-score{font-size:2rem;font-weight:800;margin-bottom:.25rem}
.quiz-pct{color:var(--muted);font-size:.85rem;margin-bottom:1.5rem}
.retry-btn{border:1px solid var(--cyan);color:var(--cyan);background:var(--cyan-dim);padding:.6rem 1.5rem;border-radius:4px;font-size:.85rem;font-weight:600}

/* NOTE BOX */
.note-box{border-radius:6px;padding:.65rem .85rem;margin-bottom:.75rem;font-size:.78rem;line-height:1.5}

/* FOOTER */
#ftr{text-align:center;padding:2rem 1rem 3rem;color:var(--muted);font-size:.65rem;line-height:1.8}

[data-theme="light"] {
  --bg:#f8fafc; --card:#ffffff; --hover:#f1f5f9;
  --border:#e2e8f0; --border-hi:#cbd5e1;
  --cyan:#0284c7; --cyan-dim:rgba(2,132,199,.10);
  --violet:#7e22ce; --vlt:#9333ea;
  --magenta:#db2777;
  --text:#0f172a; --muted:#64748b; --faint:#f1f5f9;
  --ok:#16a34a; --err:#dc2626; --warn:#d97706;
}
input:focus { outline: none; border-color: var(--cyan) !important; }