/* =========================================================================
   Codify — shared stylesheet for all 8 academy shells.
   Extracted from the near-identical ~250-line inline <style> block every
   shell used to hard-code individually (confirmed byte-for-byte identical
   except the hero emoji and a handful of shell-specific opt-in blocks that
   stay as small residual inline <style> blocks in their own shell: Web
   Design's .live-preview-*, Python's .param-tip/#cert-canvas).

   Per-subject identity (hero emoji, --subject-accent) is driven by a
   data-subject="<code>" attribute on <body>, matching SUBJECT_META's keys
   in python-academy-app.js — set once per shell, not duplicated per rule.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Outfit:wght@500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --brand:#2f7a35; --brand-light:#4f9c42; --brand-dark:#1c4a1a; --accent:#d1752f; --accent2:#0ea5b8;
  --success:#16a34a; --warning:#d97706; --danger:#dc2626;
  --bg:#faf8f2; --surface:#ffffff; --surface2:#f2efe3; --border:#e8e1d0;
  --text:#221f19; --text-muted:#6b6558;
  --code-bg:#0f172a; --code-text:#e2e8f0;
  --sidebar-w:290px; --header-h:64px;
  --subject-accent: var(--brand-light);
  --font-display:'Outfit',system-ui,sans-serif; --font-serif:'Fraunces',Georgia,serif; --font-body:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --shadow-sm:0 2px 8px rgba(14,26,18,.06);
  --shadow-md:0 12px 30px rgba(14,26,18,.10);
  --shadow-lg:0 24px 60px rgba(14,26,18,.16);
}
body[data-subject="py"]  { --subject-accent:#2563eb; }
body[data-subject="wd"]  { --subject-accent:#ec4899; }
body[data-subject="r"]   { --subject-accent:#0d9488; }
body[data-subject="ml"]  { --subject-accent:#7c3aed; }
body[data-subject="cy"]  { --subject-accent:#e11d48; }
body[data-subject="ds"]  { --subject-accent:#0891b2; }
body[data-subject="mlr"] { --subject-accent:#65a30d; }
body[data-subject="sq"]  { --subject-accent:#ca8a04; }
html{font-size:16px;}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
code,pre,textarea.code-editor{font-family:'Cascadia Code','Consolas',monospace;}
h1,h2,h3,#header .logo,.logo-current,.card h2,.card h3,.level-card .lc-title,.puzzle-hero h1,.stage-card h3,.register-box h2{font-family:var(--font-display);letter-spacing:-.01em;}
.hero h1{font-family:var(--font-serif);letter-spacing:-.01em;font-weight:600;}

/* ===== HEADER ===== */
#header{position:fixed;top:0;left:0;right:0;height:var(--header-h);background:linear-gradient(120deg,var(--brand-dark),var(--brand));color:#fff;display:flex;align-items:center;gap:16px;padding:0 20px;z-index:1000;box-shadow:0 2px 14px rgba(28,74,26,0.28);}
#header .logo{font-size:1.2rem;font-weight:800;letter-spacing:.3px;display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
#header .subtitle{font-size:0.76rem;opacity:0.8;}
#header .spacer{flex:1;}
#progress-header{display:flex;align-items:center;gap:8px;font-size:0.8rem;color:rgba(255,255,255,0.9);}
#progress-bar-wrap{width:130px;height:7px;background:rgba(255,255,255,0.25);border-radius:4px;overflow:hidden;}
#progress-bar{height:100%;background:var(--subject-accent);border-radius:4px;transition:width .3s;width:0%;}
#student-chip{font-size:0.78rem;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);border-radius:20px;padding:4px 12px;cursor:pointer;color:#fff;}
#gamify-header{display:flex;gap:6px;}
.xp-pill,.streak-pill{font-size:0.78rem;font-weight:600;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);border-radius:20px;padding:4px 12px;color:#fff;white-space:nowrap;}
.streak-pill{background:rgba(251,146,60,0.25);border-color:rgba(251,146,60,0.5);}
.header-icon-btn{display:inline-flex;align-items:center;gap:4px;font-size:0.78rem;font-weight:600;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);border-radius:20px;padding:4px 12px;color:#fff;cursor:pointer;white-space:nowrap;font-family:inherit;position:relative;}
.header-icon-btn:hover{background:rgba(255,255,255,0.25);}
.achievement-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px;}
.achievement-badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 10px;border-radius:14px;background:var(--bg);border:1px solid var(--border);filter:grayscale(1);opacity:0.45;transition:transform .2s,opacity .2s,filter .2s;}
.achievement-badge.earned{filter:none;opacity:1;background:linear-gradient(160deg,rgba(240,151,58,0.16),rgba(240,151,58,0.02));border-color:var(--accent);}
.achievement-badge:hover{transform:translateY(-2px);}
.achievement-badge .ab-icon{font-size:1.8rem;}
.achievement-badge .ab-name{font-size:0.74rem;font-weight:600;}
#hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;}
#hamburger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;border-radius:2px;}

