/* ============================================================
   EduDrill Design System
   Plus Jakarta Sans · Responsive · Dark/Light · Premium SaaS
   ============================================================ */

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  /* Spacing */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Typography */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --mono: 'Fira Code', 'Courier New', monospace;
  --text-xs:   0.7rem;    /* 11.2px */
  --text-sm:   0.8125rem; /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-lg:   1.0625rem; /* 17px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.25;
  --leading-snug:  1.4;
  --leading-normal: 1.6;

  /* Border radius */
  --r-sm: 6px;  --r-md: 10px; --r-lg: 14px;
  --r-xl: 20px; --r-2xl: 28px; --r-full: 9999px;

  /* Transitions */
  --ease: cubic-bezier(.16,1,.3,1);
  --t-fast: 120ms; --t-base: 200ms; --t-slow: 350ms;

  /* Layout */
  --topbar-h: 60px;
  --sidebar-w: 232px;

  /* Colors — Light */
  --primary:       #5B6CF9;
  --primary-hover: #4757E8;
  --primary-light: #EEF0FE;
  --primary-mid:   rgba(91,108,249,.15);

  --bg:       #F5F6FA;
  --bg-2:     #ECEEF5;
  --surface:  #FFFFFF;
  --surface-2:#F8F9FC;
  --surface-3:#F1F3FA;

  --border:   #E5E7EF;
  --border-2: #D0D4E4;

  --text-1:   #0F1117;
  --text-2:   #4B5368;
  --text-3:   #9199AE;
  --text-4:   #C2C8D8;

  --success:      #16A34A;
  --success-light:#DCFCE7;
  --warning:      #D97706;
  --warning-light:#FEF3C7;
  --danger:       #DC2626;
  --danger-light: #FEE2E2;

  --shadow-xs: 0 1px 2px rgba(15,17,23,.04);
  --shadow-sm: 0 1px 4px rgba(15,17,23,.06), 0 2px 8px rgba(15,17,23,.04);
  --shadow-md: 0 4px 16px rgba(15,17,23,.08), 0 1px 4px rgba(15,17,23,.04);
  --shadow-lg: 0 8px 32px rgba(15,17,23,.12), 0 2px 8px rgba(15,17,23,.06);
  --shadow-xl: 0 20px 60px rgba(15,17,23,.18), 0 4px 16px rgba(15,17,23,.08);
}

[data-theme="dark"] {
  --primary:       #6B7DFA;
  --primary-hover: #5B6CF9;
  --primary-light: #1A1E4A;
  --primary-mid:   rgba(107,125,250,.18);

  --bg:       #0C0E14;
  --bg-2:     #10121A;
  --surface:  #161924;
  --surface-2:#1C2030;
  --surface-3:#222638;

  --border:   #272B3E;
  --border-2: #323754;

  --text-1:   #F0F2FA;
  --text-2:   #9199AE;
  --text-3:   #565E7A;
  --text-4:   #363B52;

  --success:      #22C55E;
  --success-light:#0A2118;
  --warning:      #F59E0B;
  --warning-light:#1C1504;
  --danger:       #EF4444;
  --danger-light: #1C0808;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
  --shadow-md: 0 4px 16px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --shadow-xl: 0 20px 60px rgba(0,0,0,.7), 0 4px 16px rgba(0,0,0,.5);
}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family: var(--font);
  font-size: var(--text-base);
  background: var(--bg);
  color: var(--text-1);
  line-height: var(--leading-normal);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background var(--t-base), color var(--t-base);
}
a { color: var(--primary); text-decoration: none; }
img { max-width:100%; display:block; }
ul,ol { list-style:none; }
button { cursor:pointer; font-family:inherit; }
input,textarea,select { font-family:inherit; }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:var(--r-full); }

/* ── Typography ──────────────────────────────────────────── */
h1 { font-size:var(--text-2xl); font-weight:var(--weight-bold); line-height:var(--leading-tight); }
h2 { font-size:var(--text-xl);  font-weight:var(--weight-semibold); line-height:var(--leading-snug); }
h3 { font-size:var(--text-lg);  font-weight:var(--weight-semibold); }
h4 { font-size:var(--text-base);font-weight:var(--weight-semibold); color:var(--text-2); }
p  { color:var(--text-2); }
.text-xs  { font-size:var(--text-xs); }
.text-sm  { font-size:var(--text-sm); }
.text-muted { color:var(--text-3); }

