:root {
  --bg: #080c1a;
  --surface: #121833;
  --line: #232b4d;
  --divider: #1d2442;
  --track: #1a2140;
  --ink: #eef0fa;
  --muted: #a5b0d6;
  --faint: #7d87ad;
  --accent: #7c3aed;
  --accent-soft: #c4b5fd;
  --accent-bg: #261d4d;
  --switch-on: #8b5cf6;
  --switch-off: #2f3863;
  --stress: #f9a8d4;
  --good: #6cc08c;
  --bad: #ef7d73;
  --warn: #e0a84a;
  --font: Nunito, -apple-system, system-ui, sans-serif;
  --ipa: "Charis SIL", "Gentium Plus", "Lucida Grande", "Helvetica Neue", sans-serif;
  --tabs: 62px;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.45 var(--font);
  min-height: 100dvh; overscroll-behavior-y: none; overflow-x: hidden;
}
[hidden] { display: none !important; }
a { color: var(--accent-soft); }
p { margin: 0 0 10px; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.row { display: flex; gap: 10px; align-items: center; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }

/* ------------------------------------------------------------ header */
#top {
  position: sticky; top: 0; z-index: 6;
  display: flex; align-items: center; gap: 10px;
  max-width: 560px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: var(--bg);
}
.appicon { width: 36px; height: 36px; border-radius: 9px; display: block; }
.appname { font: 800 22px/1 var(--font); letter-spacing: -0.01em; }
.streak { display: flex; align-items: center; gap: 2px; min-height: 44px; }
.streak img { width: 34px; height: 34px; display: block; }
.streak span { font: 800 20px/1 var(--font); font-variant-numeric: tabular-nums; }
.flagbtn { display: flex; align-items: center; justify-content: center; width: 48px; height: 44px;
           padding: 0; border: 0; border-radius: 12px; background: none; }
.flagbtn[aria-expanded=true] { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.flag { border-radius: 5px; display: block; flex: none; }

#langmenu { position: fixed; inset: 0; z-index: 7; }
#langmenu .scrim { position: absolute; inset: 0; background: rgb(3 5 12 / 0.6); }
#langmenu .menu {
  position: absolute; right: max(12px, calc((100vw - 560px) / 2 + 12px));
  top: calc(env(safe-area-inset-top) + 62px); width: 270px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 6px;
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.5);
}
.menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px;
               padding: 8px 12px; border: 0; border-radius: 13px; background: none; text-align: left; }
.menu button[aria-checked=true] { background: var(--accent-bg); }
.menu .name { display: block; font-weight: 800; }
.menu .sub { display: block; font-size: 13px; color: var(--muted); }
.menu .tick { color: var(--accent-soft); }

/* -------------------------------------------------------------- main */
main {
  max-width: 560px; margin: 0 auto;
  padding: 4px 16px calc(env(safe-area-inset-bottom) + var(--tabs) + 24px);
  min-height: calc(100dvh - env(safe-area-inset-top) - 64px);
  display: flex; flex-direction: column;
}
main.bare { padding-top: calc(env(safe-area-inset-top) + 8px); min-height: 100dvh; }
h1 { margin: 6px 0 14px; font: 800 30px/1.15 var(--font); letter-spacing: -0.01em; }
.eyebrow, h2.eyebrow {
  margin: 0; font: 800 12px/1 var(--font); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
}
.sub-title { margin: -8px 0 14px; color: var(--muted); font-size: 15px; }

/* ------------------------------------------------------------ tab bar */
#tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; justify-content: space-around;
  padding: 8px 4px calc(env(safe-area-inset-bottom) + 6px);
  background: var(--bg); border-top: 1px solid var(--track);
}
#tabs a {
  flex: 1; max-width: 112px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--muted); font: 700 12px/1.2 var(--font); text-decoration: none;
  padding: 2px 0; min-height: 44px;
}
#tabs img { width: 32px; height: 32px; display: block; }
#tabs a[aria-current=page] { color: var(--ink); font-weight: 800; }
#tabs a:not([aria-current=page]) img { opacity: 0.75; }

/* ----------------------------------------------------------- controls */
.btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 16px; min-height: 52px; padding: 12px 16px;
  font: 700 17px/1.1 var(--font); text-decoration: none;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 800;
               min-height: 56px; font-size: 18px; }
.btn.block { width: 100%; }
.btn.quiet { background: none; border-color: transparent; color: var(--accent-soft); min-height: 44px; }
.btn.danger { color: var(--bad); }
.btn:disabled { opacity: 0.45; }
.btn:active:not(:disabled) { transform: scale(0.98); }

