/* ============================================================
   REV LEARN — design tokens
   ============================================================ */
:root{
  --c-void:#0a0118;
  --c-deep:#170b30;
  --c-panel:#1c0f3a;
  --c-pink:#ff2e97;
  --c-cyan:#05f2f2;
  --c-yellow:#ffd60a;
  --c-purple:#8b5cf6;
  --c-green:#39ff14;
  --c-red:#ff3860;
  --c-ink:#f3e8ff;
  --c-ink-dim:#a892c9;
  --c-ink-faint:#6b5a8e;

  --grad-hero: linear-gradient(90deg, var(--c-pink), var(--c-purple) 45%, var(--c-cyan));
  --grad-panel-border: linear-gradient(135deg, var(--c-pink), var(--c-cyan));

  --font-display:'Press Start 2P', cursive;
  --font-head:'Orbitron', sans-serif;
  --font-body:'Rajdhani', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius: 4px;
  --radius-lg: 10px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --shadow-pink: 0 0 6px rgba(255,46,151,.7), 0 0 22px rgba(255,46,151,.35);
  --shadow-cyan: 0 0 6px rgba(5,242,242,.7), 0 0 22px rgba(5,242,242,.35);
  --shadow-yellow: 0 0 6px rgba(255,214,10,.7), 0 0 22px rgba(255,214,10,.3);
  --z-grid: 0;
  --z-content: 10;
  --z-scan: 50;
  --z-toast: 100;
  --z-modal: 200;
}

@media (prefers-color-scheme: light){ :root{ color-scheme: dark; } }

/* ============================================================
   Reset
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--c-void);
  color:var(--c-ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  position:relative;
  min-height:100vh;
}
h1,h2,h3,h4{ margin:0; font-family:var(--font-head); letter-spacing:.02em; }
p{ margin:0 0 var(--space-3); }
ul,ol{ margin:0; padding:0; }
button{ font-family:inherit; }
a{ color:var(--c-cyan); }
img,svg{ display:block; max-width:100%; }
input,textarea,select{ font-family:var(--font-body); font-size:16px; }

::selection{ background:var(--c-pink); color:var(--c-void); }

:focus-visible{
  outline:2px solid var(--c-cyan);
  outline-offset:2px;
  border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   Ambient background — grid floor + scanlines + vignette
   ============================================================ */
#grid-floor{
  position:fixed; left:0; right:0; bottom:0; height:56vh;
  z-index:var(--z-grid); pointer-events:none; overflow:hidden;
  background:linear-gradient(180deg, transparent 0%, rgba(10,1,24,.2) 60%, var(--c-void) 100%);
}
#grid-floor::before{
  content:""; position:absolute; left:-60%; right:-60%; top:0; bottom:-40%;
  background-image:
    linear-gradient(rgba(255,46,151,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5,242,242,.4) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(220px) rotateX(78deg);
  transform-origin:bottom center;
  animation:gridMove 3.2s linear infinite;
}
@keyframes gridMove{ from{ background-position:0 0, 0 0; } to{ background-position:0 64px, 0 0; } }

#scanlines{
  position:fixed; inset:0; z-index:var(--z-scan); pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  opacity:.35;
  mix-blend-mode:overlay;
}
#vignette{
  position:fixed; inset:0; z-index:var(--z-scan); pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(5,0,15,.65) 100%);
}

/* ============================================================
   Boot screen
   ============================================================ */
.boot-screen{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-4);
}
.boot-logo{
  font-family:var(--font-display); font-size:28px; color:var(--c-ink);
  text-shadow:0 0 8px var(--c-pink), 0 0 24px var(--c-pink);
}
.boot-logo span{ color:var(--c-cyan); text-shadow:0 0 8px var(--c-cyan), 0 0 24px var(--c-cyan); }
.boot-sub{ font-family:var(--font-head); font-size:12px; letter-spacing:.2em; color:var(--c-ink-dim); }
.boot-dots span{ animation:blink 1.2s infinite; opacity:0; }
.boot-dots span:nth-child(2){ animation-delay:.2s; }
.boot-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,100%{opacity:0;} 50%{opacity:1;} }

/* ============================================================
   App shell
   ============================================================ */