/* ── Animations ──────────────────────────────────────────── */
@keyframes fadeUp    { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn    { from { opacity:0; } to { opacity:1; } }
@keyframes slideDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@keyframes pop       { 0%{transform:scale(.94)} 60%{transform:scale(1.04)} 100%{transform:scale(1)} }
@keyframes pulse     { 0%,100%{opacity:1} 50%{opacity:.45} }
@keyframes spin      { to{transform:rotate(360deg)} }
@keyframes shimmer   { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes timerPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes correctBounce { 0%{transform:scale(.8) rotate(-6deg)} 50%{transform:scale(1.1) rotate(3deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes streakGlow { 0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.4)} 50%{box-shadow:0 0 0 8px rgba(245,158,11,0)} }

.animate-fade-up    { animation: fadeUp var(--t-slow) var(--ease); }
.animate-fade-in    { animation: fadeIn var(--t-base) var(--ease); }
.animate-pop        { animation: pop .3s var(--ease); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding: .5rem 1rem;
  font-size:var(--text-sm); font-weight:var(--weight-semibold);
  border-radius:var(--r-md); border:1.5px solid transparent;
  transition: all var(--t-fast) var(--ease);
  line-height:1; white-space:nowrap; user-select:none;
  position:relative; overflow:hidden;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,0); transition:background var(--t-fast);
}
.btn:hover::after  { background:rgba(255,255,255,.08); }
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.4; pointer-events:none; }

.btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 1px 3px rgba(91,108,249,.3); }
.btn-primary:hover { background:var(--primary-hover); border-color:var(--primary-hover); box-shadow:0 4px 12px rgba(91,108,249,.4); }

.btn-ghost   { background:transparent; color:var(--text-2); border-color:var(--border); }
.btn-ghost:hover { background:var(--surface-3); color:var(--text-1); }

.btn-surface { background:var(--surface); color:var(--text-1); border-color:var(--border); box-shadow:var(--shadow-xs); }
.btn-surface:hover { background:var(--surface-2); box-shadow:var(--shadow-sm); }

.btn-danger  { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn-danger:hover { opacity:.88; }

.btn-success { background:var(--success); color:#fff; border-color:var(--success); }

.btn-xs  { padding:.3rem .6rem;  font-size:var(--text-xs);  border-radius:var(--r-sm); }
.btn-sm  { padding:.38rem .75rem; font-size:var(--text-xs); border-radius:var(--r-sm); }
.btn-lg  { padding:.7rem 1.5rem; font-size:var(--text-base); border-radius:var(--r-lg); }
.btn-xl  { padding:.9rem 2rem;   font-size:var(--text-lg);   border-radius:var(--r-lg); }
.btn-full { width:100%; }
.btn-icon { padding:.5rem; border-radius:var(--r-md); }

/* ── Form elements ───────────────────────────────────────── */
.form-input, .form-select, .form-textarea {
  width:100%; padding:.55rem .875rem;
  font-family:var(--font); font-size:var(--text-sm);
  color:var(--text-1); background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  outline:none; appearance:none;
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--text-4); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-mid);
  background:var(--surface);
}
.form-textarea { resize:vertical; min-height:88px; line-height:var(--leading-normal); }
.form-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239199AE' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center;
  padding-right:2.25rem; cursor:pointer;
}

.form-group { display:flex; flex-direction:column; gap:var(--sp-1); margin-bottom:var(--sp-4); }
.form-group:last-child { margin-bottom:0; }
.form-label {
  font-size:var(--text-xs); font-weight:var(--weight-semibold);
  color:var(--text-2); letter-spacing:.04em; text-transform:uppercase;
}
.form-hint { font-size:var(--text-xs); color:var(--text-3); margin-top:2px; }
.form-row { display:flex; gap:var(--sp-3); align-items:flex-end; flex-wrap:wrap; }
.form-row .form-group { margin-bottom:0; }
.flex-1 { flex:1; min-width:0; }

.field-err {
  font-size:var(--text-xs); color:var(--danger);
  padding:.4rem .7rem; background:var(--danger-light);
  border-radius:var(--r-sm); margin-top:var(--sp-2);
}
.hidden { display:none !important; }

/* ── Checkbox / Radio ────────────────────────────────────── */
.check-label {
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--text-sm); font-weight:var(--weight-medium);
  color:var(--text-2); cursor:pointer;
  padding:.35rem .5rem; border-radius:var(--r-sm);
  transition:background var(--t-fast);
}
.check-label:hover { background:var(--surface-3); }
.check-label input { width:16px; height:16px; accent-color:var(--primary); flex-shrink:0; }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:var(--r-full);
  font-size:var(--text-xs); font-weight:var(--weight-bold);
  letter-spacing:.03em; white-space:nowrap;
}
.badge-primary { background:var(--primary-light); color:var(--primary); }
.badge-success { background:var(--success-light); color:var(--success); }
.badge-warning { background:var(--warning-light); color:var(--warning); }
.badge-danger  { background:var(--danger-light);  color:var(--danger); }
.badge-neutral { background:var(--surface-3); color:var(--text-2); }

/* ── Avatars ─────────────────────────────────────────────── */
.avatar {
  border-radius:var(--r-full); background:var(--primary-light);
  background-size:cover; background-position:center;
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-weight:var(--weight-bold); color:var(--primary);
}
.avatar-sm  { width:32px;  height:32px;  font-size:var(--text-xs); }
.avatar-md  { width:44px;  height:44px;  font-size:var(--text-sm); }
.avatar-lg  { width:56px;  height:56px;  font-size:var(--text-base); }
.avatar-xl  { width:72px;  height:72px;  font-size:var(--text-lg); }
.avatar-2xl { width:96px;  height:96px;  font-size:var(--text-2xl); }

/* ── Divider ─────────────────────────────────────────────── */
.divider { height:1px; background:var(--border); margin:var(--sp-4) 0; }