label.field, .field { display: block; }
.field > .label, label.field > span:first-child {
  display: block; font: 700 13px/1 var(--font); color: var(--muted); margin-bottom: 6px;
}
.hint { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; }
input[type=text], input[type=password], input[type=search], input[type=number], textarea, select {
  width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 13px 16px; color: var(--ink); font: 17px/1.35 var(--font); outline: none;
  appearance: none; -webkit-appearance: none;
}
textarea { resize: none; line-height: 1.4; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus { border-color: var(--accent-soft); }
input.headword { font: 800 26px/1.2 var(--font); padding: 14px 16px; border: 1.5px solid var(--line); }
input.headword:focus { border-color: var(--accent-soft); }
.select { position: relative; display: block; }
.select select { padding-right: 44px; }
.select svg { position: absolute; right: 16px; top: 50%; margin-top: -9px; pointer-events: none; }
.search { position: relative; }
.search input { padding-left: 44px; }
.search svg { position: absolute; left: 15px; top: 50%; margin-top: -10px; pointer-events: none; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 3px;
       background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.seg button { border: 0; border-radius: 11px; min-height: 40px; background: none; color: var(--muted);
              font: 700 15px/1 var(--font); }
.seg button[aria-pressed=true] { background: var(--switch-off); color: var(--ink); font-weight: 800; }

.switch { position: relative; flex: none; width: 50px; height: 30px; padding: 0; border: 0;
          border-radius: 15px; background: var(--switch-off); transition: background 0.15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
                 border-radius: 50%; background: #c9cee3; transition: 0.15s; }
.switch[aria-checked=true] { background: var(--switch-on); }
.switch[aria-checked=true]::after { left: 23px; background: #fff; }

.group { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.group > .line { display: flex; align-items: center; gap: 12px; padding: 0 12px 0 16px; min-height: 50px;
                 border-bottom: 1px solid var(--divider); }
.group > .line:last-child { border-bottom: 0; }
.group > .line .value { font-size: 15px; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: none;
        color: var(--muted); border-radius: 999px; padding: 0 14px; min-height: 38px;
        font: 700 14px/1 var(--font); text-decoration: none; }
.chip[aria-pressed=true] { border-color: var(--accent-soft); background: var(--accent-bg); color: var(--ink);
                           font-weight: 800; padding-left: 10px; }
.chip.new { border-style: dashed; border-color: #3a4475; color: var(--accent-soft); padding-left: 10px; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.chip.static { background: var(--surface); border: 1px solid var(--line); color: var(--ink); min-height: 32px;
               padding: 0 12px; }

.form { display: flex; flex-direction: column; gap: 14px; }
.form section { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* ------------------------------------------------------------ pieces */
.tag { display: inline-block; font: 800 11px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase;
       padding: 4px 7px; border-radius: 6px; border: 1px solid currentColor; color: var(--muted);
       white-space: nowrap; }
.tag.ok { color: var(--good); }
.tag.warn { color: var(--warn); }
.speak { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
         width: 40px; height: 40px; border-radius: 50%; padding: 0; display: inline-grid; place-items: center; flex: none; }
.speak.big { width: 52px; height: 52px; border: 1.5px solid var(--accent-soft); background: var(--accent-bg);
             color: var(--accent-soft); }
.speak:active { transform: scale(0.95); }
.ipa { font-family: var(--ipa); font-size: 19px; color: var(--muted); }
.syll { font: 700 22px/1.2 var(--font); }
.syll b { color: var(--stress); font-weight: 800; }
.syll i { font-style: normal; color: var(--muted); margin: 0 1px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px; }

/* ------------------------------------------------------------ review */
.counts { display: flex; gap: 14px; font-size: 13px; color: var(--muted); margin-bottom: 10px;
          font-variant-numeric: tabular-nums; }
.counts b { color: var(--ink); }
.counts a { color: var(--muted); text-decoration: none; }
.bar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.bar > div { height: 6px; border-radius: 3px; background: var(--accent-soft); transition: width 0.3s; }
.stage { flex: 1; display: flex; flex-direction: column; }
.prompt { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
          gap: 12px; padding: 18px 4px; min-height: 210px; flex: 1; }
.stage.revealed .prompt { flex: 0 0 auto; }
.prompt .word { font: 800 46px/1.1 var(--font); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.prompt .word.long { font-size: 32px; }
.prompt .ask { font-size: 15px; color: var(--muted); }
.prompt .cue { font-size: 22px; line-height: 1.35; font-weight: 700; }
.prompt .card { width: 100%; text-align: left; }
.answer .meaning { font-size: 21px; line-height: 1.35; font-weight: 700; white-space: pre-line; }
.answer .pron { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.answer .meta { font-size: 14px; color: var(--muted); margin-top: 6px; }
.answer .eyebrow { margin: 18px 0 6px; }
.answer .ex { font-size: 18px; line-height: 1.4; margin-top: 4px; }
.actions { position: sticky; bottom: calc(env(safe-area-inset-bottom) + var(--tabs) + 10px);
           display: flex; flex-direction: column; gap: 8px; padding-top: 14px; margin-top: auto;
           background: linear-gradient(transparent, var(--bg) 18%); }
.grades { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.grades .btn { border-radius: 14px; min-height: 52px; padding: 8px 4px; font-size: 17px; }
.grades .again { color: var(--bad); }
.grades .easy { color: var(--good); }
.grades .good { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 800; }
.verdict { display: flex; align-items: center; gap: 8px; font: 800 20px/1 var(--font); }
.verdict.ok { color: var(--good); }
.verdict.no { color: var(--bad); }
.typed-wrong { text-decoration: line-through; color: var(--bad); }
.gap { display: inline-block; min-width: 3.2em; border-bottom: 2px solid var(--accent-soft);
       text-align: center; font-weight: 800; color: var(--accent-soft); }
.gap.filled { border-color: var(--good); color: var(--good); }
.sylls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.syl { border: 1.5px solid var(--line); background: var(--surface); border-radius: 16px; color: var(--ink);
       padding: 12px 18px; min-width: 64px; min-height: 64px; font: 800 28px/1 var(--font); }
.syl.on { border-color: var(--stress); color: var(--stress); }
.syl.right { border-color: var(--good); background: rgb(108 192 140 / 0.16); color: var(--good); }
.syl.wrong { border-color: var(--bad); color: var(--bad); }
.sylls.small .syl { font-size: 19px; min-height: 46px; min-width: 46px; padding: 9px 13px; }

.done { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
        text-align: center; gap: 10px; }
.done .hero { width: 140px; height: 140px; }
.done .hero.dim { opacity: 0.55; filter: saturate(0.6); }
.badge { width: 120px; height: 120px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line);
         display: grid; place-items: center; margin-bottom: 8px; }
.notice { display: flex; align-items: center; gap: 10px; margin-top: 14px; max-width: 330px; text-align: left;
          background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px;
          font-size: 14px; color: var(--muted); }
.notice svg { flex: none; }
.done h1 { margin: 0; font-size: 34px; }
.tiles { display: flex; gap: 10px; margin-top: 14px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 18px;
        min-width: 104px; text-align: left; }
.tile b { display: block; font: 800 26px/1.1 var(--font); font-variant-numeric: tabular-nums; }
.tile span { font-size: 13px; color: var(--muted); }
.ring { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; }
.ring > div { width: 124px; height: 124px; border-radius: 50%; background: var(--bg); display: grid;
              place-items: center; font: 800 28px/1 var(--font); }

/* ----------------------------------------------------------- library */
.navrow { display: flex; align-items: center; justify-content: space-between; margin: 0 -8px 6px; }
.navrow a, .navrow button { display: flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 8px;
                            color: var(--accent-soft); font: 700 17px/1 var(--font); text-decoration: none;
                            background: none; border: 0; }
.navrow .strong { font-weight: 800; }
.allrow { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-top: 14px;
          background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
          color: var(--ink); text-decoration: none; }
.allrow img { width: 40px; height: 40px; }
.allrow b { display: block; font-size: 18px; }
.decks-head { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 10px; }
.decks-head button { background: none; border: 0; color: var(--accent-soft); font: 800 15px/1 var(--font);
                     min-height: 40px; display: flex; align-items: center; gap: 4px; }
.deckgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.deck { display: flex; flex-direction: column; gap: 4px; padding: 14px; min-height: 108px;
        background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
        color: var(--ink); text-decoration: none; position: relative; overflow: hidden; }
.deck .stripe { width: 28px; height: 5px; border-radius: 3px; margin-bottom: 6px; }
.deck b { font-size: 17px; line-height: 1.2; }
.deck .n { font-size: 13px; color: var(--muted); }
.pill { align-self: flex-start; margin-top: auto; font: 800 12px/1 var(--font); padding: 5px 8px;
        border-radius: 999px; background: var(--accent-bg); color: var(--accent-soft); }
.pill.zero { background: none; color: var(--faint); padding-left: 0; }
.words { margin: 10px -16px 0; }
.words a { display: flex; align-items: baseline; gap: 10px; padding: 13px 16px;
           border-bottom: 1px solid var(--divider); color: inherit; text-decoration: none; }
.words .hw { font: 800 19px/1.2 var(--font); white-space: nowrap; }
.words .mn { flex: 1; min-width: 0; color: var(--muted); font-size: 15px; white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; }
.words .due { font-size: 13px; color: var(--accent-soft); white-space: nowrap; }
.empty { color: var(--muted); text-align: center; padding: 30px 16px; }

/* -------------------------------------------------------------- stats */
.statcard { display: flex; align-items: center; gap: 14px; }
.statcard img { width: 64px; height: 64px; }
.statcard b { font: 800 34px/1 var(--font); }
.weekdots { display: flex; gap: 6px; margin-top: 14px; justify-content: space-between; }
.weekdots div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
                font-size: 12px; color: var(--muted); }
.weekdots i { width: 26px; height: 26px; border-radius: 50%; background: var(--track); display: block; }
.weekdots i.on { background: var(--accent-soft); }
.weekdots i.today { box-shadow: 0 0 0 2px var(--accent-soft); }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 110px; margin-top: 12px; }
.bars div { flex: 1; background: var(--accent-soft); border-radius: 4px 4px 2px 2px; min-height: 3px; }
.bars div.zero { background: var(--track); }
.legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; }
.split { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--track); margin: 12px 0; }
.keyrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.keyrow i { width: 10px; height: 10px; border-radius: 3px; }

/* ----------------------------------------------------------- settings */
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line);
                  background: var(--bg); font: 800 20px/1 var(--font); }
.stepper b { min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; }
input[type=range] { width: 100%; accent-color: var(--switch-on); }
.line select { width: auto; border: 0; background: none; padding: 8px 4px; color: var(--muted); text-align: right; }
.line input[type=text] { width: 60%; border: 0; background: none; padding: 8px 0; text-align: right; color: var(--muted); }

/* -------------------------------------------------------------- login */
.login { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.login .big { width: 96px; height: 96px; border-radius: 22px; align-self: center; }
.login h1 { text-align: center; margin: 0; font-size: 36px; }
.login .tag-line { text-align: center; color: var(--muted); margin: -6px 0 18px; }

#toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + var(--tabs) + 18px);
         transform: translate(-50%, 20px); background: var(--ink); color: var(--bg);
         padding: 10px 16px; border-radius: 999px; font-size: 15px; font-weight: 800; opacity: 0;
         pointer-events: none; transition: 0.2s; z-index: 10; max-width: 88vw; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------ sheets */
.sheetwrap { position: fixed; inset: 0; z-index: 8; }
.sheetwrap .scrim { position: absolute; inset: 0; background: rgb(3 5 12 / 0.66); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto;
         background: var(--surface); border-top: 1px solid var(--line); border-radius: 24px 24px 0 0;
         padding: 10px 16px calc(env(safe-area-inset-bottom) + 24px); box-shadow: 0 -20px 50px rgb(0 0 0 / 0.5);
         animation: rise 0.18s ease-out; }
@keyframes rise { from { transform: translateY(30px); opacity: 0; } }
.grip { width: 40px; height: 5px; border-radius: 3px; background: var(--switch-off); margin: 0 auto 14px; }
.sheet-title { font: 800 21px/1.2 var(--font); }
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 0 4px 14px; }
.sheet-head .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.sheet .sheet-input { background: var(--bg); border-width: 1.5px; font: 800 20px/1.2 var(--font); }
.sheet-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: 22px; }
.swatches { display: flex; justify-content: space-between; }
.swatches button { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; }
.swatches button[aria-checked=true] { box-shadow: 0 0 0 3px var(--surface) inset, 0 0 0 3px var(--ink); }
.rowbtn { width: 100%; border: 0; background: none; color: var(--ink); font: 700 17px/1 var(--font);
          min-height: 56px; text-align: left; }
.rowbtn.danger { color: var(--bad); }
.linkbtn { border: 0; background: none; color: var(--accent-soft); font: 800 15px/1 var(--font); min-height: 32px; padding: 0; }

/* --------------------------------------------------- search results */
.search .clear { position: absolute; right: 8px; top: 50%; margin-top: -18px; width: 36px; height: 36px;
                 border: 0; border-radius: 50%; background: var(--switch-off); color: var(--ink);
                 display: grid; place-items: center; padding: 0; }
.search input { padding-right: 52px; }
.search input::-webkit-search-cancel-button { display: none; }
.hits .hit { display: flex; align-items: center; gap: 10px; padding: 9px 16px; min-height: 58px;
             border-bottom: 1px solid var(--divider); color: var(--ink); text-decoration: none; }
.hits .hit:last-child { border-bottom: 0; }
.hit .line1 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hit .hw { font-size: 18px; }
.hit .mn { color: var(--muted); font-size: 15px; }
.hit mark { background: none; color: var(--accent-soft); }
.decksline { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); margin-top: 2px; }
.decksline span { display: inline-flex; align-items: center; gap: 5px; }
.decksline i { width: 7px; height: 7px; border-radius: 50%; }
.hit .due { font: 800 13px/1 var(--font); color: var(--accent-soft); }
.hit .due.later { color: var(--faint); }