/* Kaduceus Learning Ecosystem — premium brand design system (overhaul) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{
  /* Brand palette — red #d13020 → deep #141414 → sky #e06a55 */
  --brand-red:#d13020;--brand-deep:#141414;--brand-mid:#141414;--brand-sky:#e06a55;
  --black:#141414;--black-d:#000000;--sky:#e06a55;--sky-d:#e06a55;--red:#d13020;--red-d:#a51f13;
  --bg:#eef3f6;--bg-2:#e3ecf1;--card:#fff;--line:#ece7e5;--line-2:#eef3f7;
  --ink:#0f2433;--ink-2:#33485a;--muted:#78716c;
  --ok:#0f9d58;--ok-bg:#e3f6ec;--risk:#dc2f3a;--risk-bg:#fde8ea;--amber:#d97706;--amber-bg:#fef3c7;
  /* Layered soft shadows */
  --shadow-sm:0 1px 2px rgba(10,61,92,.06),0 1px 3px rgba(10,61,92,.05);
  --shadow:0 2px 4px -1px rgba(10,61,92,.06),0 8px 20px -6px rgba(10,61,92,.12);
  --shadow-lg:0 10px 24px -8px rgba(10,61,92,.18),0 24px 48px -16px rgba(10,61,92,.16);
  --shadow-brand:0 8px 22px -6px rgba(224,106,85,.45);
  --grad-brand:linear-gradient(120deg,var(--brand-red) 0%,var(--brand-mid) 42%,var(--brand-deep) 78%,#0a0a0a 100%);
  --grad-sky:linear-gradient(135deg,var(--brand-sky),var(--sky-d));
  --radius:20px;--radius-sm:14px;--radius-lg:26px;
  /* Type scale */
  --fs-display:clamp(30px,4.4vw,46px);--fs-h1:clamp(24px,3.2vw,34px);--fs-h2:clamp(19px,2.2vw,24px);
  --fs-body:15px;--fs-cap:12.5px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font-family:inherit;cursor:pointer;border:none}
input{font-family:inherit}