#app{ position:relative; z-index:var(--z-content); min-height:100vh; display:flex; flex-direction:column; }

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
  background:rgba(10,1,24,.75);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,46,151,.35);
  position:sticky; top:0; z-index:60;
  flex-wrap:wrap;
}
.brand{ display:flex; flex-direction:column; gap:2px; cursor:pointer; background:none; border:none; padding:0; text-align:left; }
.brand-mark{
  font-family:var(--font-display); font-size:16px; color:var(--c-ink);
  text-shadow:0 0 6px var(--c-pink), 0 0 16px rgba(255,46,151,.6);
}
.brand-mark span{ color:var(--c-cyan); text-shadow:0 0 6px var(--c-cyan), 0 0 16px rgba(5,242,242,.6); }
.brand-sub{ font-family:var(--font-head); font-size:9px; letter-spacing:.18em; color:var(--c-ink-faint); }

.nav-links{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }

main{ flex:1; padding:var(--space-6) var(--space-5) var(--space-7); max-width:1180px; margin:0 auto; width:100%; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  font-family:var(--font-head); font-weight:700; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--c-ink); background:var(--c-deep);
  border:2px solid var(--c-pink); border-radius:var(--radius);
  padding:11px 18px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space:nowrap;
}
.btn:hover{ box-shadow:var(--shadow-pink); transform:translateY(-1px); }
.btn:active{ transform:translateY(1px); box-shadow:none; }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:none; }

.btn-primary{ background:var(--c-pink); border-color:var(--c-pink); color:#170022; }
.btn-primary:hover{ box-shadow:var(--shadow-pink); }

.btn-cyan{ border-color:var(--c-cyan); }
.btn-cyan:hover{ box-shadow:var(--shadow-cyan); }
.btn-cyan.solid{ background:var(--c-cyan); color:#03211f; }

.btn-yellow{ border-color:var(--c-yellow); }
.btn-yellow:hover{ box-shadow:var(--shadow-yellow); }

.btn-ghost{ background:transparent; border-color:var(--c-ink-faint); color:var(--c-ink-dim); }
.btn-ghost:hover{ border-color:var(--c-ink-dim); box-shadow:none; color:var(--c-ink); }

.btn-danger{ border-color:var(--c-red); color:var(--c-red); background:transparent; }
.btn-danger:hover{ box-shadow:0 0 6px rgba(255,56,96,.7), 0 0 20px rgba(255,56,96,.3); }

.btn-sm{ padding:7px 12px; font-size:10px; }
.btn-icon{ padding:9px; }
.btn-block{ width:100%; justify-content:center; }

/* ============================================================
   Panels / cards
   ============================================================ */
.panel{
  background:rgba(23,11,48,.82);
  border:1px solid rgba(139,92,246,.4);
  border-radius:var(--radius-lg);
  padding:var(--space-5);
  position:relative;
}
.panel-glow{ box-shadow:0 0 0 1px rgba(255,46,151,.15), 0 12px 40px rgba(0,0,0,.4); }
.panel-corner{ position:absolute; width:14px; height:14px; border:2px solid var(--c-cyan); opacity:.8; }
.panel-corner.tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.panel-corner.br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

.section-title{
  font-family:var(--font-head); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-cyan); margin-bottom:var(--space-4); display:flex; align-items:center; gap:10px;
}
.section-title::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(5,242,242,.5), transparent); }

.hero-title{
  font-family:var(--font-display); font-size:clamp(22px,5vw,42px); line-height:1.5;
  background:var(--grad-hero); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 30px rgba(255,46,151,.35);
  margin-bottom:var(--space-4);
}

/* ============================================================
   Forms
   ============================================================ */
.field{ margin-bottom:var(--space-4); }
.field label{
  display:block; font-family:var(--font-head); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--c-ink-dim); margin-bottom:6px;
}
.field .hint{ font-size:13px; color:var(--c-ink-faint); margin-top:4px; }
input[type=text],input[type=number],input[type=email],input[type=password],textarea,select{
  width:100%; background:var(--c-void); color:var(--c-ink);
  border:1px solid rgba(139,92,246,.5); border-radius:var(--radius);
  padding:11px 13px; transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,textarea:focus,select:focus{ border-color:var(--c-cyan); box-shadow:0 0 0 3px rgba(5,242,242,.15); outline:none; }
textarea{ resize:vertical; min-height:90px; line-height:1.5; }
select{ cursor:pointer; }
.pill-group{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
.pill{
  padding:9px 15px; border:1px solid var(--c-ink-faint); border-radius:20px;
  cursor:pointer; font-size:14px; font-weight:600; color:var(--c-ink-dim);
  background:transparent; transition:all .15s ease;
}
.pill.active{ border-color:var(--c-pink); color:var(--c-ink); background:rgba(255,46,151,.12); box-shadow:var(--shadow-pink); }
.pill:hover:not(.active){ border-color:var(--c-ink-dim); color:var(--c-ink); }

/* ============================================================
   Dashboard — cartridge shelf
   ============================================================ */
.shelf-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-5); flex-wrap:wrap; gap:var(--space-3); }
.cart-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:var(--space-5); }