/* ── Skeleton ────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-md);
}
.skeleton-text { height:14px; border-radius:var(--r-full); }
.skeleton-h { height:20px; border-radius:var(--r-full); }

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:var(--sp-6); left:50%; transform:translateX(-50%);
  background:var(--text-1); color:var(--surface);
  padding:.55rem 1.25rem; border-radius:var(--r-xl);
  font-size:var(--text-sm); font-weight:var(--weight-medium);
  box-shadow:var(--shadow-xl); z-index:2000;
  animation:fadeUp .25s var(--ease);
  pointer-events:none; max-width:90vw; text-align:center;
  white-space:nowrap;
}

/* ── Theme toggle ────────────────────────────────────────── */
.theme-btn {
  width:36px; height:36px; border-radius:var(--r-full);
  background:var(--surface-2); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-2); transition:all var(--t-fast); cursor:pointer;
}
.theme-btn:hover { background:var(--surface-3); color:var(--text-1); }
[data-theme="dark"]  .icon-sun  { display:block; }
[data-theme="dark"]  .icon-moon { display:none; }
.icon-sun  { display:none; }
.icon-moon { display:block; }

/* ── Modals ──────────────────────────────────────────────── */
.modal {
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:flex-end; justify-content:center;
  padding:0;
}
@media(min-width:640px) {
  .modal { align-items:center; padding:var(--sp-4); }
}
.modal-backdrop {
  position:absolute; inset:0;
  background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
}
.modal-box {
  position:relative; z-index:1;
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:var(--sp-6); width:100%;
  max-height:92vh; overflow-y:auto;
  box-shadow:var(--shadow-xl);
  animation:slideDown .25s var(--ease);
}
@media(min-width:640px) {
  .modal-box { border-radius:var(--r-xl); max-width:520px; }
  .modal-box.modal-wide { max-width:720px; }
}
.modal-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:var(--sp-5); gap:var(--sp-3); }
.modal-header h3 { font-size:var(--text-lg); font-weight:var(--weight-bold); }
.modal-close { color:var(--text-3); padding:var(--sp-1); border-radius:var(--r-sm); transition:all var(--t-fast); background:transparent; border:none; }
.modal-close:hover { background:var(--surface-3); color:var(--text-1); }
.modal-footer { display:flex; justify-content:flex-end; gap:var(--sp-2); margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1.5px solid var(--border); }

/* ═══════════════════════════════════════════════
   AUTH PAGE
═══════════════════════════════════════════════ */
.auth-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:var(--sp-5) var(--sp-4);
  background:var(--bg);
}
.auth-card {
  width:100%; max-width:420px;
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-2xl); padding:var(--sp-8);
  box-shadow:var(--shadow-lg);
}
.auth-logo {
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--text-lg); font-weight:var(--weight-bold);
  margin-bottom:var(--sp-8);
}
.auth-logo svg { flex-shrink:0; }

.auth-step { display:none; }
.auth-step.active { display:block; animation:fadeUp .25s var(--ease); }

.auth-title { font-size:var(--text-2xl); font-weight:var(--weight-bold); margin-bottom:var(--sp-1); }
.auth-sub {
  font-size:var(--text-sm); color:var(--text-3); margin-bottom:var(--sp-6);
}
.auth-notice {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-full);
  background:var(--primary-light); color:var(--primary);
  font-size:var(--text-xs); font-weight:var(--weight-semibold);
  margin-bottom:var(--sp-5);
}

/* Returning user header */
.returning-wrap {
  display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-6);
  padding:var(--sp-4); background:var(--surface-2); border-radius:var(--r-lg);
}
.returning-name { font-weight:var(--weight-semibold); font-size:var(--text-lg); }
.returning-handle { font-size:var(--text-sm); color:var(--text-3); }

/* Avatar picker */
.avatar-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--sp-2);
  margin-bottom:var(--sp-5);
}
.avatar-pick-label {
  position:relative; cursor:pointer; border-radius:var(--r-lg);
  transition:transform var(--t-base) var(--ease);
}
.avatar-pick-label input { position:absolute; opacity:0; width:0; height:0; }
.avatar-pick-img {
  width:100%; aspect-ratio:1; object-fit:cover;
  border-radius:var(--r-lg);
  border:2.5px solid var(--border);
  transition:all .2s var(--ease);
  background:var(--surface-2);
  display:block;
}
.avatar-pick-label:hover .avatar-pick-img { border-color:var(--primary); transform:scale(1.04); }
.avatar-pick-label input:checked + .avatar-pick-img {
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-mid), 0 4px 12px rgba(91,108,249,.3);
  transform:scale(1.08);
}
.avatar-pick-check {
  position:absolute; top:-5px; right:-5px;
  width:18px; height:18px; border-radius:var(--r-full);
  background:var(--primary); color:#fff;
  display:none; align-items:center; justify-content:center;
  font-size:10px; font-weight:700;
  box-shadow:0 2px 4px rgba(91,108,249,.4);
}
.avatar-pick-label input:checked ~ .avatar-pick-check { display:flex; }
.avatar-pick-label:hover { transform:scale(1.02); }

