* { box-sizing: border-box; }
:root {
  color-scheme: light dark;
  --bg: #f4f3ed;
  --paper: #fffef8;
  --text: #182d25;
  --muted: #455c52;
  --line: #cbd6cd;
  --accent: #195a47;
  --primary-ink: #fff;
  --selected: #d5eee2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121b17; --paper: #1c2a23; --text: #eaf3eb;
    --muted: #bdd0c4; --line: #41574b; --accent: #a3dfc4;
    --primary-ink: #11291e; --selected: #345b49;
  }
}
body { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.55 system-ui, sans-serif; }
button, textarea { font: inherit; }
button {
  min-height: 44px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--text); padding: .55rem .9rem;
}
button:disabled { opacity: .55; }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.masthead {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: calc(.75rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .75rem max(1rem, env(safe-area-inset-left));
  background: #142b25; color: #fff;
}
.brand { display: flex; align-items: center; gap: .65rem; }
.mark { background: #bfe6d4; color: #142b25; border-radius: 9px; padding: .15rem .55rem; font-weight: 800; }
.edition { color: #cae3d7; font-size: .82rem; }
main { max-width: 38rem; margin: auto; padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
h1, h2, p { margin: 0; }
.intro { margin-bottom: 1.15rem; }
.intro p, .panel p, label, #ipa, #pos, #note-status { color: var(--muted); }
.card, .panel { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 1rem; padding: 1rem; }
.card-top, .pronunciation, .actions { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.card-top { justify-content: space-between; }
.accent { display: flex; gap: .3rem; }
[aria-pressed=true] { background: var(--selected); font-weight: 700; }
#word { font: 3rem/1.15 Georgia, serif; margin: .45rem 0; }
#meaning { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .75rem; }
#example { margin-top: .4rem; font-style: italic; }
.actions { margin-top: .85rem; }
.primary { background: var(--accent); color: var(--primary-ink); border-color: transparent; flex: 1; }
.panel h2 { font-size: 1.12rem; margin-bottom: .4rem; }
textarea, progress { width: 100%; }
textarea { margin-top: .35rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); padding: .55rem; }
footer a { color: var(--accent); }

#topic, #word-search { display: block; width: 100%; min-height: 44px; margin: .25rem 0 .65rem; padding: .4rem .6rem; font: inherit; color: var(--text); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }