:root {
  color-scheme: light;
  --bg:#f4f7f7; --surface:#fff; --raised:#fff; --ink:#172e31; --muted:#53666a;
  --primary:#116d66; --primary-hover:#0d5b55; --on-primary:#fff; --soft:#e5f2ef;
  --line:#d9e3e3; --border-control:#809795; --hover:#edf3f2;
  --success:#236044; --success-bg:#eaf5ee; --danger:#a13238; --danger-bg:#faedef;
  --warning:#80591a; --warning-bg:#faf1df; --backdrop:#102b3277; --shadow:#173b3326;
  --radius:16px; --space:24px;
  font:400 100%/1.6 'Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  color:var(--ink); background:var(--bg);
}
:root[data-theme=dark] {
  color-scheme:dark;
  --bg:#121e20; --surface:#1b2b2d; --raised:#24383a; --ink:#e8f1f0; --muted:#abc0bf;
  --primary:#7fcbbe; --primary-hover:#a2ddd2; --on-primary:#102422; --soft:#24423e;
  --line:#354b4c; --border-control:#789591; --hover:#253a3b;
  --success:#9bd7b2; --success-bg:#203e32; --danger:#ffaeb2; --danger-bg:#482c32;
  --warning:#e7c68e; --warning-bg:#3c3528; --backdrop:#071011bb; --shadow:#050d1055;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; width:100%; height:100%; }
body { height:100dvh; display:flex; flex-direction:column; overflow:hidden; }
button,input,select,summary { font:inherit; color:inherit; }
button,a,select,summary { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button,select,summary { cursor:pointer; }
button { line-height:1.4; }
button:disabled { opacity:.48; cursor:default; }
a { color:var(--primary); text-underline-offset:4px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
#main:focus-visible { outline:none; }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(24px,1.6rem,28px); font-weight:700; line-height:1.4; letter-spacing:-.025em; }
h2 { font-size:1.25rem; line-height:1.45; font-weight:700; }
h3 { font-size:1rem; line-height:1.5; font-weight:600; }
h1,h2,h3 { text-wrap:balance; }
.muted,.small { color:var(--muted); font-size:1rem; }
.eyebrow,.sidebar-label,.continuity,.page-tag,.dot { display:none; }
.skip { position:fixed; top:-100px; left:16px; z-index:20; background:var(--surface); padding:12px 20px; }
.skip:focus { top:8px; }
.topbar { display:flex; align-items:center; gap:28px; flex-shrink:0; min-height:64px; padding:8px 24px; background:var(--surface); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:18px; font-weight:700; line-height:1.25; }
.brand img { border-radius:10px; flex-shrink:0; }
.brand small { display:block; font-size:9px; letter-spacing:.13em; margin-top:4px; color:var(--muted); }
.workspace-name { color:var(--muted); font-size:14px; padding-left:28px; border-left:1px solid var(--line); }
.account { display:flex; align-items:center; gap:12px; margin-left:auto; }
#account-label { color:var(--muted); font-size:14px; }
.account-menu { position:relative; display:flex; align-items:center; line-height:1; }
.account-menu summary { list-style:none; white-space:nowrap; }
.account>.button { white-space:nowrap; }
.dropdown-chevron { width:8px; height:8px; flex:0 0 8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); margin:0 3px 0 4px; }
.account-menu[open] .dropdown-chevron { transform:translateY(2px) rotate(225deg); }
.account-help { display:flex; align-items:center; gap:16px; grid-column:1/-1; border-top:1px solid var(--line); margin-top:0; padding:8px 12px 0; }
.account-help a { display:inline-flex; align-items:center; min-height:44px; color:var(--muted); font-size:16px; text-underline-offset:4px; }
.account-help a:hover { color:var(--primary); }
.account-menu summary::-webkit-details-marker { display:none; }
.account-popover { position:absolute; right:0; top:calc(100% + 8px); width:280px; padding:12px; display:grid; gap:4px; background:var(--raised); border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 32px var(--shadow); z-index:12; }
.account-popover .button { justify-content:start; padding-inline:12px; }
.theme-setting { display:grid; gap:10px; border-top:1px solid var(--line); margin:4px 0 0; padding:16px 12px; font-size:16px; line-height:1.5; }
.theme-setting select { width:100%; min-height:46px; line-height:1.5; }
.button,.text-button,.suggestion { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; min-width:44px; padding:10px 16px; border:1px solid transparent; border-radius:10px; background:var(--hover); color:var(--ink); font-size:1rem; font-weight:600; text-decoration:none; line-height:1.4; }
.button:hover,.suggestion:hover { background:var(--soft); border-color:var(--primary); }
.button.primary { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.button.primary:hover { background:var(--primary-hover); }
.button.quiet,.text-button { background:transparent; color:var(--primary); }
.button.quiet:hover,.text-button:hover { background:var(--hover); }
.button.compact { padding:8px 12px; }
.button.danger { color:var(--danger); background:var(--danger-bg); }
.pro-entry { background:var(--soft); color:var(--primary); }
.layout { display:grid; grid-template-columns:192px minmax(0,1fr); flex:1; min-height:0; width:100%; max-width:1800px; margin:auto; }
.sidebar { min-height:0; padding:24px 12px 12px; display:flex; flex-direction:column; gap:20px; }
.sidebar nav { display:grid; gap:6px; }
.nav-item { display:flex; align-items:center; gap:12px; min-height:48px; width:100%; padding:10px 14px; border:0; border-radius:10px; background:transparent; color:var(--muted); font-size:16px; font-weight:600; text-align:left; }
.nav-item:hover { background:var(--hover); }
.nav-item.active { color:var(--primary); background:var(--soft); }
.nav-icon { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
main { display:flex; flex-direction:column; min-width:0; min-height:0; padding:22px 28px 12px 12px; }
.view { flex:1; min-width:0; min-height:0; width:100%; max-width:1280px; margin:0 auto; display:flex; flex-direction:column; }
.section-heading { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:12px; margin-bottom:16px; }
.section-heading .muted { display:none; }
.practice-card,.library-panel,.study-empty { background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.practice-card { padding:24px; min-width:0; min-height:0; }
.pill { font-size:14px; font-weight:600; color:var(--primary); background:var(--soft); border-radius:6px; padding:4px 8px; }
.feedback,.inline-status { padding:12px 16px; border-radius:10px; background:var(--soft); color:var(--ink); font-size:1rem; }
.inline-status:empty { display:none; }
.text-input,select { min-height:44px; width:100%; border:1px solid var(--border-control); border-radius:10px; padding:9px 12px; background:var(--surface); color:var(--ink); min-width:0; }
input::placeholder { color:var(--muted); opacity:1; }
form label,.search-label { display:block; font-size:1rem; font-weight:600; margin-bottom:6px; }
.library-panel { display:flex; flex-direction:column; }
.library-heading { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:8px; }
.library-heading h1 { font-size:20px; }
.library-heading .button { padding:6px 8px; font-size:14px; }
.library-controls { flex-shrink:0; display:grid; gap:10px; }
.library-toolbar label { display:flex; align-items:center; gap:10px; font-size:1rem; }
.library-toolbar select { flex:1; }
.library-summary { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:1rem; }
.word-workspace { display:grid; flex:1; min-height:0; }
.word-index { display:flex; flex-direction:column; min-height:0; }
.word-choice { display:flex; flex-direction:column; align-items:start; text-align:left; border:1px solid transparent; border-radius:10px; background:transparent; }
.word-choice:hover { background:var(--hover); }
.word-choice[aria-pressed=true] { background:var(--soft); color:var(--primary); }
.word-choice strong { font-weight:600; }
.study-empty,.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; padding:24px; }
.empty p,.study-empty p { max-width:440px; color:var(--muted); font-size:1rem; }
.study-empty svg { width:40px; height:40px; stroke:var(--primary); fill:none; }
.loading { padding:24px; color:var(--muted); font-size:1rem; }
.word-back { display:none; }
.word-workspace:has(.study-pane:not([hidden])) .study-empty { display:none; }
.memory-panel { border:0; background:transparent; padding:0; margin:0; }
.memory-image { display:block; object-fit:contain; }
.memory-panel h3 { margin-bottom:8px; }
.speaking-copy { flex:1; min-height:0; }
.speaking-copy>p:not(.muted) { font-size:1.25rem; }
.speaking-actions { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.review-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.news-grid { flex:1; min-height:0; display:flex; flex-direction:column; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:12px 28px; }
.news-card { min-width:0; padding:20px 0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; align-items:center; gap:10px 24px; border-bottom:1px solid var(--line); }
.news-card:last-child { border-bottom:0; }
.news-meta { display:flex; align-items:center; gap:12px; grid-column:1; }
.news-meta .eyebrow { display:none; }
.news-card h2 { font-size:1.25rem; grid-column:1; font-weight:600; }
.news-card>p { grid-column:1; color:var(--muted); }
.news-card>p:empty { display:none; }
.news-card>.button { grid-column:2; grid-row:1 / span 3; color:var(--primary); background:var(--soft); }
.news-card .inline-status { grid-column:1/-1; }
#reader { display:flex; flex-direction:column; flex:1; min-height:0; }
.reader-toolbar { display:flex; align-items:center; gap:12px; flex-shrink:0; margin-bottom:12px; }
.reader-toolbar label { display:flex; align-items:center; gap:8px; margin-left:auto; }
.reader-toolbar select { width:auto; }
.reader-toolbar .button,.reader-toolbar label,.reader-toolbar select { font-size:16px; }
.reader-content { flex:1; min-height:0; width:100%; margin:auto; max-width:1000px; padding:24px 32px; }
#view-news:has(> #reader:not([hidden]))>.section-heading { display:none; }
.result-title { font-size:1.5rem; line-height:1.4; }
.result-section { white-space:pre-wrap; }
.result-section>strong { display:block; color:var(--primary); font-weight:600; margin-bottom:8px; }
.example-english,[lang=en] { letter-spacing:.005em; }
.english-first .translation-text { display:none; }
.reader-content.large-text { font-size:1.25rem; }
.reader-content.large-text .page-text p { font-size:1.25rem; }
#view-generate>.section-heading { width:min(100%,1000px); margin-left:auto; margin-right:auto; }
.generate-layout { max-height:560px; display:flex; flex-direction:column; width:min(100%,1000px); flex:1; min-height:0; margin:0 auto; gap:16px; }
.spell-card { flex:1; display:flex; flex-direction:column; padding:28px 36px; }
.spell-card>.pill { align-self:start; }
.spell-card h2 { font-size:1.5rem; margin:16px 0; }
#spell-form { flex:1; min-height:0; }
.input-row { display:flex; align-items:center; gap:12px; }
.input-row input { flex:1; }
.input-row>.button { flex-shrink:0; }
.word-suggestions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.quota-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:12px; border-top:1px solid var(--line); }
.quota-bar p { color:var(--muted); }
.quota-bar .text-button { padding-inline:0; }
#generated-workspace { display:flex; flex-direction:column; flex:1; min-height:0; }
#spell-result { flex:1; min-height:0; }
.page-links { display:flex; justify-content:space-between; gap:8px; flex-shrink:0; margin:0 0 8px; }
.page-links .text-button { padding:6px 4px; }
.account-view { max-width:1000px; }
.recording-list { display:flex; flex-direction:column; gap:12px; flex:1; min-height:0; }
.recording-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 16px; padding:18px 22px; }
.recording-card h2 { font-size:1.25rem; }
.recording-card .saved-recording,.recording-error { grid-column:1/-1; }
.saved-recording { width:100%; min-width:0; max-width:480px; height:44px; }
.recording-error:empty { display:none; }
#recordings-status { display:none; }
#voice-content { display:flex; flex-direction:column; flex:1; min-height:0; }
.consent-choice,form .consent-choice { display:flex; align-items:start; gap:12px; min-height:44px; padding:10px 0; margin:0; font-size:1rem; font-weight:400; cursor:pointer; }
.consent-choice strong,.consent-choice small { display:block; font-size:1rem; }
.consent-choice small { margin-top:4px; color:var(--muted); }
input[type=checkbox] { width:22px; height:22px; flex-shrink:0; accent-color:var(--primary); margin:3px 0 0; }
.optional-label { font-weight:400; font-size:1rem; color:var(--muted); }
.recording-deletion h2 { color:var(--danger); }
.subscription-state { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-left:3px solid var(--primary); background:var(--soft); border-radius:0 12px 12px 0; flex-shrink:0; margin-bottom:14px; }
.subscription-state h2 { font-size:1rem; font-weight:600; }
.subscription-state p { font-size:1rem; color:var(--muted); }
.state-actions { display:flex; align-items:center; justify-content:end; gap:8px; flex-shrink:0; }
.tabbed-content { display:flex; flex-direction:column; flex:1; min-height:0; }
.content-tabs { display:flex; flex-shrink:0; gap:4px; padding:0; margin-bottom:14px; border-bottom:1px solid var(--line); }
.content-tabs [role=tab] { display:flex; align-items:center; justify-content:center; flex:1; min-height:44px; border:0; border-bottom:2px solid transparent; border-radius:0; padding:8px 12px; font-size:1rem; font-weight:600; background:transparent; color:var(--muted); }
.content-tabs [role=tab][aria-selected=true] { color:var(--primary); border-bottom-color:var(--primary); }
.content-panel { display:flex; flex-direction:column; flex:1; min-height:0; }
.content-panel>.practice-card,.content-panel>.purchase-card { flex:1; min-height:0; }
.plan-card { display:flex; flex-direction:column; }
.plan-table { width:100%; border-collapse:collapse; text-align:left; font-size:1rem; }
.plan-table caption { text-align:left; color:var(--muted); margin-bottom:12px; }
.plan-table th,.plan-table td { padding:14px 12px; border-bottom:1px solid var(--line); }
.plan-table th:first-child { font-weight:600; }
.plan-table th:last-child,.plan-table td:last-child { color:var(--primary); background:var(--soft); font-weight:600; }
.purchase-card { background:var(--surface); padding:24px; border:1px solid var(--line); border-radius:16px; }
.store-links { display:flex; gap:12px; }
.purchase-card ol { padding-left:24px; }
.purchase-card li { margin-bottom:8px; }
.subscription-management { display:flex; flex-direction:column; flex:1; min-height:0; }
.help-card p { color:var(--muted); }
.settings-card { border:0; background:transparent; padding:0; }
summary { min-height:44px; padding:10px 0; font-weight:600; }
.support-link { display:inline-flex; align-items:center; min-height:44px; font-size:1rem; }
#status { position:fixed; z-index:30; right:24px; bottom:24px; width:max-content; max-width:min(440px,calc(100vw - 32px)); padding:10px 12px 10px 16px; border:1px solid var(--line); border-radius:12px; font-size:1rem; line-height:1.6; color:var(--ink); background:var(--raised); box-shadow:0 8px 28px var(--shadow); }
#status:not([hidden]) { display:flex; align-items:center; gap:12px; animation:notice-enter .16s ease-out; }
.notice-message { min-width:0; overflow-wrap:anywhere; }
.notice-icon { flex-shrink:0; font-size:20px; color:var(--primary); }
#status[data-type=success] .notice-icon { color:var(--success); }
#status[data-type=error] .notice-icon { color:var(--danger); }
.notice-close { flex-shrink:0; min-width:44px; min-height:44px; border:0; border-radius:10px; color:var(--muted); background:transparent; font-size:24px; }
.notice-close:hover { background:var(--hover); color:var(--ink); }
@keyframes notice-enter { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:700px) { #status { right:12px; left:12px; bottom:calc(76px + env(safe-area-inset-bottom)); width:auto; max-width:none; } }
@media (prefers-reduced-motion:reduce) { #status:not([hidden]) { animation:none; } }
.list-pager { display:flex; align-items:center; justify-content:end; gap:12px; padding:8px 0 0; flex-shrink:0; min-height:44px; }
dialog { width:min(540px,calc(100vw - 24px)); height:min(620px,calc(100dvh - 24px)); max-height:none; max-width:none; padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--raised); color:var(--ink); overflow:visible; }
dialog[open] { display:flex; flex-direction:column; gap:12px; }
dialog::backdrop { background:var(--backdrop); }
dialog h2 { font-size:1.5rem; padding-right:40px; }
dialog p { font-size:1rem; }
dialog a { display:inline-flex; align-items:center; min-height:44px; }
.dialog-close { position:absolute; top:12px; right:12px; width:44px; height:44px; border:0; border-radius:10px; background:var(--hover); font-size:26px; }
.dialog-actions { display:flex; justify-content:end; gap:8px; flex-shrink:0; }
.flow-pager { flex:1; min-height:0; min-width:0; }
.flow-pager .page-text { display:flex; flex-direction:column; gap:16px; align-items:stretch; }
.flow-pager .page-text>* { flex-shrink:0; min-width:0; max-width:100%; }
.flow-pager .page-text>.button { align-self:start; }
.flow-pager .page-text>.flow-text { white-space:pre-wrap; overflow-wrap:anywhere; }
.flow-pager .page-controls { margin-top:4px; }
.flow-pager [data-flow-source] { display:none !important; }
.flow-pager .page-text>.page-block { font-size:inherit; }
.flow-pager .flow-text.heading { font-weight:600; }
.flow-pager.news-grid { display:flex; padding:16px 28px; }
.flow-pager.news-grid .page-text { gap:0; }
.voice-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; padding-top:8px; }
.voice-actions .inline-status { background:transparent; padding:0; flex:1; }
.voice-actions .button { flex-shrink:0; }
.voice-actions { justify-content:end; }
.compact-ui .section-heading,.compact-ui .account-view>.page-links { display:none; }
.compact-ui .spell-card>h2,.compact-ui .spell-card>.pill { display:none; }
.compact-ui .voice-actions { padding-top:4px; }
.compact-ui .button,.compact-ui .text-button,.compact-ui .suggestion,.compact-ui .content-tabs [role=tab] { font-size:16px; }
.compact-ui .account-popover .button,.compact-ui .theme-setting,.compact-ui .theme-setting select { font-size:16px; }
.consent-card.flow-pager .page-text>small { font-size:1rem; color:var(--muted); }
.consent-card>.page-controls>.button { margin-right:auto; font-size:16px; padding:8px 12px; }
.plan-card.flow-pager .page-text>.subscription-state { margin:0; }
.flow-plan-row .plan-pro { color:var(--primary); font-weight:600; }
.flow-plan-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 16px; padding:12px 0; border-bottom:1px solid var(--line); }
.flow-plan-row h3 { grid-column:1/-1; }
.flow-plan-row strong { color:var(--primary); }
@media (prefers-reduced-motion:no-preference) {
  button,a { transition:background-color .15s ease,color .15s ease,border-color .15s ease; }
  button:active:not(:disabled) { transform:translateY(1px); }
}
@media (max-width:1200px) { .workspace-name { display:none; } .layout { grid-template-columns:168px minmax(0,1fr); } .nav-item { padding:10px; gap:10px; } }
@media (max-width:960px) { #account-label { display:none; } .word-workspace { display:flex; } .library-panel { flex:1; } .study-pane { flex:1; } .news-card { grid-template-columns:1fr; } .news-card>.button { grid-column:1; grid-row:auto; justify-self:start; } .state-actions { flex-wrap:wrap; } }
@media (max-width:700px) {
  .topbar { padding:6px 12px; min-height:60px; gap:8px; }
  .brand { font-size:16px; gap:6px; }.brand img { width:32px; height:32px; }.brand small { font-size:8px; }
  .account { gap:6px; }.account>.button,.account-menu summary { padding:8px; font-size:14px; }
  .account>.pro-entry { display:none; }
  .layout { display:flex; flex-direction:column; }
  .sidebar { height:0; padding:0; flex-shrink:0; }
  .sidebar nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); position:fixed; z-index:5; inset:auto 0 0; min-height:64px; padding:4px 8px calc(4px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--line); gap:4px; }
  .nav-item { flex-direction:column; justify-content:center; min-height:52px; padding:4px 0; gap:2px; font-size:12px; }
  main { flex:1; padding:12px 12px calc(72px + env(safe-area-inset-bottom)); }
  .section-heading { margin-bottom:10px; }.section-heading h1 { font-size:24px; }
  .practice-card { padding:16px; }


  .flow-pager.news-grid { padding:8px 16px; }.news-card { padding:16px 0; gap:10px; }
  .reader-toolbar { gap:6px; flex-wrap:wrap; margin-bottom:8px; }.reader-toolbar .button { padding:8px; }.reader-toolbar label { margin-left:0; }
  .reader-content { padding:16px; }.input-row { flex-wrap:wrap; }.input-row input { flex-basis:100%; }
  .spell-card { padding:20px 16px; }.spell-card h2 { margin:8px 0 12px; }.spell-card>.pill { display:none; }
  .word-suggestions { gap:6px; }.suggestion { padding:8px 10px; }
  .subscription-state { padding:12px; gap:8px; flex-wrap:wrap; }.subscription-state .state-actions { justify-content:start; }
  .subscription-state p { font-size:1rem; }.content-tabs { margin-bottom:10px; }.content-tabs [role=tab] { padding:8px 4px; }
  .page-links { gap:4px; }.page-links .text-button { padding:4px; }
  .recording-card { padding:14px 16px; }.store-links { flex-wrap:wrap; }.account-popover { width:min(280px,calc(100vw - 24px)); }
  .flow-plan-row { grid-template-columns:1fr 1fr; }.flow-plan-row h3 { grid-column:1/-1; }
  dialog { padding:16px; }.flow-pager .page-text { gap:10px; }
}
@media (max-height:620px) { main { padding-top:10px; }.section-heading { margin-bottom:8px; }.section-heading h1 { font-size:24px; }.flow-pager .page-text { gap:10px; }.spell-card { padding:16px 22px; }.spell-card h2 { margin:8px 0; } }
@media (max-height:420px) {
  .purchase-card,.consent-card,.plan-card,.recording-deletion { padding:8px 12px; }
  #voice-content .consent-choice { padding:6px 0; }
  .compact-ui .inline-status { padding:8px 10px; }
  .account-popover { position:fixed; top:8px; right:8px; width:min(540px,calc(100vw - 16px)); grid-template-columns:1fr 1fr; }
  .account-popover .theme-setting { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; white-space:nowrap; gap:16px; }
  .theme-setting select { width:auto; flex:1; }
  .topbar { min-height:48px; padding-top:2px; padding-bottom:2px; }.brand img { width:30px; height:30px; }.brand small { display:none; }
  main { padding-top:8px; }.section-heading { display:none; }.sidebar { padding-top:8px; }.sidebar nav { gap:2px; }.nav-item { min-height:44px; }
  .spell-card,.reader-content { padding:10px 14px; }
  .spell-card>h2,.spell-card>.pill { display:none; }.subscription-state { padding:8px 12px; margin-bottom:8px; }.subscription-state p { display:none; }
}
@media (max-height:420px) and (max-width:700px) { main { padding-bottom:56px; }.sidebar nav { min-height:48px; padding:0 8px; }.nav-item { min-height:48px; }.nav-icon { width:18px; height:18px; } }

/* 登入使用獨立尺寸與置中閱讀，窄畫面仍沿用完整內容分頁。 */
#login-dialog { inset:0; margin:auto; width:min(480px,calc(100vw - 24px)); height:min(500px,calc(100dvh - 32px)); padding:40px 32px 24px; }
#login-dialog .dialog-close { top:8px; right:8px; background:transparent; }
#login-dialog .dialog-close:hover { background:var(--hover); }
#login-dialog .login-content { width:100%; text-align:center; }
#login-dialog .page-text { justify-content:center; align-items:center; gap:16px; }
#login-dialog .page-text>img { width:56px; height:56px; border-radius:14px; }
#login-dialog h2 { padding:0; font-size:1.5rem; line-height:1.4; }
#login-dialog p { line-height:1.6; text-wrap:balance; }
#login-dialog a { justify-content:center; text-underline-offset:4px; }
#google-login { width:100%; min-height:44px; display:flex; justify-content:center; align-items:center; }
#google-login iframe { border-radius:24px; }
#google-login:empty,#login-status:empty { display:none; }
#login-status { color:var(--muted); }
#login-dialog .page-controls { justify-content:center; }
.compact-ui #login-dialog .page-text>img { display:none; }
@media (max-width:480px) { #login-dialog { padding:48px 20px 20px; } }
@media (max-height:420px) { #login-dialog { padding:48px 20px 16px; } #login-dialog .page-text { gap:12px; } }