/* ═══════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════ */
.topbar {
  position:fixed; top:0; left:0; right:0; height:var(--topbar-h);
  background:var(--surface); border-bottom:1.5px solid var(--border);
  z-index:100; display:flex; align-items:center;
}
.topbar-inner {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--sp-6); width:100%; gap:var(--sp-4);
}
.topbar-brand {
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--text-base); font-weight:var(--weight-bold); color:var(--text-1);
  text-decoration:none; flex-shrink:0;
}
.topbar-right { display:flex; align-items:center; gap:var(--sp-2); }
.topbar-center { flex:1; text-align:center; font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text-2); }

/* ═══════════════════════════════════════════════
   STUDENT DASHBOARD
═══════════════════════════════════════════════ */
.dash-layout { padding-top:var(--topbar-h); }

/* Profile banner */
.profile-banner {
  background:var(--surface); border-bottom:1.5px solid var(--border);
  padding:var(--sp-6) var(--sp-6) 0;
}
.profile-banner-inner { max-width:800px; margin:0 auto; }
.profile-top { display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-5); }
.profile-name { font-size:var(--text-xl); font-weight:var(--weight-bold); }
.profile-handle { font-size:var(--text-sm); color:var(--text-3); margin-top:2px; }

/* Stats row */
.stats-row { display:flex; gap:var(--sp-5); margin-bottom:var(--sp-5); flex-wrap:wrap; }
.stat-item { display:flex; flex-direction:column; }
.stat-value { font-size:var(--text-xl); font-weight:var(--weight-bold); color:var(--text-1); }
.stat-label { font-size:var(--text-xs); color:var(--text-3); font-weight:var(--weight-medium); margin-top:1px; }

/* Progress bars */
.progress-bars { display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-5); }
.progress-row { display:flex; align-items:center; gap:var(--sp-3); }
.progress-name { font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--text-2); width:42px; flex-shrink:0; }
.progress-track { flex:1; height:6px; background:var(--surface-3); border-radius:var(--r-full); overflow:hidden; }
.progress-fill  { height:100%; border-radius:var(--r-full); transition:width 1s var(--ease); }
.progress-fill-primary { background:var(--primary); }
.progress-fill-success { background:var(--success); }
.progress-pct { font-size:var(--text-xs); font-weight:var(--weight-bold); color:var(--text-2); width:28px; text-align:right; }

/* Heatmap */
.heatmap-section { padding:0 var(--sp-6) var(--sp-4); }
.heatmap-section-inner { max-width:800px; margin:0 auto; }
.heatmap-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); }
.heatmap-title { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text-2); }
.streak-badge {
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-1) var(--sp-3); border-radius:var(--r-full);
  background:var(--warning-light); color:var(--warning);
  font-size:var(--text-xs); font-weight:var(--weight-bold);
}
.streak-badge.active { animation:streakGlow 2s infinite; }
.heatmap-grid {
  display:grid; grid-template-columns:repeat(12, 1fr); gap:3px;
  overflow-x:auto;
}
.heatmap-week { display:flex; flex-direction:column; gap:3px; }
.heatmap-cell {
  width:100%; aspect-ratio:1; border-radius:3px;
  background:var(--surface-3); cursor:pointer;
  transition:transform var(--t-fast), box-shadow var(--t-fast);
  min-width:10px; min-height:10px;
}
.heatmap-cell:hover { transform:scale(1.3); box-shadow:0 2px 6px rgba(0,0,0,.2); }
.heatmap-cell[data-level="1"] { background:var(--primary-light); }
.heatmap-cell[data-level="2"] { background:rgba(91,108,249,.4); }
.heatmap-cell[data-level="3"] { background:rgba(91,108,249,.7); }
.heatmap-cell[data-level="4"] { background:var(--primary); }
.heatmap-months { display:flex; gap:3px; margin-top:var(--sp-1); }
.heatmap-month-label { font-size:9px; color:var(--text-3); flex:1; }

/* Main content */
.dash-content { max-width:800px; margin:0 auto; padding:var(--sp-6); }

/* Tabs */
.tab-bar {
  display:flex; gap:2px; background:var(--surface-2); border:1.5px solid var(--border);
  border-radius:var(--r-lg); padding:3px; margin-bottom:var(--sp-5);
}
.tab-btn {
  flex:1; padding:.55rem var(--sp-3); border-radius:var(--r-md);
  border:none; background:transparent;
  font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text-3);
  transition:all var(--t-fast); display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
}
.tab-btn .tab-count {
  font-size:var(--text-xs); padding:1px 6px; border-radius:var(--r-full);
  background:var(--surface-3); color:var(--text-3);
  transition:all var(--t-fast);
}
.tab-btn.active {
  background:var(--surface); color:var(--text-1);
  box-shadow:var(--shadow-sm);
}
.tab-btn.active .tab-count { background:var(--primary-light); color:var(--primary); }
.tab-panel { display:none; }
.tab-panel.active { display:block; animation:fadeUp .2s var(--ease); }

/* Subtabs */
.subtab-bar { display:flex; gap:0; border-bottom:1.5px solid var(--border); margin-bottom:var(--sp-4); }
.subtab-btn {
  padding:.5rem var(--sp-4); border:none; background:transparent;
  font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text-3);
  border-bottom:2.5px solid transparent; margin-bottom:-1.5px;
  transition:all var(--t-fast); cursor:pointer;
}
.subtab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }
.subtab-panel { display:none; }
.subtab-panel.active { display:block; animation:fadeUp .2s var(--ease); }