.cartridge{
  background:linear-gradient(160deg, #241143, #150a2b);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px 10px 4px 4px;
  padding:var(--space-4);
  cursor:pointer;
  position:relative;
  transition:transform .15s ease, box-shadow .15s ease;
  display:flex; flex-direction:column; gap:var(--space-3);
}
.cartridge::before{
  content:""; position:absolute; top:0; left:14px; right:14px; height:6px;
  background:var(--cart-accent, var(--c-pink)); border-radius:0 0 4px 4px;
  box-shadow:0 0 10px var(--cart-accent, var(--c-pink));
}
.cartridge:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.5), 0 0 0 1px var(--cart-accent, var(--c-pink)); }
.cart-label{
  background:rgba(0,0,0,.35); border:1px dashed rgba(255,255,255,.15); border-radius:6px;
  padding:var(--space-3); flex:1; display:flex; flex-direction:column; gap:6px;
}
.cart-title{ font-family:var(--font-head); font-size:15px; color:var(--c-ink); line-height:1.3; }
.cart-desc{ font-size:14px; color:var(--c-ink-dim); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cart-meta{ display:flex; gap:10px; font-family:var(--font-head); font-size:10px; letter-spacing:.06em; color:var(--c-ink-faint); text-transform:uppercase; }
.cart-progress{ height:6px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.cart-progress > i{ display:block; height:100%; background:linear-gradient(90deg, var(--c-cyan), var(--c-green)); box-shadow:0 0 8px var(--c-green); }
.cart-actions{ display:flex; gap:8px; }

.cartridge.add-new{
  align-items:center; justify-content:center; text-align:center;
  border:2px dashed rgba(5,242,242,.4); background:transparent; min-height:180px;
}
.cartridge.add-new:hover{ border-color:var(--c-cyan); box-shadow:var(--shadow-cyan); }
.add-new-icon{ font-family:var(--font-display); font-size:26px; color:var(--c-cyan); text-shadow:var(--shadow-cyan); margin-bottom:8px; }

.empty-state{ text-align:center; padding:var(--space-7) var(--space-4); color:var(--c-ink-dim); }
.empty-state .es-title{ font-family:var(--font-head); color:var(--c-ink); font-size:16px; margin-bottom:8px; }

/* ============================================================
   Wizard
   ============================================================ */
.wizard{ max-width:680px; margin:0 auto; }
.wizard-steps{ display:flex; justify-content:center; gap:10px; margin-bottom:var(--space-6); }
.wizard-dot{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-size:12px; border:2px solid var(--c-ink-faint); color:var(--c-ink-faint);
}
.wizard-dot.done{ border-color:var(--c-green); color:var(--c-green); box-shadow:0 0 8px rgba(57,255,20,.5); }
.wizard-dot.active{ border-color:var(--c-pink); color:var(--c-ink); box-shadow:var(--shadow-pink); }
.wizard-actions{ display:flex; justify-content:space-between; margin-top:var(--space-5); gap:10px; }

.terminal{
  background:#050109; border:1px solid rgba(5,242,242,.4); border-radius:var(--radius);
  padding:var(--space-5); font-family:'Courier New', monospace; color:var(--c-cyan); font-size:14px;
  min-height:160px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-3);
  text-align:center;
}
.terminal .tline{ opacity:.85; }
.spinner-bar{ width:220px; height:8px; background:rgba(5,242,242,.15); border-radius:4px; overflow:hidden; }
.spinner-bar > i{ display:block; height:100%; width:40%; background:var(--c-cyan); box-shadow:0 0 10px var(--c-cyan); animation:barslide 1.1s ease-in-out infinite; }
@keyframes barslide{ 0%{ margin-left:-40%; } 100%{ margin-left:100%; } }

/* ============================================================
   Editor — split tree / detail
   ============================================================ */
.editor-shell{ display:grid; grid-template-columns:280px 1fr; gap:var(--space-5); align-items:start; }
@media (max-width:860px){
  .editor-shell{ grid-template-columns:1fr; }
  .tree-panel{ position:static; max-height:none; }
}

.tree-panel{ position:sticky; top:88px; max-height:calc(100vh - 110px); overflow:auto; }
.tree-mod{ margin-bottom:var(--space-3); border:1px solid rgba(255,255,255,.06); border-radius:6px; overflow:hidden; }
.tree-mod-head{
  display:flex; align-items:center; gap:8px; padding:10px 12px; cursor:grab;
  background:rgba(139,92,246,.12); border-bottom:1px solid rgba(255,255,255,.06);
}
.tree-mod-head input{ flex:1; background:transparent; border:none; color:var(--c-ink); font-family:var(--font-head); font-size:12px; padding:4px; }
.tree-mod-head input:focus{ box-shadow:none; background:rgba(0,0,0,.3); border-radius:3px; }
.drag-handle{ cursor:grab; color:var(--c-ink-faint); font-size:14px; user-select:none; }
.tree-lessons{ padding:6px; display:flex; flex-direction:column; gap:4px; }
.tree-lesson{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:4px; cursor:pointer;
  font-size:14px; color:var(--c-ink-dim); border:1px solid transparent;
}
.tree-lesson:hover{ background:rgba(255,255,255,.04); }
.tree-lesson.active{ background:rgba(255,46,151,.14); border-color:var(--c-pink); color:var(--c-ink); }
.tree-lesson .status-dot{ width:7px; height:7px; border-radius:50%; background:var(--c-ink-faint); flex-shrink:0; }
.tree-lesson.has-content .status-dot{ background:var(--c-cyan); box-shadow:0 0 5px var(--c-cyan); }
.tree-add-lesson{ margin:4px 6px 8px; }

/* Tabs */
.tabs{ display:flex; gap:6px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:var(--space-4); flex-wrap:wrap; }
.tab{
  padding:10px 16px; font-family:var(--font-head); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--c-ink-faint); background:none; border:none; border-bottom:2px solid transparent; cursor:pointer;
}
.tab.active{ color:var(--c-ink); border-color:var(--c-pink); }
.tab:hover:not(.active){ color:var(--c-ink-dim); }

