:root{--bg:#f7f5f0;--surface:#fff;--surface-2:#efece4;--text:#1d1f1e;--muted:#66696a;--line:#e0dcd2;--accent:#2f5d50;--accent-ink:#fff;--accent-soft:#dfeae5;--level:#6a4c93;--level-soft:#ece5f5;--again:#b3412f;--hard:#9a6a12;--good:#2f5d50;--easy:#2c5d8f;--danger:#b3412f;--mark:#fbe7a1;--shadow:0 1px 2px #0000000d, 0 4px 16px #0000000f;--radius:14px;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", "Thonburi", Roboto, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#16171a;--surface:#202226;--surface-2:#2a2d32;--text:#ecebe7;--muted:#a1a3a6;--line:#34373d;--accent:#7fbfa9;--accent-ink:#10221c;--accent-soft:#24372f;--level:#c6a8f0;--level-soft:#322a40;--again:#f0897a;--hard:#e3b55c;--good:#7fbfa9;--easy:#8ab8ec;--danger:#f0897a;--mark:#5a4b16;--shadow:0 1px 2px #0006;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#16171a;--surface:#202226;--surface-2:#2a2d32;--text:#ecebe7;--muted:#a1a3a6;--line:#34373d;--accent:#7fbfa9;--accent-ink:#10221c;--accent-soft:#24372f;--level:#c6a8f0;--level-soft:#322a40;--again:#f0897a;--hard:#e3b55c;--good:#7fbfa9;--easy:#8ab8ec;--danger:#f0897a;--mark:#5a4b16;--shadow:0 1px 2px #0006;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-text-size-adjust:100%;margin:0}body{min-height:100dvh}button,input,select,textarea{font:inherit;color:inherit}a{color:var(--accent)}h1,h2{margin:0}mark{background:var(--mark);color:inherit;border-radius:3px;padding:0 2px}.app{max-width:640px;min-height:100dvh;padding-bottom:calc(72px + env(safe-area-inset-bottom));margin:0 auto}.app.tab-study{padding-bottom:0}.topbar{z-index:5;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:color-mix(in srgb, var(--bg) 90%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);align-items:center;gap:10px;display:flex;position:sticky;top:0}.brand{letter-spacing:-.01em;font-size:20px;font-weight:700}.page{padding:8px 16px 24px}.center-screen{text-align:center;place-content:center;justify-items:center;gap:14px;min-height:100dvh;padding:24px;display:grid}.spinner{border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;width:32px;height:32px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-text{color:var(--danger)}.error-bar{background:color-mix(in srgb, var(--danger) 14%, var(--surface));color:var(--text);cursor:pointer;border-radius:10px;margin:0 16px 8px;padding:10px 12px}.hint{color:var(--muted);margin:6px 0;font-size:14px}.row{align-items:center;display:flex}.row.gap{gap:10px}.row.wrap{flex-wrap:wrap}.row.between{justify-content:space-between}.row.center{justify-content:center}.grow{flex:1}.btn{background:var(--surface-2);cursor:pointer;-webkit-tap-highlight-color:transparent;border:1px solid #0000;border-radius:12px;justify-content:center;align-items:center;gap:6px;min-height:44px;padding:0 16px;font-weight:600;text-decoration:none;display:inline-flex}.btn:disabled{opacity:.5;cursor:default}.btn.primary{background:var(--accent);color:var(--accent-ink)}.btn.outline{border-color:var(--line);background:0 0}.btn.ghost{color:var(--accent);background:0 0}.btn.danger{border-color:var(--danger);color:var(--danger);background:0 0}.btn.small{border-radius:10px;min-height:36px;padding:0 12px;font-size:14px}.btn.big{width:100%;min-height:54px;font-size:17px}.btn.wide{width:100%;margin-top:12px}.btn:focus-visible,.word-row:focus-visible,.group-head:focus-visible,.tabbar button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.chip{background:var(--surface-2);height:22px;color:var(--muted);border-radius:999px;align-items:center;padding:0 8px;font-size:12px;font-weight:600;display:inline-flex}.chip.level{background:var(--level-soft);color:var(--level)}.chip.good{background:var(--accent-soft);color:var(--accent)}.meta-row{flex-wrap:wrap;justify-content:center;gap:6px;display:inline-flex}.hero{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);margin:4px 0 20px;padding:18px 16px 16px}.hero-stats{text-align:center;grid-template-columns:repeat(3,1fr);margin-bottom:16px;display:grid}.hero-stats .num,.tile .num{font-variant-numeric:tabular-nums;font-size:28px;font-weight:700;display:block}.hero-stats .lbl,.tile .lbl{color:var(--muted);font-size:13px}.section-title{margin:4px 0 0;font-size:18px}.group{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);margin-top:10px;overflow:hidden}.group-head{cursor:pointer;text-align:left;background:0 0;border:0;align-items:center;gap:10px;width:100%;padding:14px 16px;font-size:16px;font-weight:700;display:flex}.group-head span:first-child{flex:1}.group-count{background:var(--accent);min-width:22px;height:22px;color:var(--accent-ink);border-radius:11px;place-items:center;padding:0 6px;font-size:12px;display:grid}.group-count:empty{display:none}.chev{color:var(--muted);font-size:22px;line-height:1;transition:transform .15s}.chev.up{transform:rotate(90deg)}.deck-list{margin:0;padding:0 16px 8px;list-style:none}.deck{border-top:1px solid var(--line);align-items:center;gap:12px;padding:12px 0;display:flex}.deck-main{flex:1;min-width:0}.deck-title{font-weight:600}.deck-sub{color:var(--muted);margin:2px 0 6px;font-size:13px}.bar{background:var(--surface-2);border-radius:3px;height:6px;overflow:hidden}.bar-fill{background:var(--accent);border-radius:3px;height:100%}.study{min-height:100dvh;padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom));flex-direction:column;display:flex}.study-top{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.counter{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}.card{background:var(--surface);box-shadow:var(--shadow);text-align:center;cursor:pointer;border-radius:20px;flex-direction:column;flex:1;padding:20px 20px 24px;display:flex;overflow-y:auto}.card.flipped{cursor:default}.card-tags{justify-content:center;gap:6px;min-height:22px;display:flex}.card .front{justify-items:center;gap:10px;padding:6vh 0 2vh;display:grid}.card.flipped .front{padding:3vh 0 1vh}.word{letter-spacing:-.01em;overflow-wrap:anywhere;font-size:clamp(32px,9vw,46px);font-weight:700}.ipa{color:var(--muted);margin:0;font-size:17px}.thai{margin:0;font-size:22px;font-weight:600;line-height:1.5}.thai.big{font-size:28px}.card hr{border:0;border-top:1px dashed var(--line);width:100%;margin:12px 0}.entry-back{text-align:left;gap:14px;display:grid}.entry-back .thai{text-align:center}.example{background:var(--surface-2);border-radius:12px;padding:12px 14px}.example p{margin:0;line-height:1.5}.example .en{font-size:17px}.example .th{color:var(--muted);margin-top:4px}.note{color:var(--muted);margin:0;font-size:14px}.pending{color:var(--muted);text-align:center;margin:0}.tap-hint{color:var(--muted);margin-top:auto;font-size:14px}.card-tools{flex-wrap:wrap;justify-content:center;gap:4px;min-height:36px;margin:8px 0;display:flex}.answer-bar{padding-top:4px;position:sticky;bottom:0}.grades{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.btn.grade{color:#fff;flex-direction:column;gap:0;min-height:60px;padding:4px}.btn.grade .ivl{opacity:.9;font-size:12px;font-weight:500}.g1{background:var(--again)}.g2{background:var(--hard)}.g3{background:var(--good)}.g4{background:var(--easy)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .btn.grade{color:#111}}:root[data-theme=dark] .btn.grade{color:#111}.done-page{text-align:center;gap:14px;padding-top:20vh;display:grid}.browse-controls{top:calc(48px + env(safe-area-inset-top));z-index:4;background:var(--bg);gap:8px;padding:4px 0 2px;display:grid;position:sticky}input[type=search],input:not([type]),input[type=number],select,textarea{border:1px solid var(--line);background:var(--surface);border-radius:12px;width:100%;min-height:44px;padding:10px 12px;font-size:16px}select{appearance:none;text-overflow:ellipsis;white-space:nowrap;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a8d90' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 16px center;background-repeat:no-repeat;background-size:12px 8px;flex:1;min-width:0;padding-right:40px;overflow:hidden}textarea{resize:vertical}.word-list{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);margin:4px 0 0;padding:0;list-style:none;overflow:hidden}.word-list li+li{border-top:1px solid var(--line)}.word-row{text-align:left;cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;width:100%;padding:12px 14px;display:flex}.wr-main{flex:1;min-width:0;display:grid}.wr-word{font-weight:600}.wr-th{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.wr-side{flex-shrink:0;align-items:center;gap:6px;display:flex}.status{color:var(--muted);text-align:right;min-width:58px;font-size:12px;font-weight:600}.s-learning{color:var(--hard)}.s-review{color:var(--easy)}.s-mature{color:var(--good)}.s-known{color:var(--level)}.sheet-backdrop{z-index:20;background:#00000059;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{background:var(--bg);width:100%;max-width:640px;max-height:88dvh;padding:0 16px calc(20px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0;overflow-y:auto}.sheet-head{background:var(--bg);justify-content:space-between;align-items:center;padding:14px 0 8px;display:flex;position:sticky;top:0}.sheet-head h2{overflow-wrap:anywhere;font-size:22px}.sheet-body,.word-detail{gap:12px;display:grid}.word-detail .meta-row{justify-content:flex-start}.facts{grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:14px;display:grid}.facts dt{color:var(--muted)}.facts dd{margin:0}.field{color:var(--muted);gap:6px;font-size:14px;font-weight:600;display:grid}.field input,.field textarea{color:var(--text);font-weight:400}.tiles{grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 14px;display:grid}.tile{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;padding:12px 6px}.tile .num{font-size:22px}.panel{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px;padding:16px}.panel h2{margin-bottom:10px;font-size:16px}.bars{align-items:flex-end;gap:2px;height:110px;display:flex}.bar-col{flex:1;align-items:flex-end;height:100%;display:flex}.bar-v{background:var(--accent);border-radius:3px 3px 0 0;width:100%;min-height:2px}.axis{color:var(--muted);justify-content:space-between;margin-top:4px;font-size:12px;display:flex}.heat{grid-template-rows:repeat(7,1fr);grid-auto-flow:column;gap:3px;display:grid}.heat-cell{aspect-ratio:1;background:var(--surface-2);border-radius:3px}.heat-cell[data-on=true]{background:var(--accent)}.deck-stats{gap:14px;margin:0;padding:0;list-style:none;display:grid}.setting{justify-content:space-between;align-items:center;gap:14px;padding:6px 0;display:flex}.setting+.setting{border-top:1px solid var(--line);margin-top:6px;padding-top:12px}.setting .hint{margin:2px 0 0}.stepper{align-items:center;gap:6px;display:flex}.stepper input{text-align:center;width:64px;min-height:36px;padding:6px}.switch{appearance:none;background:var(--line);cursor:pointer;border-radius:15px;flex-shrink:0;width:50px;height:30px;transition:background .15s;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:24px;height:24px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0000004d}.switch:checked{background:var(--accent)}.switch:checked:after{transform:translate(20px)}.settings .panel{gap:10px;display:grid}.settings .panel h2{margin:0}.credits ul{color:var(--muted);gap:6px;margin:0;padding-left:18px;font-size:14px;display:grid}.toast{top:calc(56px + env(safe-area-inset-top));z-index:6;background:var(--accent);color:var(--accent-ink);cursor:pointer;border-radius:12px;margin:0 0 12px;padding:12px 14px;position:sticky}.signin h1{font-size:28px}.signin p{max-width:320px;color:var(--muted)}.signin .btn.big{width:260px}.tabbar{z-index:10;background:color-mix(in srgb, var(--surface) 94%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);justify-content:center;display:flex;position:fixed;bottom:0;left:0;right:0}.tabbar button{max-width:160px;color:var(--muted);cursor:pointer;background:0 0;border:0;flex:1;justify-items:center;gap:2px;padding:8px 0 6px;font-size:11px;font-weight:600;display:grid}.tabbar button.active{color:var(--accent)}