/* ===== SIDEBAR ===== */
#sidebar{position:fixed;top:var(--header-h);left:0;bottom:0;width:var(--sidebar-w);background:#20291a;overflow-y:auto;z-index:900;transition:transform .3s;}
#sidebar::-webkit-scrollbar{width:5px;}
#sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:4px;}
.nav-section{padding:10px 0;}
.nav-section-title{padding:14px 20px 6px;font-size:0.68rem;font-weight:800;letter-spacing:1.2px;color:rgba(255,255,255,0.4);text-transform:uppercase;display:flex;align-items:center;justify-content:space-between;}
.nav-section-title .lvl-badge{background:rgba(255,255,255,0.1);padding:2px 8px;border-radius:10px;font-size:0.62rem;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 20px;cursor:pointer;transition:background .15s;color:rgba(255,255,255,0.75);font-size:0.85rem;border-left:3px solid transparent;text-decoration:none;}
.nav-item:hover{background:rgba(255,255,255,0.08);color:#fff;}
.nav-item.active{background:rgba(255,255,255,0.12);color:#fff;border-left-color:var(--subject-accent);}
.nav-item .nb{min-width:30px;height:22px;border-radius:6px;background:rgba(255,255,255,0.12);font-size:0.68rem;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;}
.nav-item .nav-check{margin-left:auto;color:#4ade80;font-size:0.9rem;opacity:0;}
.nav-item.done .nav-check{opacity:1;}
.nav-item.done .nb{background:rgba(74,222,128,0.25);}
.contact-notify-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#f87171;margin-left:auto;box-shadow:0 0 0 2px rgba(248,113,113,0.25);flex-shrink:0;}
.nav-item.locked{opacity:0.4;cursor:not-allowed;}
.nav-item.locked .nb::after{content:'🔒';font-size:0.6rem;}

/* ===== MAIN ===== */
#main{margin-left:var(--sidebar-w);padding-top:var(--header-h);min-height:100vh;}
.page{display:none;padding:32px;max-width:920px;}
.page.active{display:block;animation:fadeInUp .35s ease both;}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* ===== HERO / CARDS ===== */
.hero{background:radial-gradient(130% 160% at 10% -20%,var(--subject-accent) 0%,var(--brand) 48%,var(--brand-dark) 100%);color:#fff;border-radius:18px;padding:44px 38px;margin-bottom:28px;position:relative;overflow:hidden;box-shadow:var(--shadow-md);}
.hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 75%);mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 75%);}
.hero::after{content:'🌱';position:absolute;right:6px;bottom:-30px;font-size:7rem;opacity:0.14;}
body[data-subject="py"]  .hero::after{content:'🧑‍💻';}
body[data-subject="wd"]  .hero::after{content:'🎨';}
body[data-subject="r"]   .hero::after{content:'📊';}
body[data-subject="ml"]  .hero::after{content:'🤖';}
body[data-subject="cy"]  .hero::after{content:'🛡️';}
body[data-subject="ds"]  .hero::after{content:'📈';}
body[data-subject="mlr"] .hero::after{content:'🧠';}
body[data-subject="sq"]  .hero::after{content:'🗄️';}
.hero h1{font-size:1.9rem;font-weight:800;line-height:1.25;margin-bottom:10px;}
.hero .meta{opacity:0.85;font-size:0.92rem;margin-bottom:20px;line-height:1.8;}
.badge{padding:5px 14px;border-radius:20px;font-size:0.78rem;font-weight:600;background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.3);display:inline-block;margin:2px;}