.ai-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:var(--space-4); }

.objective-row,.list-row{ display:flex; gap:8px; margin-bottom:8px; align-items:flex-start; }
.objective-row input,.list-row input{ flex:1; }

.lesson-content-view{ font-size:16px; line-height:1.7; color:var(--c-ink); }
.lesson-content-view h1,.lesson-content-view h2,.lesson-content-view h3{ font-family:var(--font-head); color:var(--c-cyan); margin:1.2em 0 .5em; }
.lesson-content-view h1:first-child,.lesson-content-view h2:first-child,.lesson-content-view h3:first-child{ margin-top:0; }
.lesson-content-view ul,.lesson-content-view ol{ margin:0 0 1em 1.4em; }
.lesson-content-view li{ margin-bottom:.35em; }
.lesson-content-view p{ margin:0 0 1em; }
.lesson-content-view strong{ color:var(--c-yellow); }
.lesson-content-view code{ background:rgba(0,0,0,.4); padding:2px 6px; border-radius:3px; font-size:.9em; }

/* Question editor */
.question-card{ border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:var(--space-4); margin-bottom:var(--space-4); }
.question-card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.qtype-badge{ font-family:var(--font-head); font-size:10px; letter-spacing:.08em; padding:4px 10px; border-radius:12px; text-transform:uppercase; }
.qtype-badge.mc{ background:rgba(5,242,242,.15); color:var(--c-cyan); }
.qtype-badge.tf{ background:rgba(255,214,10,.15); color:var(--c-yellow); }
.qtype-badge.short{ background:rgba(139,92,246,.2); color:var(--c-purple); }
.mc-option{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.mc-option input[type=radio]{ width:18px; height:18px; accent-color:var(--c-green); flex-shrink:0; }
.mc-option input[type=text]{ flex:1; }

/* ============================================================
   Student mode — level select + stage
   ============================================================ */
.level-select-header{ text-align:center; margin-bottom:var(--space-6); }
.overall-bar{ max-width:420px; margin:var(--space-4) auto 0; }
.overall-bar-track{ height:14px; border-radius:7px; background:var(--c-deep); border:1px solid rgba(255,255,255,.1); overflow:hidden; }
.overall-bar-fill{ height:100%; background:linear-gradient(90deg, var(--c-pink), var(--c-cyan)); box-shadow:0 0 12px var(--c-pink); transition:width .4s ease; }
.overall-bar-label{ font-family:var(--font-head); font-size:11px; color:var(--c-ink-dim); margin-top:6px; letter-spacing:.06em; }

.level-block{ margin-bottom:var(--space-6); }
.level-block-title{ font-family:var(--font-head); font-size:13px; letter-spacing:.1em; color:var(--c-purple); margin-bottom:var(--space-3); text-transform:uppercase; }
.stage-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:var(--space-3); }
.stage-tile{
  background:var(--c-deep); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:var(--space-3);
  cursor:pointer; display:flex; flex-direction:column; gap:8px; transition:all .15s ease; text-align:left;
}
.stage-tile:hover{ border-color:var(--c-cyan); box-shadow:var(--shadow-cyan); transform:translateY(-2px); }
.stage-tile.cleared{ border-color:var(--c-green); }
.stage-tile.cleared .stage-status{ color:var(--c-green); }
.stage-num{ font-family:var(--font-head); font-size:10px; color:var(--c-ink-faint); }
.stage-name{ font-size:15px; font-weight:600; color:var(--c-ink); }
.stage-status{ font-family:var(--font-head); font-size:9px; letter-spacing:.06em; color:var(--c-ink-faint); text-transform:uppercase; }