/* Week group */
.week-group { margin-bottom:var(--sp-6); }
.week-label {
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--text-xs); font-weight:var(--weight-bold);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:var(--sp-3);
}
.week-label::after { content:''; flex:1; height:1px; background:var(--border); }
.week-label.overdue { color:var(--danger); }
.week-label.current { color:var(--primary); }

/* Item cards — PENDING (prominent, actionable) */
.item-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-lg); padding:var(--sp-4) var(--sp-5);
  display:flex; align-items:center; gap:var(--sp-4);
  transition:all var(--t-fast); margin-bottom:var(--sp-2);
  box-shadow:var(--shadow-xs);
}
.item-card:hover { border-color:var(--primary); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.item-card.pending-card { border-left:3px solid var(--primary); }
.item-card.overdue-card { border-left:3px solid var(--danger); }

.item-card-icon {
  width:40px; height:40px; border-radius:var(--r-md); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.item-card-icon.drill-icon { background:var(--warning-light); }
.item-card-icon.test-icon  { background:var(--primary-light); }

.item-card-body { flex:1; min-width:0; }
.item-card-title { font-weight:var(--weight-semibold); font-size:var(--text-base); margin-bottom:2px; }
.item-card-meta  { font-size:var(--text-xs); color:var(--text-3); display:flex; align-items:center; gap:var(--sp-2); }

/* Done cards — muted, compact */
.done-card {
  background:var(--surface-2); border:1.5px solid var(--border);
  border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4);
  display:flex; align-items:center; gap:var(--sp-3);
  margin-bottom:var(--sp-1);
  opacity:.75; transition:opacity var(--t-fast);
}
.done-card:hover { opacity:1; }
.done-card-title { font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text-2); flex:1; }
.done-score { font-size:var(--text-xs); font-weight:var(--weight-bold); padding:2px 8px; border-radius:var(--r-full); background:var(--success-light); color:var(--success); }

.empty-state { text-align:center; padding:var(--sp-12) var(--sp-6); color:var(--text-3); }
.empty-state svg { margin:0 auto var(--sp-3); opacity:.3; }
.empty-state p { font-size:var(--text-sm); }

/* ═══════════════════════════════════════════════
   DRILL PAGE — ENGAGING & CLEAN
═══════════════════════════════════════════════ */
.drill-page {
  min-height:100vh; background:var(--bg);
  display:flex; flex-direction:column;
}
.drill-progress-track {
  position:fixed; top:0; left:0; right:0; height:3px;
  background:var(--border); z-index:200;
}
.drill-progress-fill {
  height:100%; background:var(--primary);
  transition:width .5s var(--ease); border-radius:0 var(--r-full) var(--r-full) 0;
}

.drill-screen { display:none; flex:1; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:var(--sp-8) var(--sp-4); }
.drill-screen.active { display:flex; animation:fadeUp .3s var(--ease); }

.drill-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-2xl); padding:var(--sp-8);
  width:100%; max-width:560px; box-shadow:var(--shadow-lg);
}

/* Instructions screen */
.instr-header { text-align:center; margin-bottom:var(--sp-6); }
.instr-icon { font-size:3rem; margin-bottom:var(--sp-3); display:block; }
.instr-title { font-size:var(--text-2xl); font-weight:var(--weight-bold); margin-bottom:var(--sp-2); }
.instr-desc { color:var(--text-3); font-size:var(--text-sm); }
.instr-rules { display:flex; flex-direction:column; gap:var(--sp-3); margin:var(--sp-6) 0; }
.instr-rule {
  display:flex; align-items:flex-start; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); background:var(--surface-2);
  border-radius:var(--r-lg); font-size:var(--text-sm); color:var(--text-2);
}
.instr-num {
  width:24px; height:24px; border-radius:var(--r-full);
  background:var(--primary-light); color:var(--primary);
  font-size:var(--text-xs); font-weight:var(--weight-bold);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
}

/* Question header */
.drill-header {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:560px; margin-bottom:var(--sp-4); padding:0 var(--sp-1);
}
.q-counter-pill {
  background:var(--surface); border:1.5px solid var(--border);
  padding:.3rem .75rem; border-radius:var(--r-full);
  font-size:var(--text-xs); font-weight:var(--weight-bold); color:var(--text-2);
  box-shadow:var(--shadow-xs);
}

/* Timer ring */
.timer-ring { position:relative; display:flex; align-items:center; justify-content:center; }
.timer-ring svg { transform:rotate(-90deg); }
#timer-val {
  position:absolute;
  font-size:var(--text-sm); font-weight:var(--weight-bold); color:var(--text-1);
}
.timer-ring.urgent { animation:timerPulse .8s ease-in-out infinite; }
.timer-ring.urgent #timer-val { color:var(--danger); }

/* Question card */
.question-card { }
.q-title { font-size:var(--text-lg); font-weight:var(--weight-semibold); margin-bottom:var(--sp-2); line-height:var(--leading-snug); }
.q-instructions { font-size:var(--text-sm); color:var(--text-3); margin-bottom:var(--sp-5); }

