/* Yomikoro for iPhone — station-sign design (as in the Chrome extension): rail-line colours carry
   meaning — green = Japanese / main action, sky = English, red = Chinese, purple = Cantonese,
   orange = casual, blue = polite. */
:root {
  /* Light mode: fresh and playful (design A) */
  --bg: #f4f8f1; --bg-blur: rgba(244, 248, 241, .86);
  --card: #ffffff; --card-2: #f1f6ee; --card-3: #e3eddd;
  --ink: #1e2a1f; --ink-2: #445445; --ink-3: #66736a;
  --rule: #dde8d7;
  --accent: #2e8b3a; --accent-deep: #1f6b2a; --accent-ink: #ffffff; --accent-soft: #e4f2dc; --stripe: #9bd34d;
  --sun: #ff8a1f; --sun-deep: #b85a00; --sun-soft: #fff1e2; --sky: #2f80ed; --gold: #ffc21a; --gold-soft: #fff6db; --gold-ink: #5c4300;
  --story-bg: #2f80ed; --story-ink: #ffffff;
  --en: #0084c2; --zh: #d9363b; --yue: #8159c4;
  --reg-natural: #2e8b3a; --reg-casual: #d5621a; --reg-polite: #0079ad; --reg-formal: #6a4fb0; --reg-example: #5c666e; --reg-corrected: #b8860b;
  --warn-bg: #fff4e2; --warn-ink: #7f4600; --err-bg: #fdeceb; --err-ink: #9f2328;
  --hl: rgba(155, 211, 77, .38);
  --shadow: 0 2px 0 var(--rule);
  --shadow-lg: 0 -2px 10px rgba(16, 24, 32, .08), 0 -12px 40px rgba(16, 24, 32, .16);
  --font-ui: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Nunito", -apple-system, system-ui, "Segoe UI", sans-serif;
  --font-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --font-round-ja: "Hiragino Maru Gothic ProN", "M PLUS Rounded 1c", var(--font-ja);
  --font-zh: "PingFang TC", "PingFang HK", "Noto Sans TC", "Noto Sans CJK TC", sans-serif;
  --reader-size: 21px;
  --tabbar: 62px;
  --r: 20px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Dark mode: night pop (design C) */
    --bg: #131a2a; --bg-blur: rgba(19, 26, 42, .86); --card: #1d2740; --card-2: #222d49; --card-3: #2c3858;
    --ink: #f3f5fa; --ink-2: #c9d0de; --ink-3: #a9b3c7; --rule: #2c3858;
    --accent: #3ddc97; --accent-deep: #22a873; --accent-ink: #04261a; --accent-soft: #1d3d3c; --stripe: #4cc3ff;
    --sun: #ff8a4c; --sun-deep: #c45a22; --sun-soft: #3a2715; --sky: #4cc3ff; --gold: #ffd84d; --gold-soft: #3a3320; --gold-ink: #ffe9a3;
    --story-bg: #ff6b5b; --story-ink: #2a0e0a;
    --en: #4cc3ff; --zh: #ff7a6e; --yue: #b79cff;
    --reg-natural: #3ddc97; --reg-casual: #ff9a5a; --reg-polite: #4cc3ff; --reg-formal: #b79cff; --reg-example: #a9b3c7; --reg-corrected: #ffd84d;
    --warn-bg: #3a2a10; --warn-ink: #f6c779; --err-bg: #3c1a1b; --err-ink: #ff9a9d; --hl: rgba(61, 220, 151, .28);
    --shadow: 0 2px 0 rgba(0, 0, 0, .25); --shadow-lg: 0 -12px 40px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131a2a; --bg-blur: rgba(19, 26, 42, .86); --card: #1d2740; --card-2: #222d49; --card-3: #2c3858;
  --ink: #f3f5fa; --ink-2: #c9d0de; --ink-3: #a9b3c7; --rule: #2c3858;
  --accent: #3ddc97; --accent-deep: #22a873; --accent-ink: #04261a; --accent-soft: #1d3d3c; --stripe: #4cc3ff;
  --sun: #ff8a4c; --sun-deep: #c45a22; --sun-soft: #3a2715; --sky: #4cc3ff; --gold: #ffd84d; --gold-soft: #3a3320; --gold-ink: #ffe9a3;
  --story-bg: #ff6b5b; --story-ink: #2a0e0a;
  --en: #4cc3ff; --zh: #ff7a6e; --yue: #b79cff;
  --reg-natural: #3ddc97; --reg-casual: #ff9a5a; --reg-polite: #4cc3ff; --reg-formal: #b79cff; --reg-example: #a9b3c7; --reg-corrected: #ffd84d;
  --warn-bg: #3a2a10; --warn-ink: #f6c779; --err-bg: #3c1a1b; --err-ink: #ff9a9d; --hl: rgba(61, 220, 151, .28);
  --shadow: 0 2px 0 rgba(0, 0, 0, .25); --shadow-lg: 0 -12px 40px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--en); outline-offset: 2px; }
[lang="ja"] { font-family: var(--font-ja); }
[lang^="zh"] { font-family: var(--font-zh); }
.muted { color: var(--ink-3); }
.grow { flex: 1; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 12px 0; }

#app { max-width: 760px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right, 0px)) calc(var(--tabbar) + 32px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }

/* ---------- top bar (covers the status bar area when scrolled) ---------- */
.top { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 10px; margin: 0 -16px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px;
  background: var(--bg-blur); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); }
.top .brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.top h1 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
.mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font: 700 18px/1 var(--font-ja); position: relative; flex: none; }
.mark::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 4px; height: 2.5px; border-radius: 2px; background: var(--stripe); }
.mark.big { width: 52px; height: 52px; border-radius: 13px; font-size: 31px; }
.mark.big::after { left: 12px; right: 12px; bottom: 7px; height: 4px; }
.top-acts { display: flex; align-items: center; gap: 4px; }
.top .back { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 17px; padding: 6px 4px 6px 0; margin-left: -4px; flex: none; }
.top .back svg { width: 22px; height: 22px; }
.rd-top { gap: 6px; }
.rd-title { flex: 1; min-width: 0; font-weight: 700; font-size: 16px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- buttons & controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 15px; border-radius: 12px;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink); font-weight: 600; font-size: 15px; white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn svg { width: 19px; height: 19px; flex: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.small { min-height: 34px; padding: 0 11px; font-size: 14px; border-radius: 10px; }
.btn.small svg { width: 17px; height: 17px; }
.btn.block { width: 100%; }
.btn.big { min-height: 52px; font-size: 17px; border-radius: 14px; }
.btn.round { width: 42px; padding: 0; border-radius: 50%; flex: none; }
.btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.btn.danger, .mi.danger { color: var(--err-ink); }
.btn[disabled] { opacity: .45; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); flex: none; }
.icon-btn:active { background: var(--card-3); }
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn.saved, .icon-btn.starred { color: #e8a300; }
.icon-btn.sm { width: 34px; height: 34px; }
.icon-btn.sm svg { width: 18px; height: 18px; }
.seg { display: inline-flex; background: var(--card-3); border-radius: 10px; padding: 2px; gap: 2px; max-width: 100%; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 6px 11px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); min-height: 32px; }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.seg.sm button { padding: 4px 9px; font-size: 13px; min-height: 28px; }
.switch { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; border-radius: 16px; background: var(--card-3); position: relative; flex: none; margin: 0; transition: background .15s; border: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); transition: transform .18s; }
.switch:checked { background: #34c759; }
.switch:checked::after { transform: translateX(20px); }
input[type=range] { accent-color: var(--accent); width: 140px; }
select { min-height: 36px; border-radius: 10px; border: 1px solid var(--rule); background: var(--card); padding: 0 10px; font-size: 15px; max-width: 200px; }

/* ---------- cards, sections ---------- */
.card { position: relative; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.stripe { height: 5px; background: linear-gradient(90deg, var(--accent) 0 34%, var(--stripe) 34% 100%); }
h2.sec { font-size: 13px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin: 26px 4px 8px; }
.hint { font-size: 13.5px; color: var(--ink-3); margin: 10px 4px 0; }
.s { font-size: 13px; color: var(--ink-3); }
.notice { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--card-2); color: var(--ink-2); font-size: 14px; margin-top: 12px; }
.notice.warn { background: var(--warn-bg); color: var(--warn-ink); }
.notice.err { background: var(--err-bg); color: var(--err-ink); }
.note-box { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--ink-2); font-size: 13.5px; }
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-size: 12.5px; font-weight: 700; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.chipbtn { border: 1px solid var(--rule); background: var(--card); border-radius: 18px; padding: 7px 13px; font-size: 14px; text-align: left; color: var(--ink); }
.chipbtn:active { background: var(--card-3); }
.empty-s { color: var(--ink-3); text-align: center; padding: 24px 8px; margin: 0; }