.stage-view{ max-width:760px; margin:0 auto; }
.stage-nav{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-4); font-family:var(--font-head); font-size:11px; color:var(--c-ink-dim); }
.objectives-box{ background:rgba(139,92,246,.1); border-left:3px solid var(--c-purple); border-radius:0 6px 6px 0; padding:var(--space-4); margin-bottom:var(--space-5); }
.objectives-box .section-title{ color:var(--c-purple); margin-bottom:8px; }
.takeaways-box{ background:rgba(255,214,10,.08); border-left:3px solid var(--c-yellow); border-radius:0 6px 6px 0; padding:var(--space-4); margin:var(--space-5) 0; }
.takeaways-box .section-title{ color:var(--c-yellow); }
.discussion-box{ margin:var(--space-5) 0; }

.quiz-question{ margin-bottom:var(--space-5); }
.quiz-option{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid rgba(255,255,255,.12);
  border-radius:6px; margin-bottom:8px; cursor:pointer; transition:all .15s ease;
}
.quiz-option:hover{ border-color:var(--c-cyan); }
.quiz-option.selected{ border-color:var(--c-pink); background:rgba(255,46,151,.1); }
.quiz-option.correct{ border-color:var(--c-green); background:rgba(57,255,20,.1); }
.quiz-option.incorrect{ border-color:var(--c-red); background:rgba(255,56,96,.1); }
.quiz-score-banner{ text-align:center; padding:var(--space-5); border-radius:var(--radius-lg); margin-bottom:var(--space-5); }
.quiz-score-banner.pass{ background:rgba(57,255,20,.1); border:1px solid var(--c-green); }
.quiz-score-banner.fail{ background:rgba(255,56,96,.08); border:1px solid var(--c-red); }
.quiz-score-num{ font-family:var(--font-display); font-size:26px; margin-bottom:8px; }

/* ============================================================
   Certificate
   ============================================================ */