.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:30px;}
@media(max-width:900px){.level-grid{grid-template-columns:1fr;}}
.level-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s cubic-bezier(.2,.8,.2,1),filter .25s;}
.level-card:not(.locked){cursor:pointer;}
.level-card:not(.locked):hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);filter:brightness(1.02);}
.level-card.locked{opacity:0.55;filter:grayscale(0.5);}
.level-card .lc-icon{font-size:2.2rem;margin-bottom:8px;color:var(--subject-accent);}
.level-card .lc-title{font-weight:800;font-size:1.1rem;color:var(--brand-dark);margin-bottom:4px;}
.level-card .lc-desc{font-size:0.83rem;color:var(--text-muted);margin-bottom:14px;min-height:58px;}
.level-card .lc-status{font-size:0.75rem;font-weight:700;padding:4px 10px;border-radius:8px;display:inline-block;}
.lc-status.done{background:#dcfce7;color:#15803d;}
.lc-status.progress{background:#fef3c7;color:#92400e;}
.lc-status.locked-s{background:#f1f5f9;color:#64748b;}

.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:20px;box-shadow:var(--shadow-sm);}
.card h2{color:var(--brand-dark);font-size:1.25rem;margin-bottom:12px;}
.card h3{color:var(--brand-dark);font-size:1.05rem;margin:16px 0 8px;}
.card p{margin-bottom:10px;font-size:0.94rem;}
.card ul,.card ol{margin:8px 0 12px 22px;font-size:0.94rem;}
.card li{margin-bottom:4px;}
.scenario-box{background:linear-gradient(135deg,#f0f4e6,#fdf6ec);border:1px solid #dde3c9;border-radius:12px;padding:18px 20px;margin-bottom:18px;}
.scenario-box .sb-tag{font-size:0.7rem;font-weight:800;color:var(--brand);letter-spacing:0.8px;text-transform:uppercase;margin-bottom:6px;}
.callout{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:12px 16px;margin:12px 0;font-size:0.88rem;}
.callout.tip::before{content:'💡 ';}
.callout.new-trick{background:#ecfeff;border-color:#a5f3fc;}
.callout.new-trick::before{content:'🔧 ';}

/* ===== CODE / IDE ===== */
.code-block{background:var(--code-bg);color:var(--code-text);border-radius:10px;padding:14px 16px;font-size:0.85rem;overflow-x:auto;margin:10px 0;white-space:pre;}
.editor-wrap{border:1px solid #1e293b;border-radius:10px;overflow:hidden;margin:12px 0;}
.editor-toolbar{background:#1e293b;color:#cbd5e1;font-size:0.75rem;padding:7px 12px;display:flex;align-items:center;justify-content:space-between;}
.editor-toolbar .et-label{font-weight:700;letter-spacing:0.4px;}
.CodeMirror{height:auto;min-height:110px;font-size:0.86rem;}
.run-btn{background:var(--accent);color:#fff;border:none;padding:6px 16px;border-radius:6px;font-weight:700;font-size:0.78rem;cursor:pointer;transition:filter .15s,transform .15s;}
.run-btn:hover{filter:brightness(1.1);transform:translateY(-1px);}
.run-btn:disabled{opacity:0.5;cursor:wait;}
.console{background:#0b1120;color:#4ade80;font-family:'Cascadia Code',monospace;font-size:0.82rem;padding:12px 14px;min-height:44px;max-height:260px;overflow-y:auto;white-space:pre-wrap;border-top:1px solid #1e293b;}
.console.empty::before{content:'Output will appear here...';color:#475569;}
.console .err-line{color:#f87171;}
.runtime-loading{color:#94a3b8;display:inline-flex;align-items:center;}
.rl-spinner{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,0.25);border-top-color:#4ade80;border-radius:50%;animation:rlspin .7s linear infinite;margin-right:8px;vertical-align:-2px;flex-shrink:0;}
@keyframes rlspin{to{transform:rotate(360deg);}}

/* ===== EXERCISES ===== */
.exercise{border:1px solid var(--border);border-radius:12px;padding:18px;margin:14px 0;background:#fbfaf5;}
.exercise .ex-title{font-weight:700;color:var(--brand);margin-bottom:6px;font-size:0.98rem;}
.test-results{margin-top:10px;}
.solution-toggle{margin-top:12px;border:1px solid #dde3c9;border-radius:10px;background:#f0f4e6;overflow:hidden;}
.solution-toggle summary{cursor:pointer;padding:9px 14px;font-weight:700;font-size:0.83rem;color:#1e4a1a;list-style:none;}
.solution-toggle summary::-webkit-details-marker{display:none;}
.solution-toggle summary::before{content:'▸ ';}
.solution-toggle[open] summary::before{content:'▾ ';}
.solution-toggle .solution-block{margin:0 14px 14px;background:#17231c;}
.test-row{display:flex;align-items:center;gap:8px;font-size:0.83rem;padding:6px 10px;border-radius:6px;margin-bottom:4px;}
.test-row.pass{background:#dcfce7;color:#15803d;}
.test-row.fail{background:#fee2e2;color:#991b1b;}
.test-row .ti{font-weight:800;}

.stretch-card{border-color:#f59e0b;background:#fffbeb;}
.stretch-card h2{color:#b45309;}
.stretch-badge{display:inline-block;font-size:0.62rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;background:#fde68a;color:#92400e;border-radius:999px;padding:3px 10px;margin-left:8px;vertical-align:middle;}
.stretch-intro{color:#92400e;font-size:0.88rem;margin-top:-4px;}
.stretch-exercise{border-color:#f59e0b;background:#fffdf7;}

/* ===== FEEDBACK RATINGS ===== */
.fb-row{margin-bottom:16px;}
.fb-label{font-weight:700;font-size:0.9rem;margin-bottom:8px;}
.fb-scale{display:flex;gap:8px;}
.rate-btn{width:42px;height:42px;border-radius:10px;border:1px solid var(--border);background:#fff;font-weight:700;font-size:0.95rem;cursor:pointer;color:var(--text-muted);}
.rate-btn:hover{border-color:var(--brand-light);}
.rate-btn.active{background:var(--brand);border-color:var(--brand);color:#fff;}

/* ===== QUIZ ===== */
.quiz-card{background:#fbfaf5;border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin:14px 0;}
.quiz-q{font-weight:700;font-size:0.92rem;margin-bottom:12px;}
.quiz-q span{color:var(--brand);}
.quiz-options{display:flex;flex-direction:column;gap:8px;}
.quiz-opt{padding:10px 14px;border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:0.88rem;transition:all .15s;background:#fff;}
.quiz-opt:hover{border-color:var(--brand-light);background:#f0f4e6;}
.quiz-opt.correct{background:#dcfce7;border-color:var(--success);color:#15803d;font-weight:600;}
.quiz-opt.wrong{background:#fee2e2;border-color:var(--danger);color:#991b1b;}
.quiz-opt.disabled{pointer-events:none;opacity:0.7;}
.quiz-opt.disabled.correct{opacity:1;}
.quiz-feedback{margin-top:10px;padding:9px 13px;border-radius:8px;font-size:0.83rem;display:none;}
.quiz-feedback.show{display:block;}
.quiz-feedback.ok{background:#dcfce7;color:#15803d;}
.quiz-feedback.bad{background:#fee2e2;color:#991b1b;}
#quiz-score-banner{font-size:0.82rem;font-weight:700;margin-top:6px;}

/* ===== DAY TABS ===== */
.day-tabs{display:flex;gap:10px;margin-bottom:22px;}
.day-tab{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-weight:700;font-size:0.85rem;color:var(--text-muted);cursor:pointer;flex:1;text-align:center;font-family:inherit;}
.day-tab .dt-sub{display:block;font-weight:400;font-size:0.68rem;margin-top:3px;}
.day-tab:hover{border-color:var(--brand-light);}
.day-tab.active{background:var(--subject-accent);color:#fff;border-color:var(--subject-accent);}
.day-tab.done{border-color:var(--success);}
.day-tab.done:not(.active){color:var(--success);}
.day-tab.locked{opacity:0.5;cursor:not-allowed;}
.day-content{display:none;}
.day-content.active{display:block;}

/* ===== WEEK NAV / COMPLETE BAR ===== */
.week-progress-bar{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap;}
.wp-step{font-size:0.68rem;font-weight:700;padding:5px 10px;border-radius:8px;background:var(--surface2);color:var(--text-muted);}
.wp-step.ok{background:#dcfce7;color:#15803d;}
.complete-bar{background:var(--surface2);border:1px dashed var(--border);border-radius:12px;padding:18px;margin-top:24px;text-align:center;}
.complete-btn{background:var(--brand);color:#fff;border:none;padding:12px 28px;border-radius:10px;font-weight:700;font-size:0.92rem;cursor:pointer;margin-top:8px;transition:background .15s,transform .15s,box-shadow .15s;}
.complete-btn:disabled{background:#cbd5e1;cursor:not-allowed;}
.complete-btn:not(:disabled):hover{background:var(--brand-dark);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.req-list{display:inline-block;text-align:left;font-size:0.83rem;margin-top:8px;}
.req-list li{list-style:none;margin-bottom:4px;}
.req-list li::before{content:'⬜ ';}
.req-list li.met::before{content:'✅ ';}

/* ===== PUZZLE / MINI PROJECT ===== */
.puzzle-hero{background:#0f172a;color:#e2e8f0;border-radius:16px;padding:30px 32px;margin-bottom:24px;}
.puzzle-hero h1{font-size:1.5rem;margin-bottom:8px;color:#fbbf24;}
.puzzle-hero p{color:#94a3b8;font-size:0.9rem;}
.stage-card{border:1px solid #1e293b;background:#0b1120;border-radius:14px;padding:20px;margin-bottom:18px;color:#e2e8f0;}
.stage-card h3{color:#7dd3fc;font-size:1rem;margin-bottom:8px;}
.stage-card p{color:#cbd5e1;font-size:0.88rem;margin-bottom:8px;}
.stage-card .code-block{background:#020617;}
.stage-badge{display:inline-block;font-size:0.68rem;font-weight:700;padding:3px 10px;border-radius:8px;background:#1e293b;color:#94a3b8;margin-bottom:8px;}
.stage-badge.pass{background:#1e4a1a;color:#4ade80;}

/* ===== CERTIFICATE ===== */
.cert-wrap{text-align:center;}
.download-btn{background:var(--success);color:#fff;border:none;padding:12px 26px;border-radius:10px;font-weight:700;font-size:0.9rem;cursor:pointer;margin-top:16px;transition:filter .15s,transform .15s,box-shadow .15s;}
.download-btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:var(--shadow-md);}

/* ===== REGISTER OVERLAY ===== */
#register-overlay{position:fixed;inset:0;background:rgba(15,23,20,0.92);display:flex;align-items:center;justify-content:center;z-index:2000;}
.register-box{background:#fff;border-radius:18px;padding:36px 34px;max-width:420px;width:92%;max-height:92vh;overflow-y:auto;text-align:center;position:relative;box-shadow:var(--shadow-lg);}
.register-box .auth-close-btn{position:absolute;top:14px;right:16px;width:auto;background:none;border:none;font-size:1.3rem;line-height:1;color:var(--text-muted);cursor:pointer;padding:4px 8px;margin-top:0;border-radius:6px;}
.register-box .auth-close-btn:hover{background:var(--surface2);color:var(--text);}
.register-box h2{color:var(--brand);margin-bottom:8px;font-size:1.3rem;}
.register-box p{color:var(--text-muted);font-size:0.88rem;margin-bottom:20px;}
.register-box input,.register-box select{width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:8px;font-size:0.92rem;margin-bottom:12px;font-family:inherit;}
.register-box button{width:100%;background:var(--brand);color:#fff;border:none;padding:12px;border-radius:8px;font-weight:700;font-size:0.94rem;cursor:pointer;margin-top:6px;}
.register-box button:hover{background:var(--brand-light);}
.auth-tabs{display:flex;gap:6px;background:var(--surface2);border-radius:10px;padding:4px;margin-bottom:18px;}
.auth-tab{flex:1;background:none;border:none;padding:9px 10px;border-radius:8px;font-weight:700;font-size:0.82rem;color:var(--text-muted);cursor:pointer;font-family:inherit;}
.auth-tab.active{background:var(--brand);color:#fff;}
.auth-error{color:var(--danger);font-size:0.8rem;text-align:left;min-height:16px;margin:-4px 0 6px;}
.auth-hint{color:var(--text-muted);font-size:0.76rem;text-align:left;margin:-6px 0 10px;line-height:1.5;}
.auth-hint a{color:var(--brand);font-weight:700;text-decoration:underline;cursor:pointer;}
button.link-btn{background:none;border:none;padding:0;margin:0;color:var(--brand);font-weight:700;text-decoration:underline;cursor:pointer;font-size:0.76rem;font-family:inherit;width:auto;}

/* ===== LOGO / SWITCH-TRACK NAV ===== */
.logo-wrap{display:flex;align-items:center;gap:10px;min-width:0;}
.logo-wrap .logo{color:#fff;text-decoration:none;}
.logo-wrap .logo:hover{opacity:0.85;}
.logo-current{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);color:#fff;font-size:0.82rem;font-weight:700;padding:5px 12px;border-radius:20px;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;}
.logo-current:hover{background:rgba(255,255,255,0.2);}
.switch-track-wrap{position:relative;}
.switch-track-btn{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);color:#fff;font-size:0.78rem;font-weight:600;padding:5px 10px;border-radius:20px;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:4px;}
.switch-track-btn:hover{background:rgba(255,255,255,0.25);}
.switch-track-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(15,23,20,0.25);padding:6px;min-width:220px;z-index:1500;}
.switch-track-menu.open{display:block;}
.switch-track-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--text);text-decoration:none;font-size:0.86rem;font-weight:600;}
.switch-track-menu a:hover{background:var(--surface2);}
.switch-track-menu .stm-all{border-top:1px solid var(--border);margin-top:4px;padding-top:10px;color:var(--brand);}

@media(max-width:900px){
  #sidebar{transform:translateX(-100%);}
  #sidebar.open{transform:translateX(0);}
  #main{margin-left:0;}
  #hamburger{display:block;}
  .level-grid{grid-template-columns:1fr;}
  .page{padding:24px 20px;}
  .hero{padding:32px 26px;}
  #header .subtitle{display:none;}
}

@media(max-width:600px){
  html{font-size:15px;}
  #header{padding:0 12px;gap:8px;}
  #header .logo{font-size:1rem;}
  #header .subtitle{display:none;}
  #progress-header{gap:5px;font-size:0.72rem;}
  #progress-bar-wrap{width:70px;}
  #student-chip{padding:4px 8px;font-size:0.72rem;}
  #gamify-header{display:none;}
  .header-icon-btn{padding:4px 8px;}
  .header-icon-btn .btn-label{display:none;}
  .logo-current{max-width:120px;font-size:0.74rem;}
  .page{padding:18px 14px;}
  .hero{padding:24px 18px;border-radius:14px;}
  .hero h1{font-size:1.4rem;}
  .hero::after{font-size:6rem;}
  .card{padding:16px;}
  .level-card .lc-desc{min-height:auto;}
  .day-tabs{flex-wrap:wrap;gap:8px;}
  .day-tab{flex:1 1 calc(50% - 8px);padding:8px 10px;font-size:0.78rem;}
  .puzzle-hero{padding:22px 18px;}
  .puzzle-hero h1{font-size:1.25rem;}
  .stage-card{padding:16px;}
  .editor-toolbar{flex-wrap:wrap;gap:6px;}
  .quiz-card{padding:14px 16px;}
  .fb-scale{flex-wrap:wrap;}
  .register-box{padding:26px 20px 22px;width:94%;}
  .register-box h2{font-size:1.12rem;}
  .auth-tab{font-size:0.76rem;padding:8px;}
}

/* ===== TOAST ===== */
#pyac-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(8px);background:#20291a;color:#fff;padding:12px 22px;border-radius:10px;font-size:0.86rem;z-index:3000;box-shadow:0 6px 20px rgba(0,0,0,0.25);max-width:80vw;text-align:center;opacity:0;}
#pyac-toast.show{animation:toastIn .25s ease forwards;}
#pyac-toast.hide{animation:toastOut .25s ease forwards;}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(8px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
@keyframes toastOut{from{opacity:1;transform:translateX(-50%) translateY(0);}to{opacity:0;transform:translateX(-50%) translateY(8px);}}

/* ===== CONFETTI (certificate/level-up celebration) ===== */
#pyac-confetti{position:fixed;inset:0;pointer-events:none;z-index:3500;overflow:hidden;}
#pyac-confetti span{position:absolute;top:-20px;width:8px;height:14px;opacity:0.9;animation:confettiFall linear forwards;}
@keyframes confettiFall{to{transform:translateY(105vh) rotate(540deg);opacity:0.3;}}
