/* ── CEVI CyberSAFE — Dark Tech Aesthetic ── */
:root {
  --bg:       #040d14;
  --bg2:      #071422;
  --bg3:      #0a1c2e;
  --surface:  #0d2035;
  --surf2:    #122540;
  --border:   rgba(0,212,255,0.12);
  --border2:  rgba(0,212,255,0.22);
  --cyan:     #00d4ff;
  --cyan-dim: rgba(0,212,255,0.15);
  --text:     #e0f0ff;
  --text2:    #7aa3c0;
  --text3:    #3d6a88;
  --font-head: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --r:        10px;
  --r2:       16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--cyan);text-decoration:none}
a:hover{opacity:.8}
input,select,button{font-family:var(--font-body);font-size:14px}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* ══ AUTH ══ */
.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;position:relative;overflow:hidden}
.auth-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(0,212,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,0.04) 1px,transparent 1px);background-size:50px 50px}
.scan-line{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,212,255,0.3),transparent);animation:scan 4s linear infinite}
@keyframes scan{0%{top:-2px}100%{top:100vh}}
.particle{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:var(--cyan);opacity:.4;animation:float var(--d) ease-in-out infinite alternate}
@keyframes float{0%{transform:translateY(0)}100%{transform:translateY(-18px)}}
.auth-container{position:relative;z-index:1;width:100%;max-width:440px}
.auth-logo{display:flex;align-items:center;gap:12px;margin-bottom:1.5rem;padding-left:.25rem}
.logo-icon{width:48px;height:48px;background:rgba(0,212,255,0.08);border:1px solid var(--border2);border-radius:12px;display:flex;align-items:center;justify-content:center}
.logo-text{font-family:var(--font-head);font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.5px}
.logo-sub{font-size:11px;color:var(--text2);font-family:var(--font-mono);letter-spacing:.05em}
.auth-card{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);overflow:hidden}
.auth-card-header{background:var(--bg3);border-bottom:1px solid var(--border);padding:.55rem 1rem;display:flex;align-items:center;gap:6px}
.terminal-dot{width:10px;height:10px;border-radius:50%}
.terminal-dot.red{background:#f43f5e}
.terminal-dot.yellow{background:#f59e0b}
.terminal-dot.green{background:#22c55e}
.terminal-title{font-family:var(--font-mono);font-size:11px;color:var(--text2);margin-left:6px;letter-spacing:.04em}
.auth-card-body{padding:1.75rem}
.auth-title{font-family:var(--font-head);font-size:20px;font-weight:700;color:var(--text);margin-bottom:.25rem}
.auth-desc{font-size:13px;color:var(--text2);margin-bottom:1.25rem}
.alert{display:flex;align-items:flex-start;gap:8px;padding:.75rem 1rem;border-radius:var(--r);margin-bottom:1rem;font-size:13px;line-height:1.5}
.alert-icon{font-weight:700;flex-shrink:0;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px}
.alert-error{background:rgba(244,63,94,0.1);border:1px solid rgba(244,63,94,0.25);color:#fca5a5}
.alert-error .alert-icon{background:rgba(244,63,94,0.3);color:#f43f5e}
.alert-success{background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.25);color:#86efac}
.alert-success .alert-icon{background:rgba(34,197,94,0.3);color:#22c55e}
.inline-link{color:var(--cyan);text-decoration:underline}
.auth-form{display:flex;flex-direction:column;gap:.85rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.field-group{display:flex;flex-direction:column;gap:.35rem}
.field-label{font-size:11px;font-family:var(--font-mono);letter-spacing:.06em;color:var(--cyan);text-transform:uppercase}
.field-wrap{display:flex;align-items:center;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:border-color .2s}
.field-wrap:focus-within{border-color:var(--cyan)}
.field-prefix{font-family:var(--font-mono);font-size:11px;color:var(--text3);padding:0 .6rem;border-right:1px solid var(--border);white-space:nowrap;user-select:none}
.field-input{flex:1;background:transparent;border:none;outline:none;color:var(--text);padding:.65rem .75rem;font-size:14px}
.field-input::placeholder{color:var(--text3)}
.field-select{appearance:none;cursor:pointer}
.field-select option{background:var(--bg3)}
.btn-primary-cta{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--cyan);color:#030d14;border:none;border-radius:var(--r);padding:.75rem 1.5rem;font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.06em;cursor:pointer;margin-top:.5rem;transition:opacity .2s,transform .15s;text-decoration:none}
.btn-primary-cta:hover{opacity:.9;transform:translateY(-1px);color:#030d14}
.btn-primary-cta:disabled{opacity:.35;cursor:default;transform:none}
.btn-secondary-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:var(--text2);border:1px solid var(--border);border-radius:var(--r);padding:.65rem 1.5rem;font-size:13px;cursor:pointer;transition:border-color .2s;text-decoration:none}
.btn-secondary-cta:hover{border-color:var(--border2);color:var(--text)}
.auth-switch{text-align:center;font-size:13px;color:var(--text2);margin-top:1.25rem}
.auth-footer-text{text-align:center;font-size:11px;color:var(--text3);font-family:var(--font-mono);margin-top:1rem}

/* ══ DASHBOARD ══ */
.dash-layout{display:flex;min-height:100vh}
.sidebar{width:220px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:1.25rem 0}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:0 1.25rem 1.25rem;border-bottom:1px solid var(--border)}
.sidebar-brand{font-family:var(--font-head);font-weight:800;font-size:17px;color:var(--text)}
.sidebar-nav{flex:1;padding:.75rem 0}
.nav-section-label{font-size:10px;font-family:var(--font-mono);letter-spacing:.1em;color:var(--text3);padding:.5rem 1.25rem;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:10px;padding:.6rem 1.25rem;font-size:13px;color:var(--text2);transition:color .2s,background .2s}
.nav-item:hover,.nav-item.active{color:var(--cyan);background:var(--cyan-dim)}
.sidebar-user{padding:1rem 1.25rem;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px}
.user-avatar-sm{width:34px;height:34px;border-radius:50%;background:var(--cyan-dim);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--cyan);flex-shrink:0}
.user-info-sm{flex:1;min-width:0}
.user-name-sm{font-size:12px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-pos-sm{font-size:10px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logout-btn{color:var(--text3);flex-shrink:0;display:flex;padding:4px;border-radius:6px;transition:color .2s}
.logout-btn:hover{color:#f43f5e}
.dash-main{flex:1;padding:2rem;overflow-y:auto;min-width:0}
.dash-topbar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem}
.dash-title{font-family:var(--font-head);font-size:24px;font-weight:800;color:var(--text)}
.dash-subtitle{font-size:13px;color:var(--text2);margin-top:.2rem}
.highlight-text{color:var(--cyan)}
.status-chip{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;padding:.3rem .75rem;border-radius:99px}
.chip-active{background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.3);color:#4ade80}
.chip-inactive{background:rgba(244,63,94,0.12);border:1px solid rgba(244,63,94,0.3);color:#fb7185}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:1.75rem}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:1rem 1.1rem}
.stat-label{font-size:11px;font-family:var(--font-mono);color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem}
.stat-value{font-family:var(--font-head);font-size:26px;font-weight:800;color:var(--text);line-height:1}
.stat-total{font-size:16px;color:var(--text3)}
.stat-bar{height:4px;background:var(--border);border-radius:2px;margin-top:.6rem;overflow:hidden}
.stat-bar-fill{height:100%;background:var(--cyan);border-radius:2px;transition:width .4s}
.stat-sub{font-size:12px;color:var(--text2);margin-top:.35rem}
.passed-chip{color:#4ade80;font-weight:600}
.failed-chip{color:#fb7185;font-weight:600}
.cert-link{font-size:12px;color:var(--cyan);margin-top:.35rem;display:inline-block}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem}
.section-title{font-family:var(--font-head);font-size:17px;font-weight:700;color:var(--text)}
.section-badge{font-family:var(--font-mono);font-size:11px;color:var(--text2);background:var(--bg3);border:1px solid var(--border);border-radius:99px;padding:.2rem .75rem}
.module-grid-dash{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:1.5rem}
.module-card-dash{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:1.1rem;display:flex;flex-direction:column;gap:.5rem;transition:border-color .2s,transform .15s;position:relative;overflow:hidden}
.module-card-dash::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent,var(--cyan));opacity:.6}
.module-card-dash:hover{border-color:var(--accent,var(--border2));transform:translateY(-2px)}
.module-card-dash.mod-done{border-color:rgba(34,197,94,0.2)}
.mod-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.25rem}
.mod-card-icon{opacity:.85}
.mod-done-badge{display:flex;align-items:center;gap:4px;font-size:10px;font-family:var(--font-mono);color:#4ade80;background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.2);border-radius:99px;padding:.15rem .5rem}
.mod-card-title{font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--text)}
.mod-card-sub{font-size:11px;color:var(--text2);line-height:1.4;flex:1}
.mod-card-btn{margin-top:.5rem;font-size:12px;color:var(--cyan);font-family:var(--font-mono);transition:opacity .2s}
.mod-card-btn:hover{opacity:.7}
.final-quiz-banner{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
.fq-left{display:flex;align-items:center;gap:1rem}
.fq-icon{width:48px;height:48px;background:var(--cyan-dim);border:1px solid var(--border2);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fq-title{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--text)}
.fq-sub{font-size:12px;color:var(--text2);margin-top:.1rem}
.unlock-hint{font-size:12px;color:var(--text3);font-family:var(--font-mono);text-align:center;padding:.5rem}

/* ══ MODE PICKER MODAL ══ */
.mode-modal-overlay{position:fixed;inset:0;background:rgba(4,13,20,.85);backdrop-filter:blur(6px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;pointer-events:none;transition:opacity .25s}
.mode-modal-overlay.open{opacity:1;pointer-events:all}
.mode-modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);padding:2rem;width:100%;max-width:560px;animation:modalPop .25s ease}
@keyframes modalPop{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
.mode-modal-header{text-align:center;margin-bottom:1.5rem}
.mode-modal-title{font-family:var(--font-head);font-size:20px;font-weight:700;color:var(--text);margin-bottom:.35rem}
.mode-modal-sub{font-size:13px;color:var(--text2)}
.mode-modal-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1.5rem}
.mode-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);padding:1.25rem;cursor:pointer;position:relative;transition:border-color .2s,background .2s;display:flex;flex-direction:column;gap:.5rem}
.mode-card:hover{border-color:var(--border2)}
.mode-card.selected{border-color:var(--cyan);background:var(--cyan-dim)}
.mode-card-icon{color:var(--text2);width:44px;height:44px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:.25rem}
.mode-card.selected .mode-card-icon{border-color:var(--cyan);color:var(--cyan)}
.mode-card-title{font-family:var(--font-head);font-size:15px;font-weight:700;color:var(--text)}
.mode-card-desc{font-size:12px;color:var(--text2);line-height:1.55}
.mode-card-check{position:absolute;top:.75rem;right:.75rem;width:20px;height:20px;background:var(--cyan);border-radius:50%;display:none;align-items:center;justify-content:center;color:#030d14}
.mode-card-check.visible{display:flex}
.mode-card-voice-settings{display:none;flex-direction:column;gap:.45rem;padding-top:.65rem;border-top:1px solid var(--border);margin-top:.25rem}
.mode-card-voice-settings.vms-open{display:flex}
.vms-row{display:flex;align-items:center;gap:.5rem}
.vms-label{font-family:var(--font-mono);font-size:10px;color:var(--text3);width:32px;flex-shrink:0;text-transform:uppercase}
.vms-select{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:11px;padding:.3rem .4rem;font-family:var(--font-mono)}
.vms-select option{background:var(--bg2)}
.mode-modal-start{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--cyan);color:#030d14;border:none;border-radius:var(--r);padding:.75rem 1.5rem;font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.04em;cursor:pointer;transition:opacity .2s}
.mode-modal-start:hover{opacity:.88}

/* ══ LESSON LAYOUT — true 100vh, no scroll ══ */
.lesson-layout{display:flex;height:100vh;overflow:hidden;--mod-color:#00d4ff}
.lesson-sidebar{width:210px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);padding:.85rem;display:flex;flex-direction:column;gap:.65rem;overflow:hidden}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text2);transition:color .2s;flex-shrink:0}
.back-link:hover{color:var(--mod-color)}
.lesson-mod-info{padding:.65rem;background:var(--bg3);border-radius:var(--r);border:1px solid var(--border);flex-shrink:0}
.lesson-mod-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--mod-color);text-transform:uppercase;margin-bottom:.2rem}
.lesson-mod-title{font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--text)}
.mode-indicator{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:.5rem .65rem;display:flex;flex-direction:column;gap:.4rem;flex-shrink:0}
.mode-indicator-top{display:flex;align-items:center;gap:.4rem}
.mode-indicator-icon{color:var(--mod-color);display:flex;align-items:center;flex-shrink:0}
.mode-indicator-label{font-family:var(--font-mono);font-size:11px;color:var(--text2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mode-indicator-btns{display:flex;gap:.35rem}
.mode-change-btn{background:transparent;border:1px solid var(--border);border-radius:6px;padding:.22rem .5rem;font-size:10px;color:var(--text3);cursor:pointer;display:flex;align-items:center;gap:3px;transition:border-color .2s,color .2s;font-family:var(--font-mono);flex:1;justify-content:center;white-space:nowrap}
.mode-change-btn:hover{border-color:var(--mod-color);color:var(--mod-color)}
.voice-settings{display:none;flex-direction:column;gap:.45rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:.65rem;flex-shrink:0}
.voice-settings.vs-open{display:flex}
.vs-row{display:flex;align-items:center;gap:.5rem}
.vs-label{font-family:var(--font-mono);font-size:10px;color:var(--text3);width:32px;flex-shrink:0;text-transform:uppercase}
.vs-select{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:11px;padding:.3rem .4rem;font-family:var(--font-mono)}
.vs-select option{background:var(--bg2)}
.vs-range{flex:1;accent-color:var(--cyan);height:3px}
.vs-val{font-family:var(--font-mono);font-size:10px;color:var(--cyan);min-width:28px;text-align:right}
.vs-close-btn{background:var(--cyan);color:#030d14;border:none;border-radius:6px;padding:.35rem .8rem;font-size:12px;font-family:var(--font-mono);font-weight:700;cursor:pointer;align-self:flex-end;transition:opacity .2s}
.vs-close-btn:hover{opacity:.85}
.lesson-steps-nav{display:flex;flex-direction:column;gap:4px;flex:1;overflow:hidden}
.steps-nav-item{display:flex;align-items:center;gap:.5rem;padding:.4rem .55rem;border-radius:7px;transition:background .15s;flex-shrink:0}
.steps-nav-item.active{background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.15)}
.steps-nav-item.done .snav-num{background:rgba(34,197,94,0.2);color:#4ade80;border-color:rgba(34,197,94,0.3)}
.snav-num{width:20px;height:20px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-family:var(--font-mono);color:var(--text2);flex-shrink:0}
.steps-nav-item.active .snav-num{background:var(--cyan-dim);color:var(--cyan);border-color:var(--border2)}
.snav-type{font-size:11px;color:var(--text2);text-transform:capitalize}
.steps-nav-item.active .snav-type{color:var(--text)}

/* Lesson content — 4 rows filling 100vh */
.lesson-content{flex:1;min-width:0;display:flex;flex-direction:column;height:100vh;overflow-y:auto}
.lesson-scene-wrap{flex-shrink:0;display:flex;gap:.85rem;align-items:flex-start;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);margin:.75rem .75rem 0;padding:.85rem;height:32vh;min-height:180px;max-height:320px;overflow:hidden}
.topic-avatar-wrap{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:.3rem}
.topic-avatar-wrap.talking{animation:avatarTalk .4s ease-in-out infinite alternate}
@keyframes avatarTalk{0%{transform:translateY(0)}100%{transform:translateY(-4px)}}
.topic-avatar-svg{width:clamp(48px,6vw,78px);height:auto;filter:drop-shadow(0 0 6px var(--mod-color,#00d4ff))}
.avatar-name-tag{font-family:var(--font-mono);font-size:9px;color:var(--mod-color,var(--cyan));text-align:center;letter-spacing:.03em;white-space:nowrap}
.speech-bubble-wrap{flex:1;min-width:0;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.bubble-header{flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--border);padding:.4rem .75rem;display:flex;align-items:center;gap:5px}
.bubble-dots span{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:2px}
.bubble-dots span:nth-child(1){background:#f43f5e}
.bubble-dots span:nth-child(2){background:#f59e0b}
.bubble-dots span:nth-child(3){background:#22c55e}
.bubble-title{font-family:var(--font-mono);font-size:10px;color:var(--text2);margin-left:5px}
.bubble-body{flex:1;overflow-y:auto;padding:.75rem 1rem;display:flex;align-items:flex-start;max-height:28vh;min-height:100px}
.lesson-speech{
  font-size:clamp(14px,1.5vw,17px);
  color:var(--text);
  line-height:1.75;
  white-space:pre-wrap;
}
.cursor-blink{display:inline-block;width:2px;height:1em;background:var(--mod-color,var(--cyan));vertical-align:text-bottom;margin-left:2px;animation:blink .85s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* Voice controls */
.voice-controls{display:none;align-items:center;gap:4px;margin-left:auto}
.voice-controls.vc-open{display:flex}
.vc-btn{background:var(--bg3);border:1px solid var(--border);border-radius:6px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);transition:all .15s;padding:0}
.vc-btn:hover{border-color:var(--cyan);color:var(--cyan)}
#vc-pause{display:none}
.vc-wave{display:flex;align-items:center;gap:2px;height:20px;padding:0 4px}
.vc-wave span{display:block;width:3px;border-radius:2px;background:var(--cyan);opacity:.35;height:4px}
.vc-wave.active span{opacity:.8;animation:waveBar .6s ease-in-out infinite alternate}
.vc-wave span:nth-child(1){animation-delay:0s}
.vc-wave span:nth-child(2){animation-delay:.1s}
.vc-wave span:nth-child(3){animation-delay:.2s}
.vc-wave span:nth-child(4){animation-delay:.15s}
.vc-wave span:nth-child(5){animation-delay:.05s}
@keyframes waveBar{0%{height:3px}50%{height:16px}100%{height:4px}}

/* Interaction zone */
.interaction-zone{flex-shrink:0;display:flex;flex-direction:column;gap:.55rem;margin:0 .75rem;padding:.5rem 0;max-height:42vh;overflow-y:auto;animation:fadeUp .3s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.quiz-wrap{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.quiz-choice-btn{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:.65rem 1rem;font-size:14px;color:var(--text);cursor:pointer;text-align:left;display:flex;align-items:flex-start;gap:8px;transition:border-color .2s,background .2s;line-height:1.55}
.quiz-choice-btn:hover:not(:disabled){border-color:var(--mod-color,var(--cyan));background:var(--bg3)}
.choice-letter{font-family:var(--font-mono);font-size:11px;color:var(--text3);flex-shrink:0;margin-top:1px}
.choice-correct{background:rgba(34,197,94,0.1)!important;border-color:rgba(34,197,94,0.4)!important;color:#bbf7d0!important}
.choice-wrong{background:rgba(244,63,94,0.1)!important;border-color:rgba(244,63,94,0.4)!important;color:#fecdd3!important}
.choice-reveal{background:rgba(34,197,94,0.05)!important;border-color:rgba(34,197,94,0.2)!important;opacity:.6}
.identify-hint{font-size:11px;color:var(--text2);font-family:var(--font-mono);flex-shrink:0}
.identify-grid{display:flex;flex-wrap:wrap;gap:6px;overflow:hidden}
.identify-item{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:.5rem .85rem;font-size:14px;color:var(--text2);cursor:pointer;transition:all .15s;line-height:1.5}
.identify-item:hover:not(:disabled){border-color:var(--border2)}
.id-selected{border-color:var(--cyan)!important;color:var(--cyan)!important;background:var(--cyan-dim)!important}
.id-correct{background:rgba(34,197,94,0.15)!important;border-color:rgba(34,197,94,0.6)!important;color:#bbf7d0!important;font-weight:500}
.id-wrong{background:rgba(244,63,94,0.15)!important;border-color:rgba(244,63,94,0.6)!important;color:#fecdd3!important;font-weight:500}
.id-missed{background:rgba(245,158,11,0.15)!important;border-color:rgba(245,158,11,0.5)!important;color:#fde68a!important;font-weight:500}
.id-safe{opacity:.4;cursor:default!important}
.check-btn{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:.4rem 1rem;font-size:12px;color:var(--cyan);cursor:pointer;font-family:var(--font-mono);letter-spacing:.04em;transition:background .2s;flex-shrink:0}
.check-btn:hover:not(:disabled){background:var(--cyan-dim)}
.check-btn:disabled{opacity:.3;cursor:default}
.feedback-box{border-radius:var(--r);padding:.55rem .85rem;font-size:12px;line-height:1.5;flex-shrink:0}
.feedback-box strong{display:block;margin-bottom:.2rem;font-size:11px;font-family:var(--font-mono)}
.feedback-box p{color:var(--text2)}
.fb-good{background:rgba(34,197,94,0.08);border-left:3px solid #22c55e}
.fb-good strong{color:#4ade80}
.fb-bad{background:rgba(244,63,94,0.08);border-left:3px solid #f43f5e}
.fb-bad strong{color:#fb7185}
.fb-info{background:rgba(0,212,255,0.06);border-left:3px solid var(--cyan)}
.fb-info strong{color:var(--cyan)}

/* Story panels */
.story-panel{flex:1;min-height:0;display:none;flex-direction:row;gap:8px;margin:0 .75rem;overflow:hidden}
.story-card{flex:1;min-width:0;min-height:0;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;animation:storyFadeUp .3s ease both;transition:border-color .2s,transform .15s}
.story-card:hover{border-color:var(--mod-color,var(--border2));transform:translateY(-2px)}
@keyframes storyFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.story-scene{flex:1;min-height:0;background:var(--bg3);border-bottom:1px solid var(--border);display:flex;align-items:stretch;overflow:hidden}
.story-scene svg{width:100%;height:100%;display:block}
.story-caption{flex-shrink:0;padding:.5rem .8rem;font-size:12px;color:var(--text2);line-height:1.5;font-family:var(--font-body)}

/* Continue bar */
.lesson-controls{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:.65rem .75rem;background:var(--bg2);border-top:1px solid var(--border)}
.step-dots{display:flex;gap:5px}
.sdot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:background .2s}
.sdot-done{background:rgba(34,197,94,0.5)}
.sdot-active{background:var(--mod-color,var(--cyan));box-shadow:0 0 5px var(--mod-color,var(--cyan))}
.lesson-next-btn{display:inline-flex;align-items:center;gap:7px;background:var(--mod-color,var(--cyan));color:#030d14;border:none;border-radius:var(--r);padding:.55rem 1.25rem;font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.04em;cursor:pointer;transition:opacity .2s,transform .15s}
.lesson-next-btn:hover:not(:disabled){opacity:.85;transform:translateX(2px)}
.lesson-next-btn:disabled{opacity:.3;cursor:default;transform:none}

/* ══ QUIZ ══ */
.quiz-layout{max-width:820px;margin:0 auto;padding:1.5rem}
.quiz-topbar{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem}
.quiz-title-wrap{flex:1}
.quiz-title{font-family:var(--font-head);font-size:18px;font-weight:800;color:var(--text)}
.quiz-subtitle{font-size:12px;color:var(--text2);display:block;margin-top:.15rem}
.quiz-progress-info{font-family:var(--font-mono);font-size:13px;color:var(--cyan)}
.quiz-progress-bar-outer{height:4px;background:var(--border);border-radius:2px;margin-bottom:1.5rem;overflow:hidden}
.quiz-progress-bar-inner{height:100%;background:var(--cyan);border-radius:2px;transition:width .3s}
.quiz-form-wrap{position:relative;min-height:340px}
.quiz-question-card{display:none;animation:fadeUp .25s ease}
.quiz-question-card.q-active{display:block}
.q-topic-tag{display:inline-block;font-family:var(--font-mono);font-size:11px;color:var(--cyan);background:var(--cyan-dim);border:1px solid var(--border2);border-radius:99px;padding:.2rem .75rem;margin-bottom:.6rem}
.q-number{font-size:11px;color:var(--text3);font-family:var(--font-mono);margin-bottom:.35rem}
.q-text{font-family:var(--font-head);font-size:18px;font-weight:600;color:var(--text);line-height:1.6;margin-bottom:1rem}
.q-choices{display:grid;gap:8px;margin-bottom:1rem}
.q-choice-label{display:flex;align-items:flex-start;gap:10px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:.75rem 1rem;cursor:pointer;transition:border-color .2s}
.q-choice-label:hover{border-color:var(--border2)}
.q-choice-label:has(.q-radio:checked){border-color:var(--cyan);background:var(--cyan-dim)}
.q-radio{display:none}
.q-choice-letter{font-family:var(--font-mono);font-size:12px;color:var(--text3);flex-shrink:0;margin-top:2px}
.q-choice-text{font-size:15px;color:var(--text);line-height:1.55}
.q-nav-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:.5rem}
.q-prev-btn,.q-next-btn,.q-submit-btn{border-radius:var(--r);padding:.55rem 1.25rem;font-size:13px;cursor:pointer;font-family:var(--font-mono);letter-spacing:.04em;border:1px solid var(--border2);transition:all .2s}
.q-prev-btn{background:transparent;color:var(--text2)}
.q-prev-btn:hover{color:var(--text)}
.q-next-btn{background:var(--bg3);color:var(--cyan)}
.q-next-btn:hover:not(:disabled){background:var(--cyan-dim)}
.q-next-btn:disabled{opacity:.3;cursor:default}
.q-submit-btn{background:var(--cyan);color:#030d14;border-color:var(--cyan);font-weight:700}
.q-submit-btn:disabled{opacity:.35;cursor:default}
.q-minimap{display:flex;flex-wrap:wrap;gap:6px;margin-top:1.25rem;padding:1rem;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r)}
.q-dot{width:28px;height:28px;border-radius:6px;background:var(--bg3);border:1px solid var(--border);font-size:11px;font-family:var(--font-mono);color:var(--text3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.q-dot:hover{border-color:var(--border2);color:var(--text2)}
.q-dot-answered{background:rgba(0,212,255,0.08);border-color:var(--border2);color:var(--cyan)}
.q-dot-current{border-color:var(--cyan)!important;box-shadow:0 0 6px rgba(0,212,255,0.3);color:var(--cyan)!important}

/* ══ CERTIFICATE ══ */
.cert-page{min-height:100vh;padding:1.5rem;position:relative;overflow:hidden;background:#eef2f7}
.cert-bg-fx{position:fixed;inset:0;pointer-events:none;z-index:0}
.cert-particle{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:var(--c);animation:float var(--d) ease-in-out infinite alternate;opacity:.3}
.cert-topbar{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;max-width:750px;margin-left:auto;margin-right:auto}
.cert-card{position:relative;z-index:1;max-width:750px;margin:0 auto;background:#ffffff;border:2px solid #b8cfe8;border-radius:12px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.15)}
.cert-header-bar{height:8px;background:linear-gradient(90deg,#1a3a6b,#2563eb,#38bdf8,#2563eb,#1a3a6b)}
.cert-inner-wrap{padding:2.5rem 3rem;text-align:center;background:#ffffff}
.cert-logo-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:1.25rem}
.cert-brand{font-family:var(--font-head);font-size:20px;font-weight:800;color:#0d1f33}
.cert-brand-sub{font-size:11px;color:#4a6280;font-family:var(--font-mono)}
.cert-star-row{margin-bottom:.75rem}
.cert-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:#1a56a0;text-transform:uppercase;margin-bottom:.5rem}
.cert-awarded-to{font-size:14px;color:#3a5270;margin-bottom:.35rem}
.cert-name{font-family:var(--font-head);font-size:34px;font-weight:800;color:#0d1f33;margin-bottom:.4rem;letter-spacing:-.5px}
.cert-body-text{font-size:14px;color:#3a5270;margin:.5rem 0 .25rem}
.cert-course-name{font-family:var(--font-head);font-size:17px;font-weight:700;color:#1a56a0;margin-bottom:1.25rem}
.cert-score-row{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:1.25rem;background:#eef6ff;border:1px solid #b8cfe8;border-radius:8px;padding:1rem}
.cert-score-block{text-align:center}
.cert-score-num{font-family:var(--font-head);font-size:26px;font-weight:800;color:#0d1f33}
.cert-score-label{font-size:11px;color:#4a6280;font-family:var(--font-mono);margin-top:.2rem}
.passed-text{color:#15803d!important}
.cert-score-sep{width:1px;height:50px;background:#b8cfe8}
.cert-issued{font-size:12px;color:#6a8aaa;font-family:var(--font-mono);margin-bottom:1rem}
.cert-footer-bar{height:6px;background:linear-gradient(90deg,#1a3a6b,#2563eb,#38bdf8,#2563eb,#1a3a6b)}
.fail-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}
.fail-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:3rem 2rem;text-align:center;max-width:420px}
.fail-title{font-family:var(--font-head);font-size:22px;font-weight:700;color:var(--text);margin-bottom:.5rem}
.fail-sub{font-size:14px;color:var(--text2);line-height:1.6;margin-bottom:1.5rem}
.fail-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ══ PRINT ══ */
@media print{
  .cert-topbar,.cert-bg-fx,.page-footer,.admin-footer{display:none}
  body,html{background:#fff!important}
/* ══ CERTIFICATE — Landscape Corporate Design ══ */
.cert-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:1.5rem;background:#dde4ed;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.cert-bg-fx{display:none}
.cert-topbar{width:100%;max-width:970px;display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;z-index:1}
.cert-topbar .back-link{color:#2563eb;font-size:13px;display:flex;align-items:center;gap:4px}

/* The card — landscape A4-ish proportions */
.cert-card{
  position:relative;
  width:100%;
  max-width:970px;
  background:#ffffff;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 12px 48px rgba(0,0,50,0.18);
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

/* Outer decorative border frame */
.cert-card::before{
  content:'';
  position:absolute;
  inset:10px;
  border:1.5px solid rgba(37,99,235,0.25);
  border-radius:6px;
  pointer-events:none;
  z-index:2;
}
.cert-card::after{
  content:'';
  position:absolute;
  inset:14px;
  border:.5px solid rgba(37,99,235,0.12);
  border-radius:4px;
  pointer-events:none;
  z-index:2;
}

/* Left accent bar */
.cert-header-bar{
  position:absolute;
  top:0;left:0;bottom:0;
  width:10px;
  background:linear-gradient(180deg,#1a3a6b 0%,#2563eb 40%,#38bdf8 70%,#1a3a6b 100%);
  z-index:3;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

/* Right accent bar */
.cert-footer-bar{
  position:absolute;
  top:0;right:0;bottom:0;
  width:10px;
  background:linear-gradient(180deg,#1a3a6b 0%,#2563eb 40%,#38bdf8 70%,#1a3a6b 100%);
  z-index:3;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

/* Cyber grid background */
.cert-inner-wrap{
  position:relative;
  padding:2.5rem 3.5rem 2rem 3.5rem;
  text-align:center;
  background:#ffffff;
  overflow:hidden;
}
/* Subtle circuit/grid background pattern */
.cert-inner-wrap::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(37,99,235,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(37,99,235,0.04) 1px,transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
  z-index:0;
}
/* Corner circuit dots */
.cert-inner-wrap::after{
  content:'';
  position:absolute;
  top:22px;left:22px;
  width:18px;height:18px;
  border-top:2px solid rgba(37,99,235,0.3);
  border-left:2px solid rgba(37,99,235,0.3);
  pointer-events:none;
  z-index:1;
}

/* Top row: shield left, logo right */
.cert-top-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:.5rem;
  position:relative;
  z-index:1;
}
.cert-shield-mark{
  display:flex;
  align-items:center;
  gap:8px;
}
.cert-brand{font-family:var(--font-head);font-size:13px;font-weight:800;color:#0d1f33;line-height:1.1}
.cert-brand-sub{font-size:9px;color:#4a6280;font-family:var(--font-mono);letter-spacing:.04em}
.cert-company-logo-cert{
  max-height:48px;
  max-width:160px;
  object-fit:contain;
  opacity:.92;
}

/* Corner decorations */
.cert-corner{position:absolute;width:24px;height:24px;pointer-events:none;z-index:1}
.cert-corner-tr{top:22px;right:22px;border-top:2px solid rgba(37,99,235,0.3);border-right:2px solid rgba(37,99,235,0.3)}
.cert-corner-bl{bottom:22px;left:22px;border-bottom:2px solid rgba(37,99,235,0.3);border-left:2px solid rgba(37,99,235,0.3)}
.cert-corner-br{bottom:22px;right:22px;border-bottom:2px solid rgba(37,99,235,0.3);border-right:2px solid rgba(37,99,235,0.3)}

/* Certificate of Completion heading */
.cert-label{
  font-family:var(--font-head);
  font-size:36px;
  font-weight:800;
  color:#0d1f33;
  letter-spacing:-.5px;
  margin:.5rem 0 .2rem;
  position:relative;
  z-index:1;
  line-height:1.1;
}
.cert-label-sub{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.18em;
  color:#2563eb;
  text-transform:uppercase;
  margin-bottom:.85rem;
  position:relative;
  z-index:1;
}

/* Divider line */
.cert-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:.6rem auto;
  max-width:500px;
  position:relative;
  z-index:1;
}
.cert-divider::before,.cert-divider::after{
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,#2563eb,transparent);
}
.cert-divider-diamond{
  width:6px;height:6px;
  background:#2563eb;
  transform:rotate(45deg);
  flex-shrink:0;
}

.cert-awarded-to{font-size:13px;color:#4a6280;margin-bottom:.2rem;position:relative;z-index:1}
.cert-name{
  font-family:var(--font-head);
  font-size:40px;
  font-weight:800;
  color:#0d1f33;
  margin-bottom:.25rem;
  letter-spacing:-.5px;
  position:relative;
  z-index:1;
  line-height:1.1;
}
.cert-awarded-to2{font-size:12px;color:#4a6280;margin-bottom:.3rem;position:relative;z-index:1}
.cert-body-text{font-size:13px;color:#3a5270;margin:.3rem 0 .15rem;position:relative;z-index:1}
.cert-course-name{
  font-family:var(--font-head);
  font-size:16px;
  font-weight:700;
  color:#1a56a0;
  margin-bottom:.85rem;
  position:relative;
  z-index:1;
}

/* Score row */
.cert-score-row{
  display:inline-flex;
  align-items:center;
  gap:1.25rem;
  margin-bottom:.85rem;
  background:#eef6ff;
  border:1px solid #b8cfe8;
  border-radius:8px;
  padding:.65rem 1.5rem;
  position:relative;
  z-index:1;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}
.cert-score-block{text-align:center}
.cert-score-num{font-family:var(--font-head);font-size:22px;font-weight:800;color:#0d1f33}
.cert-score-label{font-size:10px;color:#4a6280;font-family:var(--font-mono);margin-top:.1rem}
.passed-text{color:#15803d!important}
.cert-score-sep{width:1px;height:40px;background:#b8cfe8}

/* Logo row — now just for fallback if no logo */
.cert-logo-row{display:none}

.cert-issued{font-size:11px;color:#6a8aaa;font-family:var(--font-mono);margin-bottom:.5rem;position:relative;z-index:1}
.cert-star-row{display:none}

/* ── PRINT ── */
@media print{
  body,html{background:#fff!important;margin:0;padding:0}
  .cert-page{background:#fff!important;padding:.5cm;min-height:auto}
  .cert-topbar,.page-footer,.admin-footer{display:none!important}
  .cert-card{box-shadow:none!important;max-width:100%;border-radius:6px}
  .cert-inner-wrap{padding:1.5rem 2.5rem}
  @page{size:landscape;margin:.8cm}
  .cert-label{font-size:30px!important}
  .cert-name{font-size:32px!important}
  .cert-header-bar,.cert-footer-bar,.cert-inner-wrap::before,.cert-score-row{
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
  .cert-sig-line{background:#888!important}
  .cert-sig-name{color:#0d1f33!important}
  .cert-sig-pos{color:#4a6280!important}
}
  .cert-score-sep{width:60px;height:1px}
}

/* ══ QUIZ — all-questions layout ══ */
.quiz-all-questions{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:6rem}
.quiz-progress-pill{font-family:var(--font-mono);font-size:13px;color:var(--cyan);background:var(--cyan-dim);border:1px solid var(--border2);border-radius:99px;padding:.3rem .9rem;white-space:nowrap}
.quiz-q-block{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r2);padding:1.25rem 1.5rem;transition:border-color .3s}
.quiz-q-block.q-block-done{border-color:var(--border2)}
.q-block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.65rem}
.q-block-num{font-family:var(--font-mono);font-size:11px;color:var(--text3)}
.q-feedback{margin-top:.75rem;padding:.6rem .9rem;border-radius:var(--r);font-size:13px;display:none;line-height:1.5}
.q-feedback.fb-correct{display:block;background:rgba(34,197,94,0.1);border-left:3px solid #22c55e;color:#86efac}
.q-feedback.fb-wrong{display:block;background:rgba(244,63,94,0.1);border-left:3px solid #f43f5e;color:#fca5a5}
.q-feedback strong{font-family:var(--font-mono);font-size:12px}

/* Choice states */
.q-choice-label{display:flex;align-items:center;gap:10px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:.7rem 1rem;cursor:pointer;transition:border-color .2s,background .2s;position:relative}
.q-choice-label:hover:not(.choice-correct):not(.choice-wrong):not(.choice-dimmed){border-color:var(--border2);background:var(--surf2)}
.choice-correct{background:rgba(34,197,94,0.12)!important;border-color:rgba(34,197,94,0.5)!important;cursor:default!important}
.choice-wrong{background:rgba(244,63,94,0.12)!important;border-color:rgba(244,63,94,0.5)!important;cursor:default!important}
.choice-dimmed{opacity:.45;cursor:default!important}
.choice-correct .q-choice-letter{color:#4ade80}
.choice-wrong .q-choice-letter{color:#fb7185}
.q-choice-icon{margin-left:auto;font-size:14px;font-weight:700;flex-shrink:0}
.choice-correct .q-choice-icon{color:#4ade80}
.choice-wrong .q-choice-icon{color:#fb7185}

/* Minimap sticky */
.q-minimap-sticky{position:fixed;bottom:0;left:0;right:0;background:var(--bg2);border-top:1px solid var(--border);padding:.6rem 1rem;z-index:50}
.q-minimap-label{font-family:var(--font-mono);font-size:10px;color:var(--text3);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.06em}
.q-minimap-dots{display:flex;flex-wrap:wrap;gap:5px}
.q-dot{width:26px;height:26px;border-radius:6px;background:var(--bg3);border:1px solid var(--border);font-size:10px;font-family:var(--font-mono);color:var(--text3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0}
.q-dot:hover{border-color:var(--border2);color:var(--text2)}
.q-dot-correct{background:rgba(34,197,94,0.15)!important;border-color:rgba(34,197,94,0.5)!important;color:#4ade80!important}
.q-dot-wrong{background:rgba(244,63,94,0.15)!important;border-color:rgba(244,63,94,0.5)!important;color:#fb7185!important}

/* Submit bar */
.quiz-submit-bar{display:none;align-items:center;justify-content:space-between;background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.3);border-radius:var(--r2);padding:1.25rem 1.5rem;gap:1rem;margin-bottom:5rem}
.quiz-submit-bar.visible{display:flex}
.qsb-info{display:flex;align-items:center;gap:.65rem;font-size:14px;color:#86efac;font-family:var(--font-head);font-weight:600}
.q-submit-btn{display:inline-flex;align-items:center;gap:8px;background:#22c55e;color:#030d14;border:none;border-radius:var(--r);padding:.7rem 1.5rem;font-family:var(--font-head);font-weight:700;font-size:14px;cursor:pointer;transition:opacity .2s}
.q-submit-btn:hover{opacity:.88}
.quiz-layout{max-width:860px;margin:0 auto;padding:1.5rem 1.5rem 8rem}

/* ══ INTRO MODAL ══ */
.intro-modal-overlay{position:fixed;inset:0;background:rgba(4,13,20,.9);backdrop-filter:blur(8px);z-index:9998;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.intro-modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);width:100%;max-width:600px;max-height:90vh;overflow-y:auto;animation:modalPop .3s ease}
.intro-modal-header{background:linear-gradient(135deg,rgba(0,212,255,0.1),rgba(168,85,247,0.1));padding:2rem 2rem 1.5rem;text-align:center;border-bottom:1px solid var(--border)}
.intro-modal-logo{width:48px;height:48px;background:var(--cyan-dim);border:1px solid var(--border2);border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto .75rem}
.intro-modal-title{font-family:var(--font-head);font-size:22px;font-weight:800;color:var(--text);margin-bottom:.35rem}
.intro-modal-sub{font-size:13px;color:var(--text2)}
.intro-modal-body{padding:1.5rem 2rem}
.intro-step{display:flex;gap:.85rem;align-items:flex-start;margin-bottom:1.1rem}
.intro-step-num{width:28px;height:28px;border-radius:50%;background:var(--cyan-dim);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;color:var(--cyan);flex-shrink:0;margin-top:1px}
.intro-step-text strong{display:block;font-size:14px;color:var(--text);margin-bottom:.2rem;font-family:var(--font-head)}
.intro-step-text span{font-size:13px;color:var(--text2);line-height:1.55}
.intro-modal-footer{padding:1rem 2rem 1.5rem;text-align:center;border-top:1px solid var(--border)}
.intro-start-btn{display:inline-flex;align-items:center;gap:8px;background:var(--cyan);color:#030d14;border:none;border-radius:var(--r);padding:.75rem 2rem;font-family:var(--font-head);font-weight:700;font-size:14px;cursor:pointer;transition:opacity .2s}
.intro-start-btn:hover{opacity:.88}
.intro-check{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:.75rem;font-size:12px;color:var(--text3);cursor:pointer}
.intro-check input{accent-color:var(--cyan)}

/* ══ LOGO SUPPORT ══ */
.company-logo{max-height:36px;width:auto;object-fit:contain;opacity:.9}
.cert-company-logo{max-height:52px;width:auto;object-fit:contain;margin:0 auto .5rem;display:block}

/* ══ SOUND TOGGLE ══ */
.sound-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2);cursor:pointer;padding:.3rem .6rem;border-radius:6px;border:1px solid var(--border);background:transparent;transition:border-color .2s}
.sound-toggle:hover{border-color:var(--border2)}
.sound-toggle.muted{opacity:.5}

/* ══ BUBBLE AUTO-SCROLL ══ */
.bubble-body{
  flex:1;
  overflow-y:auto;
  display:flex;
  align-items:flex-start;
  padding:.75rem 1rem 1.5rem 1rem;
  scroll-behavior:smooth;
  max-height:28vh;
  min-height:100px;
  scrollbar-width:thin;
  scrollbar-color:var(--border2) transparent;
}
.bubble-body::-webkit-scrollbar{width:6px}
.bubble-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.bubble-body::-webkit-scrollbar-track{background:transparent}
.lesson-speech{
  font-size:clamp(14px,1.5vw,17px);
  color:var(--text);
  line-height:1.75;
  white-space:pre-wrap;
  padding-bottom:.5rem;
  width:100%;
}

/* ══ FAIL PAGE — consecutive attempt tracker ══ */
.fail-card-warn{border-color:rgba(244,63,94,0.4)!important;background:rgba(244,63,94,0.03)!important}
.fail-last-chance-banner{background:rgba(244,63,94,0.12);border:1px solid rgba(244,63,94,0.3);border-radius:var(--r);padding:.65rem 1rem;font-size:13px;color:#fb7185;margin-bottom:1.25rem;display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);line-height:1.4;text-align:left}
.fail-score-badge{display:inline-block;font-family:var(--font-mono);font-size:15px;color:#fb7185;background:rgba(244,63,94,0.1);border:1px solid rgba(244,63,94,0.25);border-radius:99px;padding:.3rem 1rem;margin:.5rem 0 .75rem}
.fail-score-badge--warn{color:#f59e0b;background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.25)}
.fail-attempts-tracker{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:1rem;margin:1rem 0;text-align:center}
.fat-label{font-size:12px;color:var(--text2);font-family:var(--font-mono);margin-bottom:.65rem;text-transform:uppercase;letter-spacing:.05em}
.fat-dots{display:flex;gap:.75rem;justify-content:center;margin-bottom:.65rem}
.fat-dot{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;border:2px solid var(--border);transition:all .2s}
.fat-dot-used{background:rgba(244,63,94,0.15);border-color:#f43f5e;color:#fb7185}
.fat-dot-next{background:rgba(244,63,94,0.05);border-color:rgba(244,63,94,0.3);color:var(--text3);border-style:dashed}
.fat-dot-empty{background:var(--bg2);border-color:var(--border);color:var(--text3)}
.fat-note{font-size:13px;color:var(--text2);line-height:1.5}

/* ══ RESET PAGE ══ */
.fail-card-reset{border-color:rgba(245,158,11,0.3)!important;max-width:480px}
.fail-reset-icon{margin:0 auto 1rem;display:flex;justify-content:center}
.fail-reset-steps{display:flex;flex-direction:column;gap:.75rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);padding:1rem;margin:1rem 0;text-align:left}
.frs-item{display:flex;align-items:flex-start;gap:.65rem;font-size:13px;color:var(--text2);line-height:1.55}
.frs-item svg{flex-shrink:0;margin-top:1px}

/* ══ ADMIN — reset buttons ══ */
.af-btn-reset{background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.3);color:#f59e0b;border-radius:var(--r);padding:.55rem 1.1rem;font-size:13px;cursor:pointer;font-family:var(--font-mono);letter-spacing:.03em;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.af-btn-reset:hover{background:rgba(245,158,11,0.18);border-color:rgba(245,158,11,0.5)}
.af-btn-reset-all{background:rgba(244,63,94,0.1);border:1px solid rgba(244,63,94,0.3);color:#f43f5e;border-radius:var(--r);padding:.65rem 1.4rem;font-size:13px;cursor:pointer;font-family:var(--font-mono);letter-spacing:.03em;transition:all .2s;display:inline-flex;align-items:center;gap:8px}
.af-btn-reset-all:hover{background:rgba(244,63,94,0.18);border-color:rgba(244,63,94,0.5)}
.consec-warn{color:#f43f5e;font-family:var(--font-mono);font-size:11px;font-weight:700}

/* ══ PAGE FOOTER ══ */
.page-footer{
  text-align:center;
  font-size:11px;
  color:var(--text3);
  font-family:var(--font-mono);
  padding:.85rem 1rem;
  border-top:1px solid var(--border);
  background:var(--bg);
  letter-spacing:.02em;
  line-height:1.6;
}
.dash-footer{
  text-align:center;
  font-size:11px;
  color:var(--text3);
  font-family:var(--font-mono);
  padding:.85rem 1rem;
  margin-top:1.5rem;
  border-top:1px solid var(--border);
  letter-spacing:.02em;
  line-height:1.6;
}
.admin-footer{
  margin-left:220px; /* offset for admin sidebar width */
}
@media(max-width:900px){.admin-footer{margin-left:0}}

/* ══ LOGIN — powered by logo ══ */
.auth-powered-by{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  margin:.6rem 0 .25rem;
}
.auth-powered-text{
  font-size:11px;
  color:var(--text3);
  font-family:var(--font-mono);
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
}
.auth-powered-logo{
  max-height:32px;
  width:auto;
  object-fit:contain;
  opacity:.85;
  filter:brightness(1.1);
}

/* ══ DASHBOARD — topbar company logo ══ */
.topbar-company-logo{
  max-height:72px;
  width:auto;
  max-width:280px;
  object-fit:contain;
  opacity:.95;
  filter:brightness(1.05);
}
.topbar-right{
  display:flex;
  align-items:center;
  gap:.85rem;
  flex-shrink:0;
}

/* ══ PRINT — hide footer ══ */
@media print{
  .page-footer,.dash-footer,.admin-footer{display:none}
}

/* ══ CERTIFICATE SIGNATORIES ══ */
.cert-signatories{
  display:flex;
  justify-content:center;
  gap:2rem;
  flex-wrap:wrap;
  margin:1.5rem 0 .75rem;
  padding:0 1rem;
}
.cert-signatory{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3rem;
  min-width:120px;
  max-width:160px;
}
.cert-sig-image{
  height:52px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.cert-sig-image img{
  max-height:50px;
  max-width:140px;
  object-fit:contain;
}
.cert-sig-line{
  width:140px;
  height:1px;
  background:#888;
  margin:.1rem 0;
}
.cert-sig-name{
  font-family:var(--font-head);
  font-size:12px;
  font-weight:700;
  color:#0d1f33;
  text-align:center;
}
.cert-sig-pos{
  font-family:var(--font-mono);
  font-size:10px;
  color:#4a6280;
  text-align:center;
  letter-spacing:.03em;
}

/* Print-safe signatories */
@media print{
  .cert-sig-line{background:#999;border-color:#999}
  .cert-sig-name{color:#000}
  .cert-sig-pos{color:#444}
  .cert-signatories{margin:1.2rem 0 .5rem}
}

/* ══ SMALL SCREEN RESPONSIVE — LESSON PAGE ══ */
@media (max-width: 900px) {
  .lesson-layout{flex-direction:column;height:auto;min-height:100vh;overflow-y:auto}
  .lesson-sidebar{width:100%;flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--border)}
  .lesson-content{height:auto;overflow-y:visible}
  .lesson-scene-wrap{height:auto;max-height:none}
  .bubble-body{max-height:none;overflow-y:visible}
  .interaction-zone{max-height:none;overflow-y:visible}
  .lesson-steps-nav{max-height:140px;overflow-y:auto}
}
@media (max-width: 600px) {
  .lesson-speech{font-size:15px!important}
  .quiz-choice-btn,.identify-item{font-size:14px!important}
  .topbar-company-logo{max-height:52px;max-width:180px}
}