/* Options */
.q-options { display:flex; flex-direction:column; gap:var(--sp-2); margin-top:var(--sp-4); }
.q-option {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-4); border-radius:var(--r-lg);
  border:1.5px solid var(--border); background:var(--surface-2);
  cursor:pointer; font-size:var(--text-sm); font-weight:var(--weight-medium);
  transition:all var(--t-fast); text-align:left; width:100%;
}
.q-option:hover:not(:disabled) { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }
.q-option.selected { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }
.q-option.correct {
  border-color:var(--success); background:var(--success-light); color:var(--success);
  animation:pop .3s var(--ease);
}
.q-option.wrong { border-color:var(--danger); background:var(--danger-light); color:var(--danger); }
.q-option:disabled { pointer-events:none; }
.q-option-letter {
  width:28px; height:28px; border-radius:var(--r-md); flex-shrink:0;
  background:var(--surface); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--text-xs); font-weight:var(--weight-bold); color:var(--text-3);
  transition:all var(--t-fast);
}
.q-option.selected .q-option-letter { background:var(--primary); border-color:var(--primary); color:#fff; }
.q-option.correct .q-option-letter  { background:var(--success); border-color:var(--success); color:#fff; }
.q-option.wrong .q-option-letter    { background:var(--danger);  border-color:var(--danger);  color:#fff; }

/* Feedback */
.feedback-card { text-align:center; }
.feedback-icon-wrap {
  width:72px; height:72px; border-radius:var(--r-full); margin:0 auto var(--sp-4);
  display:flex; align-items:center; justify-content:center; font-size:2rem;
}
.feedback-icon-wrap.correct { background:var(--success-light); animation:correctBounce .4s var(--ease); }
.feedback-icon-wrap.wrong   { background:var(--danger-light); }
.feedback-icon-wrap.timeout { background:var(--warning-light); }
.feedback-title { font-size:var(--text-xl); font-weight:var(--weight-bold); margin-bottom:var(--sp-2); }
.feedback-answer-box {
  background:var(--surface-2); border-radius:var(--r-lg); padding:var(--sp-4) var(--sp-5);
  margin:var(--sp-4) 0; font-size:var(--text-sm); text-align:left; color:var(--text-2);
}
.feedback-answer-box strong { color:var(--text-1); }

/* Results */
.results-card { text-align:center; }
.score-ring-wrap { position:relative; display:inline-flex; margin-bottom:var(--sp-5); }
.score-ring-wrap svg { transform:rotate(-90deg); }
.score-text {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.score-num   { font-size:var(--text-3xl); font-weight:var(--weight-bold); }
.score-denom { font-size:var(--text-sm); color:var(--text-3); }
.results-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin:var(--sp-5) 0; }
.results-stat { background:var(--surface-2); border-radius:var(--r-lg); padding:var(--sp-4); }
.results-stat-val   { font-size:var(--text-xl); font-weight:var(--weight-bold); color:var(--text-1); }
.results-stat-label { font-size:var(--text-xs); color:var(--text-3); margin-top:2px; }

/* ═══════════════════════════════════════════════
   TEST PAGE
═══════════════════════════════════════════════ */
.test-page { padding-top:var(--topbar-h); }
.test-main { max-width:720px; margin:0 auto; padding:var(--sp-6); }
.test-meta-bar {
  background:var(--primary-light); border-radius:var(--r-lg);
  padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-5);
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--primary);
}
.save-status { font-size:var(--text-xs); color:var(--text-3); }

/* Question blocks */
.question-block {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-xl); padding:var(--sp-6);
  margin-bottom:var(--sp-4); box-shadow:var(--shadow-xs);
}
.question-block:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-mid); }
.question-num { font-size:var(--text-xs); font-weight:var(--weight-bold); color:var(--text-3); letter-spacing:.06em; text-transform:uppercase; margin-bottom:var(--sp-2); }
.question-title { font-size:var(--text-lg); font-weight:var(--weight-semibold); margin-bottom:var(--sp-2); line-height:var(--leading-snug); }
.question-instr { font-size:var(--text-sm); color:var(--text-3); margin-bottom:var(--sp-4); }

/* Drag-drop */
.drag-option {
  display:inline-flex; align-items:center;
  padding:.35rem .75rem; border-radius:var(--r-md);
  background:var(--surface-2); border:1.5px solid var(--border);
  font-size:var(--text-sm); cursor:grab; margin:3px;
  transition:all var(--t-fast); user-select:none;
}
.drag-option:hover { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }
.drag-option.dragging { opacity:.4; cursor:grabbing; transform:scale(.95); }
.drag-pool { min-height:44px; display:flex; flex-wrap:wrap; padding:var(--sp-2); background:var(--surface-2); border-radius:var(--r-lg); border:1.5px dashed var(--border); margin-bottom:var(--sp-4); }
.drop-zone { min-height:40px; border-radius:var(--r-md); border:1.5px dashed var(--border); padding:var(--sp-2); display:flex; flex-wrap:wrap; gap:4px; align-content:flex-start; transition:all var(--t-fast); }
.drop-zone.drag-over { border-color:var(--primary); background:var(--primary-light); }