/* ---------- READ home ---------- */
.input-card textarea { display: block; width: 100%; min-height: 72px; border: 0; background: transparent; padding: 14px 16px 6px; font-size: 18px; line-height: 1.6; resize: none; font-family: var(--font-ja); }
.input-card textarea:focus { outline: none; }
.in-acts { display: flex; gap: 8px; align-items: center; padding: 8px 10px 10px; flex-wrap: wrap; }
.in-acts .btn:not(.primary) { background: var(--card-2); border-color: transparent; }
.lib { display: grid; gap: 1px; background: var(--rule); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.li { display: flex; align-items: center; background: var(--card); padding-right: 4px; }
.li-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 11px 6px 11px 14px; text-align: left; }
.li-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); flex: none; }
.li-ic svg { width: 21px; height: 21px; }
.li-thumb { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; }
.li-tx { display: grid; min-width: 0; }
.li-t { font-weight: 600; font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-empty { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; padding: 14px; text-align: left; }
.lib-empty > span:last-child { display: grid; }

/* ---------- READER ---------- */
.reader { margin-top: 6px; }
.ln { position: relative; padding: 10px 2px 12px; border-bottom: 1px solid var(--rule); scroll-margin: 120px; }
.ln:last-child { border-bottom: 0; }
.gap { height: 14px; }
.jt { font: 500 var(--reader-size)/1.85 var(--font-ja); letter-spacing: .02em; overflow-wrap: anywhere; color: var(--ink); }
.w { border-radius: 4px; padding: 1px 0; }
.w:active { background: var(--hl); }
.w.sel { background: var(--hl); box-shadow: 0 2px 0 var(--accent); }
.ts { float: left; margin: 6px 8px 0 0; border: 0; background: var(--card-3); color: var(--ink-3); font: 600 11.5px/1 ui-monospace, Menlo, monospace; border-radius: 6px; padding: 5px 6px; }
.ln.now { background: linear-gradient(90deg, var(--accent-soft), transparent 80%); border-radius: 10px; }
.ln.now .ts { background: var(--accent); color: var(--accent-ink); }
.tr { margin-top: 6px; display: grid; gap: 3px; font-size: 14.5px; }
.tr .kana { color: var(--ink-2); font-size: 14px; }
.tr .romaji { color: var(--ink-3); font-size: 13px; margin-bottom: 2px; }
.tl { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.lb { display: inline-grid; place-items: center; height: 19px; border-radius: 5px; color: #fff; font: 700 11px/1 var(--font-ui); }
.lb.en { background: var(--en); } .lb.zh { background: var(--zh); } .lb.yue { background: var(--yue); }
:root[data-theme="dark"] .lb, :root:not([data-theme="light"]) .lb { color: #fff; }
.tl .tx { color: var(--ink); }
.skel { display: block; height: 11px; border-radius: 6px; background: linear-gradient(90deg, var(--card-3), var(--card-2), var(--card-3)); background-size: 200% 100%; animation: sk 1.2s linear infinite; width: 80%; margin: 5px 0; }
.skel.short { width: 52%; }
.skels { padding: 6px 0; }
@keyframes sk { to { background-position: -200% 0; } }
.rd-end { text-align: center; color: var(--ink-3); font-size: 12px; margin: 22px 0; letter-spacing: .2em; }
.vwrap { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 58px); z-index: 12; margin: 0 -16px; background: #000; }
.vwrap video { display: block; width: 100%; max-height: 38vh; background: #000; }
.vadd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; background: var(--card); border-radius: 12px; margin: 4px 0 6px; box-shadow: var(--shadow); }
.rd-photo { display: flex; align-items: center; gap: 10px; border: 0; background: var(--card); border-radius: 12px; padding: 8px; margin: 4px 0 6px; box-shadow: var(--shadow); color: var(--ink-2); font-size: 14px; width: 100%; }
.rd-photo img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; }
.photo-full { width: 100%; height: auto; border-radius: 10px; }
#selpill { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px) + 12px); z-index: 30; display: flex; justify-content: center; pointer-events: none; }
#selpill .pill { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); border: 1px solid var(--rule); background: var(--card); box-shadow: var(--shadow-lg); border-radius: 22px; padding: 6px 14px 6px 6px; font-size: 15px; }
#selpill .mk { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font: 700 14px/1 var(--font-ja); }
#selpill .pt { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#selpill b { color: var(--accent); }

/* ---------- sheets ---------- */
.sheet { position: fixed; inset: 0; z-index: 40; }
.sh-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .32); opacity: 0; transition: opacity .2s; }
.sh-panel { position: absolute; left: 0; right: 0; bottom: 0; max-width: 680px; margin: 0 auto; max-height: 84vh; display: flex; flex-direction: column;
  background: var(--card); border-radius: 18px 18px 0 0; box-shadow: var(--shadow-lg); transform: translateY(100%); transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.sh-panel.full { height: calc(100vh - env(safe-area-inset-top, 0px) - 12px); max-height: none; }
.sheet.in .sh-scrim { opacity: 1; }
.sheet.in .sh-panel { transform: none; }
.sh-head { position: relative; display: flex; align-items: center; gap: 6px; padding: 14px 8px 4px 18px; flex: none; }
.sh-head .grab { position: absolute; top: 6px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--card-3); }
.sh-title { flex: 1; min-width: 0; font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-acts { display: flex; align-items: center; }
.sh-body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 18px calc(env(safe-area-inset-bottom, 0px) + 22px); }
.qsheet .sh-head { position: absolute; top: 0; right: 0; left: 0; z-index: 2; padding-top: 12px; pointer-events: none; }
.qsheet .sh-head > * { pointer-events: auto; }
.qsheet .sh-body { padding-top: 0; }
.qsheet .stripe { margin: 0 -18px 0; border-radius: 18px 18px 0 0; }
.menu { display: grid; gap: 2px; padding-bottom: 6px; }
.mi { display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 13px 4px; text-align: left; font-size: 16px; border-bottom: 1px solid var(--rule); }
.mi:last-child { border-bottom: 0; }
.mi svg { width: 21px; height: 21px; color: var(--ink-2); }
.mi-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px 14px; border-bottom: 1px solid var(--rule); }
.mi-row input { flex: 1; }
.small-a { font-size: 13px; color: var(--ink-3); } .big-a { font-size: 22px; color: var(--ink-2); }

