/* ═══════════════════════════════════════════════════════════
   CodeMentor AI — "Warm Workshop" Theme
   A human-crafted, tactile design system
   ═══════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

:root{
  --bg:#0f0d15;
  --box:rgba(22,19,32,0.92);
  --bg-panel:rgba(24,21,33,0.7);
  --bg-panel-hover:rgba(38,33,52,0.8);
  --bg-surface:rgba(12,10,18,0.75);
  --bg-surface2:rgba(8,6,12,0.85);
  --bg-tint:rgba(255,240,220,0.03);
  --bg-tint2:rgba(255,240,220,0.05);
  --border:rgba(255,245,230,0.06);
  --border2:rgba(255,245,230,0.1);
  --border3:rgba(255,245,230,0.18);

  /* Warm Accents */
  --accent:#e8845c;
  --accent-dim:rgba(232,132,92,0.08);
  --accent-border:rgba(232,132,92,0.22);

  --purple:#9b8afb;
  --purple-dim:rgba(155,138,251,0.08);
  --purple-border:rgba(155,138,251,0.22);

  --amber:#f0c148;
  --amber-dim:rgba(240,193,72,0.08);

  --red:#e85d75;
  --red-dim:rgba(232,93,117,0.08);

  --text:#ede8e0;
  --text2:#b5afa8;
  --text3:#7d7770;
  --text-on-accent:#0f0d15;

  --font:'Inter',sans-serif;
  --mono:'JetBrains Mono',monospace;
  --head:'Space Grotesk',sans-serif;

  --r:10px;
  --r2:14px;
  --r3:22px;

  --sidebar-w:270px;
  --chat-w:380px;
  --topbar-h:60px;
  --panel-blur:blur(16px);
}