/* Table question */
.table-q table { width:100%; border-collapse:collapse; }
.table-q th { background:var(--surface-2); font-size:var(--text-sm); font-weight:var(--weight-semibold); padding:var(--sp-3); border:1.5px solid var(--border); text-align:left; }
.table-q td { border:1.5px solid var(--border); padding:var(--sp-2); vertical-align:top; min-height:60px; }

/* Image upload */
.img-upload-zone {
  border:2px dashed var(--border-2); border-radius:var(--r-lg);
  padding:var(--sp-8) var(--sp-6); text-align:center; cursor:pointer;
  transition:all var(--t-fast); color:var(--text-3);
}
.img-upload-zone:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.img-upload-zone.has-image { border-style:solid; border-color:var(--success); padding:var(--sp-3); }
.img-thumb { max-height:180px; border-radius:var(--r-lg); margin:0 auto; }

/* Test footer */
.test-footer { padding:var(--sp-6) 0 var(--sp-12); border-top:1.5px solid var(--border); }

/* ═══════════════════════════════════════════════
   ADMIN LAYOUT
═══════════════════════════════════════════════ */
.admin-layout { display:flex; min-height:100vh; }

/* Sidebar */
.admin-sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--surface); border-right:1.5px solid var(--border);
  position:fixed; top:0; left:0; bottom:0; z-index:100;
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform var(--t-base) var(--ease);
}
.sidebar-brand {
  display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-5) var(--sp-4);
  font-size:var(--text-base); font-weight:var(--weight-bold); color:var(--text-1);
  border-bottom:1.5px solid var(--border); flex-shrink:0;
}
.sidebar-nav { flex:1; padding:var(--sp-3) var(--sp-2); display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.sidebar-item {
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3); border-radius:var(--r-lg);
  font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text-2);
  background:transparent; border:none; cursor:pointer; text-align:left; width:100%;
  transition:all var(--t-fast);
}
.sidebar-item:hover { background:var(--surface-2); color:var(--text-1); }
.sidebar-item.active { background:var(--primary-light); color:var(--primary); }
.sidebar-item svg { flex-shrink:0; opacity:.7; }
.sidebar-item.active svg { opacity:1; }
.sidebar-divider { height:1px; background:var(--border); margin:var(--sp-2) var(--sp-2); }
.sidebar-footer { padding:var(--sp-4); border-top:1.5px solid var(--border); display:flex; align-items:center; gap:var(--sp-2); flex-shrink:0; }

/* Hamburger for mobile */
.sidebar-toggle { display:none; }

/* Admin main */
.admin-main {
  margin-left:var(--sidebar-w); flex:1; min-width:0;
  padding:var(--sp-8); background:var(--bg);
}
.admin-tab { display:none; }
.admin-tab.active { display:block; animation:fadeUp .2s var(--ease); }

/* Admin top row */
.admin-tab-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--sp-6); gap:var(--sp-4); flex-wrap:wrap;
}
.admin-tab-header h2 { font-size:var(--text-2xl); font-weight:var(--weight-bold); }

/* Cards */
.admin-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-xl); padding:var(--sp-5);
  margin-bottom:var(--sp-3); box-shadow:var(--shadow-xs);
  transition:box-shadow var(--t-fast);
}
.admin-card:hover { box-shadow:var(--shadow-sm); }
.admin-card-row { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; }
.admin-card-actions { display:flex; gap:var(--sp-2); flex-shrink:0; align-items:center; }

/* Class info */
.class-banner {
  background:linear-gradient(135deg, var(--primary-light) 0%, var(--surface) 60%);
  border:1.5px solid var(--border); border-radius:var(--r-2xl); padding:var(--sp-6);
  position:relative; overflow:hidden; box-shadow:var(--shadow-sm);
}
.class-banner::before {
  content:''; position:absolute; top:-40px; right:-40px;
  width:180px; height:180px; border-radius:var(--r-full);
  background:var(--primary); opacity:.06;
}
.class-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-top:var(--sp-5); }
.class-stat { background:var(--surface); border-radius:var(--r-lg); padding:var(--sp-4); text-align:center; border:1.5px solid var(--border); }
.class-stat-val { font-size:var(--text-2xl); font-weight:var(--weight-bold); color:var(--primary); }
.class-stat-lbl { font-size:var(--text-xs); color:var(--text-3); margin-top:2px; }

/* Week control global */
.week-control-bar {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-xl); padding:var(--sp-4) var(--sp-5);
  display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap;
  margin-bottom:var(--sp-5); box-shadow:var(--shadow-xs);
}
.week-control-label { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text-2); }
.week-control-bar .form-select { width:auto; min-width:110px; }

/* Students grid */
.students-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:var(--sp-3); }
.student-card {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-xl); padding:var(--sp-4);
  display:flex; align-items:center; gap:var(--sp-3);
  cursor:pointer; transition:all var(--t-fast); box-shadow:var(--shadow-xs);
}
.student-card:hover { border-color:var(--primary); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.student-card-info { flex:1; min-width:0; }
.student-card-name { font-weight:var(--weight-semibold); font-size:var(--text-sm); }
.student-card-handle { font-size:var(--text-xs); color:var(--text-3); }

/* Assigned item list in modal */
.assigned-list { display:flex; flex-direction:column; gap:0; }
.assigned-item {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-3) 0; border-bottom:1px solid var(--border); font-size:var(--text-sm);
}
.assigned-item:last-child { border-bottom:none; }
.assigned-item-info { display:flex; align-items:center; gap:var(--sp-2); flex:1; min-width:0; }
.assigned-item-actions { display:flex; gap:var(--sp-1); flex-shrink:0; }