/* word / phrase card */
.qc { padding-top: 14px; }
.hw .kana { font-size: 14px; color: var(--ink-2); min-height: 20px; }
.hw .word { font: 700 32px/1.2 var(--font-ja); overflow-wrap: anywhere; padding-right: 84px; }
.hw .word.phrase { font-size: 21px; font-weight: 600; line-height: 1.5; }
.hw .romaji { font-size: 14px; color: var(--ink-3); margin-top: 2px; }
.meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 14px; color: var(--ink-2); }
.pos { border: 1px solid var(--rule); border-radius: 6px; padding: 1px 7px; font-size: 13px; color: var(--ink-2); }
.meaning { margin: 0 0 10px; font-size: 16px; }
.gl { display: grid; gap: 7px; font-size: 16px; }
.gl.big { font-size: 19px; gap: 10px; }
.sent { margin-top: 14px; padding: 10px 12px; background: var(--card-2); border-radius: 12px; display: grid; gap: 6px; font-size: 14.5px; }
.sent .sj { font-size: 16px; line-height: 1.7; }
.sent .sj b { background: var(--hl); border-radius: 3px; font-weight: 700; }
.tip { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-2); }
.tip b { color: var(--accent); }
.orig { font-size: 14px; color: var(--ink-3); margin-bottom: 6px; }
.alt { margin-top: 10px; padding-left: 10px; border-left: 3px solid var(--reg-natural); }
.alt.casual { border-color: var(--reg-casual); } .alt.polite { border-color: var(--reg-polite); }
.alt .lab { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.alt .aj { font: 600 18px/1.4 var(--font-ja); }
.alt .kana { font-size: 13px; color: var(--ink-2); } .alt .romaji { font-size: 12.5px; color: var(--ink-3); }
.vocab { margin-top: 12px; display: grid; }
.vrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--rule); }
.vrow .vw { font: 700 17px/1.3 var(--font-ja); }
.vrow .vr { color: var(--ink-3); font-size: 13px; }
.vrow .vm { grid-column: 1 / -1; color: var(--ink-2); font-size: 14px; }
.qfoot { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.qstatus { font-size: 13px; color: var(--ink-3); }
.fine { font-size: 12px; color: var(--ink-3); margin: 12px 0 0; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--card-3); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.status { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 14px; padding: 10px 0; flex-wrap: wrap; }
.err { color: var(--err-ink); }
.ocr-img { width: 100%; max-height: 34vh; object-fit: contain; border-radius: 10px; background: var(--card-2); }
.ocr-live { white-space: pre-wrap; font-size: 16px; line-height: 1.7; color: var(--ink-2); }

/* ---------- LEARN ---------- */
.hello { display: flex; align-items: center; gap: 14px; margin: 6px 4px 14px; }
.hello > div { display: grid; gap: 2px; }
.hello b { font-size: 18px; }
.compose { padding: 12px; display: grid; gap: 8px; }
.compose .modes { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
.compose .modes button { padding: 7px 4px; font-size: 13.5px; }
.compose textarea { width: 100%; min-height: 104px; border: 0; background: var(--card-2); border-radius: 12px; padding: 12px; font-size: 17px; line-height: 1.55; resize: none; }
.compose textarea:focus { outline: 2px solid var(--accent-soft); }
.compose .in-acts { padding: 0; }
.pic { display: flex; align-items: center; gap: 10px; }
.pic img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.src { margin-top: 4px; }
.src-h { display: flex; align-items: center; gap: 2px; padding: 8px 6px 0 14px; }
.src-t { padding: 4px 16px 14px; font: 600 21px/1.55 var(--font-ja); overflow-wrap: anywhere; white-space: pre-wrap; }
.src-f { padding: 0 16px 14px; margin-top: -6px; font-size: 14px; color: var(--ink-2); }
.src-f b { background: var(--hl); border-radius: 3px; padding: 0 2px; }
.src-img { display: block; max-width: calc(100% - 32px); max-height: 200px; margin: 6px 16px 12px; border-radius: 10px; }
.thread { display: grid; gap: 14px; margin-top: 14px; }
.umsg { justify-self: end; max-width: 86%; background: var(--accent); color: var(--accent-ink); padding: 9px 14px; border-radius: 18px 18px 5px 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.amsg { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 4px 16px 14px; overflow-wrap: anywhere; }
.livestatus { position: sticky; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px) + 74px); z-index: 5; justify-self: center; display: inline-flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow); border-radius: 22px; padding: 5px 6px 5px 12px; font-size: 14px; color: var(--ink-2); }
.fus { margin: 14px 0 0; }
.fus .chipbtn { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; font-size: 13.5px; }
.follow { position: sticky; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px) + 8px); z-index: 6; display: flex; gap: 8px; align-items: flex-end; margin-top: 14px;
  background: var(--bg-blur); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: 8px 0; }
