:root{--ink:#173042;--muted:#607585;--paper:#fffdf8;--bg:#eef7f4;--teal:#0f766e;--teal2:#115e59;--line:#d8e6e2;--sun:#f7b32b;--good:#15803d;--bad:#c2413b;--shadow:0 12px 32px rgba(28,67,62,.12);font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;color:var(--ink);background:var(--bg)}
    *{box-sizing:border-box}html{min-height:100%;overflow-y:auto;-webkit-text-size-adjust:100%}body{margin:0;min-height:100vh;min-height:100dvh;overflow-x:hidden;background:radial-gradient(circle at 0 0,#d8f0e8 0,transparent 34rem),linear-gradient(180deg,#f7fbfa,#eaf4f1);line-height:1.45}button{font:inherit}button:focus-visible{outline:3px solid #f6b73c;outline-offset:2px}.hidden{display:none!important}
    .shell{width:min(1440px,100%);min-height:100dvh;margin:auto;padding:clamp(10px,1.5vw,20px)}
    .hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,480px);grid-template-areas:"back stats" "eyebrow stats" "title stats" "desc stats";column-gap:24px;align-items:center;border-radius:22px;background:linear-gradient(135deg,#0f766e,#134e4a);color:white;padding:20px 26px;box-shadow:var(--shadow)}.hero:after{content:"⚗";position:absolute;right:2%;bottom:-50%;font-size:12rem;opacity:.07;transform:rotate(-14deg)}.eyebrow{grid-area:eyebrow;font-size:.7rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#bff5e6}.hero h1{grid-area:title;font-size:clamp(1.55rem,3vw,2.6rem);line-height:1.16;margin:.25rem 0 .45rem;max-width:850px}.hero p{grid-area:desc;margin:0;max-width:820px;color:#d8f7ee;font-size:.92rem}
    .portal-back{grid-area:back;justify-self:start;display:inline-block;position:relative;z-index:1;margin-bottom:7px;color:white;text-decoration:none;font-size:.78rem;font-weight:800;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);padding:5px 9px;border-radius:999px}
    .stats{grid-area:stats;position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0;max-width:none}.stat{min-width:0;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:13px;padding:10px 11px}.stat b{display:block;font-size:1.12rem}.stat span{font-size:.68rem;color:#d6f4eb}
    .toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 10px}.search{flex:1;min-width:220px;border:1px solid var(--line);border-radius:12px;background:white;padding:9px 12px;color:var(--ink);font:inherit}.filter{border:1px solid var(--line);background:white;color:var(--teal2);border-radius:999px;padding:8px 12px;font-weight:800;cursor:pointer}.filter.active{background:var(--teal);border-color:var(--teal);color:white}
    .book-section{margin:16px 0 22px}.section-head{display:flex;gap:10px;align-items:end;justify-content:space-between;margin-bottom:9px}.section-head h2{font-size:clamp(1.05rem,2vw,1.38rem);line-height:1.25;margin:0}.section-head span{color:var(--muted);font-size:.78rem;white-space:nowrap}.test-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:9px}.test-card{display:flex;flex-direction:column;gap:6px;min-height:142px;padding:12px 13px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:15px;box-shadow:0 4px 12px rgba(28,67,62,.05)}.test-card h3{margin:0;font-size:.92rem;line-height:1.3}.test-number{font-size:.68rem;font-weight:900;color:var(--teal);letter-spacing:.06em}.meta{font-size:.72rem;color:var(--muted)}.card-progress{height:5px;border-radius:9px;background:#e7efed;overflow:hidden}.card-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),#2dd4bf)}.card-bottom{display:flex;align-items:center;gap:6px;margin-top:auto}.badge{font-size:.67rem;font-weight:800;border-radius:99px;padding:3px 6px;background:#eef4f2;color:var(--muted)}.badge.done{background:#dcfce7;color:#166534}.start{margin-left:auto;border:0;border-radius:10px;padding:7px 10px;background:var(--teal);color:white;font-size:.82rem;font-weight:800;cursor:pointer}.start:hover{background:var(--teal2)}
    .quiz-header{position:sticky;top:0;z-index:10;background:rgba(247,251,250,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.quiz-header-inner{width:min(1240px,100%);margin:auto;padding:10px clamp(12px,2vw,24px);display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}.home-btn,.page-btn,.zoom-btn,.next-btn{border:0;border-radius:12px;cursor:pointer;font-weight:800}.home-btn{background:white;border:1px solid var(--line);color:var(--teal2);padding:9px 12px}.quiz-title{min-width:0}.quiz-title b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quiz-title span{font-size:.78rem;color:var(--muted)}.score-pill{background:#fff3d6;color:#8a5600;border-radius:999px;padding:7px 11px;font-weight:900;font-size:.86rem}.top-progress{grid-column:1/-1;height:6px;border-radius:8px;background:#dde8e5;overflow:hidden}.top-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),#33c5b3);transition:width .2s}
    .quiz-layout{width:min(1440px,100%);margin:auto;padding:12px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:12px;align-items:start}.panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}.panel-head{display:flex;align-items:center;gap:7px;padding:8px 10px;border-bottom:1px solid var(--line);background:#fbfdfc}.panel-head b{font-size:.8rem}.panel-head .spacer{flex:1}.page-btn,.zoom-btn{background:white;border:1px solid var(--line);color:var(--teal2);min-width:34px;padding:5px 8px}.page-btn:disabled{opacity:.35;cursor:not-allowed}.source-label{font-size:.72rem;color:var(--muted)}
    .scan-wrap{height:min(calc(100dvh - 152px),780px);min-height:360px;overflow:auto;background:#d9dedc;display:grid;place-items:start center;padding:8px;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}.scan-wrap img{display:block;max-width:none;width:var(--scan-width,100%);height:auto;background:white;box-shadow:0 4px 18px rgba(0,0,0,.18);transition:width .12s}.page-strip{display:flex;gap:5px;padding:7px;overflow:auto;border-top:1px solid var(--line);background:#fbfdfc}.page-chip{border:1px solid var(--line);background:white;color:var(--muted);border-radius:8px;padding:4px 8px;white-space:nowrap;cursor:pointer;font-size:.7rem}.page-chip.active{background:var(--teal);border-color:var(--teal);color:white}
    .answer-panel{position:sticky;top:76px;max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.question-box{padding:16px}.q-kicker{font-size:.72rem;font-weight:900;color:var(--teal);letter-spacing:.05em}.question-box h2{margin:.15rem 0 .25rem;font-size:clamp(1.2rem,2.5vw,1.65rem)}.hint{color:var(--muted);font-size:.8rem;margin:0 0 10px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}.choice{min-height:48px;border:2px solid #d9e6e2;border-radius:12px;background:white;color:var(--ink);font-size:1.08rem;font-weight:900;cursor:pointer;transition:transform .1s,border-color .1s,background .1s}.choice:hover:not(:disabled){transform:translateY(-1px);border-color:#5ab5a8}.choice:disabled{cursor:default;color:var(--ink);opacity:1}.choice.correct{border-color:#22a552;background:#e3f8e9;color:#146b34}.choice.wrong{border-color:#d55c55;background:#feebe9;color:#9d302b}.feedback{margin-top:11px;border-radius:14px;padding:12px;background:#f1f7f5;border:1px solid var(--line)}.feedback.good{background:#ebf9ef;border-color:#b7e3c2}.feedback.bad{background:#fff1ef;border-color:#f1c5c0}.feedback h3{margin:0 0 3px;font-size:1rem}.feedback p{margin:.15rem 0}.explain-label{display:flex;justify-content:space-between;gap:8px;align-items:end;margin-top:9px;font-size:.75rem;color:var(--muted)}.solution-crop{margin-top:6px;background:white;border:1px solid var(--line);border-radius:10px;overflow:auto;max-height:300px}.solution-crop svg{display:block;width:100%;height:auto;min-width:480px}.solution-crop svg.answer-cell{min-width:0}.next-btn{width:100%;margin-top:9px;padding:10px;background:var(--teal);color:white;font-size:.92rem}.next-btn:hover{background:var(--teal2)}.lock-note{display:flex;gap:6px;align-items:flex-start;margin-top:9px;color:var(--muted);font-size:.72rem}
    .result{min-height:100vh;display:grid;place-items:center;padding:20px}.result-card{width:min(560px,100%);text-align:center;background:white;border:1px solid var(--line);border-radius:28px;padding:clamp(25px,6vw,52px);box-shadow:var(--shadow)}.result-icon{font-size:4rem}.result-card h1{margin:.2rem 0}.big-score{font-size:clamp(2.6rem,12vw,5rem);font-weight:950;color:var(--teal);line-height:1.1}.result-card p{color:var(--muted)}.result-card .home-btn{width:100%;background:var(--teal);color:white;border:0;padding:13px;margin-top:12px}
    .empty{text-align:center;color:var(--muted);padding:40px;background:white;border-radius:18px}
    @media(max-width:700px){.hero{grid-template-columns:1fr;grid-template-areas:"back" "eyebrow" "title" "desc" "stats";padding:16px 18px}.stats{margin-top:11px}.quiz-layout{grid-template-columns:1fr;padding:8px}.answer-panel{position:static;max-height:none;overflow:visible}.scan-wrap{height:52dvh;min-height:330px}.quiz-title b{max-width:52vw}.score-pill{font-size:.75rem}}
    @media(max-width:520px){.shell{padding:7px}.hero{border-radius:16px;padding:13px 14px}.hero h1{font-size:1.42rem}.hero p{font-size:.8rem}.stats{gap:5px}.stat{padding:7px}.stat b{font-size:1rem}.stat span{font-size:.61rem}.toolbar{margin:8px 0}.section-head{align-items:flex-start}.test-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.test-card{min-height:132px;padding:10px}.test-card h3{font-size:.84rem}.meta{font-size:.66rem}.card-bottom{align-items:end}.start{padding:7px 8px}.quiz-header-inner{gap:7px}.home-btn{padding:7px}.quiz-title span{display:none}.panel{border-radius:14px}.scan-wrap{height:46dvh;min-height:280px;padding:6px}.choices{gap:7px}.choice{min-height:46px}.solution-crop svg{min-width:420px}.solution-crop svg.answer-cell{min-width:0}}
    @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}