/* Tutor High Q — Math Study System · © ครูพี่พลอย Tutor High Q */
@font-face{font-family:Prompt;font-weight:400;font-display:swap;src:url(../fonts/prompt-thai-400-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Prompt;font-weight:400;font-display:swap;src:url(../fonts/prompt-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Prompt;font-weight:500;font-display:swap;src:url(../fonts/prompt-thai-500-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Prompt;font-weight:500;font-display:swap;src:url(../fonts/prompt-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Prompt;font-weight:600;font-display:swap;src:url(../fonts/prompt-thai-600-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Prompt;font-weight:600;font-display:swap;src:url(../fonts/prompt-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Prompt;font-weight:700;font-display:swap;src:url(../fonts/prompt-thai-700-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Prompt;font-weight:700;font-display:swap;src:url(../fonts/prompt-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Sarabun;font-weight:300;font-display:swap;src:url(../fonts/sarabun-thai-300-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Sarabun;font-weight:300;font-display:swap;src:url(../fonts/sarabun-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Sarabun;font-weight:400;font-display:swap;src:url(../fonts/sarabun-thai-400-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Sarabun;font-weight:400;font-display:swap;src:url(../fonts/sarabun-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Sarabun;font-weight:600;font-display:swap;src:url(../fonts/sarabun-thai-600-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Sarabun;font-weight:600;font-display:swap;src:url(../fonts/sarabun-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#10244A; --ink2:#1D3A6B; --ink-soft:#4A5F82; --muted:#7385A3;
  --paper:#EDF2F8; --grid:#D3DEEB; --grid2:#E2EAF3; --card:#FFFFFF; --line:#D9E2EE;
  --gold:#F4B71C; --gold-d:#C98E00; --gold-bg:#FFF6DC;
  --g4:#0E9F8E; --g4d:#087568; --g4bg:#DDF4F0;
  --g5:#5A55D8; --g5d:#3D38AE; --g5bg:#E7E6FB;
  --g6:#E4553F; --g6d:#B53A28; --g6bg:#FDE6E1;
  --ok:#1C9F5E; --okbg:#DDF5E8; --bad:#D6403A; --badbg:#FCE4E2; --warn:#E07B00; --warnbg:#FFF0DC;
  --r-lg:22px; --r-md:14px; --r-sm:9px;
  --font-d:Prompt,Sarabun,system-ui,sans-serif; --font-b:Sarabun,Prompt,system-ui,sans-serif;
  --sh:0 1px 0 rgba(16,36,74,.06),0 8px 24px -12px rgba(16,36,74,.28);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-b);font-weight:400;font-size:17px;line-height:1.65;color:var(--ink);background:var(--paper);
  background-image:linear-gradient(var(--grid2) 1px,transparent 1px),linear-gradient(90deg,var(--grid2) 1px,transparent 1px),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px,24px 24px,120px 120px,120px 120px;background-attachment:fixed;min-height:100vh}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:600;line-height:1.3;margin:0;color:var(--ink)}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--ink2)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
svg.ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em;flex:none}
svg.ic.fill{fill:currentColor;stroke:none}

/* ---------- top bar ---------- */
#top{position:sticky;top:0;z-index:50;background:var(--ink);color:#fff;display:flex;align-items:center;gap:14px;padding:10px 20px;padding-top:calc(10px + env(safe-area-inset-top));box-shadow:0 2px 0 rgba(0,0,0,.2)}
#top .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
#top .brand b{font-family:var(--font-d);font-weight:600;font-size:19px;letter-spacing:.2px;line-height:1.1}
#top .brand small{display:block;font-family:var(--font-b);font-weight:300;font-size:12.5px;opacity:.75;letter-spacing:.2px}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-d);font-weight:600;font-size:15px;padding:5px 12px;border-radius:99px;background:rgba(255,255,255,.1);color:#fff;border:0;text-decoration:none}
.chip.xp svg{color:var(--gold)} .chip.st svg{color:#FF8A3D}
.lvl{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-d);font-weight:700;font-size:15px;background:var(--gold);color:var(--ink);border:0;text-decoration:none;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
#nav{display:flex;gap:4px;margin-left:22px}
#nav a{display:flex;align-items:center;gap:7px;color:#cdd7ea;text-decoration:none;font-family:var(--font-d);font-weight:500;font-size:15px;padding:8px 12px;border-radius:10px}
#nav a:hover{background:rgba(255,255,255,.08)} #nav a.on{background:#fff;color:var(--ink)}
@media(max-width:900px){
  #top{padding:8px 14px;padding-top:calc(8px + env(safe-area-inset-top))}
  #top .brand small{display:none}
  #nav{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);justify-content:space-around;padding:6px 6px calc(6px + env(safe-area-inset-bottom));gap:0;box-shadow:0 -2px 0 rgba(0,0,0,.2)}
  #nav a{flex-direction:column;gap:2px;font-size:12.5px;padding:6px 10px;flex:1;text-align:center;justify-content:center}
  #nav a svg{width:22px;height:22px}
  #app{padding-bottom:84px}
}
#app{min-height:70vh}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:820px}
.wrap.wide{max-width:1280px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-d);font-weight:600;font-size:16px;line-height:1.2;padding:12px 22px;border-radius:14px;border:0;background:var(--ink);color:#fff;box-shadow:0 4px 0 #050f24;transition:transform .08s,box-shadow .08s;text-decoration:none;min-height:46px}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #050f24}
.btn.gold{background:var(--gold);color:var(--ink);box-shadow:0 4px 0 var(--gold-d)} .btn.gold:active{box-shadow:0 1px 0 var(--gold-d)}
.btn.ok{background:var(--ok);box-shadow:0 4px 0 #0f6e3d}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--line);border:2px solid var(--line)}
.btn.danger{background:#fff;color:var(--bad);border:2px solid var(--bad);box-shadow:0 4px 0 #f1b7b4}
.btn.sm{font-size:14.5px;padding:8px 14px;min-height:38px;border-radius:11px;box-shadow:0 3px 0 #050f24}
.btn.ghost.sm{box-shadow:0 3px 0 var(--line)} .btn.gold.sm{box-shadow:0 3px 0 var(--gold-d)} .btn.danger.sm{box-shadow:0 3px 0 #f1b7b4}
.btn[disabled]{opacity:.45;pointer-events:none}
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);padding:22px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.muted{color:var(--muted)}

/* ---------- home hero (profile strip) ---------- */
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:30px 0 90px}
.hero::after{content:"";position:absolute;left:-5%;right:-5%;bottom:-1px;height:70px;background:var(--paper);border-radius:50% 50% 0 0/100% 100% 0 0}
.hero .axes{position:absolute;inset:0;opacity:.09;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:32px 32px}
.hero .wrap{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center}
.avatar{width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#3C70D8,#17356F 70%);display:grid;place-items:center;font-family:var(--font-d);font-weight:700;font-size:38px;color:#fff;border:4px solid rgba(255,255,255,.2);position:relative;flex:none}
.avatar .pro{position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--ink);font-size:12.5px;padding:1px 10px;border-radius:99px;font-weight:700;white-space:nowrap}
.hero h1{color:#fff;font-size:30px}
.hero .meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px;font-family:var(--font-d);font-weight:500;color:#dbe4f5}
.hero .meta svg{color:var(--gold)}
.xpbar{height:12px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:12px;max-width:420px}
.xpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#FFD866);border-radius:99px;transition:width .6s}
.hero small{display:block;margin-top:5px;opacity:.75;font-weight:300}
.hero .cta{display:flex;flex-direction:column;gap:10px}
@media(max-width:760px){.hero .wrap{grid-template-columns:auto 1fr}.hero .cta{grid-column:1/-1;flex-direction:row}.hero .cta .btn{flex:1}.avatar{width:72px;height:72px;font-size:28px}.hero h1{font-size:24px}}

.streakcard{margin-top:-62px;position:relative;z-index:3}
.streakcard .card{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:center;padding:20px 24px}
.week{display:flex;gap:10px}
.week div{text-align:center;font-family:var(--font-d);font-size:13px;color:var(--muted);font-weight:500}
.week i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#EBF0F6;margin-bottom:3px;color:#fff}
.week .on i{background:var(--gold);color:var(--ink)} .week .today i{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--gold)}
.sstat{display:flex;gap:22px;justify-content:flex-end}
.sstat div{text-align:center;font-family:var(--font-d)}
.sstat b{display:block;font-size:26px;line-height:1.1} .sstat span{font-size:13px;color:var(--muted);font-weight:400}
@media(max-width:760px){.streakcard .card{grid-template-columns:1fr}.sstat{justify-content:space-between}.week{justify-content:space-between}.week i{width:36px;height:36px}}

/* ---------- map ---------- */
.maphead{display:flex;align-items:end;gap:14px;margin:34px 0 8px;flex-wrap:wrap}
.maphead h2{font-size:26px}
.maphead p{margin:0;color:var(--ink-soft);font-size:15.5px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--font-d);font-size:13.5px;color:var(--ink-soft);margin-left:auto}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-1px}
#mapstage{position:relative;overflow:hidden;border-radius:28px;background:rgba(255,255,255,.55);border:2px solid #fff;box-shadow:var(--sh);padding:4px 0 24px;perspective:1400px}
#mapsvg{display:block;width:100%;height:auto;transform-origin:var(--ox,50%) var(--oy,50%);transition:transform .7s cubic-bezier(.65,.02,.2,1),opacity .55s ease .1s,filter .6s}
#mapstage.zoom #mapsvg{opacity:0;filter:blur(4px)}
.zonebar{font-family:var(--font-d);font-weight:600}
.node{cursor:pointer;outline:none}
.node .tile{transition:transform .15s}
.node:hover .tile,.node:focus-visible .tile{transform:translateY(-4px)}
.node:focus-visible .ring{stroke:var(--gold);stroke-width:5}
.node text{font-family:var(--font-d);pointer-events:none}
.edge{fill:none;stroke-linecap:round}
@media(prefers-reduced-motion:reduce){#mapsvg{transition:none}}

/* ---------- chapter flowchart ---------- */
#chview{position:fixed;left:0;right:0;bottom:0;top:var(--toph,58px);z-index:40;overflow:auto;background-color:var(--paper);background-image:linear-gradient(var(--grid2) 1px,transparent 1px),linear-gradient(90deg,var(--grid2) 1px,transparent 1px);background-size:24px 24px;transform-origin:var(--ox,50%) calc(var(--oy,40%) - var(--toph,58px));animation:zin .65s cubic-bezier(.2,.8,.2,1) both;padding-bottom:110px}
@keyframes zin{from{transform:scale(.12);opacity:0;border-radius:40px}to{transform:none;opacity:1}}
#chview.out{animation:zout .45s cubic-bezier(.6,0,.8,.3) both}
@keyframes zout{to{transform:scale(.12);opacity:0}}
.chbar{position:sticky;top:0;z-index:2;display:flex;gap:12px;align-items:center;padding:10px 18px;padding-top:calc(10px + env(safe-area-inset-top));background:var(--gc);color:#fff}
.chbar b{font-family:var(--font-d);font-weight:600;font-size:18px}
.chbar .btn{background:rgba(255,255,255,.18);box-shadow:none;color:#fff;padding:7px 14px;min-height:36px;font-size:15px}
.chgrid{max-width:1060px;margin:0 auto;padding:22px 20px;display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:start}
@media(max-width:900px){.chgrid{grid-template-columns:1fr}}
.chside{position:sticky;top:78px}
@media(max-width:900px){.chside{position:static}}
.chside .glyph{width:92px;height:92px;border-radius:26px;background:var(--gc);color:#fff;display:grid;place-items:center;font-family:var(--font-d);font-weight:700;font-size:34px;box-shadow:0 6px 0 var(--gcd);margin-bottom:16px}
.chside h2{font-size:25px;margin-bottom:4px}
.chside .tag{display:inline-block;font-family:var(--font-d);font-weight:500;font-size:13.5px;padding:2px 12px;border-radius:99px;background:var(--gcbg);color:var(--gcd);margin-bottom:10px}
.ring{--p:0;width:74px;height:74px;border-radius:50%;background:conic-gradient(var(--gc) calc(var(--p)*1%),#E5ECF4 0);display:grid;place-items:center;flex:none}
.ring span{width:58px;height:58px;border-radius:50%;background:#fff;display:grid;place-items:center;font-family:var(--font-d);font-weight:600;font-size:16px}
.flow{position:relative;padding-left:0}
.fnode{position:relative;margin:0 0 0 0}
.fcard{background:#fff;border-radius:18px;padding:16px 18px;box-shadow:var(--sh);border-left:8px solid var(--gc);display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:center}
.fcard h3{font-size:18px}
.fcard .sub{font-size:14.5px;color:var(--ink-soft);margin-top:2px}
.fcard .acts{display:flex;gap:8px;flex-wrap:wrap;grid-column:1/-1}
.fcard.done{border-left-color:var(--ok)}
.fcard .bd{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-d);font-size:13px;font-weight:500;padding:2px 10px;border-radius:99px;background:#EDF1F6;color:var(--ink-soft)}
.fcard .bd.ok{background:var(--okbg);color:#0d7a45}
.fcard .bd.gold{background:var(--gold-bg);color:#946600}
.arrow{height:46px;position:relative;margin-left:34px;width:3px;background:repeating-linear-gradient(to bottom,var(--gc) 0 7px,transparent 7px 12px)}
.arrow::after{content:"";position:absolute;bottom:-3px;left:-6px;border:7.5px solid transparent;border-top:10px solid var(--gc);border-bottom:0}
.arrow.solid{background:var(--gc)}
.dec{display:flex;align-items:center;gap:14px;margin:0 0 0 8px}
.dec .dia{width:64px;height:64px;display:grid;place-items:center;position:relative;flex:none}
.dec .dia::before{content:"";position:absolute;inset:8px;transform:rotate(45deg);background:#fff;border:3px solid var(--gc);border-radius:8px}
.dec .dia span{position:relative;font-family:var(--font-d);font-weight:700;font-size:15px;color:var(--ink)}
.dec.pass .dia::before{background:var(--okbg);border-color:var(--ok)}
.dec .yn{font-size:14px;color:var(--ink-soft);line-height:1.45}
.dec .yn b{font-family:var(--font-d);color:var(--ink)}
.fstart,.fend{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:600;padding:10px 20px;border-radius:99px;background:var(--gc);color:#fff;box-shadow:0 4px 0 var(--gcd);cursor:pointer;border:0;font-size:16px}
.fend{background:var(--ink);box-shadow:0 4px 0 #050f24}
.fcard.exam{background:linear-gradient(135deg,var(--ink),var(--ink2));color:#fff;border-left-color:var(--gold)}
.fcard.exam h3,.fcard.exam .sub{color:#fff}.fcard.exam .sub{opacity:.8}

/* ---------- lesson ---------- */
.lesson{background:#fff;border-radius:24px;box-shadow:var(--sh);padding:34px clamp(18px,4vw,48px)}
.crumbs{display:flex;gap:8px;align-items:center;font-family:var(--font-d);font-size:14px;color:var(--muted);flex-wrap:wrap;padding:20px 0 10px}
.crumbs a{color:var(--ink-soft);text-decoration:none} .crumbs a:hover{text-decoration:underline}
.lesson h1{font-size:30px;margin-bottom:6px}
.md h4{font-size:21px;margin:34px 0 10px;padding-top:6px;color:var(--gc,var(--ink2));display:flex;align-items:center;gap:10px}
.md h4::before{content:"";width:6px;height:24px;border-radius:3px;background:var(--gc,var(--ink2));flex:none}
.md h5{font-size:17.5px;margin:20px 0 6px;color:var(--ink)}
.md p{margin:10px 0}
.md ul,.md ol{margin:8px 0 12px;padding-left:1.4em}.md li{margin:4px 0}
.md strong{font-weight:600;color:var(--ink)}
.md code{font-family:ui-monospace,Menlo,monospace;font-size:.92em;background:#EEF2F7;padding:1px 6px;border-radius:5px}
.md hr{border:0;border-top:2px dashed var(--line);margin:22px 0}
.md table{border-collapse:collapse;margin:14px 0;font-size:16px;max-width:100%;display:block;overflow-x:auto}
.md th,.md td{border:1px solid var(--line);padding:7px 14px;text-align:center}
.md th{background:#EEF3F9;font-family:var(--font-d);font-weight:500}
.md td:first-child,.md th:first-child{text-align:left}
.md .katex{font-size:1.06em}
.md .katex-display{margin:12px 0;overflow-x:auto;overflow-y:hidden;padding:2px 0}
.fig{margin:14px auto;text-align:center}.fig svg{max-width:100%;height:auto}
.fig figcaption{font-size:14px;color:var(--muted);margin-top:2px}
.co{border-radius:16px;padding:14px 18px 12px;margin:16px 0;border:2px solid var(--cc);background:var(--cb);position:relative}
.co>.ct{display:flex;align-items:center;gap:8px;font-family:var(--font-d);font-weight:600;font-size:15.5px;color:var(--cd);margin-bottom:4px}
.co>:last-child{margin-bottom:0}
.co.formula{--cc:#B6C9F2;--cb:#F1F5FF;--cd:#274A9C}
.co.def{--cc:#C9C6F5;--cb:#F4F3FF;--cd:#4A44C2}
.co.prop{--cc:#B4E3DC;--cb:#EFFBF8;--cd:#087568}
.co.trick{--cc:#F4D37A;--cb:var(--gold-bg);--cd:#8A5E00}
.co.warn{--cc:#F5B9B2;--cb:#FFF1EF;--cd:#B53A28}
.co.note{--cc:#D5DDE9;--cb:#F6F8FB;--cd:#4A5F82}
.co.ex{--cc:#BDE5CF;--cb:#F3FBF6;--cd:#157A47}
.co.ex .exq{padding-bottom:8px;border-bottom:2px dashed #BDE5CF;margin-bottom:8px}
.co.ex .exs::before{content:"วิธีทำ";display:inline-block;font-family:var(--font-d);font-weight:600;font-size:13.5px;color:#fff;background:var(--ok);padding:0 10px;border-radius:99px;margin-right:8px}
.lessonbar{position:sticky;bottom:0;z-index:5;margin-top:24px;padding:12px 0 calc(12px + env(safe-area-inset-bottom));display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media(max-width:900px){.lessonbar{bottom:72px}}
.toc{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 6px}
.toc a{font-family:var(--font-d);font-size:13.5px;font-weight:500;text-decoration:none;padding:3px 12px;border-radius:99px;background:#EEF3F9;color:var(--ink-soft)}

/* ---------- quiz ---------- */
.qtop{display:flex;align-items:center;gap:14px;padding:16px 0 8px}
.qtop .pb{flex:1;height:14px;border-radius:99px;background:#DCE5F0;overflow:hidden}
.qtop .pb i{display:block;height:100%;background:var(--gc,var(--ink2));border-radius:99px;transition:width .4s}
.qtop .x{width:42px;height:42px;border-radius:12px;border:2px solid var(--line);background:#fff;display:grid;place-items:center}
.qcard{background:#fff;border-radius:24px;box-shadow:var(--sh);padding:26px clamp(18px,3.5vw,38px)}
.qmeta{display:flex;gap:10px;align-items:center;margin-bottom:12px;font-family:var(--font-d);font-size:14px;color:var(--muted)}
.lv{font-weight:600;font-size:12.5px;padding:2px 11px;border-radius:99px}
.lv.e{background:var(--okbg);color:#0d7a45}.lv.m{background:var(--gold-bg);color:#946600}.lv.h{background:var(--badbg);color:#a52b26}
.qtext{font-size:19px;line-height:1.75}
.choices{display:grid;gap:12px;margin:22px 0 6px}
.choices.two{grid-template-columns:1fr 1fr}
@media(max-width:700px){.choices.two{grid-template-columns:1fr}}
.ch{display:flex;gap:14px;align-items:center;text-align:left;background:#fff;border:2px solid var(--line);border-bottom-width:5px;border-radius:16px;padding:12px 16px;font-size:18px;min-height:56px;width:100%;transition:transform .08s,background .15s}
.ch:hover{border-color:#9DB3D3;background:#F7FAFE}
.ch:active{transform:translateY(2px)}
.ch .k{width:36px;height:36px;border-radius:10px;background:#EEF3F9;display:grid;place-items:center;font-family:var(--font-d);font-weight:600;font-size:16px;flex:none;color:var(--ink-soft)}
.ch.sel{border-color:var(--ink2);background:#EEF3FF}.ch.sel .k{background:var(--ink2);color:#fff}
.ch.right{border-color:var(--ok);background:var(--okbg)}.ch.right .k{background:var(--ok);color:#fff}
.ch.wrong{border-color:var(--bad);background:var(--badbg)}.ch.wrong .k{background:var(--bad);color:#fff}
.ch.dim{opacity:.62}
.numin{display:flex;gap:10px;align-items:center;margin:20px 0 6px;flex-wrap:wrap}
.numin input{font-family:var(--font-d);font-weight:500;font-size:22px;width:210px;padding:11px 16px;border-radius:14px;border:2px solid var(--line);border-bottom-width:5px;background:#fff;color:var(--ink)}
.numin input:focus{outline:none;border-color:var(--ink2)}
.sol{margin-top:20px;border-radius:18px;padding:16px 20px;animation:pop .3s ease both}
@keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.sol.ok{background:var(--okbg);border:2px solid #9ADBB7}.sol.bad{background:var(--badbg);border:2px solid #F2A9A5}.sol.nt{background:#F3F6FB;border:2px solid var(--line)}
.sol .sh{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:600;font-size:18px;margin-bottom:6px}
.sol.ok .sh{color:#0d7a45}.sol.bad .sh{color:#a52b26}
.sol .ans{font-family:var(--font-d);font-weight:500;font-size:15.5px;margin-bottom:6px}
.qfoot{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:8px;margin:14px 0}
.pal button{height:42px;border-radius:11px;border:2px solid var(--line);background:#fff;font-family:var(--font-d);font-weight:600;font-size:15px}
.pal button.a{background:var(--ink2);border-color:var(--ink2);color:#fff}.pal button.cur{box-shadow:0 0 0 3px var(--gold)}
.pal button.r{background:var(--ok);border-color:var(--ok);color:#fff}.pal button.w{background:var(--bad);border-color:var(--bad);color:#fff}
.res{text-align:center;padding:30px 22px}
.res .stars{display:flex;gap:6px;justify-content:center;margin:6px 0 12px}
.res .stars svg{width:54px;height:54px;color:#DCE3EE}.res .stars svg.on{color:var(--gold);filter:drop-shadow(0 4px 0 var(--gold-d));animation:starpop .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes starpop{from{transform:scale(0) rotate(-40deg)}to{transform:none}}
.res .big{font-family:var(--font-d);font-weight:700;font-size:56px;line-height:1.05}
.res .big small{font-size:24px;font-weight:500;color:var(--muted)}
.res .row{justify-content:center}
.bars{max-width:520px;margin:18px auto;text-align:left}
.bar{display:grid;grid-template-columns:90px 1fr 54px;gap:10px;align-items:center;margin:8px 0;font-family:var(--font-d);font-size:14.5px}
.bar .t{height:14px;border-radius:99px;background:#E5ECF4;overflow:hidden}.bar .t i{display:block;height:100%;border-radius:99px}
.rv{display:grid;gap:10px;margin-top:20px;text-align:left}
.rv details{background:#fff;border:2px solid var(--line);border-radius:16px;padding:0 16px}
.rv summary{cursor:pointer;padding:12px 0;font-family:var(--font-d);font-weight:500;display:flex;gap:10px;align-items:center;list-style:none}
.rv summary::-webkit-details-marker{display:none}
.rv details[open]{border-color:var(--ink2)}
.rv .mk{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none}
.rv .mk.r{background:var(--ok)}.rv .mk.w{background:var(--bad)}.rv .mk.n{background:#98A7BF}
.rv .body{padding:0 0 14px}

/* ---------- mock hub ---------- */
.pagehead{padding:30px 0 6px}.pagehead h1{font-size:30px}.pagehead p{margin:6px 0 0;color:var(--ink-soft);max-width:70ch}
.sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px;margin:20px 0 40px}
.setc{background:#fff;border-radius:24px;box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column}
.setc .top{padding:18px 22px 16px;background:var(--sc);color:#fff;position:relative;min-height:120px}
.setc .top h3{color:#fff;font-size:24px}.setc .top p{margin:4px 0 0;opacity:.92;font-size:15.5px}
.setc .top .no{position:absolute;right:16px;top:8px;font-family:var(--font-d);font-weight:700;font-size:78px;opacity:.16;line-height:1}
.setc .body{padding:16px 22px 20px;display:flex;flex-direction:column;gap:12px;flex:1}
.setc .st{display:flex;gap:16px;font-family:var(--font-d);font-size:14.5px;color:var(--ink-soft)}
.setc .st b{color:var(--ink);font-size:17px}
.setc .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}

/* ---------- mock exam (split with OMR) ---------- */
.mockbar{position:sticky;top:0;z-index:30;background:var(--ink);color:#fff;display:flex;align-items:center;gap:14px;padding:8px 18px;padding-top:calc(8px + env(safe-area-inset-top))}
.mockbar b{font-family:var(--font-d);font-weight:600}
.timer{font-family:var(--font-d);font-weight:700;font-size:24px;font-variant-numeric:tabular-nums;background:rgba(255,255,255,.12);padding:3px 16px;border-radius:12px}
.timer.low{background:var(--bad);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.6}}
.mocksplit{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:20px;max-width:1500px;margin:0 auto;padding:18px 20px 40px;align-items:start}
@media(max-width:1100px){.mocksplit{grid-template-columns:1fr}}
.paper{background:#fff;border-radius:6px;box-shadow:var(--sh);padding:28px clamp(18px,3vw,44px);position:relative;border:1px solid #cfd8e5}
.paper .part{font-family:var(--font-d);font-weight:600;font-size:15.5px;background:#EEF3F9;border-radius:8px;padding:6px 14px;margin:0 0 18px;color:var(--ink2)}
.mq{padding:20px 0 24px;border-bottom:1.5px dashed var(--line);scroll-margin-top:70px}
.mq:last-child{border:0}
.mq .no{font-family:var(--font-d);font-weight:700;font-size:20px;margin-right:6px}
.mq .qt{font-size:18.5px;line-height:1.8;font-weight:300;color:#0b1b3a}
.mq .qt strong{font-weight:600}
.mq .opts{margin-top:10px;display:grid;gap:8px;font-weight:300;font-size:18px}
.mq .opts.row5{grid-template-columns:repeat(5,1fr)}
.mq .opts.col2{grid-template-columns:1fr 1fr}
.mq .opts.col3{grid-template-columns:repeat(3,1fr)}
img.fi{max-width:100%;height:auto;vertical-align:middle}
.mq .opts.col3 img.fi{width:100%}
.mq .opts.col1{grid-template-columns:1fr}
@media(max-width:700px){.mq .opts.row5,.mq .opts.col2{grid-template-columns:1fr}.mq .opts.col3{grid-template-columns:1fr 1fr}}
.mq .opt{display:flex;gap:8px;align-items:baseline;cursor:pointer;padding:4px 6px;border-radius:8px}
.mq .opt:hover{background:#F2F6FB}.mq .opt.mine{background:#E8EEFB}
.mq .opt .n{font-family:var(--font-d);font-weight:500;color:var(--ink-soft);flex:none}
.mq .opt.right{background:var(--okbg)}.mq .opt.wrong{background:var(--badbg)}
.mq .flag{float:right;font-family:var(--font-d);font-size:13px;border:2px solid var(--line);background:#fff;border-radius:99px;padding:1px 12px;color:var(--ink-soft)}
.mq .flag.on{background:var(--gold-bg);border-color:var(--gold);color:#946600}
.workspace{margin-top:12px;height:120px;border:1.5px dashed var(--line);border-radius:10px;background:repeating-linear-gradient(transparent 0 23px,#EEF2F7 23px 24px);display:grid;place-items:end start;padding:6px 10px;font-size:12.5px;color:#a8b5c9;font-family:var(--font-d)}
.watermark{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:6px}
.watermark span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-28deg);font-family:var(--font-d);font-weight:700;font-size:clamp(40px,6vw,76px);color:rgba(16,36,74,.045);white-space:nowrap}
.omr{position:sticky;top:64px;background:#fff;border:2px solid #4A6FA8;border-radius:6px;padding:0;color:#2A4B80;font-family:var(--font-d);box-shadow:var(--sh);max-height:calc(100vh - 80px);overflow:auto}
.omr .hd{background:#2A4B80;color:#fff;padding:7px 12px;font-weight:600;font-size:15px;display:flex;justify-content:space-between;align-items:center}
.omr .sec{padding:10px 12px 12px;border-bottom:1.5px solid #4A6FA8}
.omr .sec h5{margin:0 0 6px;font-size:13.5px;font-weight:600;color:#2A4B80}
.omr .grid1{display:grid;grid-template-columns:repeat(2,1fr);gap:3px 14px}
.omr .qr{display:flex;align-items:center;gap:4px;padding:1px 3px;border-radius:6px}
.omr .qr.cur{background:#FFF3C7}
.omr .qr .no{width:22px;text-align:right;font-weight:600;font-size:13.5px;flex:none;color:#2A4B80;cursor:pointer}
.bub{width:26px;height:26px;border-radius:50%;border:1.6px solid #2A4B80;background:#fff;color:#2A4B80;font-family:var(--font-d);font-size:13px;display:grid;place-items:center;padding:0;line-height:1;flex:none;transition:background .1s;touch-action:manipulation}
.bub:hover{background:#DCE6F7}
.bub.f{background:#14213D;color:#14213D;border-color:#14213D}
.bub.sm{width:21px;height:21px;font-size:11px}
.bub.r{background:var(--ok);border-color:var(--ok);color:#fff}.bub.w{background:var(--bad);border-color:var(--bad);color:#fff}
.bub.key{box-shadow:0 0 0 3px var(--ok)}
.omr .numgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.omr .nbox{border:1.6px solid #2A4B80;border-radius:4px;padding:3px 2px 4px;text-align:center}
.omr .nbox.cur{background:#FFF3C7}
.omr .nbox .t{font-weight:700;font-size:13.5px;border-bottom:1.5px solid #2A4B80;margin:0 -2px 3px;padding-bottom:1px;cursor:pointer}
.omr .cols{display:flex;gap:1px;justify-content:center}
.omr .col{display:flex;flex-direction:column;gap:1.5px;align-items:center}
.omr .col .bub.sm{width:16px;height:16px;font-size:10px;border-width:1.2px}
.omr .dot{align-self:flex-end;font-weight:700;margin:0 -1px;font-size:14px;line-height:.7}
.omr .rd{font-size:12.5px;margin-top:3px;min-height:18px;color:#14213D;font-weight:600;font-family:var(--font-d)}
.omr .sub{padding:10px 12px;display:flex;gap:8px}
.omrfab{display:none;position:fixed;right:14px;bottom:90px;z-index:55}
@media(max-width:1100px){
  .omr{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:70;max-height:78vh;border-radius:18px 18px 0 0;transform:translateY(105%);transition:transform .3s;border-width:2px 0 0}
  .omr.open{transform:none}
  .omrfab{display:block}
}
.startcard{max-width:720px;margin:30px auto}
.startcard ul{padding-left:1.2em}.startcard li{margin:6px 0}
.dlg{position:fixed;inset:0;z-index:100;background:rgba(10,20,40,.55);display:grid;place-items:center;padding:20px;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.dlg .box{background:#fff;border-radius:22px;padding:24px;max-width:460px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.4);animation:pop .25s}
.dlg h3{font-size:21px;margin-bottom:8px}
.dlg .row{margin-top:18px;justify-content:flex-end}
.dlg input[type=text],.dlg textarea{width:100%;font:inherit;padding:10px 14px;border-radius:12px;border:2px solid var(--line);margin-top:8px}
.hintbox{margin-top:14px;display:grid;gap:8px}
.hint{background:var(--gold-bg);border:2px solid #F4D37A;border-radius:14px;padding:10px 16px;animation:pop .25s}
.hint b{font-family:var(--font-d);font-weight:600;color:#8A5E00;font-size:14.5px;display:block}

/* ---------- gacha ---------- */
.gacha{max-width:640px;margin:20px auto;text-align:center}
.machine{background:linear-gradient(180deg,var(--ink2),var(--ink));border-radius:30px;padding:26px 22px 28px;color:#fff;box-shadow:0 10px 0 #050f24,var(--sh);position:relative}
.drum{height:150px;border-radius:20px;background:#fff;color:var(--ink);overflow:hidden;position:relative;border:6px solid var(--gold)}
.drum .reel{position:absolute;left:0;right:0;top:0;will-change:transform}
.drum .it{height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-d);font-weight:600;font-size:26px;padding:0 14px;line-height:1.25}
.drum .it small{font-weight:400;font-size:15px;color:var(--ink-soft);margin-top:4px}
.drum .it .gl{font-size:36px;font-weight:700;margin-bottom:4px}
.gres{margin-top:22px;animation:pop .4s both}
.gfilt{display:flex;gap:8px;justify-content:center;margin:0 0 18px;flex-wrap:wrap}
.gfilt button{font-family:var(--font-d);font-weight:500;padding:6px 16px;border-radius:99px;border:2px solid rgba(255,255,255,.3);background:transparent;color:#fff}
.gfilt button.on{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- challenge ---------- */
.chal{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:18px;align-items:stretch}
.tower{display:flex;flex-direction:column-reverse;gap:6px;background:var(--ink);padding:10px;border-radius:18px}
.tower div{flex:1;min-height:30px;border-radius:8px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.5);display:grid;place-items:center;font-family:var(--font-d);font-weight:700;font-size:15px}
.tower div.on{background:var(--gold);color:var(--ink);transform:scale(1.04)}
.cbar{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cbar .tm{font-family:var(--font-d);font-weight:700;font-size:30px;min-width:92px;font-variant-numeric:tabular-nums}
.cbar .tb{flex:1;height:16px;border-radius:99px;background:#DCE5F0;overflow:hidden}.cbar .tb i{display:block;height:100%;background:var(--g4);transition:width .25s linear}
.cbar .tb i.low{background:var(--bad)}
.lifeline{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}

/* ---------- profile ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}
.card h3{font-size:21px;margin-bottom:12px}
.crow{display:flex;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.crow:first-of-type{border:0}
.crow .ring{width:54px;height:54px}.crow .ring span{width:42px;height:42px;font-size:12.5px}
.crow .nm{flex:1;min-width:0}.crow .nm b{font-family:var(--font-d);font-weight:600;display:block}.crow .nm span{font-size:14px;color:var(--muted)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.badge{border-radius:16px;border:2px solid var(--line);padding:12px;text-align:center;font-size:14px;color:var(--muted);background:#fff}
.badge i{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;margin:0 auto 6px;background:#E5ECF4;color:#98A7BF}
.badge b{display:block;font-family:var(--font-d);color:var(--ink-soft);font-size:15px}
.badge.got{border-color:var(--gold);background:var(--gold-bg)}.badge.got i{background:var(--gold);color:var(--ink)}.badge.got b{color:var(--ink)}
.danger-zone{border:2px dashed #F2A9A5;background:#FFF8F7}
table.hist{width:100%;border-collapse:collapse;font-size:15px}
table.hist th,table.hist td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left}
table.hist th{font-family:var(--font-d);font-weight:500;color:var(--muted);font-size:13.5px}

footer.site{margin:60px 0 0;background:var(--ink);color:#c5d1e8;padding:34px 0 40px;font-size:14.5px}
footer.site b{color:#fff;font-family:var(--font-d);font-weight:600}
footer.site .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
footer.site a{color:var(--gold);text-decoration:none}
@media(max-width:760px){footer.site .wrap{grid-template-columns:1fr}}
@media(max-width:900px){footer.site{padding-bottom:110px}}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:120;background:var(--ink);color:#fff;font-family:var(--font-d);font-weight:500;padding:10px 20px;border-radius:99px;box-shadow:var(--sh);animation:pop .25s;display:flex;gap:8px;align-items:center}
.toast svg{color:var(--gold)}
canvas#conf{position:fixed;inset:0;pointer-events:none;z-index:130}
@media print{#top,#nav,footer.site,.btn,.lessonbar{display:none!important}body{background:#fff}.lesson,.card{box-shadow:none}}
td figure.fig, th figure.fig{margin:0}
td figure.fig svg{width:100%;max-width:170px;height:auto}