.follow textarea { flex: 1; min-height: 42px; max-height: 160px; border-radius: 21px; border: 1px solid var(--rule); background: var(--card); padding: 10px 15px; font-size: 16px; resize: none; line-height: 1.35; }
.md h2, .md h3 { font-size: 17px; margin: 18px 0 8px; display: flex; align-items: center; gap: 8px; }
.md h2::before, .md h3::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--stripe); flex: none; }
.md p { margin: 8px 0; }
.md ul, .md ol { margin: 8px 0; padding-left: 22px; }
.md li { margin: 4px 0; }
.md strong { font-weight: 700; }
.md code { background: var(--card-2); padding: 1px 5px; border-radius: 5px; font-size: 14px; }
.md pre { background: var(--card-2); padding: 10px; border-radius: 10px; overflow-x: auto; }
.md .tw { overflow-x: auto; margin: 10px -4px; -webkit-overflow-scrolling: touch; }
.md table { border-collapse: collapse; font-size: 14.5px; min-width: 100%; }
.md th, .md td { border-bottom: 1px solid var(--rule); padding: 7px 8px; text-align: left; vertical-align: top; }
.md th { background: var(--card-2); font-size: 13px; white-space: nowrap; color: var(--ink-2); }
.md td:first-child { font-family: var(--font-ja); font-weight: 600; white-space: nowrap; }
.md td.add + td { font-family: var(--font-ja); font-weight: 700; white-space: nowrap; }
.md td.add:first-child { font-weight: 400; }
.md td.add, .md th.add { width: 38px; padding: 0; text-align: center; vertical-align: middle; }
.jp-card { position: relative; margin: 12px 0; padding: 10px 12px 12px 14px; border-radius: 12px; background: var(--card-2); border-left: 4px solid var(--reg-natural); }
.jp-card.casual { border-color: var(--reg-casual); } .jp-card.polite { border-color: var(--reg-polite); } .jp-card.formal { border-color: var(--reg-formal); }
.jp-card.example { border-color: var(--reg-example); } .jp-card.corrected { border-color: var(--reg-corrected); }
.jp-label { font-size: 12px; font-weight: 700; color: var(--reg-natural); margin-bottom: 2px; padding-right: 84px; }
.jp-card.casual .jp-label { color: var(--reg-casual); } .jp-card.polite .jp-label { color: var(--reg-polite); } .jp-card.formal .jp-label { color: var(--reg-formal); }
.jp-card.example .jp-label { color: var(--reg-example); } .jp-card.corrected .jp-label { color: var(--reg-corrected); }
.jp-ja { font: 700 20px/1.45 var(--font-ja); padding-right: 76px; }
.jp-kana { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.jp-romaji { font-size: 13px; color: var(--ink-3); }
.jp-tr { display: grid; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--rule); font-size: 15px; }
.jp-tr .tl .lb { height: 18px; }
.jp-note { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.jp-acts { position: absolute; top: 4px; right: 4px; display: flex; }
.hist { display: grid; gap: 1px; }
.hi { display: flex; align-items: center; border-bottom: 1px solid var(--rule); }
.hi-main { flex: 1; min-width: 0; display: grid; gap: 1px; border: 0; background: none; padding: 12px 4px; text-align: left; }
.hi-t { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- NOTEBOOK ---------- */
.nb-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin: 4px 0 14px; }
.review-home { padding: 0 16px 16px; }
.review-home .stripe { margin: 0 -16px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0 6px; text-align: center; }
.stats .num { font-size: 34px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stats > div:first-child .num { color: var(--accent); }
.stats .lbl { font-size: 13px; color: var(--ink-3); }
.review-home .row { border-top: 1px solid var(--rule); }
.review-home .btn { margin-top: 10px; }
.caught { text-align: center; padding: 14px 0 4px; color: var(--ink-2); }
.empty { display: grid; justify-items: center; gap: 8px; padding: 26px 20px; text-align: center; }
.empty p { color: var(--ink-2); margin: 0 0 6px; font-size: 15px; }
.nb-tools { display: grid; gap: 10px; margin-bottom: 12px; }
.search { width: 100%; height: 42px; border-radius: 12px; border: 0; background: var(--card-3); padding: 0 14px; font-size: 16px; }
.items { display: grid; gap: 1px; background: var(--rule); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.it { position: relative; display: grid; gap: 1px; border: 0; background: var(--card); padding: 11px 40px 11px 16px; text-align: left; width: 100%; }
.it-j { font: 700 19px/1.4 var(--font-ja); overflow-wrap: anywhere; }
.it.sentence .it-j { font-size: 16.5px; font-weight: 600; }
.it-r { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); }
.it-m { font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box { position: absolute; right: 14px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 2px solid var(--rule); }
.box.b1, .box.b2 { border-color: var(--stripe); }
.box.b3, .box.b4 { border-color: var(--accent); background: var(--stripe); }
.box.b5, .box.b6, .box.b7 { border-color: var(--accent); background: var(--accent); }
.detail { padding-top: 14px; }
#review { position: fixed; inset: 0; z-index: 35; background: var(--bg); display: flex; flex-direction: column; }
.rbar { display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px; }
.prog { flex: 1; height: 7px; border-radius: 4px; background: var(--card-3); overflow: hidden; }
.prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--stripe)); transition: width .25s; }
.left { font-size: 13px; color: var(--ink-3); min-width: 54px; text-align: right; font-variant-numeric: tabular-nums; }
.stage { flex: 1; overflow-y: auto; padding: 14px 16px 20px; }
.rcard { position: relative; max-width: 620px; min-height: 52vh; margin: 0 auto; background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 28px 20px 20px; }
.rcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 18px 18px 0 0; background: linear-gradient(90deg, var(--accent) 0 34%, var(--stripe) 34% 100%); }
.rq { font: 700 clamp(30px, 9vw, 44px)/1.35 var(--font-ja); text-align: center; margin-top: 18px; overflow-wrap: anywhere; }
.rcard.sentence .rq { font-size: clamp(21px, 6vw, 28px); font-weight: 600; text-align: left; }
.rctx { margin-top: 14px; text-align: center; font-size: 16px; color: var(--ink-2); line-height: 1.7; }
.rctx b { background: var(--hl); border-radius: 3px; color: var(--ink); }
.prompt { text-align: center; color: var(--ink-3); font-size: 14px; margin-top: 18px; }
.rcard .gl.big { margin-top: 18px; }
.rspeak { position: absolute; top: 14px; right: 10px; }
.rfoot { padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 12px); border-top: 1px solid var(--rule); background: var(--bg); }
.rfoot > * { max-width: 620px; margin: 0 auto; }
.grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.grade { display: grid; gap: 2px; justify-items: center; min-height: 60px; padding: 8px 4px; border-radius: 14px; border: 1px solid var(--rule); background: var(--card); font-weight: 700; font-size: 15px; }
.grade small { font-weight: 500; font-size: 12px; color: var(--ink-3); }
.grade.again { color: var(--zh); } .grade.hard { color: var(--reg-casual); }
.grade.good { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.grade.good small { color: var(--accent-ink); opacity: .8; }
.grade.easy { color: var(--en); }
.rdone { text-align: center; padding-top: 12vh; display: grid; justify-items: center; gap: 4px; }
.rdone h2 { font: 700 26px/1.3 var(--font-ja); margin: 10px 0 0; }
.rdone p { color: var(--ink-2); }

/* ---------- SETTINGS ---------- */
.list { padding: 0 16px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 12px 0; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.list > .row:first-child, .list > .stripe + .row { border-top: 0; }
.row .rt { flex: 1 1 160px; min-width: 0; }
.row .t { font-size: 16px; }
.row.col { display: grid; }
.ctl { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.keybox { display: grid; gap: 6px; }
.keyrow { display: flex; gap: 6px; }
.keyin { flex: 1; min-width: 0; height: 42px; border-radius: 10px; border: 1px solid var(--rule); background: var(--card-2); padding: 0 12px; font-size: 16px; }
.kstatus { font-size: 13.5px; color: var(--ink-3); min-height: 18px; }
.kstatus.ok { color: var(--accent); font-weight: 700; } .kstatus.bad { color: var(--err-ink); }
.usage { font-variant-numeric: tabular-nums; font-size: 15px; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }
.about .ab { display: flex; gap: 12px; align-items: center; padding: 14px 16px; }
.about img { width: 52px; height: 52px; border-radius: 12px; }
.about .ab > div { display: grid; gap: 2px; }

/* welcome */
.welcome h3 { font-size: 15px; margin: 22px 2px 6px; }
.welcome > .s { margin: 0 2px 8px; }
.welcome .card.list { box-shadow: none; background: var(--card-2); }
.welcome .btn.big { margin-top: 24px; }
.wl-hero { text-align: center; padding: 6px 8px 0; }
.wl-hero img { width: 76px; height: 76px; border-radius: 18px; box-shadow: var(--shadow); }
.wl-hero h2 { margin: 10px 0 4px; font-size: 26px; }
.wl-hero p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* ---------- tab bar, toast, update ---------- */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px max(10px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 4px) max(10px, env(safe-area-inset-left, 0px));
  background: var(--bg-blur); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); border-top: 1px solid var(--rule); }
.tab { display: grid; justify-items: center; gap: 2px; border: 0; background: none; padding: 4px 0; color: var(--ink-3); font-size: 10.5px; font-weight: 600; }
.tab .ti { position: relative; display: grid; place-items: center; }
.tab svg { width: 25px; height: 25px; }
.tab.on { color: var(--accent); }
.tab .badge { position: absolute; top: -4px; left: 16px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--zh); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
#toast { position: fixed; left: 50%; bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px) + 18px); transform: translateX(-50%); z-index: 60; max-width: calc(100vw - 32px);
  background: rgba(22, 25, 28, .92); color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14.5px; font-weight: 600; text-align: center; opacity: 0; pointer-events: none; transition: opacity .18s; }
#toast.show { opacity: 1; }
#update { position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 55; display: flex; gap: 10px; align-items: center; width: max-content; max-width: calc(100vw - 24px);
  background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow); padding: 7px 7px 7px 14px; border-radius: 14px; font-size: 14px; font-weight: 600; }

/* ---------- Home Screen guide ---------- */
#install { position: fixed; inset: 0; z-index: 50; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--bg);
  padding: calc(env(safe-area-inset-top, 0px) + 8px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 140px) max(16px, env(safe-area-inset-left, 0px));
  --ios-bg: #F2F2F7; --ios-row: #FFFFFF; --ios-ink: #1C1C1E; --ios-blue: #0A84FF; --ios-green: #34C759; }
