:root{--bg:#f6f2e9;--surface:#fffdf8;--surface-2:#f0eadf;--text:#262724;--muted:#6c7069;--line:#ded8cc;--accent:#285b4d;--accent-soft:#dfece7;--danger:#a33c34;--success:#2f715c;--shadow:0 8px 28px rgba(50,45,35,.06);--reader-size:18px;--reader-line:1.7;--reader-width:780px;--radius:18px;--header-h:64px}
[data-theme="light"]{--bg:#f7f8f7;--surface:#fff;--surface-2:#eef1ef;--text:#242724;--muted:#697069;--line:#dde2de;--accent:#275f50;--accent-soft:#e1eee9}
[data-theme="warm"]{--bg:#f6f2e9;--surface:#fffdf8;--surface-2:#f0eadf;--text:#292720;--muted:#716c62;--line:#e0d8c9;--accent:#526a50;--accent-soft:#e6ecdf}
[data-theme="sepia"]{--bg:#ede1c7;--surface:#f6ecd6;--surface-2:#e8d8b9;--text:#3a3125;--muted:#776956;--line:#d7c5a3;--accent:#735a34;--accent-soft:#eadcc2}
[data-theme="dark"]{--bg:#1c201f;--surface:#252a28;--surface-2:#303633;--text:#e7e9e5;--muted:#adb3ae;--line:#3d4541;--accent:#8bc3ae;--accent-soft:#31483f;--shadow:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Tahoma,"Noto Sans Thai",sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}.site-header{height:var(--header-h);position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.header-inner{height:100%;max-width:1180px;margin:auto;padding:0 18px;display:flex;align-items:center;gap:16px}.brand{font-weight:800;display:flex;align-items:center;gap:9px;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--accent);color:var(--surface);font-size:20px}.header-search{flex:1;position:relative;max-width:720px;margin:auto}.header-search input,.hero-search input{width:100%;height:44px;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:0 48px 0 16px;outline:0}.header-search input:focus,.hero-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.header-search>button,.hero-search>button{position:absolute;right:5px;top:5px;width:34px;height:34px;border:0;border-radius:10px;background:transparent;font-size:22px}.header-actions{display:flex;align-items:center;gap:10px}.icon-btn{border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:8px 10px;min-width:42px;min-height:42px}.profile-chip,.text-link{font-size:14px;white-space:nowrap}.page-shell{max-width:1180px;margin:0 auto;padding:28px 18px 100px}.hero{max-width:900px;margin:32px auto 38px;text-align:center}.hero h1{font-size:clamp(30px,5vw,54px);line-height:1.1;margin:0 0 12px;letter-spacing:-.03em}.hero p{color:var(--muted);font-size:clamp(17px,2vw,21px);margin:0 auto 24px;max-width:700px}.hero-search{position:relative;max-width:760px;margin:0 auto}.hero-search input{height:60px;border-radius:20px;padding-left:20px;padding-right:62px;font-size:18px;box-shadow:var(--shadow)}.hero-search>button{top:8px;right:8px;width:44px;height:44px;background:var(--accent);color:white;border-radius:14px}.autocomplete{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);text-align:left;overflow:hidden;max-height:430px;overflow:auto}.autocomplete.open{display:block}.auto-item{display:block;padding:10px 14px;border-bottom:1px solid var(--line)}.auto-item:last-child{border-bottom:0}.auto-item:hover,.auto-item.active{background:var(--surface-2)}.auto-item strong{display:block;font-size:15px}.auto-item small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chips{display:flex;gap:9px;overflow-x:auto;padding:14px 2px 2px;scrollbar-width:none}.chip{flex:0 0 auto;border:1px solid var(--line);background:var(--surface);padding:8px 13px;border-radius:999px;font-size:14px}.chip:hover{border-color:var(--accent);color:var(--accent)}.section{margin:38px auto}.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px}.section-head h2{margin:0;font-size:24px}.section-head p{margin:4px 0 0;color:var(--muted)}.section-head a{color:var(--accent);font-size:14px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.card,.result-card,.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.card{padding:18px}.card h3,.result-card h3{margin:6px 0 7px;font-size:18px;line-height:1.4}.card p,.result-card p{margin:0;color:var(--muted)}.eyebrow{font-size:12px;color:var(--accent);font-weight:700;letter-spacing:.02em}.result-list{display:grid;gap:10px}.result-card{padding:15px 17px}.result-card:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--line))}.result-card h3{font-size:17px}.translation-text{color:var(--muted)}.reader{width:min(100%,var(--reader-width));margin:0 auto;font-size:var(--reader-size);line-height:var(--reader-line)}.reader h1{font-size:clamp(30px,5vw,44px);line-height:1.18;margin:10px 0 10px;letter-spacing:-.02em}.reader h2{font-size:1.35em;margin:2em 0 .65em}.reader p{margin:0 0 1.1em}.reader li{margin:.5em 0}.reader-meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:14px;margin-bottom:22px}.reader section{margin:2em 0}.example-list{padding-left:1.4em}.example-list li{padding:10px 0 13px;border-bottom:1px solid var(--line)}.sentence-box{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;margin:18px 0}.sentence-en{font-size:1.22em;font-weight:700;margin-bottom:8px}.sentence-th{color:var(--muted)}.content-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 22px}.action-btn,.btn{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:9px 13px;min-height:42px}.action-btn.saved{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.ghost{background:transparent}.btn.danger{background:var(--danger);color:#fff;border-color:var(--danger)}.btn.full{width:100%}.toolbar{position:sticky;top:76px;z-index:10;display:flex;justify-content:center;pointer-events:none}.toolbar-inner{pointer-events:auto;display:flex;gap:6px;padding:6px;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.progress-line{position:fixed;left:0;top:var(--header-h);height:2px;background:var(--accent);width:0;z-index:40}.reading-panel{position:fixed;z-index:80;right:18px;top:78px;width:330px;max-height:calc(100vh - 96px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 18px 60px rgba(0,0,0,.18);transform:translateY(-8px);opacity:0;pointer-events:none;transition:.2s}.reading-panel.open{transform:none;opacity:1;pointer-events:auto}.reading-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.reading-panel label{display:block;font-size:13px;color:var(--muted);margin:14px 0 7px}.reading-panel select,.reading-panel input[type=range]{width:100%}.font-control{display:grid;grid-template-columns:48px 1fr 48px;gap:8px;align-items:center}.font-control button,.theme-row button{border:1px solid var(--line);background:var(--surface-2);border-radius:10px;min-height:40px}.theme-row{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.theme-row button{font-size:11px;padding:4px}.switch-row{display:flex!important;gap:9px;align-items:center}.sheet-backdrop{display:none}.form-card{max-width:560px;margin:28px auto;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px}.form-card h1{margin-top:0}.form-row{margin:14px 0}.form-row label{display:block;font-size:14px;font-weight:650;margin-bottom:6px}.form-row input,.form-row textarea,.form-row select,.search-page-form input,.filter-bar select{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:11px 12px;outline:0}.form-row textarea{min-height:120px;resize:vertical}.filter-bar{display:flex;gap:8px;align-items:center;margin:14px 0}.search-page-form{display:flex;gap:8px;max-width:820px}.search-page-form input{font-size:18px;padding:14px}.search-page-form .btn{min-width:90px}.flash{max-width:820px;margin:0 auto 16px;border-radius:12px;padding:11px 14px;background:var(--surface);border:1px solid var(--line)}.flash.success{border-color:var(--success);color:var(--success)}.flash.error{border-color:var(--danger);color:var(--danger)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat-card{padding:16px}.stat-card strong{display:block;font-size:26px}.stat-card span{font-size:13px;color:var(--muted)}.tabs{display:flex;gap:8px;overflow:auto;margin:14px 0}.tab{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);white-space:nowrap}.tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}.empty{padding:34px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:16px}.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.game-stage{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:22px;min-height:360px}.game-score{display:flex;justify-content:space-between;color:var(--muted);font-size:14px}.game-question{text-align:center;font-size:clamp(24px,4vw,36px);font-weight:750;margin:40px auto 24px;max-width:780px}.game-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:760px;margin:auto}.game-option{padding:15px;border:1px solid var(--line);background:var(--surface-2);border-radius:14px}.game-option.correct{border-color:var(--success)}.game-option.wrong{border-color:var(--danger)}.scramble-area{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.scramble-token{padding:10px 13px;border:1px solid var(--line);background:var(--surface-2);border-radius:10px}.progress-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px}.progress-track{height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:8px}.progress-track>span{display:block;height:100%;background:var(--accent)}.cookie-banner{position:fixed;left:18px;bottom:18px;z-index:90;width:min(430px,calc(100% - 36px));padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 18px 50px rgba(0,0,0,.16);display:none}.cookie-banner.show{display:block}.cookie-banner p{font-size:13px;color:var(--muted);margin:5px 0 12px}.cookie-actions{display:flex;gap:8px;justify-content:flex-end}.bottom-nav{display:none}.admin-shell{display:grid;grid-template-columns:220px 1fr;gap:22px}.admin-nav{position:sticky;top:82px;align-self:start;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px}.admin-nav a{display:block;padding:9px 10px;border-radius:10px}.admin-nav a:hover{background:var(--surface-2)}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface)}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{background:var(--surface-2);white-space:nowrap}.code-box{white-space:pre-wrap;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px;font-family:ui-monospace,Consolas,monospace;font-size:13px}.focus-reading .site-header,.focus-reading .bottom-nav,.focus-reading .section.related,.focus-reading .cookie-banner{display:none!important}.focus-reading .page-shell{padding-top:20px}.focus-reading .reader{max-width:var(--reader-width)}body.translation-english .translation-text,body.translation-english .sentence-th{display:none}body.translation-tap .translation-text,body.translation-tap .sentence-th{filter:blur(5px);user-select:none;cursor:pointer}body.translation-tap .translation-text.revealed,body.translation-tap .sentence-th.revealed{filter:none;user-select:text}body.translation-thai-first .sentence-box{display:flex;flex-direction:column}body.translation-thai-first .sentence-th{order:-1;font-size:1.05em;color:var(--text);font-weight:600;margin-bottom:8px}body.translation-thai-first .sentence-en{font-size:1em;color:var(--muted);font-weight:500}.muted{color:var(--muted)}.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}.translator-box textarea{min-height:180px;font-size:18px}.translate-result{min-height:180px;background:var(--surface-2);border-radius:14px;padding:14px;white-space:pre-wrap}.pill{display:inline-block;padding:4px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px}.small{font-size:13px}.legal{max-width:780px;margin:auto}.legal h1{font-size:38px}.legal h2{margin-top:32px}.footer-links{text-align:center;margin-top:50px;color:var(--muted);font-size:13px}.footer-links a{margin:0 8px}.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(10px);background:var(--text);color:var(--surface);padding:9px 14px;border-radius:999px;opacity:0;pointer-events:none;z-index:100;transition:.2s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:820px){:root{--header-h:58px}.site-header{height:var(--header-h)}.header-inner{padding:0 12px;gap:8px}.brand>span:last-child{display:none}.header-search{display:none}.header-actions .profile-chip,.header-actions .text-link{display:none}.page-shell{padding:18px 16px 92px}.hero{margin:12px auto 28px;text-align:left}.hero h1{font-size:34px}.hero p{font-size:17px}.hero-search input{height:56px;font-size:16px}.grid,.grid.four,.game-grid,.stats,.split{grid-template-columns:1fr}.section{margin:30px auto}.section-head h2{font-size:21px}.reader{font-size:var(--reader-size);width:100%}.reader h1{font-size:30px}.bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;z-index:50;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}.bottom-nav a{min-height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:var(--muted);gap:1px}.bottom-nav a span{font-size:20px;color:var(--text)}.reading-panel{top:auto;left:0;right:0;bottom:0;width:100%;max-height:80vh;border-radius:24px 24px 0 0;transform:translateY(100%);opacity:1;padding-bottom:calc(18px + env(safe-area-inset-bottom))}.reading-panel.open{transform:translateY(0)}.sheet-handle{display:block;width:44px;height:4px;background:var(--line);border-radius:99px;margin:-5px auto 12px}.sheet-backdrop.open{display:block;position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.34)}.game-options{grid-template-columns:1fr}.search-page-form{position:sticky;top:66px;z-index:9;background:var(--bg);padding:6px 0}.filter-bar{overflow:auto}.admin-shell{grid-template-columns:1fr}.admin-nav{position:static;display:flex;overflow:auto}.admin-nav a{white-space:nowrap}.content-actions{position:sticky;bottom:68px;background:color-mix(in srgb,var(--bg) 92%,transparent);padding:7px 0;z-index:8}.toolbar{top:66px}.cookie-banner{bottom:78px}.theme-row{grid-template-columns:repeat(5,1fr)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}