:root{
  --bg:#F3F5F2;--surface:#FFFFFF;--ink:#141A17;--ink-2:#5C6761;--line:#DFE4DF;
  --accent:#2E7A63;--accent-ink:#FFFFFF;--accent-soft:#E4EFE9;--danger:#B3412F;
  --font-ui:system-ui,-apple-system,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --font-read:"Newsreader",Charter,"Iowan Old Style",Georgia,"Times New Roman",serif;
  --font-zh:"PingFang SC","Noto Sans SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --radius:16px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0C110F;--surface:#151C19;--ink:#EAF0EC;--ink-2:#93A19A;--line:#25302B;--accent:#6CC4A4;--accent-ink:#06130E;--accent-soft:#16251E;--danger:#E58A78;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0C110F;--surface:#151C19;--ink:#EAF0EC;--ink-2:#93A19A;--line:#25302B;--accent:#6CC4A4;--accent-ink:#06130E;--accent-soft:#16251E;--danger:#E58A78;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;
  padding:0 16px calc(48px + env(safe-area-inset-bottom));overscroll-behavior-y:none}
.app{max-width:480px;margin-inline:auto;min-width:0}
button,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.top{padding-top:calc(16px + env(safe-area-inset-top))}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:.02em;font-size:15px}
.brand svg{width:26px;height:26px;flex:none}
.pill{display:inline-flex;align-items:center;font-size:13px;color:var(--ink-2);padding:6px 12px;border:1px solid var(--line);border-radius:999px}
.pill:hover{color:var(--ink)}
.lead{margin:22px 0 4px;font-family:var(--font-read);font-weight:400;font-size:34px;line-height:1.1;letter-spacing:-.01em}
.date{font-size:12px;letter-spacing:.12em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tools{position:sticky;top:0;z-index:5;background:var(--bg);padding:12px 0 10px;margin-top:6px}
.levels{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.levels button{padding:9px 0;border-radius:999px;font-size:13px;font-weight:500;color:var(--ink-2);transition:background .2s,color .2s}
.levels button[aria-checked="true"]{background:var(--accent);color:var(--accent-ink)}
.levelnote{margin:10px 2px 0;font-size:12.5px;color:var(--ink-2);min-height:1.4em}
.levelnote b{color:var(--ink);font-weight:600}
.cats{display:flex;gap:8px;overflow-x:auto;margin-top:12px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cats button{flex:none;font-size:13px;padding:6px 14px;border-radius:999px;color:var(--ink-2);border:1px solid transparent}
.cats button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.hint{margin:8px 2px 14px;font-size:12.5px;color:var(--ink-2)}
.banner{margin:0 0 12px;padding:10px 14px;border-radius:12px;background:var(--accent-soft);color:var(--ink);font-size:13px}
.feed{display:flex;flex-direction:column;gap:12px;padding:0;margin:0;list-style:none}
.card{perspective:1400px;position:relative}
.flip{display:grid;width:100%;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .55s cubic-bezier(.3,.7,.2,1);transform-style:preserve-3d}
.card.is-flipped .flip{transform:rotateY(180deg)}
/* 正反两面都参与布局：卡片高度取较高的一面，翻面前后尺寸不变 */
.face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 16px;display:flex;flex-direction:column;gap:14px;min-width:0}
.front{background:var(--surface)}
.back{background:var(--accent-soft);transform:rotateY(180deg);border-color:transparent}
.en{font-family:var(--font-read);font-size:19px;line-height:1.45;margin:0;text-wrap:pretty}
.zh{font-family:var(--font-zh);font-size:19px;line-height:1.7;margin:0}
.meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--ink-2);margin-top:auto}
.meta .where{color:var(--accent);font-weight:500}
.back .meta{color:var(--accent)}
.src{color:inherit;text-decoration:underline;text-underline-offset:2px}
.skel{height:132px;border-radius:var(--radius);background:linear-gradient(90deg,var(--surface),var(--accent-soft),var(--surface));background-size:200% 100%;animation:sh 1.4s infinite linear;border:1px solid var(--line)}
@keyframes sh{to{background-position:-200% 0}}
.empty{padding:40px 8px;text-align:center;color:var(--ink-2);font-size:14px;line-height:1.8}
.empty button,.more button{margin-top:12px;color:var(--accent);font-weight:500;padding:8px 16px;border:1px solid var(--line);border-radius:999px}
.more{text-align:center;padding:16px 0;color:var(--ink-2);font-size:12.5px}
.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.sheet-body{position:relative;width:100%;max-width:480px;max-height:88vh;overflow:auto;background:var(--bg);border-radius:20px 20px 0 0;padding:18px 16px calc(24px + env(safe-area-inset-bottom));animation:up .25s ease-out}
@keyframes up{from{transform:translateY(24px);opacity:0}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.sheet-head h2{margin:0;font-family:var(--font-read);font-weight:400;font-size:24px}
.sheet h3{margin:20px 0 10px;font-size:13px;font-weight:600;letter-spacing:.04em}
.sheet h3 small{font-weight:400;color:var(--ink-2)}
.row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;margin-bottom:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;font-size:15px}
select{background:transparent;border:0;color:var(--accent);font-weight:500;text-align:right}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips.col{flex-direction:column}
.chips button{font-size:14px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);text-align:left}
.chips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chips button:disabled{opacity:.4}
.fine{margin-top:24px;font-size:12px;color:var(--ink-2);text-align:center}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-size:13px;z-index:30;max-width:90vw}
@media (prefers-reduced-motion:reduce){
  .flip{transition:none;transform-style:flat}
  .card.is-flipped .flip{transform:none}
  .back{transform:none;opacity:0}
  .card.is-flipped .back{opacity:1}
  .card.is-flipped .front{opacity:0}
  .sheet-body{animation:none}.skel{animation:none}
}
details.more-places{margin-top:12px}
details.more-places summary{cursor:pointer;font-size:13px;color:var(--ink-2);padding:6px 0 10px}
.pack-group{margin-top:14px}
.pack-group h4{margin:0 0 8px;font-size:12px;letter-spacing:.08em;color:var(--ink-2);font-weight:500}
.pack{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;margin-bottom:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.pack-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pack-text b{font-weight:500;font-size:15px}
.pack-text span{font-size:12.5px;color:var(--ink-2)}
.pack .btn{flex:none;font-size:13px;padding:6px 14px;border-radius:999px;border:1px solid var(--accent);color:var(--accent)}
.pack .btn.on{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.soon{margin:0;font-size:13px;color:var(--ink-2);padding:10px 2px}
.w{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:4px;transition:background .2s}
.w.hit{background:var(--accent-soft)}
#word-body .def{font-family:var(--font-zh);font-size:17px;line-height:1.7;margin:8px 0}
#word-body .phon{margin:4px 0;color:var(--ink-2);font-size:14px}
#word-actions{margin-top:12px}
.flag{font-size:12px;color:inherit;text-decoration:underline;text-underline-offset:2px;padding:4px 2px}
.flag:hover{color:var(--danger)}