:root[data-theme="dark"] #install { --ios-bg: #1C1C1E; --ios-row: #2C2C2E; --ios-ink: #F2F2F7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #install { --ios-bg: #1C1C1E; --ios-row: #2C2C2E; --ios-ink: #F2F2F7; } }
.ig { max-width: 560px; margin: 0 auto; }
.ig-top { display: flex; justify-content: flex-end; }
.ig-mark { display: flex; justify-content: center; }
.ig-mark img { width: 84px; height: 84px; border-radius: 20px; box-shadow: var(--shadow); }
.ig-title { text-align: center; font-size: 25px; line-height: 1.25; margin: 14px 0 6px; font-weight: 800; }
.ig-sub { text-align: center; color: var(--ink-2); font-size: 15px; margin: 0 auto 16px; max-width: 30em; text-wrap: pretty; }
.ig-which { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.ig-which .seg button { min-width: 62px; min-height: 36px; display: grid; place-items: center; }
.ig-dots { font: 800 20px/1 var(--font-ui); }
.ig-shareopt svg { width: 20px; height: 20px; }
.ig-steps { list-style: none; counter-reset: ig; margin: 0; padding: 0; display: grid; gap: 12px; }
.ig-step { counter-increment: ig; position: relative; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 14px 14px 14px 56px; }
.ig-step::before { content: counter(ig); position: absolute; left: 14px; top: 13px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 800 16px/1 var(--font-ui); }
.ig-tx b { display: block; font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.ig-tx b.ui { display: inline; color: var(--accent); }
.ig-tx .s { margin-top: 3px; font-size: 13.5px; text-wrap: pretty; }
.ig-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0 2px; vertical-align: -7px; border-radius: 8px; background: var(--card-2); color: var(--ios-blue); }
.ig-ic svg { width: 18px; height: 18px; }
.ig-mock { margin-top: 12px; }
.ig-skip { margin-top: 14px; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.ig-link { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ig-link code { font-size: 13px; background: var(--card-2); border-radius: 8px; padding: 6px 10px; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.ig-arrow { position: fixed; z-index: 51; display: grid; justify-items: center; pointer-events: none; color: var(--accent); font-weight: 800; font-size: 13px; animation: igb 1s ease-in-out infinite; }
.ig-arrow span { background: var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 3px 10px; box-shadow: var(--shadow); }
.ig-arrow svg { width: 30px; height: 30px; stroke-width: 2.6; }
.ig-arrow.br { right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 58px); }
.ig-arrow.bc { left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 4px); margin-left: -28px; }
.ig-arrow.top { right: max(18px, env(safe-area-inset-right, 0px)); top: calc(env(safe-area-inset-top, 0px) + 6px); animation-name: igbu; }
.ig-arrow.top svg { transform: rotate(180deg); order: -1; }
@keyframes igb { 50% { transform: translateY(6px); } }
@keyframes igbu { 50% { transform: translateY(-6px); } }
.mk { background: var(--ios-bg); color: var(--ios-ink); border-radius: 16px; padding: 10px; font: 13px/1.3 -apple-system, "Hiragino Sans", system-ui, sans-serif; }
.mk .mk-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; color: var(--ios-blue); }
.mk .mk-ic svg { width: 20px; height: 20px; }
.mk .f { opacity: .35; }
.mk-hl { position: relative; border-radius: 10px; box-shadow: 0 0 0 3px var(--accent); animation: mkp 1.4s ease-in-out infinite; }
@keyframes mkp { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent); } }
.mk-pill { display: flex; align-items: center; gap: 6px; background: var(--ios-row); border-radius: 999px; padding: 5px 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.mk-url { flex: 1; min-width: 0; text-align: center; font-size: 12.5px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-dotbtn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 800 18px/1 var(--font-ui); color: var(--ios-ink); background: var(--ios-bg); }
.mk-toolbar { display: flex; justify-content: space-around; align-items: center; background: var(--ios-row); }
.mk-ipad { display: flex; align-items: center; gap: 8px; background: var(--ios-row); }
.mk-menu { display: grid; gap: 6px; }
.mk-line { display: block; height: 30px; border-radius: 10px; background: var(--ios-row); opacity: .55; }
.mk-line.s { width: 70%; }
.mk-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--ios-row); padding: 4px 6px 4px 12px; font-weight: 700; font-size: 14px; }
.mk-add { display: grid; gap: 10px; }
.mk-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; font-size: 13px; }
.mk-head b { text-align: center; }
.mk-head .f { color: var(--ios-blue); }
.mk-addbtn { color: #fff; background: var(--ios-blue); font-weight: 800; padding: 4px 12px; border-radius: 999px; }
.mk-app { display: flex; align-items: center; gap: 10px; background: var(--ios-row); border-radius: 12px; padding: 8px 10px; font-weight: 700; }
.mk-app img { width: 40px; height: 40px; border-radius: 10px; }
.mk-sw { display: flex; align-items: center; justify-content: space-between; background: var(--ios-row); border-radius: 12px; padding: 8px 10px; font-weight: 700; }
.mk-switch { width: 44px; height: 26px; border-radius: 13px; background: var(--ios-green); position: relative; flex: none; }
.mk-switch::after { content: ""; position: absolute; right: 2px; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.mk-home { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 10px; justify-items: center; padding: 14px 12px; background: linear-gradient(160deg, #cfe8c8, #d6ecf8); }
.mk-appf { display: block; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, .55); }
.mk-me { position: relative; display: grid; justify-items: center; gap: 3px; }
.mk-me img { width: 44px; height: 44px; border-radius: 12px; }
.mk-me span { font-size: 11px; font-weight: 700; color: #1c2a1e; }
.mk-me em { position: absolute; top: -16px; left: 34px; font-style: normal; font-weight: 800; font-size: 11px; color: #fff; background: var(--accent); border-radius: 999px; padding: 2px 7px; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .skel, .spin, .ig-arrow, .mk-hl { animation: none; } .sh-panel, .sh-scrim { transition: none; } }
@media (min-width: 700px) { .top h1 { font-size: 32px; } }
/* keep wide tables scrolling inside their card instead of widening the page */
.thread { grid-template-columns: minmax(0, 1fr); }
.thread > * { min-width: 0; }
.amsg { max-width: 100%; }
.md table { overflow-wrap: normal; word-break: normal; }
.md td { min-width: 4.8em; }
.md td.add { min-width: 0; }
.qc, .sh-body { overflow-wrap: anywhere; }

/* Read: compact tiles + Read on one row */
.in-acts.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; }
.btn.tile { flex-direction: column; gap: 2px; min-height: 54px; padding: 4px 4px; font-size: 12.5px; border-radius: 12px; }
.btn.tile svg { width: 21px; height: 21px; }
.in-acts.tiles .btn.primary { min-height: 54px; padding: 0 16px; }
/* review answer */
.detail.answer { text-align: center; }
.detail.answer .meta, .detail.answer .gl { justify-content: center; }
.detail.answer .gl { justify-items: start; text-align: left; max-width: 30em; margin: 0 auto; }
.ans-kana { font: 600 24px/1.4 var(--font-ja); color: var(--ink); }
.ans-romaji { font-size: 15px; color: var(--ink-3); margin-bottom: 8px; }
.detail.answer .meaning { margin-top: 8px; }
.detail.answer .sent { text-align: left; }
/* grids that hold inputs must be allowed to shrink */
.keybox, .row.col { grid-template-columns: minmax(0, 1fr); }
.keyin { width: 100%; }
.sh-body { overflow-x: hidden; }
/* keep word/phrase text clear of the listen / save / close buttons */
.qc::before { content: ""; float: right; width: 128px; height: 46px; }
.hw .word { padding-right: 0; }
.detail::before { content: ""; float: right; width: 96px; height: 40px; }
.detail.answer::before { display: none; }
/* full-bleed sticky header and video on wide screens (iPad) */
.top, .vwrap { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.top { padding-left: calc(50vw - 50% + 16px); padding-right: calc(50vw - 50% + 16px); }
.w { cursor: pointer; }

/* =================== JLPT =================== */
.jl-levels { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; margin: 4px 0 14px; }
.jl-levels button { font-size: 15px; font-weight: 800; }
.jl-sum { padding: 0 16px 16px; }
.jl-sum .stripe { margin: 0 -16px; }
.jl-head { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.jl-head > div { display: grid; }
.jl-head b { font-size: 17px; }
.jl-badge { display: inline-grid; place-items: center; min-width: 46px; height: 46px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font: 800 17px/1 var(--font-ui); letter-spacing: .02em; position: relative; flex: none; }
.jl-badge::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 3px; border-radius: 2px; background: var(--stripe); }
.jl-sum .stats { margin: 14px 0 4px; }
.stats .num.warn { color: var(--reg-casual); }
.jl-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.jl-acts .btn { min-width: 0; padding: 0 10px; }
h2.sec.jl-sec { display: flex; align-items: baseline; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 17px; color: var(--ink); }
.jl-sec .en { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.jl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .jl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jl-card { display: grid; gap: 3px; align-content: start; text-align: left; border: 0; padding: 13px 13px 12px 17px; color: var(--ink); }
.jl-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); }
.jl-card.g-grammar::before { background: var(--reg-polite); }
.jl-card.g-reading::before { background: var(--reg-casual); }
.jl-card.g-listening::before { background: var(--yue); }
.jc-ja { font: 700 16.5px/1.35 var(--font-ja); }
.jc-en { font-size: 12.5px; color: var(--ink-3); }
.jc-bar { display: block; height: 6px; border-radius: 3px; background: var(--card-3); overflow: hidden; margin-top: 8px; }
.jc-bar i { display: block; height: 100%; border-radius: 3px; background: var(--zh); }
.jc-bar i.mid { background: #e8b83e; } .jc-bar i.hi { background: var(--stripe); }
.jc-meta { font-size: 12px; color: var(--ink-3); }
.jl-fine { margin: 18px 4px 0; }
.jl-start-h { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
.jl-start-h > div { display: grid; }
.jl-start-h b { font-size: 20px; }
.jl-inst { margin: 14px 0 4px; padding: 10px 12px; background: var(--card-2); border-radius: 10px; font-size: 14.5px; line-height: 1.6; }
.jl-start .row { border-top: 0; }

/* quiz (full screen) */
#quiz { position: fixed; inset: 0; z-index: 36; display: flex; flex-direction: column; background: var(--bg); }
.qz-bar { display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px; background: var(--card); }
.qz-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); flex: none; }
.qz-ic svg { width: 19px; height: 19px; }
.qz-title { flex: 1; min-width: 0; font-weight: 700; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qz-count { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.qz-break { border: 0; background: none; color: var(--zh); font-weight: 700; font-size: 16px; padding: 4px 0 4px 6px; }
.qz-prog { height: 5px; background: var(--card-3); }
.qz-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--stripe)); transition: width .25s; }
.qz-stage { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px 24px; }
.qz-stage > * { max-width: 680px; margin-left: auto; margin-right: auto; }
.qz-inst { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; padding: 8px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--rule); }
.qz-passage { margin-top: 12px; padding: 14px 16px; background: var(--card); border-radius: 12px; box-shadow: var(--shadow); font: 400 17px/2 var(--font-ja); max-height: 46vh; overflow-y: auto; }
.qz-q { margin: 22px 4px 22px; font: 500 21px/2.05 var(--font-ja); overflow-wrap: anywhere; }
.qz-q.sub { margin-top: 16px; font-size: 18px; line-height: 1.9; font-weight: 600; }
.qz-q.word { text-align: center; font-size: 28px; font-weight: 700; }
.qz-stage rt { font-size: .5em; color: var(--ink-2); font-weight: 400; }
u.tgt { text-decoration: none; border-bottom: 2.5px solid var(--ink); padding-bottom: 1px; }
.blank { color: var(--ink-3); letter-spacing: .1em; }
.blank.num { color: var(--accent); font-weight: 800; letter-spacing: 0; }
.slot { display: inline-block; width: 2.6em; border-bottom: 2px solid var(--ink-2); margin: 0 .25em; vertical-align: -.1em; }
.star { color: var(--zh); font-weight: 800; margin: 0 .1em; }
.qz-listen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.qz-play { min-width: 120px; }
.qz-opts { display: grid; gap: 8px; }
.qz-opt { position: relative; display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 16px 44px; border-radius: 12px; border: 1.5px solid var(--rule); background: var(--card); color: var(--ink); font: 500 20px/1.45 var(--font-ja); text-align: center; }
.qz-opts.long .qz-opt { justify-content: flex-start; text-align: left; font-size: 16px; padding: 22px 40px 14px 16px; }
.qz-opt:active { transform: scale(.99); }
.qz-n { position: absolute; top: 5px; right: 9px; font: 500 12px/1 var(--font-ui); color: var(--ink-3); }
.qz-opt.right { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.qz-opt.wrong { border-color: var(--zh); background: color-mix(in srgb, var(--zh) 10%, var(--card)); box-shadow: inset 0 0 0 1px var(--zh); }
.qz-opt.dim { opacity: .5; }
.qz-opt[disabled] { cursor: default; color: var(--ink); }
.qz-mark { position: absolute; left: 12px; top: 50%; margin-top: -12px; width: 24px; height: 24px; }
.qz-mark svg { width: 24px; height: 24px; stroke-width: 2.6; }
.qz-opt.right .qz-mark { color: var(--accent); } .qz-opt.wrong .qz-mark { color: var(--zh); }
.qz-opts.long .qz-mark { left: auto; right: 10px; top: auto; bottom: 10px; margin: 0; }
.qz-fb { margin-top: 16px; background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 14px 16px 16px; border-top: 5px solid var(--accent); }
.qz-fb.ng { border-top-color: var(--zh); }
.fb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 17px; }
.fb-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; }
.qz-fb.ng .fb-ic { background: var(--zh); }
.fb-ic svg { width: 18px; height: 18px; stroke-width: 2.8; }
.fb-ans { flex-basis: 100%; font-size: 15px; color: var(--ink-2); margin-left: 36px; }
.fb-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding: 10px 6px 10px 12px; border-radius: 12px; background: var(--accent-soft); }
.fb-item b { font: 700 19px/1.3 var(--font-ja); }
.sj-row { display: flex; align-items: flex-start; gap: 4px; }
.sj-row .sj { flex: 1; }
.fb-kana { font-size: 13.5px; color: var(--ink-2); }
.fb-romaji { font-size: 12.5px; color: var(--ink-3); margin-bottom: 4px; }
.fb-ex { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; }
.fb-why { margin: 10px 0 0; padding-left: 22px; font-size: 14.5px; color: var(--ink-2); display: grid; gap: 5px; }
.fb-why li.right b { color: var(--accent); } .fb-why li.wrong b { color: var(--zh); }
.fb-why b { font-family: var(--font-ja); color: var(--ink); }
.fb-script { margin-top: 12px; font-size: 15px; }
.fb-script summary { cursor: pointer; color: var(--accent); font-weight: 700; }
.fb-script p { margin: 6px 0; font-family: var(--font-ja); }
.fb-acts { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.qz-foot { padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 12px); background: var(--bg); border-top: 1px solid var(--rule); }
.qz-foot > * { max-width: 680px; margin: 0 auto; }
.qz-foot.two { display: flex; gap: 8px; justify-content: center; }
.qz-foot.two .btn { flex: 1; max-width: 330px; margin: 0; min-height: 50px; }
.qz-wait { display: grid; justify-items: center; gap: 10px; text-align: center; padding-top: 22vh; color: var(--ink-2); }
.spin.big { width: 34px; height: 34px; border-width: 3px; }
.qz-result { text-align: center; padding-top: 4vh; }
.ring { --p: 0; width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; display: grid; place-content: center; gap: 2px;
  background: radial-gradient(closest-side, var(--bg) 78%, transparent 79% 100%), conic-gradient(var(--c, var(--accent)) calc(var(--p) * 1%), var(--card-3) 0); }