/* Question builder */
.qb-item {
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--r-lg); padding:var(--sp-4); margin-bottom:var(--sp-3);
  box-shadow:var(--shadow-xs); transition:border-color var(--t-fast);
}
.qb-item:focus-within { border-color:var(--primary); }
.qb-item-header {
  display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-3);
  padding-bottom:var(--sp-3); border-bottom:1px solid var(--border);
}
.qb-drag-handle { color:var(--text-3); cursor:grab; font-size:18px; line-height:1; padding:0 var(--sp-1); }
.qb-type-badge { font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:.04em; }

/* Correct answer panel inside question builder */
.correct-answer-panel {
  margin-top:var(--sp-3); padding:var(--sp-3) var(--sp-4);
  background:var(--success-light); border-radius:var(--r-md);
  border:1px solid var(--success);
}
.correct-answer-panel .panel-label {
  font-size:var(--text-xs); font-weight:var(--weight-bold);
  color:var(--success); letter-spacing:.06em; text-transform:uppercase; margin-bottom:var(--sp-2);
  display:flex; align-items:center; gap:var(--sp-1);
}
.correct-option {
  display:flex; align-items:center; gap:var(--sp-2);
  padding:.3rem .5rem; border-radius:var(--r-sm);
  font-size:var(--text-sm); margin-bottom:2px;
}
.correct-option input { accent-color:var(--success); }

/* Plan week builder */
.pw-row { display:flex; align-items:flex-start; gap:var(--sp-3); margin-bottom:var(--sp-3); padding-bottom:var(--sp-3); border-bottom:1px solid var(--border); }
.pw-row:last-child { border-bottom:none; margin-bottom:0; }
.pw-week-num { font-size:var(--text-xs); font-weight:var(--weight-bold); color:var(--text-2); min-width:52px; padding-top:var(--sp-2); }
.pw-tests-area { flex:1; }
.pw-pills { display:flex; flex-wrap:wrap; gap:var(--sp-1); margin-bottom:var(--sp-2); min-height:28px; }
.pw-pill {
  display:inline-flex; align-items:center; gap:var(--sp-1);
  padding:3px 10px 3px 12px; border-radius:var(--r-full);
  background:var(--primary-light); color:var(--primary);
  font-size:var(--text-xs); font-weight:var(--weight-semibold);
}
.pw-pill-rm { background:none; border:none; color:inherit; cursor:pointer; opacity:.6; font-size:14px; padding:0 2px; line-height:1; }
.pw-pill-rm:hover { opacity:1; }
.pw-add-row { display:flex; gap:var(--sp-2); align-items:center; }
.pw-add-row .form-select { font-size:var(--text-xs); padding:.3rem .5rem; }

/* Responsive Admin */
@media(max-width:768px) {
  .admin-sidebar {
    transform:translateX(-100%);
    box-shadow:var(--shadow-xl);
  }
  .admin-sidebar.open { transform:translateX(0); }
  .sidebar-toggle {
    display:flex; position:fixed; top:14px; left:var(--sp-4); z-index:200;
    background:var(--surface); border:1.5px solid var(--border);
    border-radius:var(--r-md); padding:var(--sp-2); color:var(--text-1);
    cursor:pointer; align-items:center; justify-content:center;
    box-shadow:var(--shadow-sm);
  }
  .admin-main { margin-left:0; padding:var(--sp-4); padding-top:calc(var(--topbar-h) + var(--sp-4)); }
  .students-grid { grid-template-columns:1fr; }
  .class-stats { grid-template-columns:1fr 1fr; }
}

/* Responsive general */
@media(max-width:640px) {
  :root { --topbar-h:54px; }
  .auth-card { padding:var(--sp-5); }
  .drill-card { padding:var(--sp-5); border-radius:var(--r-xl); }
  .modal-box { padding:var(--sp-5); border-radius:var(--r-xl) var(--r-xl) 0 0 !important; }
  .modal-box.modal-wide { max-width:100%; }
  .tab-btn { font-size:var(--text-xs); padding:.45rem var(--sp-2); }
  .profile-banner { padding:var(--sp-4) var(--sp-4) 0; }
  .dash-content { padding:var(--sp-4); }
  .item-card { flex-wrap:wrap; }
  .admin-tab-header { flex-direction:column; align-items:flex-start; }
  h1 { font-size:var(--text-xl); }
}

/* Quill overrides */
.ql-container { font-family:var(--font); font-size:var(--text-sm); border-color:var(--border) !important; border-radius:0 0 var(--r-md) var(--r-md) !important; background:var(--surface); color:var(--text-1); }
.ql-toolbar { border-color:var(--border) !important; border-radius:var(--r-md) var(--r-md) 0 0 !important; background:var(--surface-2); }
.ql-editor { min-height:80px; }
[data-theme="dark"] .ql-toolbar button svg .ql-stroke { stroke:#9199AE; }
[data-theme="dark"] .ql-toolbar button svg .ql-fill  { fill:#9199AE; }