/* ─── THEME OVERRIDES ─────────────────────────────────── */
body.theme-dracula{
  --bg:#110a14;
  --box:rgba(26,16,32,0.92);
  --bg-panel:rgba(26,16,32,0.65);
  --bg-panel-hover:rgba(38,24,48,0.75);
  --bg-surface:rgba(18,10,22,0.75);
  --bg-surface2:rgba(14,8,18,0.85);
  --bg-tint:rgba(224,107,143,0.03);
  --bg-tint2:rgba(224,107,143,0.06);
  --border:rgba(255,240,244,0.06);
  --border2:rgba(255,240,244,0.1);
  --border3:rgba(255,240,244,0.18);
  --accent:#e06b8f;
  --accent-dim:rgba(224,107,143,0.08);
  --accent-border:rgba(224,107,143,0.22);
  --purple:#c77dba;
  --purple-dim:rgba(199,125,186,0.08);
  --purple-border:rgba(199,125,186,0.22);
  --text:#ede8e0;
  --text2:#b5afa8;
  --text3:#7d7770;
  --text-on-accent:#110a14;
}
body.theme-dracula .aurora-bg{
  background:radial-gradient(ellipse at 30% 20%,rgba(224,107,143,0.04) 0%,transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(199,125,186,0.03) 0%,transparent 60%),radial-gradient(circle at 50% 50%,#110a14 0%,#0a060e 100%);
}
body.theme-dracula .aurora-bg .sphere-1{background:radial-gradient(circle,rgba(224,107,143,0.07) 0%,transparent 80%)}
body.theme-dracula .aurora-bg .sphere-2{background:radial-gradient(circle,rgba(199,125,186,0.06) 0%,transparent 80%)}
body.theme-dracula .aurora-bg .sphere-3{background:radial-gradient(circle,rgba(199,125,186,0.04) 0%,transparent 80%)}
body.theme-cyberpunk{
  --bg:#0d0b08;
  --box:rgba(28,24,16,0.92);
  --bg-panel:rgba(28,24,16,0.65);
  --bg-panel-hover:rgba(40,34,22,0.75);
  --bg-surface:rgba(18,15,10,0.75);
  --bg-surface2:rgba(14,12,8,0.85);
  --bg-tint:rgba(212,165,74,0.03);
  --bg-tint2:rgba(212,165,74,0.06);
  --border:rgba(240,220,180,0.06);
  --border2:rgba(240,220,180,0.1);
  --border3:rgba(240,220,180,0.18);
  --accent:#d4a54a;
  --accent-dim:rgba(212,165,74,0.08);
  --accent-border:rgba(212,165,74,0.22);
  --purple:#7ec8a4;
  --purple-dim:rgba(126,200,164,0.08);
  --purple-border:rgba(126,200,164,0.22);
  --text:#ede8e0;
  --text2:#b5afa8;
  --text3:#7d7770;
  --text-on-accent:#0d0b08;
}
body.theme-cyberpunk .aurora-bg{
  background:radial-gradient(ellipse at 30% 20%,rgba(212,165,74,0.04) 0%,transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(126,200,164,0.03) 0%,transparent 60%),radial-gradient(circle at 50% 50%,#0d0b08 0%,#080604 100%);
}
body.theme-cyberpunk .aurora-bg .sphere-1{background:radial-gradient(circle,rgba(212,165,74,0.07) 0%,transparent 80%)}
body.theme-cyberpunk .aurora-bg .sphere-2{background:radial-gradient(circle,rgba(126,200,164,0.06) 0%,transparent 80%)}
body.theme-cyberpunk .aurora-bg .sphere-3{background:radial-gradient(circle,rgba(212,165,74,0.04) 0%,transparent 80%)}
body.theme-ocean{
  --bg:#080d14;
  --box:rgba(14,28,40,0.92);
  --bg-panel:rgba(14,28,40,0.65);
  --bg-panel-hover:rgba(22,40,58,0.75);
  --bg-surface:rgba(10,20,32,0.75);
  --bg-surface2:rgba(8,16,26,0.85);
  --bg-tint:rgba(91,155,213,0.03);
  --bg-tint2:rgba(91,155,213,0.06);
  --border:rgba(180,210,240,0.06);
  --border2:rgba(180,210,240,0.1);
  --border3:rgba(180,210,240,0.18);
  --accent:#5b9bd5;
  --accent-dim:rgba(91,155,213,0.08);
  --accent-border:rgba(91,155,213,0.22);
  --purple:#5dab8c;
  --purple-dim:rgba(93,171,140,0.08);
  --purple-border:rgba(93,171,140,0.22);
  --text:#ede8e0;
  --text2:#b5afa8;
  --text3:#7d7770;
  --text-on-accent:#080d14;
}
body.theme-ocean .aurora-bg{
  background:radial-gradient(ellipse at 30% 20%,rgba(91,155,213,0.04) 0%,transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(93,171,140,0.03) 0%,transparent 60%),radial-gradient(circle at 50% 50%,#080d14 0%,#040810 100%);
}
body.theme-ocean .aurora-bg .sphere-1{background:radial-gradient(circle,rgba(91,155,213,0.07) 0%,transparent 80%)}
body.theme-ocean .aurora-bg .sphere-2{background:radial-gradient(circle,rgba(93,171,140,0.06) 0%,transparent 80%)}
body.theme-ocean .aurora-bg .sphere-3{background:radial-gradient(circle,rgba(91,155,213,0.04) 0%,transparent 80%)}

/* ─── LIGHT THEME ────────────────────────────────────────── */
body.theme-light{
  --bg:#f5f3ef;
  --box:rgba(255,255,255,0.95);
  --bg-panel:rgba(255,255,255,0.85);
  --bg-panel-hover:rgba(245,243,239,0.95);
  --bg-surface:rgba(245,243,239,0.85);
  --bg-surface2:rgba(234,231,225,0.92);
  --bg-tint:rgba(0,0,0,0.03);
  --bg-tint2:rgba(0,0,0,0.06);
  --border:rgba(0,0,0,0.09);
  --border2:rgba(0,0,0,0.15);
  --border3:rgba(0,0,0,0.25);

  --accent:#d06a42;
  --accent-dim:rgba(208,106,66,0.09);
  --accent-border:rgba(208,106,66,0.25);

  --purple:#6d46d0;
  --purple-dim:rgba(109,70,208,0.09);
  --purple-border:rgba(109,70,208,0.25);

  --amber:#b45309;
  --amber-dim:rgba(180,83,9,0.09);

  --red:#c53030;
  --red-dim:rgba(197,48,48,0.09);

  --text:#181420;
  --text2:#3f394a;
  --text3:#595267;
  --text-on-accent:#ffffff;
}
body.theme-light .aurora-bg{
  background:radial-gradient(ellipse at 30% 20%,rgba(208,106,66,0.06) 0%,transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(109,70,208,0.05) 0%,transparent 60%),radial-gradient(circle at 50% 50%,#f5f3ef 0%,#eae7e1 100%);
}
body.theme-light .aurora-bg .sphere-1{background:radial-gradient(circle,rgba(208,106,66,0.06) 0%,transparent 80%)}
body.theme-light .aurora-bg .sphere-2{background:radial-gradient(circle,rgba(109,70,208,0.05) 0%,transparent 80%)}
body.theme-light .aurora-bg .sphere-3{background:radial-gradient(circle,rgba(180,83,9,0.04) 0%,transparent 80%)}
body.theme-light ::selection{background:rgba(208,106,66,0.2);color:var(--text)}

/* Syntax Highlighting for Light Theme */
body.theme-light pre code.hljs,
body.theme-light code.hljs {
  background: rgba(255, 255, 255, 0.98) !important;
  color: #1e1b2e !important;
}
body.theme-light .hljs-comment,
body.theme-light .hljs-quote {
  color: #64748b !important;
  font-style: italic;
}
body.theme-light .hljs-keyword,
body.theme-light .hljs-selector-tag,
body.theme-light .hljs-section {
  color: #c026d3 !important;
  font-weight: 600;
}
body.theme-light .hljs-string,
body.theme-light .hljs-doctag,
body.theme-light .hljs-regexp {
  color: #0284c7 !important;
  font-weight: 600;
}
body.theme-light .hljs-title,
body.theme-light .hljs-title.function_,
body.theme-light .hljs-title.class_ {
  color: #2563eb !important;
  font-weight: 600;
}
body.theme-light .hljs-built_in,
body.theme-light .hljs-symbol,
body.theme-light .hljs-bullet {
  color: #ea580c !important;
  font-weight: 600;
}
body.theme-light .hljs-number,
body.theme-light .hljs-literal,
body.theme-light .hljs-type {
  color: #ca8a04 !important;
  font-weight: 600;
}
body.theme-light .hljs-attr,
body.theme-light .hljs-attribute,
body.theme-light .hljs-property {
  color: #7c3aed !important;
}
body.theme-light .hljs-variable,
body.theme-light .hljs-template-variable,
body.theme-light .hljs-params,
body.theme-light .hljs-subst {
  color: #1e1b2e !important;
  font-weight: 600;
}
body.theme-light .hljs-operator,
body.theme-light .hljs-punctuation {
  color: #475569 !important;
}

/* Topbar & Panels */
body.theme-light .topbar{background:rgba(255,255,255,0.85);box-shadow:0 2px 12px rgba(0,0,0,0.06)}
body.theme-light #sidebar{background:rgba(245,243,239,0.85)}
body.theme-light #chat-panel{background:rgba(255,255,255,0.85)}
body.theme-light .chat-msg.user .bubble{
  background:linear-gradient(135deg,var(--accent) 0%,#b85a35 100%);color:#fff;
}
body.theme-light .chat-msg.ai .bubble{
  background:rgba(245,243,239,0.9);border-color:var(--border2);
}
body.theme-light .chat-msg.ai .bubble code{
  background:rgba(0,0,0,0.04);border-color:var(--border2);color:var(--accent);
}
body.theme-light .chat-msg.ai .bubble pre{background:rgba(245,243,239,0.8)!important;border-color:var(--border2)}
body.theme-light .chat-send{box-shadow:0 3px 10px rgba(208,106,66,0.15)}
body.theme-light .chat-send svg{color:#fff;fill:currentColor}
body.theme-light .sidebar-roadmap-btn{color:#6d46d0;background:rgba(109,70,208,0.08);border-color:rgba(109,70,208,0.25)}
body.theme-light .ai-local-badge{color:#5b21b6;border-color:rgba(91,33,182,0.25);background:rgba(91,33,182,0.06)}

/* Quiz & Modals */
body.theme-light .quiz-box{background:rgba(255,255,255,0.95);box-shadow:0 24px 60px -12px rgba(0,0,0,0.15)}
body.theme-light .quiz-option{background:rgba(0,0,0,0.015);border-color:var(--border2)}
body.theme-light .quiz-option:hover:not(.answered){background:rgba(0,0,0,0.03)}
body.theme-light .quiz-option.correct{color:var(--accent)!important}
body.theme-light .quiz-option.wrong{color:var(--red)!important}
body.theme-light .opt-letter.correct{color:#fff}
body.theme-light .opt-letter.wrong{color:#fff}
body.theme-light .content-tabs{background:rgba(255,255,255,0.6)}
body.theme-light .pg-editor-wrap{background:rgba(255,255,255,0.9)}
body.theme-light .pg-output-wrap{background:rgba(245,243,239,0.95)}
body.theme-light .tracer-panel{box-shadow:0 16px 40px rgba(0,0,0,0.1)}
body.theme-light .tracer-header,.tracer-controls{background:rgba(255,255,255,0.6)}

/* CodeMirror Light Theme Tokens */
body.theme-light .CodeMirror{color:#181420!important}
body.theme-light .cm-keyword,body.theme-light .cm-operator-word{color:#7c3aed!important;font-weight:600}
body.theme-light .cm-atom,body.theme-light .cm-number{color:#c2410c!important;font-weight:600}
body.theme-light .cm-def{color:#1d4ed8!important;font-weight:600}
body.theme-light .cm-variable{color:#181420!important}
body.theme-light .cm-variable-2{color:#0f766e!important}
body.theme-light .cm-variable-3,body.theme-light .cm-type{color:#b91c1c!important}
body.theme-light .cm-property{color:#4338ca!important}
body.theme-light .cm-operator{color:#374151!important}
body.theme-light .cm-string,body.theme-light .cm-string-2{color:#0284c7!important;font-weight:600}
body.theme-light .cm-meta,body.theme-light .cm-qualifier{color:#6b21a8!important}
body.theme-light .cm-builtin{color:#0369a1!important;font-weight:600}
body.theme-light .cm-comment{color:#6b7280!important;font-style:italic}
body.theme-light .CodeMirror-gutters{background:rgba(245,243,239,0.8)!important;border-right-color:var(--border)!important}
body.theme-light .CodeMirror-linenumber{color:var(--text3)!important}
body.theme-light .CodeMirror-cursor{border-left-color:var(--accent)!important}
body.theme-light .CodeMirror-selected{background:rgba(208,106,66,0.15)!important}
body.theme-light .CodeMirror-focused .CodeMirror-selected{background:rgba(208,106,66,0.2)!important}
body.theme-light .CodeMirror-activeline-background{background:rgba(0,0,0,0.03)!important}
body.theme-light .CodeMirror-hints{background:rgba(255,255,255,0.96)!important;border-color:var(--border2)!important;box-shadow:0 10px 30px rgba(0,0,0,0.15)}
body.theme-light .CodeMirror-hint-active{color:#fff!important}

/* Flashcards & Modals */
body.theme-light .flashcard-box{background:var(--bg-panel)}
body.theme-light .flashcard-front,.flashcard-back{background:var(--bg);border-color:var(--border2)}
body.theme-light .fc-again{background:rgba(220,38,38,0.12);color:#dc2626;border-color:rgba(220,38,38,0.25)}
body.theme-light .fc-hard{background:rgba(217,119,6,0.12);color:#b45309;border-color:rgba(217,119,6,0.25)}
body.theme-light .fc-good{background:rgba(5,150,105,0.12);color:#047857;border-color:rgba(5,150,105,0.25)}
body.theme-light .fc-easy{background:rgba(79,70,229,0.12);color:#4338ca;border-color:rgba(79,70,229,0.25)}
body.theme-light .analytics-box{background:var(--bg-panel)}
body.theme-light .search-panel{background:var(--bg-panel);box-shadow:0 20px 60px rgba(0,0,0,0.15)}
body.theme-light .search-overlay{background:rgba(245,243,239,0.75)}
body.theme-light .roadmap-box{background:var(--bg-panel);box-shadow:0 20px 60px rgba(0,0,0,0.15)}
body.theme-light .roadmap-overlay{background:rgba(245,243,239,0.8)}
body.theme-light .roadmap-node-card.locked{opacity:0.65}
body.theme-light .cert-box{background:var(--bg-panel);box-shadow:0 20px 60px rgba(0,0,0,0.15)}
body.theme-light .cert-overlay{background:rgba(245,243,239,0.8)}
body.theme-light .cert-dl-btn{color:#fff}
body.theme-light .btn-next{color:#fff}
body.theme-light .btn-submit{color:#fff}
body.theme-light .spinner{border-color:rgba(255,255,255,0.3);border-top-color:#fff}
body.theme-light .CodeMirror-hint-active{background:linear-gradient(135deg,var(--accent) 0%,#b85a35 100%)!important;color:#fff!important}
body.theme-light .topic-item.done .topic-num{color:#fff}
body.theme-light ::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12)}
body.theme-light ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.22)}

/* Tracer variable types in light mode */
body.theme-light .var-type.number{color:#b45309!important}
body.theme-light .var-type.string{color:#15803d!important}
body.theme-light .var-type.boolean{color:#6d46d0!important}
body.theme-light .var-type.array{color:#1d4ed8!important}

/* Adaptable Topbar Buttons */
.topbar-btn-purple{background:rgba(139,92,246,0.1);color:#a78bfa;border:1px solid rgba(139,92,246,0.2)}
.topbar-btn-amber{background:rgba(245,158,11,0.1);color:#f59e0b;border:1px solid rgba(245,158,11,0.2)}
.topbar-btn-green{background:rgba(16,185,129,0.1);color:#34d399;border:1px solid rgba(16,185,129,0.2)}
.topbar-btn-indigo{background:rgba(99,102,241,0.12);color:#818cf8;border:1px solid rgba(99,102,241,0.25)}
.topbar-btn-gold{background:rgba(245,158,11,0.1);color:#f59e0b;border:1px solid rgba(245,158,11,0.25)}

body.theme-light .topbar-btn-purple{background:rgba(109,70,208,0.08);color:#6d46d0;border-color:rgba(109,70,208,0.25)}
body.theme-light .topbar-btn-amber{background:rgba(180,83,9,0.08);color:#b45309;border-color:rgba(180,83,9,0.25)}
body.theme-light .topbar-btn-green{background:rgba(4,120,87,0.08);color:#047857;border-color:rgba(4,120,87,0.25)}
body.theme-light .topbar-btn-indigo{background:rgba(67,56,202,0.08);color:#4338ca;border-color:rgba(67,56,202,0.25)}
body.theme-light .topbar-btn-gold{background:rgba(180,83,9,0.08);color:#b45309;border-color:rgba(180,83,9,0.25)}

body.theme-light .bg{background:radial-gradient(ellipse at 25% 20%,rgba(208,106,66,0.06) 0%,transparent 55%),radial-gradient(ellipse at 80% 80%,rgba(109,70,208,0.05) 0%,transparent 55%),radial-gradient(ellipse at 50% 50%,#f5f3ef 0%,#eae7e1 100%)}
body.theme-light .bg-grid{background-image:radial-gradient(rgba(208,106,66,0.04) 1px, transparent 1px)}
body.theme-light .orb-1{background:radial-gradient(circle,rgba(208,106,66,0.06) 0%,transparent 70%)}
body.theme-light .orb-2{background:radial-gradient(circle,rgba(109,70,208,0.05) 0%,transparent 70%)}
body.theme-light .orb-3{background:radial-gradient(circle,rgba(180,83,9,0.03) 0%,transparent 70%)}

/* ─── CODEMIRROR OVERRIDES ────────────────────────────── */
.CodeMirror{
  font-family:var(--mono);font-size:13.5px;height:100%;
  background:transparent!important;color:var(--text)!important;
}
.CodeMirror-gutters{background:var(--bg-surface)!important;border-right:1px solid var(--border)!important}
.CodeMirror-linenumber{color:var(--text3)!important;padding:0 8px 0 4px}
.CodeMirror-cursor{border-left:2px solid var(--accent)!important}
.CodeMirror-selected{background:rgba(255,255,255,0.08)!important}
.CodeMirror-focused .CodeMirror-selected{background:var(--accent-dim)!important}
.CodeMirror-activeline-background{background:rgba(255,255,255,0.02)!important}
.pg-editor-wrap .CodeMirror{padding:8px 0}

/* ─── BASE STYLES ─────────────────────────────────────── */
body{
  font-family:var(--font);background:var(--bg);color:var(--text);
  min-height:100vh;overflow-x:hidden;font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
::selection{background:rgba(232,132,92,0.25);color:var(--text)}
a{color:var(--accent);text-decoration:none;transition:all 0.25s ease}
a:hover{color:var(--text);text-decoration:none}
button{cursor:pointer;font-family:var(--font);border:none;outline:none;background:none;color:inherit;transition:all 0.25s ease}
button:active{transform:scale(0.97)}
input,textarea{font-family:var(--font);outline:none;border:none;color:inherit}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--border3)}
code{font-family:var(--mono)}
pre{margin:1.25rem 0;border-radius:var(--r2);overflow:hidden;border:1px solid var(--border2);box-shadow:0 6px 20px rgba(0,0,0,0.2)}
pre code.hljs{font-family:var(--mono);font-size:13px;padding:1.25rem 1.5rem;background:var(--bg-surface2)!important}
.hljs-comment,.hljs-quote{color:#8e8780;font-style:italic}

/* ─── WARM BACKGROUND ─────────────────────────────────── */
.aurora-bg{position:fixed;inset:0;pointer-events:none;z-index:-2;overflow:hidden;background:radial-gradient(ellipse at 30% 20%,rgba(232,132,92,0.04) 0%,transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(155,138,251,0.03) 0%,transparent 60%),radial-gradient(circle at 50% 50%,#0f0d15 0%,#0a0812 100%)}
.aurora-sphere{position:absolute;border-radius:50%;filter:blur(140px);mix-blend-mode:screen;animation:drift 35s infinite alternate ease-in-out}
.sphere-1{width:50vw;height:50vw;background:radial-gradient(circle,rgba(232,132,92,0.07) 0%,transparent 80%);top:-15vw;left:-10vw;opacity:0.6}
.sphere-2{width:55vw;height:55vw;background:radial-gradient(circle,rgba(155,138,251,0.06) 0%,transparent 80%);bottom:-20vw;right:-10vw;animation-delay:-7s;animation-duration:40s;opacity:0.5}
.sphere-3{width:40vw;height:40vw;background:radial-gradient(circle,rgba(240,193,72,0.04) 0%,transparent 80%);top:25vh;left:40vw;opacity:0.3;animation-delay:-15s;animation-duration:28s}
@keyframes drift{
  0%{transform:translate(0,0) rotate(0deg) scale(1)}
  50%{transform:translate(4vw,4vh) rotate(120deg) scale(1.08)}
  100%{transform:translate(-3vw,-3vh) rotate(240deg) scale(0.95)}
}

/* ─── LANDING ──────────────────────────────────────────── */
#landing{min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}
.land-nav{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 3rem;border-bottom:1px solid var(--border);backdrop-filter:blur(8px)}
.logo{font-family:var(--head);font-size:1.35rem;font-weight:700;letter-spacing:-0.02em;color:var(--text);display:flex;align-items:center;gap:6px}
.logo span{background:linear-gradient(135deg,var(--accent) 0%,var(--purple) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.land-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5rem 2rem 3rem;text-align:center;position:relative}
.hero-glow{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(232,132,92,0.03) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-55%);pointer-events:none}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--accent-dim);border:1px solid var(--accent-border);color:var(--accent);border-radius:99px;padding:7px 18px;font-size:12px;font-weight:600;letter-spacing:0.04em;margin-bottom:1.75rem;font-family:var(--mono)}
.hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.5s infinite ease-in-out}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.7)}}
.hero-title{font-family:var(--head);font-size:clamp(2.5rem,6.5vw,4.5rem);font-weight:700;line-height:1.08;letter-spacing:-0.03em;max-width:820px;margin-bottom:1.5rem;background:linear-gradient(to bottom,var(--text) 40%,var(--text2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-title .hl{background:linear-gradient(135deg,var(--accent) 0%,var(--purple) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{font-size:1.1rem;color:var(--text2);max-width:540px;line-height:1.8;margin-bottom:3.5rem;font-weight:400}

/* Language Cards */
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;width:100%;max-width:960px;padding:0 1.5rem}
.lang-card{
  background:var(--bg-panel);border:1px solid var(--border2);border-radius:var(--r2);
  padding:1.75rem 1.25rem;display:flex;flex-direction:column;align-items:center;gap:12px;
  cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;
}
.lang-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity 0.3s;border-radius:var(--r2);background:linear-gradient(145deg,rgba(232,132,92,0.04),rgba(155,138,251,0.04))}
.lang-card:hover{
  border-color:var(--accent-border);transform:translateY(-5px);
  box-shadow:0 12px 28px -8px rgba(0,0,0,0.35),0 4px 10px -4px rgba(232,132,92,0.08);
}
.lang-card:hover::before{opacity:1}
.lang-card:active{transform:translateY(-2px);box-shadow:0 6px 16px -6px rgba(0,0,0,0.3)}
.lang-icon{font-size:2.5rem;line-height:1;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1)}
.lang-card:hover .lang-icon{transform:scale(1.12) rotate(-3deg)}
.lang-name{font-family:var(--head);font-weight:600;font-size:1rem;color:var(--text)}
.lang-topics{font-size:11px;color:var(--text2);font-family:var(--mono);background:var(--bg-tint);padding:2px 8px;border-radius:99px;border:1px solid var(--border)}
.land-footer{text-align:center;padding:2.5rem;color:var(--text3);font-size:13px;border-top:1px solid var(--border);font-family:var(--mono)}

/* ─── APP SHELL ─────────────────────────────────────────── */
#app{display:none;height:100vh;flex-direction:column;position:relative;z-index:2}
.topbar{
  height:var(--topbar-h);background:var(--bg-panel);backdrop-filter:var(--panel-blur);
  -webkit-backdrop-filter:var(--panel-blur);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 1.5rem;gap:0;flex-shrink:0;z-index:100;
  box-shadow:0 2px 12px rgba(0,0,0,0.15);
}
.topbar-logo{font-family:var(--head);font-size:1.1rem;font-weight:700;color:var(--text);padding:0 0.75rem;display:flex;align-items:center;gap:6px;letter-spacing:-0.02em;transition:opacity 0.2s}
.topbar-logo:hover{opacity:0.8}
.topbar-logo span{background:linear-gradient(135deg,var(--accent) 0%,var(--purple) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.topbar-divider{width:1px;height:22px;background:var(--border2);margin:0 0.75rem}
.lang-switcher{
  display:flex;align-items:center;gap:6px;padding:0 0.85rem;height:36px;
  border-radius:var(--r);background:var(--bg-tint);border:1px solid var(--border);
  cursor:pointer;font-size:13px;color:var(--text2);transition:all 0.25s ease;
}
.lang-switcher:hover{border-color:var(--border3);background:var(--bg-tint2);color:var(--text);transform:translateY(-1px)}
.lang-switcher:active{transform:translateY(0)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.progress-ring{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text2)}
.progress-bar-wrap{width:100px;height:5px;background:var(--bg-tint);border-radius:99px;overflow:hidden}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--accent) 0%,var(--purple) 100%);border-radius:99px;transition:width 0.5s cubic-bezier(0.4,0,0.2,1)}
.btn-chat{
  background:var(--accent-dim);border:1px solid var(--accent-border);color:var(--accent);
  border-radius:var(--r);padding:8px 16px;font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:8px;transition:all 0.25s ease;
}
.btn-chat:hover{background:rgba(232,132,92,0.15);border-color:rgba(232,132,92,0.4);transform:translateY(-1px);box-shadow:0 4px 12px rgba(232,132,92,0.08)}
.btn-chat:active{transform:translateY(0)}
.btn-chat svg{width:15px;height:15px;transition:transform 0.25s}
.btn-chat:hover svg{transform:scale(1.1)}

.app-body{flex:1;display:flex;overflow:hidden}

/* ─── SIDEBAR ─────────────────────────────────────────── */
#sidebar{
  width:var(--sidebar-w);background:var(--bg-panel);backdrop-filter:var(--panel-blur);
  -webkit-backdrop-filter:var(--panel-blur);border-right:1px solid var(--border);
  display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;
}
.sidebar-lang{padding:1.5rem 1.25rem 1rem;border-bottom:1px solid var(--border)}
.sidebar-lang-name{font-family:var(--head);font-weight:700;font-size:1.1rem;display:flex;align-items:center;gap:10px}
.sidebar-lang-sub{font-size:12px;color:var(--text2);margin-top:4px}
.topic-list{
  flex:1;
  overflow-y:auto;
  padding:1.5rem 1rem;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:flex-start;
}
.topic-list::before{
  content:'';
  position:absolute;
  top:1.5rem;
  bottom:1.5rem;
  left:calc(1rem + 22px);
  width:2px;
  background:var(--border2);
  z-index:0;
}
.topic-item{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:14px;
  cursor:pointer;
  width:100%;
  padding:10px 14px;
  border-radius:var(--r2);
  transition:all 0.25s cubic-bezier(0.4,0,0.2,1);
  opacity:0.45;
  pointer-events:none;
}
.topic-item.unlocked, .topic-item.active, .topic-item.done{
  opacity:1;
  pointer-events:auto;
}
.topic-item.unlocked:hover{
  background:var(--bg-tint);
  transform:translateX(4px);
}
.topic-num{
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--border3);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  font-family:var(--head);
  color:var(--text3);
  flex-shrink:0;
  transition:all 0.3s ease;
  box-shadow:0 0 0 4px var(--bg);
  position:relative;
  z-index:2;
}
.topic-item.active .topic-num{
  border-color:var(--accent);
  background:var(--accent-dim);
  color:var(--accent);
  box-shadow:0 0 0 4px var(--bg),0 0 12px rgba(232,132,92,0.2);
  transform:scale(1.08);
}
.topic-item.unlocked:not(.active):not(.done) .topic-num{
  border-color:var(--text2);
  color:var(--text);
  background:var(--bg-tint);
}
.topic-item.done .topic-num{
  border-color:var(--accent);
  background:var(--accent);
  color:var(--text-on-accent);
  box-shadow:0 0 0 4px var(--bg);
}
.topic-title{
  font-size:13.5px;
  font-weight:600;
  color:var(--text2);
  transition:all 0.25s ease;
  line-height:1.4;
  text-align:left;
  flex:1;
  white-space:normal;
  pointer-events:none;
}
.topic-item.active .topic-title{
  color:var(--text);
  font-weight:700;
}
.topic-item.done .topic-title{
  color:var(--text);
}
.topic-item:hover .topic-title{
  color:var(--accent);
}
.topic-item:not(.unlocked):not(.done):not(.active) .topic-num::after{
  content:'🔒';
  font-size:12px;
}
.topic-item:not(.unlocked):not(.done):not(.active) .topic-num{
  font-size:0;
}
.topic-item.done::after{
  content:'';
  position:absolute;
  top:38px;
  left:calc(14px + 18px - 1px);
  width:2px;
  height:calc(1rem + 20px);
  background:var(--accent);
  z-index:1;
}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 0 0 5px var(--bg),0 0 12px rgba(232,132,92,0.18);transform:scale(1.08)}
  50%{box-shadow:0 0 0 7px var(--bg),0 0 22px rgba(232,132,92,0.35);transform:scale(1.14)}
}
.sidebar-footer{padding:1rem 1.25rem;border-top:1px solid var(--border);font-size:11px;color:var(--text2);font-family:var(--mono)}

/* ─── MAIN CONTENT ─────────────────────────────────────── */
#main{flex:1;overflow-y:auto;display:flex;flex-direction:column;background:transparent}
.content-tabs{
  display:flex;align-items:center;gap:0;border-bottom:1px solid var(--border);
  background:var(--bg-panel);backdrop-filter:blur(8px);
  padding:0 2.5rem;flex-shrink:0;position:sticky;top:0;z-index:10;
}
.tab-btn{
  padding:1.1rem 1.5rem;font-size:13.5px;font-weight:600;color:var(--text2);
  background:none;border-bottom:2px solid transparent;transition:all 0.25s ease;
  margin-bottom:-1px;letter-spacing:0.01em;position:relative;
}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-btn:hover:not(.active){color:var(--text)}
.tab-content{display:none;flex:1;padding:2.5rem;max-width:900px;animation:fadeIn 0.35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.tab-content.active{display:block}

/* Lesson */
.lesson-header{margin-bottom:2.25rem}
.lesson-header h1{font-family:var(--head);font-size:2.15rem;font-weight:700;letter-spacing:-0.02em;line-height:1.15;margin-bottom:0.75rem;color:var(--text)}
.lesson-meta{display:flex;align-items:center;gap:1.25rem;font-size:13px;color:var(--text2)}
.lesson-badge{background:var(--bg-tint);border:1px solid var(--border2);color:var(--text2);border-radius:99px;padding:3px 12px;font-family:var(--mono);font-size:11px}
.lesson-body h2{font-family:var(--head);font-size:1.35rem;font-weight:700;margin:2.5rem 0 0.85rem;color:var(--text);letter-spacing:-0.01em}
.lesson-body h3{font-family:var(--head);font-size:1.05rem;font-weight:600;margin:1.75rem 0 0.6rem;color:var(--text2)}
.lesson-body p{margin-bottom:1.25rem;color:var(--text2);line-height:1.85}
.lesson-body p strong{color:var(--text);font-weight:600}
.lesson-body ul,.lesson-body ol{margin:0.75rem 0 1.25rem 1.75rem;color:var(--text2)}
.lesson-body li{margin-bottom:0.5rem;line-height:1.7}
.lesson-body .inline-code{background:var(--bg-tint2);border:1px solid var(--border2);border-radius:5px;padding:2px 7px;font-family:var(--mono);font-size:12.5px;color:var(--accent)}
.key-concept{
  background:var(--accent-dim);border:1px solid var(--accent-border);
  border-left:4px solid var(--accent);border-radius:0 var(--r) var(--r) 0;
  padding:1.25rem 1.5rem;margin:1.5rem 0;
  box-shadow:0 4px 16px rgba(0,0,0,0.12);transition:all 0.3s ease;
}
.key-concept:hover{box-shadow:0 6px 20px rgba(0,0,0,0.18);transform:translateX(2px)}
.key-concept strong{color:var(--accent);font-family:var(--mono);font-size:12px;display:block;margin-bottom:6px;letter-spacing:0.08em}
.lesson-actions{display:flex;gap:12px;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}
.btn-primary{
  background:linear-gradient(135deg,var(--accent) 0%,#d06a42 100%);color:var(--text-on-accent);
  border-radius:var(--r);padding:12px 24px;font-size:14px;font-weight:700;
  display:flex;align-items:center;gap:8px;transition:all 0.25s ease;
  box-shadow:0 4px 14px rgba(232,132,92,0.2);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(232,132,92,0.3);filter:brightness(1.05)}
.btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px rgba(232,132,92,0.15)}
.btn-secondary{
  background:var(--bg-tint);color:var(--text);border:1px solid var(--border2);
  border-radius:var(--r);padding:12px 24px;font-size:14px;font-weight:600;transition:all 0.25s ease;
}
.btn-secondary:hover{border-color:var(--border3);background:var(--bg-tint2);transform:translateY(-1px)}
.btn-secondary:active{transform:translateY(0)}

/* Resources */
.resources-grid{display:grid;gap:12px}
.resource-card{
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r2);
  padding:1.25rem 1.5rem;display:flex;align-items:flex-start;gap:14px;
  transition:all 0.3s cubic-bezier(0.4,0,0.2,1);cursor:pointer;
}
.resource-card:hover{
  border-color:var(--purple-border);background:var(--bg-panel-hover);
  transform:translateY(-2px) translateX(2px);
  box-shadow:0 8px 20px rgba(0,0,0,0.2);
}
.resource-card:active{transform:translateY(0) translateX(0)}
.res-icon{width:40px;height:40px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem;box-shadow:0 3px 8px rgba(0,0,0,0.15)}
.res-icon.docs{background:var(--purple-dim);border:1px solid var(--purple-border)}
.res-icon.video{background:var(--red-dim);border:1px solid rgba(232,93,117,0.22)}
.res-icon.article{background:var(--accent-dim);border:1px solid var(--accent-border)}
.res-icon.practice{background:var(--amber-dim);border:1px solid rgba(240,193,72,0.22)}
.res-title{font-size:14.5px;font-weight:600;color:var(--text);margin-bottom:4px}
.res-desc{font-size:12.5px;color:var(--text2);line-height:1.55}
.res-type{font-size:10px;font-family:var(--mono);color:var(--text2);margin-top:6px;text-transform:uppercase;letter-spacing:0.08em;background:var(--bg-tint);padding:1px 6px;border-radius:4px;display:inline-block;border:1px solid var(--border)}
.resources-section-title{font-family:var(--head);font-size:1.1rem;font-weight:700;margin-bottom:1.25rem;color:var(--text)}

/* ─── QUIZ MODAL ──────────────────────────────────────── */
#quiz-modal{position:fixed;inset:0;background:var(--bg-surface2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1000;display:none;align-items:center;justify-content:center;padding:1rem}
#quiz-modal.open{display:flex}
.quiz-box{
  background:var(--box);backdrop-filter:var(--panel-blur);-webkit-backdrop-filter:var(--panel-blur);
  border:1px solid var(--border2);border-radius:var(--r3);width:100%;max-width:620px;
  overflow:hidden;box-shadow:0 24px 60px -12px rgba(0,0,0,0.5);
  animation:slideUp 0.4s cubic-bezier(0.34,1.4,0.64,1);
}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.quiz-header{padding:1.75rem 2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.quiz-title{font-family:var(--head);font-size:1.2rem;font-weight:700}
.quiz-close{
  background:var(--bg-tint);border:1px solid var(--border);border-radius:var(--r);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  color:var(--text2);cursor:pointer;font-size:1rem;transition:all 0.25s ease;
}
.quiz-close:hover{border-color:var(--border3);color:var(--text);background:var(--bg-tint2)}
.quiz-progress-bar{height:4px;background:var(--bg-tint)}
.quiz-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent) 0%,var(--purple) 100%);transition:width 0.4s cubic-bezier(0.4,0,0.2,1)}
.quiz-body{padding:2rem}
.quiz-q-num{font-size:11px;font-family:var(--mono);color:var(--accent);margin-bottom:0.85rem;letter-spacing:0.08em;font-weight:600}
.quiz-question{font-size:1.1rem;font-weight:600;color:var(--text);margin-bottom:1.75rem;line-height:1.55}
.quiz-options{display:flex;flex-direction:column;gap:10px}
.quiz-option{
  background:var(--bg-tint);border:1px solid var(--border2);border-radius:var(--r);
  padding:14px 18px;cursor:pointer;display:flex;align-items:center;gap:12px;
  transition:all 0.25s ease;font-size:14.5px;color:var(--text);
}
.quiz-option:hover:not(.answered){border-color:var(--border3);background:var(--bg-tint2);transform:translateX(4px)}
.quiz-option.selected:not(.answered){border-color:var(--purple);background:var(--purple-dim)}
.quiz-option.correct{border-color:var(--accent)!important;background:var(--accent-dim)!important;color:var(--accent)!important}
.quiz-option.wrong{border-color:var(--red)!important;background:var(--red-dim)!important;color:var(--red)!important}
.opt-letter{
  width:24px;height:24px;border-radius:50%;background:var(--bg-tint);
  border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-family:var(--mono);font-weight:700;flex-shrink:0;transition:inherit;
}
.quiz-option.correct .opt-letter{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.quiz-option.wrong .opt-letter{background:var(--red);border-color:var(--red);color:#fff}
.quiz-feedback{margin-top:1.25rem;padding:1rem 1.25rem;border-radius:var(--r);font-size:13.5px;font-weight:500;display:none;animation:fadeIn 0.25s ease}
.quiz-feedback.show{display:block}
.quiz-feedback.correct{background:var(--accent-dim);border:1px solid var(--accent-border);color:var(--accent)}
.quiz-feedback.wrong{background:var(--red-dim);border:1px solid rgba(232,93,117,0.22);color:var(--red)}
.quiz-footer{padding:1.25rem 2rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.quiz-score{font-size:13px;color:var(--text2);font-family:var(--mono)}
.btn-next{
  background:var(--accent);color:var(--text-on-accent);border-radius:var(--r);padding:10px 24px;
  font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:6px;
  transition:all 0.25s ease;opacity:0.3;pointer-events:none;
}
.btn-next.ready{opacity:1;pointer-events:auto;box-shadow:0 3px 10px rgba(232,132,92,0.15)}
.btn-next.ready:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-next.ready:active{transform:translateY(0)}
.quiz-result{text-align:center;padding:2.5rem 2rem}
.result-score{font-family:var(--head);font-size:3.5rem;font-weight:700;margin-bottom:0.5rem;letter-spacing:-0.03em}
.result-score.great{color:var(--accent)}
.result-score.ok{color:var(--amber)}
.result-score.low{color:var(--red)}
.result-msg{font-size:1.05rem;color:var(--text2);margin-bottom:2rem}
.result-actions{display:flex;gap:10px;justify-content:center}

/* ─── FLASHCARD REVIEW MODAL ──────────────────────────── */
#flashcard-modal{position:fixed;inset:0;background:var(--bg-surface2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1000;display:none;align-items:center;justify-content:center;padding:1rem}
#flashcard-modal.open{display:flex}
.flashcard-box{background:var(--box);border:1px solid var(--border);border-radius:16px;width:480px;max-width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.5);display:flex;flex-direction:column;max-height:90vh}
.flashcard-header{padding:1.5rem 2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.flashcard-title{font-family:var(--head);font-size:1.15rem;font-weight:700}
.flashcard-stats{text-align:center;font-size:12px;color:var(--text3);padding:8px 2rem 0;font-family:var(--mono)}
.flashcard-card{perspective:1000px;padding:1.5rem 2rem;cursor:pointer;flex:1}
.flashcard-inner{position:relative;width:100%;min-height:220px;transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);transform-style:preserve-3d}
.flashcard-inner.flipped{transform:rotateY(180deg)}
.flashcard-front,.flashcard-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:2rem}
.flashcard-back{transform:rotateY(180deg)}
.fc-label{font-size:11px;font-family:var(--mono);color:var(--text3);letter-spacing:0.08em;font-weight:600;text-transform:uppercase;margin-bottom:0.75rem}
.fc-text{font-size:1.1rem;line-height:1.55;text-align:center;color:var(--text)}
.flashcard-hint{text-align:center;font-size:12px;color:var(--text3);padding:0 2rem 0.5rem;font-style:italic}
.flashcard-actions{display:flex;gap:8px;padding:0.75rem 2rem 1.5rem;justify-content:center}
.fc-btn{flex:1;padding:10px 0;border-radius:var(--r);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s;border:1px solid transparent}
.fc-btn:hover{transform:translateY(-1px)}
.fc-again{background:rgba(239,68,68,0.12);color:#ef4444;border-color:rgba(239,68,68,0.25)}
.fc-again:hover{background:rgba(239,68,68,0.2)}
.fc-hard{background:rgba(245,158,11,0.12);color:#f59e0b;border-color:rgba(245,158,11,0.25)}
.fc-hard:hover{background:rgba(245,158,11,0.2)}
.fc-good{background:rgba(16,185,129,0.12);color:#10b981;border-color:rgba(16,185,129,0.25)}
.fc-good:hover{background:rgba(16,185,129,0.2)}
.fc-easy{background:rgba(99,102,241,0.12);color:#818cf8;border-color:rgba(99,102,241,0.25)}
.fc-easy:hover{background:rgba(99,102,241,0.2)}
.flashcard-progress{height:4px;background:var(--bg-tint);margin:0 2rem 1.5rem;border-radius:2px}
.flashcard-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--purple));border-radius:2px;transition:width 0.4s cubic-bezier(0.4,0,0.2,1)}

/* ─── CHAT PANEL ─────────────────────────────────────── */
#chat-panel{
  width:var(--chat-w);background:var(--bg-panel);backdrop-filter:var(--panel-blur);
  -webkit-backdrop-filter:var(--panel-blur);border-left:1px solid var(--border);
  display:none;flex-direction:column;flex-shrink:0;
}
#chat-panel.open{display:flex}
.chat-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0}
.ai-avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent) 0%,var(--purple) 100%);
  display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;
  box-shadow:0 3px 8px rgba(232,132,92,0.15);
}
.chat-header-info .name{font-size:14px;font-weight:700;color:var(--text)}
.chat-header-info .status{font-size:11px;color:var(--accent);display:flex;align-items:center;gap:5px;font-weight:500}
.chat-header-info .status::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent)}
.chat-close{
  margin-left:auto;background:var(--bg-tint);color:var(--text2);font-size:1.1rem;
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border-radius:6px;border:1px solid var(--border);transition:all 0.25s ease;
}
.chat-close:hover{background:var(--bg-tint2);color:var(--text);border-color:var(--border3)}
.chat-context{padding:0.75rem 1.25rem;background:var(--accent-dim);border-bottom:1px solid var(--accent-border);font-size:11px;color:var(--accent);font-family:var(--mono);font-weight:500;letter-spacing:0.02em}
.chat-messages{flex:1;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:14px}
.chat-msg{display:flex;flex-direction:column;gap:5px;animation:msgIn 0.3s cubic-bezier(0.16,1,0.3,1)}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.chat-msg.user .bubble{
  background:linear-gradient(135deg,var(--accent) 0%,#d06a42 100%);color:var(--text-on-accent);
  border-radius:18px 18px 4px 18px;align-self:flex-end;max-width:85%;
  padding:10px 16px;font-size:13.5px;line-height:1.55;font-weight:600;
  box-shadow:0 3px 12px rgba(232,132,92,0.12);
}
.chat-msg.ai .bubble{
  background:rgba(24,21,36,0.7);border:1px solid var(--border2);color:var(--text);
  border-radius:18px 18px 18px 4px;align-self:flex-start;max-width:92%;
  padding:12px 16px;font-size:13.5px;line-height:1.65;
  box-shadow:0 3px 10px rgba(0,0,0,0.12);
}
.chat-msg.ai .bubble code{font-family:var(--mono);font-size:12px;background:var(--bg-tint2);padding:2px 6px;border-radius:4px;color:var(--accent);border:1px solid var(--border)}
.chat-msg.ai .bubble pre{margin:10px 0 5px;background:var(--bg-surface)!important;border-radius:10px;padding:12px;overflow-x:auto;border:1px solid var(--border2)}
.chat-msg.ai .bubble pre code{background:none;padding:0;font-size:12px;border:none}
.chat-typing .bubble{padding:14px 18px}
.typing-dots{display:flex;gap:5px;align-items:center}
.typing-dots span{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:dot 1.4s infinite;opacity:0.7}
.typing-dots span:nth-child(2){animation-delay:0.2s}
.typing-dots span:nth-child(3){animation-delay:0.4s}
@keyframes dot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
.chat-input-area{padding:1rem;border-top:1px solid var(--border);display:flex;gap:10px;align-items:flex-end;flex-shrink:0}
.chat-input{
  flex:1;background:var(--bg-tint);border:1px solid var(--border2);
  border-radius:14px;padding:11px 14px;font-size:13px;color:var(--text);
  resize:none;line-height:1.5;max-height:100px;min-height:42px;transition:all 0.25s ease;
}
.chat-input::placeholder{color:var(--text3)}
.chat-input:focus{border-color:var(--accent-border);background:var(--bg-tint2);box-shadow:0 0 0 3px rgba(232,132,92,0.06)}
.chat-send{
  width:42px;height:42px;background:linear-gradient(135deg,var(--accent) 0%,#d06a42 100%);
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all 0.25s ease;box-shadow:0 3px 10px rgba(232,132,92,0.15);
}
.chat-send:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 5px 14px rgba(232,132,92,0.2)}
.chat-send:active{transform:translateY(0)}
.chat-send svg{width:16px;height:16px;color:var(--text-on-accent);fill:currentColor}
.chat-suggestions{padding:0 1rem 0.75rem;display:flex;flex-wrap:wrap;gap:6px}
.chat-suggestion{
  background:var(--bg-tint);border:1px solid var(--border2);border-radius:99px;
  padding:5px 12px;font-size:11px;color:var(--text2);cursor:pointer;
  transition:all 0.25s ease;white-space:nowrap;
}
.chat-suggestion:hover{border-color:var(--accent-border);color:var(--accent);background:var(--accent-dim);transform:translateY(-1px)}
.chat-suggestion:active{transform:translateY(0)}

/* ─── LOCAL AI BADGE ─────────────────────────────────── */
.ai-local-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:linear-gradient(135deg,rgba(232,132,92,0.06),rgba(155,138,251,0.06));
  border:1px solid rgba(155,138,251,0.22);border-radius:99px;padding:3px 10px;
  font-size:10px;color:var(--purple);font-family:var(--mono);font-weight:700;
  letter-spacing:0.05em;white-space:nowrap;
}
.ai-local-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;animation:statusPulse 2.5s infinite}
.ai-status-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;animation:statusPulse 3s infinite}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:0.35}}

/* ─── WELCOME SCREEN ─────────────────────────────────── */
.welcome-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:4rem;color:var(--text2)}
.welcome-screen h2{font-family:var(--head);font-size:1.6rem;font-weight:700;color:var(--text);margin-bottom:0.5rem;letter-spacing:-0.02em}

/* ─── MISC ───────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:4px 12px;font-size:11px;font-family:var(--mono);font-weight:600;border:1px solid transparent}
.pill.green{background:var(--accent-dim);color:var(--accent);border-color:var(--accent-border)}
.pill.purple{background:var(--purple-dim);color:var(--purple);border-color:var(--purple-border)}
.tooltip{position:relative}

/* ─── PLAYGROUND ───────────────────────────────────────── */
.pg-container{display:flex;flex-direction:column;height:calc(100vh - var(--topbar-h) - 100px);gap:15px;animation:fadeIn 0.35s ease}
.pg-header{display:flex;justify-content:space-between;align-items:center}
.pg-title{font-family:var(--head);font-size:1.25rem;font-weight:700;color:var(--text)}
.pg-editor-wrap{flex:1;border:1px solid var(--border2);border-radius:var(--r2);background:var(--bg-surface);overflow:hidden;display:flex;flex-direction:column}
.pg-editor{flex:1;background:transparent;color:var(--accent);padding:1.25rem;font-family:var(--mono);font-size:13.5px;line-height:1.5;resize:none;border:none;outline:none}
.pg-output-wrap{height:35%;border:1px solid var(--border2);border-radius:var(--r2);background:var(--bg-surface2);overflow:hidden;display:flex;flex-direction:column;min-height:150px}
.pg-output-header{background:var(--bg-tint);border-bottom:1px solid var(--border2);padding:8px 16px;font-size:11px;font-family:var(--mono);color:var(--text2);text-transform:uppercase;letter-spacing:0.05em;display:flex;justify-content:space-between;align-items:center}
.pg-output{flex:1;padding:1.25rem;font-family:var(--mono);font-size:13px;color:var(--text);overflow-y:auto;white-space:pre-wrap;margin:0}
.pg-output.error{color:var(--red)}

/* ─── SPLIT PANE & TRACER PANEL ─────────────────────── */
.pg-split {
  display: flex;
  gap: 20px;
  flex: 1;
  height: 100%;
}
.pg-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}
.pg-split.split-open .pg-left {
  flex: 1.2;
}
.tracer-panel {
  width: 320px;
  background: var(--bg-panel);
  border: 1px solid var(--border2);
  border-radius: var(--r2);
  backdrop-filter: var(--panel-blur);
  -webkit-backdrop-filter: var(--panel-blur);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  animation: fadeIn 0.3s ease;
}
.tracer-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-tint);
}
.tracer-title {
  font-family: var(--head);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.tracer-close {
  background: transparent;
  border: none;
  color: var(--text3);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}
.tracer-close:hover {
  color: var(--text);
  background: var(--bg-tint2);
}
.tracer-step-info {
  padding: 12px 18px;
  background: rgba(155, 138, 251, 0.04);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--purple);
  font-weight: 500;
  line-height: 1.4;
}
.tracer-controls {
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-tint);
}
.tracer-btn {
  background: var(--bg-tint);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--r);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.tracer-btn:hover {
  background: var(--bg-tint2);
  border-color: var(--border3);
}
.tracer-btn-play {
  background: var(--purple-dim);
  border-color: var(--purple-border);
  color: var(--purple);
}
.tracer-btn-play:hover {
  background: rgba(155, 138, 251, 0.16);
}
.tracer-speed-wrap {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text2);
}
.tracer-section-label {
  font-size: 10px;
  font-family: var(--mono);
  text-transform: uppercase;
  color: var(--text3);
  letter-spacing: 0.08em;
  padding: 12px 18px 6px;
  font-weight: 700;
}
.tracer-vars, .tracer-console, .tracer-stack {
  padding: 0 18px 12px;
  overflow-y: auto;
}
.tracer-vars {
  max-height: 180px;
}
.tracer-console {
  max-height: 100px;
}
.tracer-stack {
  max-height: 80px;
}
.tracer-empty {
  font-size: 12px;
  color: var(--text3);
  font-style: italic;
  padding: 4px 0;
}
.tracer-log {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text);
  padding: 3px 0;
  word-break: break-all;
}
.tracer-stack-frame {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text2);
  padding: 5px 8px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 4px;
}
.var-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
}
.var-table th, .var-table td {
  text-align: left;
  padding: 6px 8px;
  font-size: 11.5px;
}
.var-table th {
  color: var(--text3);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.var-table td {
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
}
.var-name {
  color: var(--accent);
  font-weight: 600;
}
.var-type {
  color: var(--text3);
}
.var-type.number { color: #f0c148; }
.var-type.string { color: #85e89d; }
.var-type.boolean { color: #c77dba; }
.var-type.array { color: #5b9bd5; }
.var-val {
  color: var(--text);
  word-break: break-all;
}

/* Active Line Highlight in CodeMirror */
.tracer-line-active {
  background: rgba(155, 138, 251, 0.12) !important;
  border-left: 3px solid var(--purple) !important;
}

/* ─── CODEMIRROR AUTOCOMPLETE HINTS ─────────────────── */
.CodeMirror-hints {
  position: absolute;
  z-index: 1010;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  background: var(--box) !important;
  backdrop-filter: var(--panel-blur);
  border: 1px solid var(--border3) !important;
  font-family: var(--mono);
  font-size: 12.5px;
  max-height: 20em;
  overflow-y: auto;
}
.CodeMirror-hint {
  margin: 0;
  padding: 6px 12px;
  border-radius: 4px;
  color: var(--text2);
  cursor: pointer;
  white-space: pre;
}
.CodeMirror-hint-active {
  background: linear-gradient(135deg, var(--accent) 0%, #d06a42 100%) !important;
  color: var(--text-on-accent) !important;
  font-weight: 600;
}

/* ─── ANALYTICS DASHBOARD ─────────────────────────────── */
#analytics-modal{position:fixed;inset:0;background:var(--bg-surface2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:1000;display:none;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow-y:auto}
#analytics-modal.open{display:flex}
.analytics-box{background:var(--box);border:1px solid var(--border);border-radius:16px;width:760px;max-width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.5);margin:auto}
.analytics-header{padding:1.75rem 2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.analytics-title{font-family:var(--head);font-size:1.2rem;font-weight:700}
.analytics-body{padding:2rem;max-height:75vh;overflow-y:auto}
.analytics-loading{text-align:center;color:var(--text3);padding:2rem;font-size:14px}
.analytics-section{margin-bottom:2rem}
.analytics-section:last-child{margin-bottom:0}
.analytics-section-title{font-size:13px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:1rem}
.analytics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.analytics-stat-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:1rem;text-align:center}
.analytics-stat-card .stat-value{font-family:var(--head);font-size:1.75rem;font-weight:700;letter-spacing:-0.03em}
.analytics-stat-card .stat-label{font-size:11px;color:var(--text3);margin-top:4px;text-transform:uppercase;letter-spacing:0.05em}
.analytics-bar-chart{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.analytics-bar-row{display:flex;align-items:center;gap:10px}
.analytics-bar-label{width:80px;font-size:12px;color:var(--text2);text-align:right;flex-shrink:0;overflow:hidden;text-overflow:ellipsis}
.analytics-bar-track{flex:1;height:22px;background:var(--bg-panel);border-radius:99px;overflow:hidden;position:relative}
.analytics-bar-fill{height:100%;border-radius:99px;transition:width 0.6s cubic-bezier(0.4,0,0.2,1);min-width:0}
.analytics-bar-fill.accent{background:linear-gradient(90deg,var(--accent),#d06a42)}
.analytics-bar-fill.purple{background:linear-gradient(90deg,var(--purple),#a06ab0)}
.analytics-bar-fill.green{background:linear-gradient(90deg,#10b981,#34d399)}
.analytics-bar-fill.blue{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.analytics-bar-fill.amber{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.analytics-bar-count{width:40px;font-size:11px;color:var(--text3);font-family:var(--mono)}
.analytics-activity-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14px,1fr));gap:3px}
.analytics-activity-day{width:14px;height:14px;border-radius:3px;background:var(--bg-panel);border:1px solid var(--border)}
.analytics-activity-day.level-1{background:rgba(16,185,129,0.2);border-color:rgba(16,185,129,0.1)}
.analytics-activity-day.level-2{background:rgba(16,185,129,0.45);border-color:rgba(16,185,129,0.2)}
.analytics-activity-day.level-3{background:rgba(16,185,129,0.7);border-color:rgba(16,185,129,0.3)}
.analytics-activity-day.level-4{background:#10b981;border-color:#10b981}
.analytics-streak{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text2)}
.analytics-streak .streak-fire{font-size:1.3rem}
.analytics-streak .streak-days{font-family:var(--head);font-size:1.4rem;font-weight:700;color:var(--accent)}

/* ─── SEARCH ──────────────────────────────────────────── */
#search-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:flex-start;justify-content:center;padding-top:12vh}
#search-modal.open{display:flex}
.search-overlay{position:absolute;inset:0;background:var(--bg-surface2);backdrop-filter:blur(6px)}
.search-panel{position:relative;width:560px;max-width:92vw;background:var(--box);border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.6);overflow:hidden}
.search-input-wrap{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border)}
.search-icon{font-size:1.1rem;flex-shrink:0}
.search-input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:1rem;font-family:var(--font)}
.search-input::placeholder{color:var(--text3)}
.search-close-btn{background:none;border:none;color:var(--text3);font-size:18px;cursor:pointer;padding:4px}
.search-close-btn:hover{color:var(--text)}
.search-results{max-height:55vh;overflow-y:auto;padding:8px 0}
.search-empty{text-align:center;padding:2rem 1rem;color:var(--text3);font-size:13px}
.search-result-item{display:flex;align-items:flex-start;gap:12px;padding:12px 20px;cursor:pointer;transition:background 0.15s;border-left:3px solid transparent}
.search-result-item:hover,.search-result-item.selected{background:var(--bg-panel);border-left-color:var(--accent)}
.search-result-icon{font-size:1.3rem;flex-shrink:0;margin-top:1px}
.search-result-info{flex:1;min-width:0}
.search-result-title{font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:2px}
.search-result-context{font-size:12px;color:var(--text3);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search-result-badge{font-size:10px;color:var(--text3);font-family:var(--mono);margin-top:3px}
.search-result-meta{display:flex;align-items:center;gap:6px;flex-shrink:0;font-size:11px;color:var(--text3)}
.search-highlight{color:var(--accent);font-weight:600}
.search-footer{display:flex;gap:14px;padding:10px 20px;border-top:1px solid var(--border);font-size:11px;color:var(--text3);font-family:var(--mono)}

/* ─── ROADMAP ─────────────────────────────────────────── */
.sidebar-roadmap-btn{display:block;width:100%;margin-top:10px;padding:8px 0;background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.2);border-radius:var(--r);color:#a78bfa;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.2s;text-align:center}
.sidebar-roadmap-btn:hover{background:rgba(139,92,246,0.2);border-color:rgba(139,92,246,0.35);transform:translateY(-1px)}
#roadmap-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:1rem}
#roadmap-modal.open{display:flex}
.roadmap-overlay{position:absolute;inset:0;background:var(--bg-surface2);backdrop-filter:blur(8px)}
.roadmap-box{position:relative;width:680px;max-width:95vw;max-height:85vh;background:var(--box);border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.5);display:flex;flex-direction:column}
.roadmap-header{padding:1.75rem 2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.roadmap-title{font-family:var(--head);font-size:1.15rem;font-weight:700}
.roadmap-body{padding:2rem;overflow-y:auto;flex:1}
.roadmap-loading{text-align:center;color:var(--text3);padding:2rem}
.roadmap-node{display:flex;align-items:stretch;gap:0;position:relative;min-height:70px}
.roadmap-node::before{content:'';position:absolute;left:21px;top:50px;bottom:-10px;width:2px;background:var(--border);z-index:0}
.roadmap-node:last-child::before{display:none}
.roadmap-node-icon{width:44px;display:flex;flex-direction:column;align-items:center;z-index:1;flex-shrink:0;padding-top:4px}
.roadmap-node-dot{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--border);background:var(--bg-panel);display:flex;align-items:center;justify-content:center;font-size:9px;transition:all 0.3s}
.roadmap-node-dot.completed{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px var(--accent-dim)}
.roadmap-node-dot.active{background:var(--purple);border-color:var(--purple);box-shadow:0 0 8px var(--purple-dim)}
.roadmap-node-dot.locked{background:var(--bg-panel);border-color:var(--border)}
.roadmap-node-dot.current{background:#f59e0b;border-color:#f59e0b;box-shadow:0 0 10px rgba(245,158,11,0.3)}
.roadmap-node-card{flex:1;background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;padding:12px 16px;margin-bottom:12px;margin-left:10px;cursor:pointer;transition:all 0.2s}
.roadmap-node-card:hover{transform:translateX(4px);border-color:var(--border3)}
.roadmap-node-card.completed{opacity:0.75}
.roadmap-node-card.active{border-color:rgba(139,92,246,0.3)}
.roadmap-node-card.locked{opacity:0.4;cursor:default}
.roadmap-node-card.locked:hover{transform:none;border-color:var(--border)}
.roadmap-node-card.current{border-color:rgba(245,158,11,0.4);background:rgba(245,158,11,0.06)}
.roadmap-node-title{font-size:13px;font-weight:600;margin-bottom:2px}
.roadmap-node-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text3)}
.roadmap-node-badge{font-size:10px;padding:1px 8px;border-radius:99px;font-weight:600}
.roadmap-node-badge.completed{background:var(--accent-dim);color:var(--accent)}
.roadmap-node-badge.unlocked{background:var(--purple-dim);color:var(--purple)}
.roadmap-node-badge.locked{background:var(--bg);color:var(--text3)}
.roadmap-node-badge.current{background:rgba(245,158,11,0.15);color:#f59e0b}

/* ─── CERTIFICATES ────────────────────────────────────── */
#cert-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:1rem}
#cert-modal.open{display:flex}
.cert-overlay{position:absolute;inset:0;background:var(--bg-surface2);backdrop-filter:blur(8px)}
.cert-box{position:relative;width:620px;max-width:95vw;max-height:85vh;background:var(--box);border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.5);display:flex;flex-direction:column}
.cert-header{padding:1.75rem 2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.cert-title{font-family:var(--head);font-size:1.15rem;font-weight:700}
.cert-body{padding:2rem;overflow-y:auto;flex:1}
.cert-lang-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cert-lang-info{display:flex;align-items:center;gap:12px}
.cert-lang-icon{font-size:2rem}
.cert-lang-name{font-weight:600;font-size:14px}
.cert-lang-progress{font-size:12px;color:var(--text3)}
.cert-dl-btn{background:var(--accent);color:var(--text-on-accent);border:none;border-radius:var(--r);padding:8px 16px;font-size:12px;font-weight:700;cursor:pointer;transition:all 0.2s}
.cert-dl-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.cert-dl-btn:disabled{opacity:0.3;cursor:default;transform:none}
.cert-preview{width:100%;border-radius:8px;border:1px solid var(--border);margin-top:12px;cursor:pointer;transition:opacity 0.2s}
.cert-preview:hover{opacity:0.9}
.cert-empty{text-align:center;padding:2rem;color:var(--text3);font-size:14px}
.cert-preview-area{display:flex;flex-direction:column;flex:1;min-height:0}
.cert-preview-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--border);gap:12px;flex-shrink:0}
.cert-preview-title{font-family:var(--head);font-size:0.95rem;font-weight:600;color:var(--text2);flex:1;text-align:center}
.cert-back-btn{
  background:var(--bg-tint);border:1px solid var(--border2);border-radius:var(--r);
  padding:6px 14px;font-size:12.5px;font-weight:600;color:var(--text2);cursor:pointer;transition:all 0.2s;
}
.cert-back-btn:hover{border-color:var(--border3);color:var(--text);background:var(--bg-tint2)}
.cert-dl-preview-btn{
  padding:8px 18px;font-size:13px;font-weight:700;white-space:nowrap;
}
.cert-preview-img-wrap{
  flex:1;overflow:auto;padding:1.5rem;display:flex;align-items:flex-start;justify-content:center;
  background:rgba(0,0,0,0.15);
}
.cert-preview-img{
  width:100%;max-width:720px;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,0.3);
  border:1px solid var(--border);
}
body.theme-light .cert-preview-img-wrap{background:rgba(0,0,0,0.04)}
body.theme-light .cert-preview-img{box-shadow:0 8px 32px rgba(0,0,0,0.12)}