/* ---- Icon system ---- */
.ico{display:inline-block;vertical-align:-0.18em;flex:0 0 auto}
.ico-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;vertical-align:middle}
.kdc-logo{display:block}
/* Buttons / headings that carry an icon: align nicely */
.btn .ico,.navbtn .ico,.card-h .ico,.chip .ico,.tab .ico{vertical-align:-0.2em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.card-h{display:flex;align-items:center;gap:9px}
.card-h .ico{color:var(--red)}

/* ---- Login ---- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;background:var(--grad-brand);padding:24px;overflow:hidden}
.login-bg{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(900px 600px at 12% -10%,rgba(224,106,85,.5),transparent 60%),
    radial-gradient(700px 500px at 100% 110%,rgba(209,48,32,.55),transparent 55%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 22px)}
.login-card{position:relative;z-index:1;background:#fff;border-radius:var(--radius-lg);padding:46px 38px;width:100%;max-width:420px;box-shadow:0 40px 90px -20px rgba(4,30,50,.55)}
.login-card .brand{text-align:center;margin-bottom:28px}
.login-card .logo{display:inline-flex;margin-bottom:14px;filter:drop-shadow(0 10px 18px rgba(10,61,92,.28));border-radius:20px}
.login-card .logo .kdc-logo{border-radius:20px}
.login-card h1{font-size:29px;font-weight:900;color:var(--black);letter-spacing:-.02em}
.login-card .tag{color:var(--red);font-size:11.5px;letter-spacing:3px;text-transform:uppercase;font-weight:700;margin-top:2px}
.login-card form{display:flex;flex-direction:column;gap:13px}
.login-card input{padding:15px 16px;border:1.5px solid var(--line);border-radius:13px;font-size:15px;outline:none;background:#f7fafc;transition:.15s}
.login-card input:focus{border-color:var(--sky);background:#fff;box-shadow:0 0 0 4px rgba(224,106,85,.14)}
.demos{margin-top:26px;border-top:1px solid var(--line);padding-top:20px;text-align:center}
.demos p{font-size:12px;color:var(--muted);margin-bottom:11px}
.chip{display:inline-flex;align-items:center;gap:6px;background:#faf6f5;border:1px solid #f0d9d3;color:var(--black);border-radius:50px;padding:8px 15px;margin:3px;font-size:13px;font-weight:600;transition:.14s}
.chip .ico{color:var(--red)}
.chip:hover{background:var(--red);color:#fff;border-color:var(--red);transform:translateY(-1px)}
.chip:hover .ico{color:#fff}

/* ---- Buttons (pill) ---- */
.btn{padding:12px 22px;border-radius:50px;font-size:14px;font-weight:700;background:#e9eef3;color:var(--ink);transition:transform .15s,box-shadow .15s,filter .15s,background .15s;letter-spacing:.01em}
.btn .ico{flex:0 0 auto}
.btn.primary{background:var(--grad-sky);color:#fff;box-shadow:var(--shadow-brand)}
.btn.primary:hover{filter:brightness(1.04);transform:translateY(-2px);box-shadow:0 12px 26px -6px rgba(224,106,85,.55)}
.btn.primary:active{transform:translateY(0)}
.btn.ghost{background:#fff;border:1.5px solid var(--line);color:var(--black);box-shadow:var(--shadow-sm)}
.btn.ghost:hover{border-color:var(--sky);color:var(--sky);transform:translateY(-1px)}
.btn.ghost .ico{color:var(--red)}
.btn.ghost:hover .ico{color:var(--sky)}
.btn.small{padding:8px 16px;font-size:13px;gap:7px}
.btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none;filter:none}
.link{background:none;color:var(--sky);font-weight:700;font-size:14px;padding:6px 0;margin-bottom:6px;display:inline-flex;align-items:center;gap:6px}
.link:hover{color:var(--sky-d);text-decoration:underline}
.err{background:var(--risk-bg);color:var(--risk);padding:12px 14px;border-radius:12px;font-size:13px;font-weight:600;border:1px solid #f6c9ce}

/* ---- Shell ---- */
.shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{background:linear-gradient(180deg,#d13020,#a51f13);color:#fff;display:flex;align-items:center;gap:22px;padding:0 clamp(14px,3vw,48px);height:68px;position:sticky;top:0;z-index:50;flex-wrap:nowrap;box-shadow:0 2px 14px rgba(4,30,50,.28);border-bottom:1px solid rgba(255,255,255,.06)}
.tb-brand{display:flex;align-items:center;gap:11px}
.tb-brand .logo{display:inline-flex;filter:drop-shadow(0 3px 8px rgba(0,0,0,.3));border-radius:9px}
.tb-brand .logo .kdc-logo{border-radius:9px}
.tb-name{display:flex;flex-direction:column;line-height:1.05}
.tb-brand b{font-size:18px;font-weight:900;letter-spacing:-.01em}
.tb-brand .eco{color:#7fd0f3;font-size:9.5px;text-transform:uppercase;letter-spacing:1.6px;font-weight:700}
.tb-nav{display:flex;gap:3px;flex:1;align-items:center}
.navbtn{display:inline-flex;align-items:center;gap:7px;background:none;color:rgba(255,255,255,.82);font-weight:600;font-size:13.5px;padding:9px 13px;border-radius:50px;transition:.14s;white-space:nowrap}
.navbtn .ico{color:rgba(255,255,255,.75);transition:.14s}
.navbtn:hover{background:rgba(255,255,255,.10);color:#fff}
.navbtn:hover .ico{color:#fff}
.navbtn.on{background:var(--grad-sky);color:#fff;box-shadow:0 4px 12px -2px rgba(224,106,85,.5)}
.navbtn.on .ico{color:#fff}
.tb-user{display:flex;align-items:center;gap:11px;font-size:14px;color:#eaf4fb}
.tb-uname{font-weight:600}
.main{flex:1;width:100%;max-width:none;margin:0 auto;padding:clamp(16px,1.8vw,26px) clamp(16px,2.4vw,44px)}
.footer{text-align:center;color:var(--muted);font-size:12px;padding:26px;border-top:1px solid var(--line)}

/* ---- Page ---- */
.page{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,22px)}
.page h2{font-size:var(--fs-h1);font-weight:800;color:var(--black);letter-spacing:-.02em}
.page h3{letter-spacing:-.01em}
.muted{color:var(--muted);font-size:13.5px}

/* ---- Page header band (full-bleed, gradient + texture + icon) ---- */
.page-header{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:clamp(22px,3vw,40px) clamp(22px,3.4vw,44px);color:#fff;background:var(--grad-brand);box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;isolation:isolate}
.page-header::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.6;
  background:
    radial-gradient(620px 360px at 88% -40%,rgba(224,106,85,.6),transparent 60%),
    repeating-linear-gradient(125deg,rgba(255,255,255,.05) 0 1px,transparent 1px 16px)}
.page-header::after{content:"";position:absolute;right:-60px;top:-70px;width:260px;height:260px;border-radius:50%;z-index:-1;border:38px solid rgba(224,106,85,.14)}
.ph-glow{position:absolute;left:-80px;bottom:-110px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(209,48,32,.5),transparent 70%);z-index:-1;filter:blur(6px)}
.ph-main{display:flex;align-items:center;gap:18px;min-width:0}
.ph-icon{flex:0 0 auto;width:60px;height:60px;border-radius:18px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 8px 20px -8px rgba(0,0,0,.4);backdrop-filter:blur(4px)}
.ph-text{min-width:0}
.ph-title{font-size:var(--fs-display);font-weight:900;color:#fff;letter-spacing:-.025em;line-height:1.02}
.ph-sub{opacity:.92;font-size:14.5px;margin-top:7px;max-width:62ch;font-weight:500}
.ph-right{flex:0 0 auto}
.level-badge{display:inline-flex;flex-direction:column;align-items:center;gap:2px;background:rgba(255,255,255,.16);padding:12px 22px;border-radius:16px;backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.lvl-k{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;opacity:.85}
.lvl-v{font-size:24px;font-weight:900;line-height:1;letter-spacing:-.02em}

/* ---- Stats ---- */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(12px,1.4vw,18px)}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;display:flex;align-items:center;gap:15px;box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.stat-ico{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:15px;background:linear-gradient(140deg,rgba(209,48,32,.12),rgba(224,106,85,.14));color:var(--red)}
.stat-ico .ico{color:var(--red)}
.stat-val{font-size:clamp(23px,2.5vw,30px);font-weight:900;color:var(--black);letter-spacing:-.03em;line-height:1.05}
.stat-lbl{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:700}

/* ---- Card ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);transition:box-shadow .16s}
.card-h{font-weight:800;font-size:15px;margin-bottom:14px;color:var(--black);letter-spacing:-.01em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bar{background:var(--bg-2);border-radius:50px;height:11px;overflow:hidden;margin:8px 0;box-shadow:inset 0 1px 2px rgba(10,61,92,.07)}
.bar-fill{height:100%;border-radius:50px;transition:width .6s cubic-bezier(.4,.1,.2,1);background:linear-gradient(90deg,var(--red),var(--sky))}
.done{background:var(--ok-bg);color:var(--ok);padding:13px 15px;border-radius:13px;font-weight:700;border:1px solid #bfead0}

/* ---- Loading skeletons ---- */
.skel{position:relative;overflow:hidden;background:var(--bg-2);border-radius:10px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:skelShimmer 1.3s infinite}
@keyframes skelShimmer{100%{transform:translateX(100%)}}
.skel-page{display:flex;flex-direction:column;gap:18px}
.skel-head{height:120px;border-radius:var(--radius-lg)}
.skel-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.skel-tile{height:84px;border-radius:var(--radius)}
.skel-block{height:150px;border-radius:var(--radius)}
.skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.skel-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.skel-line{height:14px}
.skel-line.w90{width:90%}.skel-line.w60{width:60%}.skel-line.w40{width:40%}

/* ---- Empty states ---- */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:30px 18px}
.empty-ico{width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,rgba(209,48,32,.12),rgba(224,106,85,.14));color:var(--red)}
.empty-state h3{color:var(--black);font-size:17px;font-weight:800}
.empty-state .muted{max-width:46ch}

/* ---- AI tutor typing indicator ---- */
.typing{display:inline-flex;gap:4px;align-items:center}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.5;animation:typBounce 1s infinite}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes typBounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}

/* ---- Badges ---- */
.badges{display:flex;flex-wrap:wrap;gap:14px}
.badge{display:flex;flex-direction:column;align-items:center;gap:5px;width:76px;text-align:center}
.badge span{font-size:28px;background:linear-gradient(135deg,#faf6f5,#f7cabf);width:56px;height:56px;line-height:56px;border-radius:50%;box-shadow:inset 0 0 0 2px #fff,0 3px 8px rgba(10,76,122,.1)}
.badge small{font-size:10px;color:var(--muted);font-weight:500}

/* ---- Programs ---- */
.prog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:18px}
.prog-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;cursor:pointer;transition:transform .18s,box-shadow .18s;box-shadow:var(--shadow);border-top:4px solid var(--sky)}
.prog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.prog-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.prog-id{font-weight:900;font-size:22px;color:var(--black);letter-spacing:-.02em}
.flag{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;font-size:10px;font-weight:800;padding:5px 11px;border-radius:50px;text-transform:uppercase;letter-spacing:.04em}
.flag .ico{color:#b45309}
.prog-card h3{font-size:15.5px;font-weight:700;margin-bottom:14px;min-height:42px;color:var(--ink)}
.prog-meta{display:flex;gap:16px;color:var(--muted);font-size:12.5px;margin-bottom:16px;font-weight:600}
.pm-item{display:inline-flex;align-items:center;gap:6px}
.pm-item .ico{color:var(--red)}

/* ---- Lessons ---- */
.lessons{display:flex;flex-direction:column}
.lesson-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 10px;border-bottom:1px solid var(--line-2);cursor:pointer;border-radius:11px;transition:background .13s,padding .13s,box-shadow .13s}
.lesson-row:hover{background:linear-gradient(90deg,rgba(224,106,85,.08),transparent);padding-left:16px;box-shadow:inset 3px 0 0 var(--sky)}
.lesson-row small{color:var(--muted);font-weight:600}
.term{padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.page ul{padding-left:22px}.page li{margin:3px 0}

/* ---- Exams / Quiz ---- */
.exam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.exam-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s}
.exam-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.exam-card h4{font-size:15px;font-weight:700;color:var(--black)}
.exam-meta{color:var(--muted);font-size:12px;flex:1}
.opts{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.opt{display:flex;align-items:center;gap:11px;padding:13px;border:1.5px solid var(--line);border-radius:13px;cursor:pointer;font-size:14px;transition:.12s}
.opt:hover{border-color:var(--sky);background:#f4f9fc}
.opt.sel{border-color:var(--sky);background:#fdeeeb}
.result-hero{color:#fff;border-radius:var(--radius-lg);padding:38px;text-align:center;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.result-hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(125deg,rgba(255,255,255,.06) 0 1px,transparent 1px 16px);opacity:.6}
.result-hero h2{font-size:54px;font-weight:900;color:#fff;letter-spacing:-.03em;position:relative}
.result-hero p{position:relative;opacity:.95;margin-top:4px;font-weight:500}

/* ---- Leaderboard ---- */
.lb-row{display:flex;align-items:center;gap:13px;padding:13px 8px;border-bottom:1px solid var(--line)}
.lb-row.me{background:#fdeeeb;border-radius:14px}
.lb-rank{font-weight:800;color:var(--sky);width:40px}
.lb-av{font-size:24px}
.lb-name{flex:1;font-weight:600}
.lb-xp{color:var(--muted);font-size:13px}

/* ---- Chat ---- */
.chat{background:#fff;border-radius:20px;padding:18px;min-height:340px;max-height:470px;overflow-y:auto;display:flex;flex-direction:column;gap:11px;box-shadow:var(--shadow)}
.msg{padding:12px 15px;border-radius:16px;max-width:80%;font-size:14px}
.msg.ai{background:#faf6f5;align-self:flex-start;border-bottom-left-radius:4px}
.msg.me{background:linear-gradient(135deg,var(--sky),var(--sky-d));color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-in{display:flex;gap:9px;margin-top:13px}
.chat-in input{flex:1;padding:13px 16px;border:1.5px solid var(--line);border-radius:50px;font-size:14px;outline:none}
.chat-in input:focus{border-color:var(--sky)}

/* ---- Tables / Instructor / Admin ---- */
.tabs{display:flex;gap:7px}
.tab{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1.5px solid var(--line);border-radius:50px;padding:9px 18px;font-weight:700;font-size:13px;text-transform:capitalize;color:var(--muted);transition:.14s;box-shadow:var(--shadow-sm)}
.tab:hover{border-color:var(--sky);color:var(--sky)}
.tab.on{background:var(--grad-sky);color:#fff;border-color:transparent;box-shadow:0 4px 12px -3px rgba(224,106,85,.5)}
.table{display:flex;flex-direction:column;font-size:13px}
.table .tr{display:flex;padding:12px 8px;border-bottom:1px solid var(--line);gap:10px;align-items:center}
.table .tr span{flex:1}
.table .tr span:first-child{flex:2;font-weight:600}
.table .tr.th{font-weight:700;color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:.6px}
.ok{color:var(--ok);font-weight:600}
.risk{color:var(--risk);font-weight:600}
.dist{display:flex;align-items:center;gap:11px;margin:7px 0;font-size:13px}
.dist span:first-child{width:62px;color:var(--muted)}
.dist .bar{flex:1}

@media(max-width:720px){
  .stats-row{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
  .tb-nav{order:3;width:100%;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
  .tb-nav::-webkit-scrollbar{display:none}
  .main{padding:18px 14px}
  .page-header{flex-direction:column;align-items:flex-start;text-align:left}
  .page-header .ph-right{align-self:flex-start}
}
/* Tablet: collapse nav button labels to icons to keep one clean row */
@media(min-width:721px) and (max-width:1080px){
  .navbtn{padding:9px 11px}
  .navbtn-lbl{display:none}
}

/* ============================================================ */
/* Instructional Engine (P2a) — learning path, player, assessment */
/* ============================================================ */

/* Progress rings */
.ring-txt{font-size:11px;font-weight:700;fill:var(--ink)}

/* Learning path stepper */
.path-track{margin-top:18px;display:flex;flex-direction:column}
.path-node{display:flex;gap:16px;align-items:stretch}
.path-rail{display:flex;flex-direction:column;align-items:center;width:40px;flex:0 0 40px}
.path-dot{width:34px;height:34px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;box-shadow:var(--shadow);flex:0 0 auto}
.path-line{width:3px;flex:1 1 auto;min-height:26px;margin:4px 0}
.path-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:14px;flex:1 1 auto;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow);transition:.15s;cursor:pointer}
.path-card:hover{transform:translateY(-2px);border-color:var(--sky)}
.path-card.locked{opacity:.62;cursor:not-allowed;filter:grayscale(.4)}
.path-card.locked:hover{transform:none;border-color:var(--line)}
.path-card-body{flex:1 1 auto}
.path-card-body h3{font-size:17px;font-weight:700;color:var(--black);margin:3px 0}
.path-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mod-tag{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:700}
.path-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--muted)}
.path-ring{flex:0 0 auto}
.pill{font-size:11px;font-weight:700;padding:3px 10px;border-radius:50px}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.active{background:#fdeeeb;color:var(--sky-d)}
.pill.lock{background:#f5f3f2;color:var(--muted)}

/* Lesson player */
.player-prog{margin:10px 0 18px}
.atom-body p{margin:0 0 10px}
.atom-body p:last-child{margin-bottom:0}
.card.atom-callout{border-left:4px solid var(--amber);background:var(--amber-bg)}
.card.atom-example{border-left:4px solid var(--sky)}
.kc-card{border:2px solid var(--sky);background:#f6fbfe}
.kc-tag{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--sky-d);margin-bottom:8px}
.kc-fb{margin-top:12px;padding:12px 14px;border-radius:11px;font-size:14px}
.kc-fb.ok{background:var(--ok-bg);color:#14532d}
.kc-fb.no{background:var(--risk-bg);color:#7f1d1d}
.kc-fb p{margin-top:4px}
.opt.correct{border-color:var(--ok);background:var(--ok-bg)}
.opt.wrong{border-color:var(--risk);background:var(--risk-bg)}
.opt.locked{cursor:default}
.player-nav{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:12px}

/* Module assessment */
.assess-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.timer{font-weight:800;color:var(--black);background:#faf6f5;padding:6px 14px;border-radius:50px}
.timer.low{background:var(--risk-bg);color:var(--risk)}
.rv-opt{padding:7px 12px;border-radius:9px;font-size:14px;margin:3px 0;background:#f8fafc}
.rv-opt.correct{background:var(--ok-bg);color:#14532d;font-weight:600}
.rv-opt.wrong{background:var(--risk-bg);color:#7f1d1d}
.done-hero{background:linear-gradient(135deg,var(--red),var(--ok));color:#fff;border-radius:18px;padding:28px;text-align:center;margin-bottom:18px}
.done-hero h2{font-size:26px}

/* ===== Full-bleed responsive refinements (iOS / Android / desktop) ===== */
html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }
/* safe-area for iOS notch */
.topbar{ padding-top:env(safe-area-inset-top,0); padding-left:max(clamp(14px,3vw,48px),env(safe-area-inset-left)); padding-right:max(clamp(14px,3vw,48px),env(safe-area-inset-right)); }
.main{ padding-bottom:max(clamp(16px,2.2vw,34px),env(safe-area-inset-bottom)); }
button,.btn,.opt,.lesson-row,.navbtn{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.btn,.navbtn,.tab,.opt{ min-height:44px; }  /* iOS tap target */
input{ font-size:16px; }  /* prevent iOS zoom-on-focus */
/* Ultra-wide desktop: let content breathe but fill */
@media(min-width:1280px){
  .grid2{ gap:24px; }
  .prog-grid{ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
  .exam-grid{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
}
/* Tablet */
@media(max-width:980px){
  .grid2{ grid-template-columns:1fr; }
}
/* Phones (iOS + Android) */
@media(max-width:640px){
  .stats-row{ grid-template-columns:1fr 1fr; gap:10px; }
  .stat{ padding:14px; border-radius:16px; }
  .stat-ico{ width:42px;height:42px;line-height:42px;font-size:22px;border-radius:11px; }
  .hero{ flex-direction:column; align-items:flex-start; gap:14px; border-radius:20px; }
  .card{ padding:16px;border-radius:16px; }
  .topbar{ height:auto;min-height:58px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:8px; }
  .tb-nav{ order:3;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding-bottom:2px; }
  .navbtn{ white-space:nowrap; }
  .tb-user{ font-size:12px; }
  .page h2{ font-size:22px; }
  .page-header{ padding:20px; border-radius:20px; }
  .ph-icon{ width:48px;height:48px;border-radius:14px; }
  .ph-icon .ico{ width:24px;height:24px; }
  .ph-sub{ font-size:13.5px; }
}
/* Very small Android */
@media(max-width:360px){
  .stats-row{ grid-template-columns:1fr; }
}
.path-ring{display:flex;flex-direction:column;align-items:center;gap:2px}
.ring-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}

/* ============================================================
   WAVE 2 — Question types, Simulations, Flashcards, Builder
   ============================================================ */

/* ---- Universal question card + large tappable answers ---- */
.qcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin-bottom:16px;box-shadow:var(--shadow)}
.q-stem{font-size:17px;font-weight:700;color:var(--ink);line-height:1.45;margin-bottom:14px}
.q-badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:4px 10px;border-radius:50px;margin-right:8px;vertical-align:middle}
.q-badge.sata{background:#ede9fe;color:#6d28d9}
.q-badge.fill{background:#dcfce7;color:#15803d}
.q-badge.hotspot{background:#ffedd5;color:#c2410c}
.q-badge.match{background:#f7cabf;color:#a51f13}
.ans-cards{display:flex;flex-direction:column;gap:10px}
.ans-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#f8fafc;border:2px solid var(--line);border-radius:14px;padding:16px 18px;font-size:15px;font-weight:500;color:var(--ink);transition:.13s;min-height:56px}
.ans-card:hover:not(.lock){border-color:var(--sky);background:#f0f9ff;transform:translateY(-1px)}
.ans-card.on{border-color:var(--sky);background:#fdeeeb;box-shadow:0 0 0 3px rgba(30,177,237,.18)}
.ans-card.correct{border-color:var(--ok);background:var(--ok-bg)}
.ans-card.wrong{border-color:var(--risk);background:var(--risk-bg)}
.ans-card.lock{cursor:default}
.ans-letter{flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:var(--black);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px}
.ans-card.on .ans-letter{background:var(--sky)}
.ans-card.correct .ans-letter{background:var(--ok)}
.ans-card.wrong .ans-letter{background:var(--risk)}
.ans-check{flex:0 0 28px;font-size:24px;line-height:1;color:var(--black)}
.ans-card.on .ans-check{color:var(--sky)}
.ans-txt{flex:1}
.big-submit{width:100%;padding:16px;font-size:16px;margin-top:6px}

/* fill in the blank */
.fill-template{background:#f5f3f2;border-radius:10px;padding:12px 14px;font-size:15px;color:var(--black);font-weight:600;margin-bottom:12px;font-family:ui-monospace,monospace}
.fill-input{width:100%;padding:15px 18px;border:2px solid var(--line);border-radius:14px;font-size:16px;outline:none;background:#f8fafc}
.fill-input:focus{border-color:var(--sky);background:#fff}

/* hotspot */
.hotspot-wrap{position:relative;display:inline-block;max-width:340px;width:100%;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.hotspot-img{display:block;width:100%}
.hotspot-region{position:absolute;border:2px dashed rgba(255,255,255,.6);background:rgba(30,177,237,.12);border-radius:8px;color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center}
.hotspot-region:hover:not(:disabled){background:rgba(30,177,237,.35)}
.hotspot-region.on{background:rgba(0,168,150,.55);border-color:#fff;border-style:solid}
.hotspot-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.legend-chip{background:#f5f3f2;border:2px solid var(--line);border-radius:50px;padding:9px 14px;font-size:13px;font-weight:600;color:var(--ink)}
.legend-chip:hover:not(:disabled){border-color:var(--sky)}
.legend-chip.on{background:#fdeeeb;border-color:var(--sky);color:var(--black)}

/* drag/tap matching */
.match-grid{display:flex;flex-direction:column;gap:10px}
.match-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.match-term{flex:0 0 130px;background:var(--black);color:#fff;border-radius:12px;padding:12px 14px;font-weight:700;font-size:14px}
.match-defs{display:flex;gap:6px;flex-wrap:wrap}
.match-def{width:42px;height:42px;border-radius:10px;border:2px solid var(--line);background:#f8fafc;font-weight:800;color:var(--ink)}
.match-def:hover:not(.lock){border-color:var(--sky)}
.match-def.on{background:var(--sky);color:#fff;border-color:var(--sky)}
.match-key{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.match-keyrow{font-size:13px;color:var(--muted)}
.match-keyrow b{color:var(--black)}
.rv-typed{padding:8px 0;font-size:14px}

/* ---- Simulations ---- */
.sim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.sim-card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:.15s}
.sim-card:hover{transform:translateY(-3px);box-shadow:0 18px 30px -8px rgba(10,76,122,.22)}
.sim-banner{height:120px;display:flex;align-items:center;justify-content:center;position:relative}
.sim-video_lab{background:linear-gradient(135deg,var(--black),var(--sky))}
.sim-virtual_patient{background:linear-gradient(135deg,#a51f13,#d13020)}
.sim-scenario{background:linear-gradient(135deg,#a51f13,#22c55e)}
.sim-emoji{font-size:54px}
.sim-done-badge{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.92);color:var(--ok);font-weight:800;font-size:11px;padding:5px 10px;border-radius:50px}
.sim-body{padding:16px 18px}
.sim-type{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--sky);margin-bottom:4px}
.sim-body h3{font-size:17px;color:var(--black);margin-bottom:5px}
.sim-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:12px 0}
.sim-card.done .sim-banner{opacity:.85}

/* sim player */
.sim-stage{max-width:780px;margin:0 auto}
.sim-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.sim-progress-pill{background:var(--black);color:#fff;border-radius:50px;padding:6px 14px;font-weight:700;font-size:13px;white-space:nowrap}
.sim-media{position:relative;border-radius:18px;overflow:hidden;margin:14px 0;box-shadow:var(--shadow);background:#a51f13}
.sim-media-img{display:block;width:100%}
.sim-step-no{position:absolute;top:12px;left:12px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--black);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:18px}
.sim-desc{font-size:15px;line-height:1.6}

/* virtual patient */
.vp-patient-card{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#ede9fe,#fdeeeb);border-radius:16px;padding:14px 18px;margin:12px 0;border:1px solid #ddd6fe}
.vp-avatar{font-size:42px;flex:0 0 auto}
.vp-pt-info b{color:var(--black);font-size:16px}
.vp-pt-info small{display:block;color:var(--muted);font-size:12px;margin:2px 0}
.vp-scene{background:var(--card);border-left:4px solid var(--sky);border-radius:12px;padding:18px;font-size:16px;line-height:1.6;box-shadow:var(--shadow);margin-bottom:16px}
.vp-options{display:flex;flex-direction:column;gap:12px}
.vp-option{text-align:left;background:#f8fafc;border:2px solid var(--line);border-radius:14px;padding:16px 18px;font-size:15px;font-weight:500;color:var(--ink);transition:.13s;min-height:56px}
.vp-option:hover:not(:disabled){border-color:var(--sky);background:#f0f9ff;transform:translateX(3px)}
.vp-option.correct{border-color:var(--ok);background:var(--ok-bg)}
.vp-option.wrong{border-color:var(--risk);background:var(--risk-bg)}
.vp-option.dim{opacity:.5}
.vp-path-row{padding:10px 14px;border-radius:10px;margin-bottom:8px;background:#f8fafc;border-left:3px solid var(--line)}
.vp-path-row.ok{border-left-color:var(--ok)}
.vp-path-row.no{border-left-color:var(--risk)}
.vp-path-row b{font-size:14px}

/* ---- Flashcards ---- */
.flash-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.flash-due-pill{background:var(--amber-bg);color:var(--amber);font-weight:800;border-radius:50px;padding:7px 15px;font-size:13px}
.flash-scene{perspective:1400px;margin:20px auto;max-width:560px}
.flashcard{position:relative;width:100%;height:320px;cursor:pointer;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,.2,.2,1)}
.flashcard.flipped{transform:rotateY(180deg)}
.flash-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;box-shadow:0 18px 40px -10px rgba(10,76,122,.3)}
.flash-front{background:linear-gradient(140deg,var(--black),var(--sky));color:#fff}
.flash-back{background:linear-gradient(140deg,var(--red),#15803d);color:#fff;transform:rotateY(180deg)}
.flash-face p{font-size:22px;font-weight:700;line-height:1.4}
.flash-label{position:absolute;top:18px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:800;opacity:.8}
.flash-hint{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:12px;opacity:.75}
.flash-grade{display:flex;gap:14px;justify-content:center;margin-top:8px}
.flash-bad{background:var(--risk-bg);color:var(--risk);font-weight:800;padding:14px 28px}
.flash-good{background:var(--ok-bg);color:var(--ok);font-weight:800;padding:14px 28px}
.flash-empty{text-align:center;padding:40px 20px;background:var(--card);border-radius:20px;box-shadow:var(--shadow)}
.flash-empty-emoji{font-size:60px;margin-bottom:10px}
.flash-empty h3{color:var(--black);margin-bottom:8px}
.flash-stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:20px 0}

/* ---- Quiz builder ---- */
.builder-progs{display:flex;flex-wrap:wrap;gap:10px}
.builder-prog{background:#f8fafc;border:2px solid var(--line);border-radius:14px;padding:12px 16px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:84px}
.builder-prog b{color:var(--black);font-size:15px}
.builder-prog small{color:var(--muted);font-size:11px}
.builder-prog.on{border-color:var(--sky);background:#fdeeeb}
.builder-counts{display:flex;gap:10px;flex-wrap:wrap}
.builder-count{width:54px;height:54px;border-radius:14px;border:2px solid var(--line);background:#f8fafc;font-weight:800;font-size:17px;color:var(--ink)}
.builder-count.on{border-color:var(--sky);background:var(--sky);color:#fff}
.builder-comps{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.builder-comp{text-align:left;background:#f8fafc;border:2px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px;font-weight:500;color:var(--ink)}
.builder-comp.on{border-color:var(--sky);background:#fdeeeb;color:var(--black)}

/* ============ WAVE 3 — Instructor Automation & Class Planning ============ */
.w3-tabs{flex-wrap:wrap;margin-bottom:6px}
.w3-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 12px}
.w3-head h3{font-size:20px;font-weight:800;color:var(--black)}
.w3-form{display:flex;flex-direction:column;gap:14px;margin:10px 0}
.w3-field{display:flex;flex-direction:column;gap:6px}
.w3-field label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.w3-row{display:flex;gap:14px;flex-wrap:wrap}
.w3-row .w3-field{flex:1;min-width:140px}
.w3-input{padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;background:#f8fafc;outline:none;width:100%}
.w3-input:focus{border-color:var(--sky);background:#fff}
.w3-input.small{padding:8px 10px;font-size:14px;max-width:170px}
.chiprow{display:flex;flex-wrap:wrap;gap:8px}
.chip.on{background:var(--sky);color:#fff;border-color:var(--sky)}

/* Class cards */
.class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.class-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow);cursor:pointer;transition:.15s}
.class-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px -8px rgba(10,76,122,.18)}
.class-card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.class-prog{font-weight:800;color:var(--black);font-size:13px;background:#fdeeeb;padding:3px 10px;border-radius:50px}
.class-card h3{font-size:18px;font-weight:800;color:var(--ink);margin:4px 0}
.class-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted);margin:8px 0}

/* Bulk pick */
.w3-pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:10px 0}
.w3-pick{text-align:left;background:#f8fafc;border:2px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px;font-weight:600;color:var(--ink)}
.w3-pick.on{border-color:var(--sky);background:#fdeeeb;color:var(--black)}

/* Scope & sequence */
.seq-track{display:flex;flex-direction:column;gap:12px;margin:14px 0}
.seq-node{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.seq-num{flex:none;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--black),var(--sky));color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:17px}
.seq-body{flex:1}
.seq-h{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--ink)}
.seq-meta{display:flex;gap:14px;font-size:12px;color:var(--muted);margin:6px 0}
.seq-due{display:flex;align-items:center;gap:8px;margin-top:6px}
.seq-due label{font-size:12px;font-weight:700;color:var(--muted)}

/* Alerts */
.alert-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);margin-bottom:12px}
.alert-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.alert-who{display:flex;align-items:center;gap:8px;font-size:16px}
.alert-av{font-size:22px}
.alert-reasons{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.alert-reason{background:#f8fafc;border-radius:10px;padding:8px 12px}
.alert-reason b{font-size:13px;color:var(--ink)}
.alert-reason .muted{font-size:12px}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(7,56,88,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal{background:#fff;border-radius:20px;padding:24px;max-width:560px;width:100%;max-height:85vh;overflow:auto;box-shadow:0 30px 70px rgba(7,56,88,.4)}
.draft-box{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:16px;white-space:pre-wrap;font-size:14px;line-height:1.6;margin:12px 0;color:var(--ink)}

/* Lesson plan */
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.plan-body{white-space:pre-wrap;font-size:14px;line-height:1.6;color:var(--ink)}
.time-blocks{display:flex;flex-wrap:wrap;gap:10px}
.time-block{display:flex;flex-direction:column;align-items:center;background:#fdeeeb;border-radius:12px;padding:10px 16px;min-width:88px}
.time-block b{color:var(--black);font-size:16px}
.time-block span{font-size:12px;color:var(--muted)}

/* Funnel */
.funnel-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.funnel-label{flex:2;font-size:13px}
.funnel-row .bar{flex:3}
.funnel-pct{flex:none;font-size:12px;color:var(--muted);min-width:96px;text-align:right}

@media(max-width:680px){
  .plan-grid{grid-template-columns:1fr}
  .w3-pickgrid{grid-template-columns:1fr 1fr}
}

/* ============================================================
   WAVE 4 — Accessibility, i18n controls, CAT, short-answer
   ============================================================ */

/* ---- Accessibility: focus, skip link, screen-reader-only ---- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--black);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;font-weight:600}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Visible focus outline for keyboard users on every interactive element */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[role="radio"]:focus-visible,[role="switch"]:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--sky);outline-offset:2px;border-radius:8px
}
.main:focus{outline:none}

/* ---- prefers-reduced-motion + explicit toggle ---- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
html[data-reduce-motion="1"] *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}

/* ---- Text size scaling (root font-size) ---- */
html[data-text-size="normal"]{font-size:100%}
html[data-text-size="large"]{font-size:115%}
html[data-text-size="xl"]{font-size:130%}

/* ---- High contrast mode ---- */
html[data-contrast="high"]{
  --ink:#000;--muted:#1f2937;--line:#000;--bg:#fff;--card:#fff;
}
html[data-contrast="high"] body{background:#fff}
html[data-contrast="high"] .btn,html[data-contrast="high"] .navbtn,html[data-contrast="high"] .ans-card,html[data-contrast="high"] .seg-btn{border:2px solid #000!important}
html[data-contrast="high"] .muted{color:#1f2937}
html[data-contrast="high"] .ans-card.on,html[data-contrast="high"] .navbtn.on{background:#000;color:#fff}
html[data-contrast="high"] a,html[data-contrast="high"] .link{text-decoration:underline}

/* ---- Dark mode ---- */
html[data-theme="dark"]{
  --bg:#0b1220;--card:#15202e;--line:#27384a;--ink:#e6eef6;--muted:#9fb3c8;
  --shadow:0 10px 15px -3px rgba(0,0,0,.4),0 4px 6px -2px rgba(0,0,0,.3);
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .card,html[data-theme="dark"] .stat,html[data-theme="dark"] .qcard,html[data-theme="dark"] .exam-card,html[data-theme="dark"] .sa-input,html[data-theme="dark"] .fill-input{background:var(--card);color:var(--ink)}
html[data-theme="dark"] .ans-card{background:#1b2a3a;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .ans-card.on{background:var(--sky);color:#04121f}
html[data-theme="dark"] .btn{background:#22324356;color:var(--ink)}
html[data-theme="dark"] .btn.ghost{background:var(--card);border-color:var(--line);color:#f0e6e4}
html[data-theme="dark"] .builder-prog,html[data-theme="dark"] .builder-count,html[data-theme="dark"] .builder-comp{background:var(--card);color:var(--ink)}
html[data-theme="dark"] input,html[data-theme="dark"] textarea{background:#1b2a3a;color:var(--ink);border-color:var(--line)}

/* ---- Settings menu (top bar) ---- */
.settings-wrap{position:relative}
.iconbtn{background:rgba(255,255,255,.12);color:#fff;width:38px;height:38px;border-radius:10px;font-size:17px;line-height:38px;text-align:center}
.iconbtn:hover{background:rgba(255,255,255,.22)}
.settings-pop{position:absolute;right:0;top:46px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:12px;width:270px;z-index:120;display:flex;flex-direction:column;gap:12px}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:600}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:50px;overflow:hidden}
.seg-btn{background:none;color:var(--muted);padding:6px 12px;font-size:12px;font-weight:700}
.seg-btn.on{background:var(--sky);color:#fff}
.toggle{width:46px;height:26px;border-radius:50px;background:var(--line);position:relative;transition:.15s;flex:0 0 auto}
.toggle.on{background:var(--ok)}
.toggle-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.15s}
.toggle.on .toggle-knob{left:23px}

/* ---- Short answer ---- */
.q-badge.short{background:#ede9fe;color:#6d28d9}
.sa-input{width:100%;border:1px solid var(--line);border-radius:12px;padding:13px 15px;font-size:15px;background:#f8fafc;resize:vertical;outline:none}
.sa-input:focus{border-color:var(--sky);background:#fff}
.sa-feedback{margin-top:12px;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:12px;padding:14px}
.sa-feedback.err{background:var(--risk-bg);border-color:var(--risk)}
.sa-score{font-weight:800;color:#6d28d9;margin-bottom:6px}
.sa-fbtext{font-size:14px;color:var(--ink)}

/* ---- CAT adaptive test ---- */
.cat-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cat-progress{font-weight:700;color:var(--black)}
.cat-diff{font-size:13px;font-weight:700}
.cat-confidence{font-size:13px;color:var(--muted);font-weight:600}
.cat-result{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center;background:var(--card);border-radius:22px;padding:28px;box-shadow:var(--shadow)}
.cat-result-stats{display:flex;flex-direction:column;gap:12px;min-width:240px}
.cat-band{padding:10px 16px;border-radius:12px;font-weight:800;text-align:center}
.cat-band-ready{background:var(--ok-bg);color:var(--ok)}
.cat-band-approaching{background:var(--amber-bg);color:var(--amber)}
.cat-band-developing{background:var(--risk-bg);color:var(--risk)}

/* ---- Readiness gauge ---- */
.gauge{display:flex;align-items:center;justify-content:center}
.gauge-ring{width:180px;height:180px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.gauge-hole{width:138px;height:138px;border-radius:50%;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.gauge-val{font-size:38px;font-weight:800;color:var(--black);letter-spacing:-.02em}
.gauge-lbl{font-size:12px;color:var(--muted);font-weight:600;max-width:120px}
html[data-theme="dark"] .gauge-hole{background:var(--card)}

@media(max-width:680px){
  .settings-pop{width:240px}
  .cat-result{flex-direction:column}
}

/* ============================================================
   WAVE 5 — Discussion boards, Community, Transcript, Integrations
   ============================================================ */
.disc{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.disc-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.disc-item{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.disc-item:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.disc-item h4{margin:6px 0 2px;font-size:17px}
.disc-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.disc-av{font-size:22px}
.disc-time{color:var(--muted);font-size:12px;margin-left:auto}
.disc-role{font-size:11px;font-weight:700;padding:2px 9px;border-radius:50px;background:var(--line);color:var(--muted)}
.disc-role.instr{background:var(--red);color:#fff}
.disc-role.admin{background:var(--black);color:#fff}
.disc-snippet{font-size:14px;margin:4px 0}
.disc-meta{display:flex;gap:14px;font-size:13px;color:var(--muted);margin-top:6px}
.disc-body{white-space:pre-wrap;margin:8px 0;font-size:15px}
.disc-thread h3{margin:4px 0}
.disc-reply{border-left:3px solid var(--sky);margin-left:14px}
.disc-input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit;background:var(--card);color:var(--ink);margin:8px 0;resize:vertical}
.disc-input:focus{outline:none;border-color:var(--sky)}
.lesson-chip{display:inline-block;background:var(--sky);color:#fff;font-size:12px;font-weight:700;padding:3px 11px;border-radius:50px;margin-bottom:8px}

/* Transcript */
.cert-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.cert-row:last-child{border-bottom:none}
.cert-actions{display:flex;gap:8px;flex-wrap:wrap}
.share-box{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.share-box .disc-input{flex:1;min-width:240px;margin:0}
.comp-list{display:flex;flex-direction:column;gap:9px;margin-top:8px}
.comp-row{display:flex;align-items:center;gap:12px}
.comp-name{flex:1;font-weight:600;font-size:14px}
.comp-bar{flex:1;max-width:200px}
.comp-pct{width:46px;text-align:right;font-weight:700;color:var(--muted);font-size:13px}

/* Integrations */
.code-block{background:#0b1220;color:#bfe7ff;border-radius:12px;padding:16px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.5;margin-top:12px;max-height:460px}
.kv{display:flex;gap:10px;align-items:center;margin:8px 0;font-size:14px}
.kv span{color:var(--muted);min-width:80px}
.sso-row{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.sso-row b{flex:1}
.pill.warn{background:var(--amber-bg);color:var(--amber)}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.export-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.export-row .disc-input{flex:1;min-width:220px;margin:0}
@media(max-width:600px){.comp-bar{max-width:110px}}

/* ===== Wave 6 — Commerce / Archer-style pricing (Cat 12.4) ===== */
.notice{background:var(--ok-bg);color:var(--ok);border:1px solid #bbf7d0;border-radius:12px;padding:12px 16px;margin:14px 0;font-weight:600;display:flex;align-items:center;flex-wrap:wrap}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:22px;margin-top:22px;align-items:start}
.pcard{position:relative;background:var(--card);border:1px solid var(--line);border-top:5px solid var(--red);border-radius:20px;padding:26px 22px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;transition:transform .15s ease,box-shadow .15s ease}
.pcard:hover{transform:translateY(-4px);box-shadow:0 22px 40px -12px rgba(10,76,122,.22)}
.pcard.popular{border:2px solid var(--sky);border-top:5px solid var(--sky);transform:scale(1.03);box-shadow:0 26px 50px -14px rgba(30,177,237,.34);z-index:1}
.pcard.popular:hover{transform:scale(1.03) translateY(-4px)}
.pcard-banner{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,var(--sky),var(--red));color:#fff;font-weight:800;font-size:12px;letter-spacing:.06em;padding:7px 18px;border-radius:50px;box-shadow:var(--shadow);white-space:nowrap}
.pcard-head{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.pcard-id{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--sky);background:#faf6f5;border:1px solid #f0d9d3;border-radius:50px;padding:3px 11px;align-self:flex-start}
.pcard-head h3{font-size:19px;font-weight:800;color:var(--black);letter-spacing:-.01em;line-height:1.25}
.pcard-blurb{font-size:13.5px;color:var(--muted);min-height:38px}
.pcard-price{display:flex;align-items:baseline;gap:7px;margin-top:2px}
.pcard-amt{font-size:clamp(38px,5vw,48px);font-weight:800;color:var(--black);letter-spacing:-.03em;line-height:1}
.pcard-per{font-size:14px;color:var(--muted);font-weight:600}
.pcard-permo{font-size:12.5px;color:var(--red);font-weight:700;margin-top:-6px}
.pcard-tiers{display:flex;gap:7px;margin-top:6px}
.tierbtn{flex:1;display:flex;flex-direction:column;gap:2px;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:9px 4px;color:var(--black);transition:.13s}
.tierbtn b{font-size:12px;font-weight:700}
.tierbtn small{font-size:12px;color:var(--muted);font-weight:600}
.tierbtn:hover{border-color:var(--sky)}
.tierbtn.on{border-color:var(--sky);background:#faf6f5;box-shadow:0 0 0 2px rgba(30,177,237,.25)}
.tierbtn.on small{color:var(--black)}
.pcard-cta{width:100%;font-size:16px;font-weight:800;padding:14px;border-radius:14px;margin-top:4px}
.pcard-feats{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.feat{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ink)}
.feat-ck{flex:none;width:20px;height:20px;border-radius:50%;background:var(--ok-bg);color:var(--ok);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.pcard-free{display:flex;flex-direction:column;gap:4px;align-items:center;margin-top:8px;padding-top:14px;border-top:1px dashed var(--line)}
.pcard-free .link{font-size:13px;font-weight:600}
.receipt .kv span{min-width:96px}
@media(max-width:560px){.pcard.popular{transform:none}.pcard.popular:hover{transform:translateY(-4px)}.pricing-grid{gap:30px}}

/* keep topbar readable in all themes */
body.dark .topbar, body.hc .topbar{ background:var(--red); }
body.dark .navbtn, body.hc .navbtn{ color:#eaf4fb; }
.navbtn.on{ color:#fff; }

/* ============================================================
   WAVE 7 — Immersive 3D/WebXR, procedure video, offline & mobile
   ============================================================ */

/* ---- Model3D / WebXR viewer ---- */
.model3d-wrap{position:relative;border-radius:18px;overflow:hidden;margin:14px 0;box-shadow:var(--shadow);background:#0b1220}
.model3d-canvas{width:100%;height:min(56vh,460px);min-height:300px;display:block;touch-action:none}
.model3d-canvas canvas{display:block;width:100%!important;height:100%!important}
.model3d-loading{height:340px;display:flex;align-items:center;justify-content:center;color:#9fb6d4;font-weight:600;letter-spacing:.3px}
.model3d-hint{position:absolute;left:12px;bottom:12px;background:rgba(7,18,32,.72);color:#cfe2f7;font-size:12px;padding:7px 12px;border-radius:30px;backdrop-filter:blur(4px)}
/* Wave 10: small in-canvas legend (color key) */
.model3d-legend{position:absolute;top:12px;left:12px;background:rgba(7,18,32,.78);backdrop-filter:blur(6px);border:1px solid rgba(120,170,220,.22);border-radius:14px;padding:10px 12px;max-width:48%;z-index:2}
.m3d-legend-title{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#8fb0d0;font-weight:800;margin-bottom:6px}
.m3d-legend-row{display:flex;align-items:center;gap:8px;font-size:12px;color:#dce9f6;line-height:1.7;opacity:.92}
.m3d-legend-row.seen{opacity:1}
.m3d-legend-row.seen .m3d-legend-lbl::after{content:" ✓";color:#34d399;font-weight:700}
.m3d-legend-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.m3d-legend-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
@media (max-width:560px){.model3d-legend{max-width:60%;padding:8px 10px}.m3d-legend-lbl{max-width:96px}}
.xr-pill{position:absolute;right:12px;top:12px;background:rgba(209,48,32,.92);color:#fff;font-size:12px;font-weight:700;padding:6px 12px;border-radius:30px}
/* Three.js VRButton overrides so it matches our look + sits bottom-right */
.kdc-vr-btn{position:absolute!important;right:12px!important;bottom:12px!important;left:auto!important;border-radius:30px!important;background:rgba(209,48,32,.95)!important;border:1px solid #e06a55!important;font-weight:700!important;letter-spacing:.4px!important}
.hotspot-legend{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.hotspot-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--line);border-radius:30px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:.13s}
.hotspot-chip:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.08)}
.hotspot-chip.on{background:#0b1220;color:#fff}
.hotspot-chip.seen{box-shadow:inset 0 0 0 1px rgba(209,48,32,.4)}
.hs-dot{width:12px;height:12px;border-radius:50%;display:inline-block;box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.hotspot-detail{border-left:4px solid var(--red)}

/* ---- Procedure animation (SVG/CSS placeholder) ---- */
.proc-anim{position:relative;width:100%;background:radial-gradient(circle at 50% 40%,#123,#a51f13 80%);display:flex;align-items:center;justify-content:center}
.proc-svg{width:100%;height:auto;max-height:360px}
.proc-anim .pa-head{fill:#e9c9a8}
.proc-anim .pa-sink{fill:#cdd8e2}
.proc-anim .pa-faucet{fill:#8aa0b4}
.proc-anim .pa-water{fill:#7ec8f0;opacity:0}
.proc-anim.playing .pa-water{animation:paWater 1.1s linear infinite}
@keyframes paWater{0%{opacity:.2;transform:scaleY(.4)}50%{opacity:.9}100%{opacity:.2;transform:scaleY(1)}}
.proc-anim .pa-hand{fill:#e9c9a8;stroke:#b88a63;stroke-width:2}
.proc-anim.playing .pa-hand-l{animation:paScrubL .7s ease-in-out infinite}
.proc-anim.playing .pa-hand-r{animation:paScrubR .7s ease-in-out infinite}
@keyframes paScrubL{0%,100%{transform:translateX(0)}50%{transform:translateX(10px) rotate(8deg)}}
@keyframes paScrubR{0%,100%{transform:translateX(0)}50%{transform:translateX(-10px) rotate(-8deg)}}
.proc-anim .pa-bubble{fill:#fff;opacity:0}
.proc-anim.playing .pa-bubble{animation:paBubble 1.4s ease-in infinite}
.proc-anim.playing .pa-bubble.b2{animation-delay:.3s}
.proc-anim.playing .pa-bubble.b3{animation-delay:.6s}
@keyframes paBubble{0%{opacity:0;transform:translateY(0) scale(.5)}40%{opacity:.9}100%{opacity:0;transform:translateY(-26px) scale(1.2)}}
.proc-anim .pa-gown{fill:#d13020;opacity:.9;transform-origin:150px 120px}
.proc-anim.playing .pa-gown{animation:paDrop .9s ease-out both}
@keyframes paDrop{0%{transform:translateY(-30px) scaleY(.6);opacity:0}100%{transform:none;opacity:.9}}
.proc-anim .pa-tie{fill:#d13020}
.proc-anim .pa-mask{fill:#d8eefb;stroke:#9cc4e0;stroke-width:2}
.proc-anim.playing .pa-mask{animation:paPop .6s ease-out both}
.proc-anim .pa-strap{stroke:#9cc4e0;stroke-width:3;fill:none}
.proc-anim .pa-goggles{fill:rgba(160,220,255,.55);stroke:#7fb4d8;stroke-width:3}
.proc-anim.playing .pa-goggles{animation:paPop .6s ease-out both}
.proc-anim .pa-shine{fill:#fff;opacity:.7}
@keyframes paPop{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}
.proc-anim .pa-glove{stroke:#d13020;stroke-width:4;fill:rgba(209,48,32,.18);stroke-linecap:round}
.proc-anim.playing .pa-glove-l{animation:paGloveL .8s ease-out both}
.proc-anim.playing .pa-glove-r{animation:paGloveR .8s ease-out both .15s}
@keyframes paGloveL{0%{transform:translate(-20px,20px);opacity:0}100%{transform:none;opacity:1}}
@keyframes paGloveR{0%{transform:translate(20px,20px);opacity:0}100%{transform:none;opacity:1}}
.proc-anim .pa-removing{opacity:.6}
.proc-anim.playing .pa-removing{animation:paFade 1.2s ease-in-out infinite}
@keyframes paFade{0%,100%{opacity:.6}50%{opacity:.2}}
.proc-anim .pa-pulse{fill:none;stroke:#d13020;stroke-width:4}
.proc-anim.playing .pa-pulse{animation:paRing 1.4s ease-out infinite}
@keyframes paRing{0%{r:14;opacity:1}100%{r:60;opacity:0}}
.proc-anim .pa-emoji{font-size:34px}
.proc-anim.paused .proc-svg{filter:grayscale(.25) brightness(.92)}

/* ---- Wave 10: Blood-pressure procedure animations ---- */
.proc-anim .pa-arm{fill:#e9c9a8;stroke:#c69e76;stroke-width:2}
.proc-anim .pa-tray{fill:#cdd8e2}
.proc-anim .pa-cuff{fill:#141414}
.proc-anim .pa-cuff-strap{fill:#e06a55;opacity:.85}
.proc-anim .pa-gauge{fill:#f4f7fa;stroke:#141414;stroke-width:3}
.proc-anim .pa-gauge-tube{stroke:#44403c;stroke-width:4;fill:none}
.proc-anim .pa-needle{stroke:#dc2626;stroke-width:3;stroke-linecap:round;transform-origin:240px 120px}
.proc-anim .pa-bulb{fill:#1f2937}
.proc-anim .pa-steth-bell{fill:#cbd5e1;stroke:#44403c;stroke-width:2}
.proc-anim .pa-steth-tube,.proc-anim .pa-steth-tube2{stroke:#334155;stroke-width:4;fill:none}
.proc-anim .pa-steth-tube2{fill:#334155}
.proc-anim .pa-pulse-pt{fill:#dc2626}
.proc-anim .pa-level{stroke:#e06a55;stroke-width:2;stroke-dasharray:6 6;opacity:.7}
.proc-anim .pa-chart{fill:#fff;stroke:#cbd5e1;stroke-width:2}
.proc-anim .pa-chart-line{stroke:#94a3b8;stroke-width:3;stroke-linecap:round}
.proc-anim .pa-bp-num{fill:#141414;font-size:26px;font-weight:800}
/* motion (only while playing) */
.proc-anim.playing .bp-spin{animation:bpSpin 3s linear infinite;transform-origin:110px 150px}
@keyframes bpSpin{to{transform:rotate(360deg)}}
.proc-anim.playing .bp-rest{animation:bpRest 2s ease-in-out infinite}
@keyframes bpRest{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.proc-anim.playing .bp-wrap{animation:bpWrap .9s ease-out both;transform-origin:163px 147px}
@keyframes bpWrap{0%{transform:scaleX(.3);opacity:0}100%{transform:none;opacity:1}}
.proc-anim.playing .bp-throb{animation:bpThrob 1s ease-in-out infinite}
@keyframes bpThrob{0%,100%{r:6;opacity:.7}50%{r:10;opacity:1}}
.proc-anim.playing .bp-place{animation:bpPlace 1s ease-out both}
@keyframes bpPlace{0%{transform:translateY(-30px);opacity:0}100%{transform:none;opacity:1}}
.proc-anim.playing .bp-squeeze{animation:bpSqueeze 1.1s ease-in-out infinite;transform-origin:150px 164px}
@keyframes bpSqueeze{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.12)}}
.proc-anim.playing .bp-pump{animation:bpPump 1.1s ease-in-out infinite;transform-origin:240px 200px}
@keyframes bpPump{0%,100%{transform:scale(1)}50%{transform:scale(.82)}}
.proc-anim.playing .bp-needle{animation:bpNeedle 4s ease-in-out infinite}
@keyframes bpNeedle{0%{transform:rotate(0)}40%{transform:rotate(150deg)}100%{transform:rotate(20deg)}}
.proc-anim.playing .bp-fade{animation:bpFade 1.4s ease-out both}
@keyframes bpFade{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:none}}
.proc-anim.playing .pa-chart-line.l2{animation:bpFade 1.4s ease-out .3s both}

/* ---- Wave 10: lesson audio narration player ---- */
.lesson-narration{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(120deg,rgba(224,106,85,.10),rgba(209,48,32,.10));border:1px solid var(--line);border-left:4px solid var(--sky);margin:4px 0 14px}
.lesson-narration .narration-head{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.narration-icon{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--grad-sky);box-shadow:var(--shadow-brand);flex:0 0 auto}
.narration-titles{display:flex;flex-direction:column;line-height:1.25}
.narration-title{font-weight:800;color:var(--ink);font-size:15px}
.narration-sub{font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);font-weight:700}
.narration-audio{flex:1 1 260px;min-width:220px;height:42px}
.narration-audio::-webkit-media-controls-panel{background:var(--card)}
html[data-theme="dark"] .lesson-narration{background:linear-gradient(120deg,rgba(224,106,85,.14),rgba(209,48,32,.14))}
html[data-contrast="high"] .lesson-narration{border:2px solid #000;background:#fff}
@media (max-width:560px){.narration-audio{flex-basis:100%}}

/* ---- Video lab player chrome (EdPuzzle-style) ---- */
.vid-stage{background:#0a1626}
.sim-media-video{display:block;width:100%;max-height:420px;background:#000}
.vid-gate-flag{position:absolute;left:50%;top:14px;transform:translateX(-50%);background:rgba(217,119,6,.95);color:#fff;font-size:12px;font-weight:700;padding:7px 14px;border-radius:30px;z-index:3;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.vid-controls{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(7,18,32,.92)}
.vid-play{width:38px;height:38px;border-radius:50%;background:var(--sky);color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;border:none;cursor:pointer}
.vid-play:hover{background:var(--sky-d)}
.vid-track{position:relative;flex:1;height:7px;background:rgba(255,255,255,.18);border-radius:30px;overflow:visible}
.vid-prog{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--sky),var(--red));border-radius:30px;transition:width .18s linear}
.vid-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:13px;height:13px;background:#f59e0b;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 2px rgba(245,158,11,.4)}
.vid-time{color:#cfe2f7;font-size:12px;font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:78px;text-align:right}

/* ---- Offline banner ---- */
.offline-banner{display:flex;align-items:center;gap:10px;justify-content:center;background:#92400e;color:#fff;font-size:13px;font-weight:600;padding:9px 16px;text-align:center;position:sticky;top:0;z-index:60}
.offline-banner .ob-dot{width:9px;height:9px;border-radius:50%;background:#fde68a;animation:obBlink 1.3s ease-in-out infinite;flex:0 0 auto}
@keyframes obBlink{0%,100%{opacity:1}50%{opacity:.3}}
.install-btn{white-space:nowrap}

/* ---- Mobile bottom tab bar (native-app feel) ---- */
.bottom-tabs{display:none}
.more-sheet-backdrop{display:none}
@media(max-width:640px){
  /* Hide the scrolling top nav for students; bottom bar replaces it */
  .has-bottom-tabs .tb-nav{ display:none; }
  .has-bottom-tabs .tb-uname{ display:none; }
  .has-bottom-tabs .main{ padding-bottom:calc(74px + env(safe-area-inset-bottom)); }
  .has-bottom-tabs .footer{ margin-bottom:calc(64px + env(safe-area-inset-bottom)); }

  .bottom-tabs{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -2px 16px rgba(10,30,60,.10);
  }
  body.dark .bottom-tabs{ background:rgba(13,24,38,.97); }
  .bt-item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    background:none;border:none;cursor:pointer;padding:9px 4px 7px;
    color:var(--muted);font-size:11px;font-weight:600;transition:.13s;
  }
  .bt-item.on{ color:var(--sky); }
  .bt-item.on .bt-ico{ transform:translateY(-2px) scale(1.08); }
  .bt-ico{ font-size:21px;line-height:1;transition:.13s; }
  .bt-lbl{ letter-spacing:.2px; }

  /* More sheet */
  .more-sheet-backdrop{
    display:block;position:fixed;inset:0;z-index:80;background:rgba(8,18,30,.5);
    animation:msFade .18s ease;
  }
  @keyframes msFade{from{opacity:0}to{opacity:1}}
  .more-sheet{
    position:absolute;left:0;right:0;bottom:0;background:var(--card);
    border-radius:22px 22px 0 0;padding:14px 18px calc(20px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 30px rgba(0,0,0,.25);animation:msUp .22s cubic-bezier(.2,.7,.3,1);
    display:flex;flex-direction:column;gap:12px;
  }
  @keyframes msUp{from{transform:translateY(100%)}to{transform:none}}
  .more-sheet-grip{width:42px;height:5px;border-radius:30px;background:var(--line);margin:0 auto 4px}
  .more-sheet h3{font-size:16px;margin:0}
  .more-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .more-item{
    background:#f4f7f9;border:1.5px solid var(--line);border-radius:14px;padding:14px 12px;
    font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;
  }
  body.dark .more-item{ background:#16273a; }
  .more-item.on{ border-color:var(--sky);background:#fdeeeb;color:var(--black); }

  /* 3D canvas: a touch shorter on phones */
  .model3d-canvas{ height:46vh;min-height:260px; }
}

/* ============================================================
   WAVE 8 — Notification bell + Parent/Guardian Portal
   ============================================================ */
/* Bell */
.bell-wrap{position:relative;display:inline-flex}
.bell-btn{position:relative;background:rgba(255,255,255,.12);border:none;color:#fff;width:40px;height:40px;border-radius:50%;font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.bell-btn:hover{background:rgba(255,255,255,.22)}
.bell-badge{position:absolute;top:-3px;right:-3px;background:#ef4444;color:#fff;font-size:10px;font-weight:800;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--black)}
.bell-backdrop{position:fixed;inset:0;z-index:60}
.bell-panel{position:absolute;top:48px;right:0;width:min(360px,92vw);max-height:70vh;overflow:hidden;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(2,32,54,.28);z-index:61;display:flex;flex-direction:column;animation:bellpop .14s ease}
@keyframes bellpop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.bell-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line)}
.bell-head b{font-size:15px}
.bell-link{background:none;border:none;color:var(--sky);font-weight:600;font-size:12px;cursor:pointer}
.bell-push{padding:11px 16px;border-bottom:1px solid var(--line)}
.bell-push-on{font-size:13px;color:var(--ok);font-weight:600}
.bell-list{overflow-y:auto;max-height:48vh}
.bell-empty{padding:28px 16px;text-align:center;color:var(--muted);font-size:13px}
.bell-item{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:12px 16px;border:none;border-bottom:1px solid var(--line);background:none;color:var(--ink);cursor:pointer}
.bell-item:hover{background:rgba(30,177,237,.06)}
.bell-item.unread{background:rgba(30,177,237,.08)}
.bell-dot{width:8px;height:8px;border-radius:50%;background:var(--sky);margin-top:6px;flex:0 0 auto}
.bell-item-body{flex:1;min-width:0}
.bell-item-title{font-weight:700;font-size:13.5px;line-height:1.35}
.bell-item-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.bell-item-time{font-size:11px;color:var(--muted);margin-top:3px}

/* Parent portal */
.parent-portal{max-width:1040px;margin:0 auto;padding:clamp(16px,3vw,34px)}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.page-head h1{font-size:clamp(22px,3.4vw,30px);font-weight:800;color:var(--black)}
.badge-pill{font-size:12px;font-weight:700;padding:6px 13px;border-radius:50px;background:#faf6f5;color:var(--black);border:1px solid #f0d9d3}
.badge-pill.readonly{background:#fef3c7;color:#92400e;border-color:#fde68a}
.child-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.child-tab{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--line);color:var(--ink);border-radius:50px;padding:8px 16px;font-weight:600;cursor:pointer}
.child-tab.on{border-color:var(--sky);background:#fdeeeb;color:var(--black)}
.ct-ava{font-size:18px}
.empty-card,.pp-section{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px}
.pp-childcard{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,var(--black),var(--black-d));color:#fff;border-radius:20px;padding:20px 22px;margin-bottom:16px;flex-wrap:wrap}
.pp-ava{font-size:46px;width:74px;height:74px;border-radius:18px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pp-childmeta{flex:1;min-width:200px}
.pp-childmeta h2{font-size:22px;font-weight:800}
.pp-childmeta .muted{color:#bcd9ec}
.pp-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.chip-stat{background:rgba(255,255,255,.16);border-radius:50px;padding:5px 12px;font-size:12.5px;font-weight:600}
.pp-status{flex:0 0 auto;align-self:flex-start;font-weight:800;font-size:13px;padding:8px 14px;border-radius:50px}
.pp-status.ok{background:var(--ok-bg);color:var(--ok)}
.pp-status.risk{background:var(--risk-bg);color:var(--risk)}
.at-risk-banner{background:var(--risk-bg);border:1px solid #fecaca;border-radius:14px;padding:14px 18px;margin-bottom:16px;color:#7f1d1d}
.at-risk-banner ul{margin:6px 0 0 18px;font-size:13.5px}
.pp-rings{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.pp-ring{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.pp-ring .ring{width:96px;height:96px}
.pp-ring-lbl{font-weight:700;font-size:13.5px;margin-top:4px}
.pp-section h3{font-size:15px;font-weight:800;color:var(--black);margin-bottom:12px}
.pp-scores,.pp-modlist,.pp-activity{display:flex;flex-direction:column;gap:8px}
.pp-score-row,.pp-mod-row,.pp-act-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg);border-radius:11px}
.pp-score-title,.pp-mod-title,.pp-act-obj{flex:1;font-weight:600;font-size:13.5px;min-width:0}
.pp-score-meta,.pp-act-time{font-size:11.5px;color:var(--muted);flex:0 0 auto}
.pp-score-pill{font-weight:800;font-size:13px;padding:4px 11px;border-radius:50px;flex:0 0 auto}
.pp-score-pill.pass{background:var(--ok-bg);color:var(--ok)}
.pp-score-pill.fail{background:var(--risk-bg);color:var(--risk)}
.pp-mod-ico{font-size:16px}
.pp-mod-pct{font-weight:700;font-size:12.5px;color:var(--muted)}
.pp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pp-grid2 .pp-section{margin-bottom:0}
.pp-badges{display:flex;flex-wrap:wrap;gap:10px}
.pp-badge{display:flex;flex-direction:column;align-items:center;gap:4px;width:78px;text-align:center}
.pp-badge-ico{font-size:26px;width:50px;height:50px;border-radius:14px;background:var(--bg);display:flex;align-items:center;justify-content:center}
.pp-badge-lbl{font-size:10.5px;color:var(--muted);line-height:1.2}
.pp-cert{padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.pp-cert .muted{color:var(--muted)}
.pp-act-verb{font-weight:800;font-size:11px;padding:3px 9px;border-radius:50px;background:#fdeeeb;color:var(--black);flex:0 0 auto}
.pp-act-verb.passed{background:var(--ok-bg);color:var(--ok)}
.pp-act-verb.failed{background:var(--amber-bg);color:var(--amber)}
.pp-act-verb.earned{background:#fef9c3;color:#854d0e}
.pp-linkform{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pp-linkform input{flex:1;min-width:200px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;font-size:14px;background:var(--card);color:var(--ink)}
.pp-linkform select{padding:12px 14px;border:1px solid var(--line);border-radius:11px;font-size:14px;background:var(--card);color:var(--ink)}
.ok-msg{background:var(--ok-bg);color:var(--ok);padding:10px 13px;border-radius:11px;font-size:13px;margin-top:10px;font-weight:600}
@media(max-width:640px){
  .pp-rings{grid-template-columns:1fr;gap:10px}
  .pp-rings .pp-ring{flex-direction:row;justify-content:flex-start;gap:14px;text-align:left}
  .pp-grid2{grid-template-columns:1fr}
  .bell-panel{position:fixed;top:58px;right:8px;left:8px;width:auto}
}

/* ============================================================
   DESIGN OVERHAUL — system polish, icon alignment, dark mode,
   and high-contrast coverage for the new components.
   ============================================================ */

/* Section-header icons inside coloured contexts keep currentColor */
.kc-tag,.sim-type,.mod-tag{display:inline-flex;align-items:center;gap:6px}

/* Stat icon tiles & badges in dark mode */
html[data-theme="dark"] .stat-ico,html[data-theme="dark"] .empty-ico{background:linear-gradient(140deg,rgba(209,48,32,.22),rgba(224,106,85,.20))}
html[data-theme="dark"] .stat-val,html[data-theme="dark"] .prog-id{color:#cfe8ff}
html[data-theme="dark"] .card-h,html[data-theme="dark"] .empty-state h3{color:#f0e6e4}
html[data-theme="dark"] .card-h .ico,html[data-theme="dark"] .stat-ico .ico,html[data-theme="dark"] .pm-item .ico,html[data-theme="dark"] .btn.ghost .ico{color:var(--sky)}
html[data-theme="dark"] .prog-card,html[data-theme="dark"] .exam-card,html[data-theme="dark"] .stat,html[data-theme="dark"] .skel-card{background:var(--card);border-color:var(--line)}
html[data-theme="dark"] .skel{background:#1d2c3d}
html[data-theme="dark"] .skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
html[data-theme="dark"] .bar{background:#1d2c3d}
html[data-theme="dark"] .lesson-row:hover{background:linear-gradient(90deg,rgba(224,106,85,.14),transparent)}
html[data-theme="dark"] .login-card{background:#15202e}
html[data-theme="dark"] .login-card h1{color:#cfe8ff}
html[data-theme="dark"] .login-card input{background:#1b2a3a;color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .chip{background:#1b2a3a;border-color:var(--line);color:#f0e6e4}
html[data-theme="dark"] .tab,html[data-theme="dark"] .navbtn{}
html[data-theme="dark"] .footer{color:var(--muted)}

/* Page-header always white text — independent of theme/contrast */
.page-header,.page-header *{color:#fff}
.page-header .ph-sub{color:rgba(255,255,255,.92)}
html[data-contrast="high"] .page-header{outline:2px solid #fff;outline-offset:-2px}

/* High-contrast: icons + brand surfaces stay legible */
html[data-contrast="high"] .ico{stroke:#000}
html[data-contrast="high"] .page-header .ico,html[data-contrast="high"] .navbtn.on .ico,html[data-contrast="high"] .btn.primary .ico{stroke:#fff}
html[data-contrast="high"] .stat,html[data-contrast="high"] .card,html[data-contrast="high"] .prog-card,html[data-contrast="high"] .exam-card{border:2px solid #000!important}

/* Badge emoji bubble — refresh ring to brand */
.badge span{box-shadow:inset 0 0 0 2px #fff,0 4px 10px rgba(10,61,92,.14)}

/* Reduce-motion: kill skeleton + typing animation */
html[data-reduce-motion="1"] .skel::after,html[data-reduce-motion="1"] .typing span{animation:none}
@media(prefers-reduced-motion:reduce){.skel::after,.typing span{animation:none}}

/* Bottom-tab SVG icons (replace emoji sizing) */
.bt-ico .ico{width:23px;height:23px}
.bt-item.on .bt-ico .ico{color:var(--sky)}

/* Notice banner with inline icon */
.notice{display:flex;align-items:center;gap:9px}
.notice .ico{color:var(--ok);flex:0 0 auto}

/* Flashcard empty icon bubble */
.flash-empty-ico{width:72px;height:72px;border-radius:22px;display:inline-flex;align-items:center;justify-content:center;margin:0 auto 12px;background:linear-gradient(140deg,rgba(209,48,32,.14),rgba(224,106,85,.16));color:var(--red)}

/* Pill buttons / CTAs subtle sheen already via gradient; ensure focus ring visible */
.btn:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* Make program/sim/class hover shadows brand-tinted consistently */
.prog-card:hover,.exam-card:hover,.class-card:hover,.sim-card:hover,.pcard:hover,.stat:hover{box-shadow:var(--shadow-lg)}

/* Crisper dividers everywhere */
.lesson-row,.term,.lb-row,.cert-row,.sso-row,.funnel-row{border-color:var(--line-2)}

/* Hero/legacy .hero kept for any stragglers — rebrand its gradient too */
.hero{background:var(--grad-brand)!important}

/* Dashboard quick-actions grid — fills full width, no dead space */
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.quick-tile{display:flex;align-items:center;gap:13px;text-align:left;background:#fff;border:1px solid var(--line,#efeceb);border-radius:16px;padding:16px 18px;cursor:pointer;transition:.16s;width:100%;min-height:72px}
.quick-tile:hover{transform:translateY(-3px);box-shadow:0 12px 24px -8px rgba(10,61,92,.22);border-color:transparent}
.quick-ic{flex:0 0 auto;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:13px;background:linear-gradient(135deg,#fdeeeb,#f7cabf);color:#a51f13}
.quick-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.quick-tx b{font-size:14.5px;color:var(--black,#141414);font-weight:700}
.quick-tx span{font-size:12px;color:var(--muted,#64748b)}
body.dark .quick-tile{background:#16242e;border-color:#22323f}
body.dark .quick-tx b{color:#f0e6e4}
@media(max-width:640px){ .quick-grid{grid-template-columns:1fr 1fr;gap:10px} .quick-tile{padding:13px;min-height:64px} .quick-tx span{display:none} }
@media(max-width:380px){ .quick-grid{grid-template-columns:1fr} }

/* ── Program Guide banner (HS Program Chart · Daily · Hourly) ───────────── */
.pg-banner{border:1px solid #f0d9d4;background:linear-gradient(180deg,#fff8f6,#fff);border-radius:14px;padding:16px 18px;margin:0 0 18px;box-shadow:0 1px 3px rgba(209,48,32,.06)}
.pg-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.pg-badge{background:#d13020;color:#fff;font-weight:800;font-size:11px;padding:3px 10px;border-radius:7px;letter-spacing:.3px}
.pg-title{font-weight:800;font-size:16px;color:#1c1917}
.pg-sub{color:#9a3412;font-size:12px;font-weight:600}
.pg-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.pg-card{display:flex;flex-direction:column;border:1px solid #e7e5e4;border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s}
.pg-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(209,48,32,.12);border-color:#f0c3ba}
.pg-thumb{height:118px;background:#f7f5f4 center top/cover no-repeat;border-bottom:1px solid #eee}
.pg-thumb-icon{display:flex;align-items:center;justify-content:center;font-size:44px;background:#fef5f3}
.pg-card-body{padding:11px 13px 13px}
.pg-card-h{display:flex;align-items:center;gap:7px;font-size:14px;color:#1c1917}
.pg-ico{font-size:15px}
.pg-card-desc{color:#57534e;font-size:11.5px;margin:5px 0 9px;line-height:1.35}
.pg-open{color:#d13020;font-weight:700;font-size:12px}