.ring.mid { --c: #e8b83e; } .ring.lo { --c: var(--zh); }
.ring b { font-size: 30px; font-variant-numeric: tabular-nums; }
.ring span { color: var(--ink-3); font-size: 14px; }
.qz-result h2 { font: 700 24px/1.3 var(--font-ja); margin: 14px 0 2px; }
.qz-result h3 { text-align: left; font-size: 15px; margin: 22px 2px 8px; }
.by-type { text-align: left; margin-top: 16px; }
.miss { display: grid; gap: 1px; background: var(--rule); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); text-align: left; }
.miss-i { display: grid; gap: 2px; border: 0; background: var(--card); padding: 11px 14px; text-align: left; }
.mi-q { font: 600 16px/1.4 var(--font-ja); }
.qz-review .qz-q.sub { margin: 14px 2px; }
.qz-err { display: grid; gap: 4px; text-align: left; max-width: 520px; }
.qz-err-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* Beta access code, AI consent, feedback */
.codein { text-transform: uppercase; letter-spacing: .12em; font-variant-numeric: tabular-nums; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.codein::placeholder { letter-spacing: .08em; }
.consent { gap: 6px; }
.consent .row.inner { padding: 0; border: 0; min-height: 0; }
.consent .s a, .consent-sheet a { color: var(--accent); }
.consent-sheet { display: grid; gap: 12px; padding: 4px 2px 8px; }
.consent-sheet p { margin: 0; }
details.own-key { margin-top: 8px; }
details.own-key summary { cursor: pointer; color: var(--ink-3); font-size: 14px; padding: 6px 0; }
.about-links { padding: 0 16px 14px; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.code-note { display: grid; gap: 6px; justify-items: start; }
.code-big { font: 700 22px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; color: var(--ink); }

/* The learner's own language */
.lb.nat { background: var(--accent); }
.tl .tx[dir="auto"] { unicode-bidi: plaintext; }
select.langsel { max-width: 100%; min-height: 42px; font-size: 16px; }

/* Simplified Chinese glyphs */
[lang="zh-Hans"] { font-family: "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", sans-serif; }

/* Today: streak and review */
.today { padding: 14px 16px; display: grid; gap: 12px; margin-top: 14px; }
.td-streak { display: flex; gap: 12px; align-items: center; }
.td-streak b { display: block; font-size: 17px; }
.td-flame { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--card-3); color: var(--ink-3); }
.td-flame svg { width: 24px; height: 24px; }
.td-streak.lit .td-flame { background: #fff1e0; color: #e8711a; }
:root[data-theme="dark"] .td-streak.lit .td-flame { background: #3a2715; color: #ff9a4a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .td-streak.lit .td-flame { background: #3a2715; color: #ff9a4a; } }
.td-stats { display: flex; align-items: center; gap: 18px; padding-top: 10px; border-top: 1px solid var(--rule); }
.td-stat b { font-size: 20px; font-variant-numeric: tabular-nums; margin-right: 6px; }
.td-stat span { color: var(--ink-3); font-size: 14px; }
.td-stat.due b { color: var(--accent); }
.td-go { margin-left: auto; }

/* Reading library */
.sec-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sec-row .sec { margin-bottom: 8px; }
.seg.lvls button { padding: 0 9px; }
.stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
.story { display: grid; gap: 4px; align-content: start; text-align: left; padding: 12px 13px 13px; border-radius: 16px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); cursor: pointer; min-height: 118px; position: relative; overflow: hidden; }
.story::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--stripe); opacity: .85; }
.story:active { transform: scale(.985); }
.st-top { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.st-tag { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; }
.st-done { color: var(--accent); display: inline-grid; } .st-done svg { width: 18px; height: 18px; }
.st-t { font-size: 17px; font-weight: 700; line-height: 1.35; margin-top: 4px; }
.st-en { font-size: 13.5px; color: var(--ink-2); line-height: 1.35; }
.st-n { font-size: 12px; color: var(--ink-3); margin-top: auto; padding-top: 4px; }
.story.done { background: var(--card-2); }

/* Welcome flow */
.welcome { display: grid; gap: 4px; padding-bottom: 12px; }
.welcome h3 { display: none; }
.wl-hero { padding-top: 14px; }
.wl-hero img { width: 88px; height: 88px; border-radius: 22px; }
.wl-hero h2 { font-size: 30px; }
.wl-hero p { font-size: 17px; }
.wl-features { display: grid; gap: 14px; margin: 26px 2px 6px; }
.wl-f { display: flex; gap: 14px; align-items: flex-start; }
.wl-f b { display: block; font-size: 16px; margin-bottom: 1px; }
.wl-f .s { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.wl-fi { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.wl-fi svg { width: 22px; height: 22px; }
.wl-dots { display: flex; gap: 6px; margin: 4px 2px 10px; }
.wl-dots i { flex: 1; height: 4px; border-radius: 2px; background: var(--card-3); }
.wl-dots i.on { background: var(--accent); }
.wl-h { font-size: 24px; margin: 6px 2px 2px; }
.wl-sub { margin: 0 2px 14px; color: var(--ink-2); font-size: 15px; }
.wl-nav { display: flex; align-items: center; gap: 8px; margin-top: 22px; }
.wl-nav .btn.big { margin-top: 0; }
.wl-consent { padding: 4px 16px; }
.wl-consent p { margin: 12px 0; font-size: 15px; line-height: 1.5; }
.wl-consent a { color: var(--accent); }
.wl-okline { display: flex; gap: 8px; align-items: center; color: var(--accent); font-weight: 700; margin: 16px 4px 0; }
.wl-okline svg { width: 20px; height: 20px; }
.wl-levels { display: grid; gap: 8px; }
.wl-lv { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--rule); background: var(--card); color: var(--ink); cursor: pointer; }
.wl-lv b { display: block; font-size: 15.5px; }
.wl-lv .s { font-size: 13.5px; color: var(--ink-3); }
.wl-lv.on { border-color: var(--accent); background: var(--accent-soft); }
.wl-lvk { flex: none; width: 44px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--card-3); font-weight: 800; font-size: 14px; }
.wl-lv.on .wl-lvk { background: var(--accent); color: var(--accent-ink); }
.st-t { font-size: 16px; text-wrap: balance; word-break: auto-phrase; }

/* Feedback */
.fb-sheet { display: grid; gap: 12px; padding: 2px 2px 8px; }
.fb-q { margin: 0; font-size: 17px; font-weight: 700; }
.fb-stars { display: flex; gap: 6px; }
.fb-star { border: 0; background: var(--card-2); border-radius: 12px; width: 52px; height: 48px; display: grid; place-items: center; color: var(--ink-3); cursor: pointer; }
.fb-star svg { width: 28px; height: 28px; }
.fb-star.on { color: #e8a317; background: #fdf3dc; }
:root[data-theme="dark"] .fb-star.on { background: #3a2f12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fb-star.on { background: #3a2f12; } }
.fb-text { width: 100%; border-radius: 12px; border: 1px solid var(--rule); background: var(--card-2); padding: 10px 12px; font-size: 16px; resize: vertical; }
.fb-sheet > .s { margin: 0; color: var(--ink-3); font-size: 13px; }
.nudge { display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 14px; margin-top: 12px; }
.nudge-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.nudge-ic svg { width: 22px; height: 22px; }
.nudge-tx { flex: 1; min-width: 0; } .nudge-tx b { display: block; } .nudge-tx .s { font-size: 13.5px; color: var(--ink-3); }

/* Survey */
.survey { gap: 18px; }
.sv-intro { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.sv-q { display: grid; gap: 8px; }
.sv-q .fb-q { font-size: 16px; }
.sv-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-opts.long { display: grid; }
.sv-opt { text-align: left; border: 1.5px solid var(--rule); background: var(--card); color: var(--ink); border-radius: 12px; padding: 9px 13px; cursor: pointer; font-size: 15px; display: grid; gap: 1px; }
.sv-opt b { font-weight: 600; }
.sv-opt .s { font-size: 13px; color: var(--ink-3); }
.sv-opt.on { border-color: var(--accent); background: var(--accent-soft); }
.sv-opt.on b { color: var(--accent); }
.wl-note { margin: 10px 2px 0; color: var(--ink-3); font-size: 13px; }

/* sign-up link */
.signup .su-l{display:grid;gap:6px;margin:18px 0 10px;font-weight:600}
.signup .su-l .keyin{font-weight:400}
.signup .kstatus{margin:4px 0 12px}


/* ======================================================================
   Playful look (2026): rounded type, chunky buttons that press down, outlined cards.
   The reader stays calm: only the colours change there.
   ====================================================================== */
body { font-weight: 500; }
.top h1 { font-weight: 900; letter-spacing: -.015em; }
.mark { border-radius: 10px; box-shadow: 0 3px 0 var(--accent-deep); font-family: var(--font-round-ja); }
.mark::after { display: none; }
.card { border: 2px solid var(--rule); box-shadow: none; }
.lib, .items { box-shadow: none; border: 2px solid var(--rule); }
.amsg { box-shadow: none; border: 2px solid var(--rule); }
.btn { border: 2px solid var(--rule); border-bottom-width: 4px; font-weight: 800; border-radius: 14px; transition: transform .06s; }
.btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.btn.primary { border-color: var(--accent); border-bottom-color: var(--accent-deep); }
.btn.ghost { border-color: transparent; }
.btn.ghost:active { transform: none; }
.btn.big { min-height: 54px; border-radius: 16px; font-size: 17.5px; }
.btn.small { border-radius: 12px; border-bottom-width: 3px; }
.btn.round { border-radius: 50%; }
.seg { border-radius: 12px; padding: 3px; }
.seg button { font-weight: 800; border-radius: 9px; }
.chipbtn { border: 2px solid var(--rule); border-bottom-width: 4px; border-radius: 14px; font-weight: 700; }
.chipbtn:active { transform: translateY(2px); border-bottom-width: 2px; }
.fus .chipbtn { border-color: var(--accent-soft); border-bottom-color: color-mix(in srgb, var(--accent) 35%, var(--accent-soft)); }
h2.sec { font-weight: 900; letter-spacing: .07em; }
.story { border: 2px solid var(--rule); border-bottom-width: 4px; border-radius: 18px; }
.story::before { height: 5px; }
.st-t { font-weight: 800; }
.tabbar { border-top: 2px solid var(--rule); }
.tab { font-size: 11.5px; font-weight: 800; }
.tab svg { width: 27px; height: 27px; }
.umsg { font-weight: 600; }
.sh-panel { border-radius: 24px 24px 0 0; }
.switch:checked { background: var(--accent); }
.grade { border: 2px solid var(--rule); border-bottom-width: 4px; }
.grade.good { border-color: var(--accent); border-bottom-color: var(--accent-deep); }
.rcard { border: 2px solid var(--rule); box-shadow: none; border-radius: 22px; }
.search { border-radius: 14px; }
.keyin { border-width: 2px; border-radius: 12px; }

/* ---------- Koro ---------- */
:root { --koro-line: #8a4b1c; }
:root[data-theme="dark"] { --koro-line: #ffd9b3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --koro-line: #ffd9b3; } }
.koro { display: inline-flex; flex: none; line-height: 0; }
.koro .kl { stroke: var(--koro-line); }
.koro .kp { stroke: #8a4b1c; }
.koro svg { overflow: visible; }

/* ---------- home: pills, Koro card, goal, stamps, today's story, topics, next badge ---------- */
.top .pill { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 11px; border-radius: 999px; font-weight: 900; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.top .pill svg { width: 18px; height: 18px; }
.pill.flame { background: var(--card-3); color: var(--ink-3); }
.pill.flame.lit { background: var(--sun-soft); color: var(--sun-deep); }
.pill.flame.lit svg { color: var(--sun); }
.pill.stamps { background: var(--accent-soft); color: var(--accent); }
:root[data-theme="dark"] .pill.flame.lit { color: var(--sun); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill.flame.lit { color: var(--sun); } }
.koro-card { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.koro-card .bubble { flex: 1; position: relative; display: grid; gap: 1px; background: var(--card); border: 2px solid var(--rule); border-radius: 18px; padding: 10px 14px; margin-bottom: 18px; }
.koro-card .bubble::before { content: ""; position: absolute; left: -9px; bottom: 14px; width: 14px; height: 14px; background: var(--card); border-left: 2px solid var(--rule); border-bottom: 2px solid var(--rule); transform: rotate(45deg); border-radius: 0 0 0 4px; }
.koro-card .k-hi { font: 800 14px/1.3 var(--font-round-ja); color: var(--accent); }
.koro-card b { font-size: 17px; font-weight: 900; }
.koro-card .s { font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.goal, .stampcard { padding: 13px 16px; margin-top: 12px; display: grid; gap: 10px; }
.g-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.g-row b { font-size: 16px; font-weight: 900; }
.g-n { font-size: 14.5px; font-weight: 800; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.g-bar { height: 16px; border-radius: 999px; background: var(--card-3); overflow: hidden; }
.g-bar i { display: block; height: 100%; min-width: 16px; border-radius: 999px; background: var(--accent); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12); transition: width .4s; }
.g-due { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 2px solid var(--card-3); }
.g-due .s { font-size: 14.5px; font-weight: 700; color: var(--ink-2); }
.stamps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.st-day { display: grid; justify-items: center; gap: 4px; }
.stamp { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--card-3); color: #fff; font: 800 17px/1 var(--font-round-ja); }
.stamp.k-done { background: var(--accent); box-shadow: 0 3px 0 var(--accent-deep); color: var(--accent-ink); }
.stamp.k-goal { background: var(--sun); box-shadow: 0 3px 0 var(--sun-deep); }
.stamp.k-today { background: var(--accent-soft); border: 3px dashed var(--accent); }
.stamp.k-future { background: var(--card-2); }
.st-l { font-size: 12px; font-weight: 800; color: var(--ink-3); }
.st-l.now { color: var(--accent); font-weight: 900; }
.td-story { margin-top: 12px; border-bottom-width: 4px; }
.ts-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; background: var(--story-bg); color: var(--story-ink); font-size: 13px; font-weight: 900; letter-spacing: .06em; }
.ts-lv { background: rgba(255, 255, 255, .24); padding: 2px 9px; border-radius: 999px; letter-spacing: 0; }
:root[data-theme="dark"] .ts-lv { background: rgba(42, 14, 10, .14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ts-lv { background: rgba(42, 14, 10, .14); } }
.ts-body { display: grid; gap: 3px; padding: 13px 16px 16px; }
.ts-t { font: 800 23px/1.3 var(--font-round-ja); }
.ts-en { font-size: 14.5px; font-weight: 700; color: var(--ink-2); }
.ts-body .btn { margin-top: 10px; }
.ts-wait { display: flex; gap: 12px; align-items: center; }
.ts-wait > div { flex: 1; display: grid; gap: 2px; }
.story-wait { padding: 10px 0 20px; }
.topics { margin-top: 16px; display: grid; gap: 8px; }
.tp-h { font-size: 16px; font-weight: 900; }
.tp-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tp { margin: 0; }
.nextbadge { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 10px 14px; border-radius: 18px; border: 2px solid color-mix(in srgb, var(--gold) 45%, var(--rule)); background: var(--gold-soft); color: var(--gold-ink); text-align: left; }
.nextbadge > svg { width: 30px; height: 30px; color: var(--gold); flex: none; }
.nb-tx { flex: 1; display: grid; gap: 5px; min-width: 0; }
.nb-tx b { font-size: 14.5px; font-weight: 900; }
.nb-bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 25%, transparent); overflow: hidden; }
.nb-bar i { display: block; height: 100%; background: var(--gold); border-radius: 999px; }
.nb-r { font-size: 13px; font-weight: 900; }
.remind-ask { display: flex; gap: 10px; align-items: flex-start; padding: 13px 14px; margin-top: 12px; }
.ra-tx { flex: 1; display: grid; gap: 3px; }
.ra-tx b { font-size: 15.5px; font-weight: 900; }
.ra-tx .btns { margin-top: 6px; }
.badges { display: grid; gap: 8px; padding-bottom: 10px; }
.bd { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 14px; background: var(--card-2); opacity: .65; }
.bd.got { opacity: 1; background: var(--gold-soft); }
.bd-ic svg { width: 28px; height: 28px; color: var(--ink-3); }
.bd.got .bd-ic svg { color: var(--gold); }
.bd-tx { display: grid; }

/* ---------- celebration ---------- */
.celebrate { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; background: rgba(10, 16, 12, .5); opacity: 0; transition: opacity .2s; }
.celebrate.in { opacity: 1; }
.cel-card { position: relative; width: min(360px, 100%); display: grid; justify-items: center; gap: 6px; text-align: center; padding: 22px 20px 20px; border-radius: 28px; background: var(--card); border: 2px solid var(--rule); transform: scale(.85); transition: transform .28s cubic-bezier(.2, 1.4, .4, 1); overflow: hidden; }
.celebrate.in .cel-card { transform: none; }
.cel-k { font-size: 13px; font-weight: 900; letter-spacing: .1em; color: var(--sun-deep); }
.cel-card h2 { margin: 0; font-size: 25px; font-weight: 900; }
.cel-card p { margin: 0 0 8px; color: var(--ink-2); font-weight: 600; }
.cel-card .koro { animation: hop .7s ease-out 2; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: fall 1.6s ease-in forwards; }
@keyframes fall { to { transform: translateY(420px) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cel-card .koro, .confetti i { animation: none; } .confetti { display: none; } }

/* ---------- tutorial ---------- */
#tut { position: fixed; inset: 0; z-index: 65; }
.tut-hole { position: fixed; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(8, 14, 10, .66); transition: all .25s ease; pointer-events: none; outline: 3px solid var(--gold); outline-offset: 2px; }
.tut-bub { position: fixed; left: 16px; right: 16px; max-width: 520px; margin: 0 auto; background: var(--card); border-radius: 22px; padding: 14px 14px 10px; border: 2px solid var(--rule); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.tut-row { display: flex; gap: 10px; align-items: flex-start; }
.tut-t { margin: 4px 0 0; font-size: 15.5px; font-weight: 700; line-height: 1.45; }
.tut-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.tut-dots { display: flex; gap: 5px; }
.tut-dots i { width: 7px; height: 7px; border-radius: 4px; background: var(--card-3); }
.tut-dots i.on { width: 18px; background: var(--gold); }

/* Yomikoro: the brand mark is Koro's app icon */
img.mark { display: block; background: none; box-shadow: 0 1px 3px rgba(60, 40, 20, .25); object-fit: cover; }
.moved-steps { margin: 14px 0; padding-left: 22px; display: grid; gap: 8px; }
.moved .btn.block { margin-top: 10px; }