.cert-wrap{ max-width:820px; margin:0 auto; }
.certificate{
  background:linear-gradient(160deg, #1a0b34, #0d0620);
  border:3px solid var(--c-yellow); border-radius:14px; padding:var(--space-7) var(--space-6);
  text-align:center; position:relative; box-shadow:0 0 40px rgba(255,214,10,.25);
}
.certificate::before{
  content:""; position:absolute; inset:10px; border:1px solid rgba(255,214,10,.4); border-radius:8px; pointer-events:none;
}
.cert-eyebrow{ font-family:var(--font-head); font-size:11px; letter-spacing:.3em; color:var(--c-cyan); margin-bottom:var(--space-4); }
.cert-title{ font-family:var(--font-display); font-size:clamp(18px,3.4vw,26px); color:var(--c-yellow); text-shadow:var(--shadow-yellow); margin-bottom:var(--space-5); line-height:1.6; }
.cert-name{ font-family:var(--font-head); font-size:clamp(20px,4vw,30px); color:var(--c-ink); margin:var(--space-4) 0; border-bottom:2px solid var(--c-pink); display:inline-block; padding-bottom:8px; min-width:280px; }
.cert-course{ font-size:19px; color:var(--c-ink-dim); margin-bottom:var(--space-5); }
.cert-footer{ display:flex; justify-content:space-between; margin-top:var(--space-6); flex-wrap:wrap; gap:var(--space-4); text-align:left; }
.cert-sig{ font-family:var(--font-head); font-size:12px; color:var(--c-ink-dim); }
.cert-sig strong{ display:block; color:var(--c-ink); font-size:14px; margin-bottom:2px; }
.cert-name-input{ max-width:360px; margin:0 auto var(--space-4); }

/* ============================================================
   Settings
   ============================================================ */
.status-row{ display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--c-deep); border-radius:6px; margin-bottom:10px; }
.status-dot-lg{ width:10px; height:10px; border-radius:50%; background:var(--c-ink-faint); flex-shrink:0; }
.status-dot-lg.on{ background:var(--c-green); box-shadow:0 0 8px var(--c-green); }
.status-dot-lg.off{ background:var(--c-red); box-shadow:0 0 8px var(--c-red); }
.status-text{ flex:1; font-size:14px; }
.status-text small{ display:block; color:var(--c-ink-faint); font-size:12px; margin-top:2px; }

/* ============================================================
   Toasts
   ============================================================ */
#toast-root{ position:fixed; bottom:20px; right:20px; z-index:var(--z-toast); display:flex; flex-direction:column; gap:10px; max-width:320px; }
.toast{
  background:var(--c-deep); border:1px solid var(--c-cyan); border-radius:6px; padding:12px 16px;
  font-size:14px; box-shadow:0 8px 24px rgba(0,0,0,.5), var(--shadow-cyan);
  animation:toastIn .2s ease;
}
.toast.error{ border-color:var(--c-red); box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 12px rgba(255,56,96,.4); }
.toast.success{ border-color:var(--c-green); box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 12px rgba(57,255,20,.4); }
@keyframes toastIn{ from{ transform:translateX(30px); opacity:0; } to{ transform:translateX(0); opacity:1; } }

/* ============================================================
   Modal
   ============================================================ */
.modal-backdrop{ position:fixed; inset:0; background:rgba(5,0,15,.75); z-index:var(--z-modal); display:flex; align-items:center; justify-content:center; padding:var(--space-4); }
.modal{ background:var(--c-panel); border:1px solid var(--c-pink); border-radius:var(--radius-lg); padding:var(--space-5); max-width:440px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:var(--space-5); }

/* ============================================================
   Print — certificate
   ============================================================ */
@media print{
  #grid-floor,#scanlines,#vignette,.topbar,.no-print{ display:none !important; }
  body{ background:#fff; color:#111; }
  .certificate{ box-shadow:none; }
  @page{ size:landscape; margin:14mm; }
}

/* ============================================================
   Misc utility
   ============================================================ */
.flex{ display:flex; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.gap-2{ gap:8px; } .gap-3{ gap:12px; } .gap-4{ gap:16px; }
.mt-2{ margin-top:8px; } .mt-3{ margin-top:12px; } .mt-4{ margin-top:16px; } .mt-5{ margin-top:24px; } .mt-6{ margin-top:32px; }
.mb-3{ margin-bottom:12px; } .mb-4{ margin-bottom:16px; } .mb-5{ margin-bottom:24px; }
.text-dim{ color:var(--c-ink-dim); } .text-faint{ color:var(--c-ink-faint); } .text-center{ text-align:center; }
.small{ font-size:13px; }
.w-full{ width:100%; }

@media (max-width:640px){
  main{ padding:var(--space-4) var(--space-3) var(--space-6); }
  .topbar{ padding:var(--space-3); }
  .cert-footer{ flex-direction:column; }
}