/* ============================================================
   PalPage — design tokens
   Fluorescent stationery: coral red for actions, highlighter yellow for "marked" meaning,
   blue-black ink for text. Rounded system stacks, no external fonts.
   ============================================================ */
        :root {
            --bg: #F2F5FA;
            --surface: #FFFFFF;
            --surface-2: #F7F9FC;
            --surface-3: #EEF2F8;
            --ink: #1C2430;
            --ink-2: #414D5E;
            --muted-strong: #5D6B7C;
            --line: #E3E9F2;
            --line-strong: #C9D4E2;

            --accent: #CF3A1E;
            --accent-ink: #A82E14;
            --accent-soft: #FCE9E3;

            --marker: #FFE95C;
            --marker-soft: #FFF6CF;
            --marker-line: #F2DE9C;

            --easy: #186A4B;
            --easy-bg: #DFF3E6;
            --easy-line: #BCE3CE;

            --hard: #A03A1C;
            --hard-bg: #FBE4DA;
            --ok: #8A6100;
            --ok-bg: #FBF0D2;
            --new: #4E5D6E;
            --new-bg: #EAF0F8;

            --hard-ink: #7E2C12;
            --line-warm: #F5DBD1;
            --hard-bg-hover: #F8D6C8;
            --rate-ok-line: #F0E2BC;
            --rate-ok-line-hover: #F5E9C9;
            --rate-easy-line: #BCE3CE;
            --rate-easy-line-hover: #CBEBDB;
            --glass: rgba(255, 255, 255, .88);
            --glass-strong: rgba(255, 255, 255, .95);
            --scrim: rgba(16, 22, 32, .46);
            --wash: rgba(255, 255, 255, .35);
            --underline: rgba(207, 58, 30, .55);
            --underline-soft: rgba(207, 58, 30, .35);
            --hairline: rgba(28, 36, 48, .06);
            --control-bg: #E7ECF4;
            --hover-ink: #E7ECF4;

            --s-1: 4px;
            --s-2: 8px;
            --s-3: 12px;
            --s-4: 16px;
            --s-5: 24px;
            --s-6: 32px;
            --s-7: 48px;
            --s-8: 64px;

            --t-fast: .12s;
            --t-base: .16s;
            --t-sheet: .28s;
            --t-spin: .7s;

            --r-lg: 22px;
            --r-md: 14px;
            --r-sm: 11px;
            --sh-1: 0 1px 2px rgba(16, 22, 32, .07), 0 1px 3px rgba(16, 22, 32, .06);
            --sh-2: 0 10px 26px rgba(16, 22, 32, .13);
            --sh-3: 0 26px 60px rgba(16, 22, 32, .25);

            --font-ui: ui-rounded, "Hiragino Maru Gothic ProN", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
            --font-read: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
            --font-display: ui-rounded, "Arial Rounded MT Bold", "Hiragino Maru Gothic ProN", "Segoe UI", system-ui, Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
            --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

            --tabbar-h: 58px;
            --shell: 1100px;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box
        }

        html {
            -webkit-text-size-adjust: 100%
        }

        html,
        body {
            margin: 0;
            padding: 0
        }

        body {
            background: var(--bg);
            color: var(--ink);
            font-family: var(--font-ui);
            font-size: 16px;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        button {
            font: inherit;
            color: inherit
        }

        input,
        textarea {
            font: inherit;
            color: inherit
        }

        h1,
        h2,
        h3 {
            margin: 0;
            letter-spacing: -.018em
        }

        p {
            margin: 0
        }

        img {
            max-width: 100%;
            display: block
        }

        [hidden] {
            display: none !important
        }

        :focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0 0 0 0);
            white-space: nowrap;
            border: 0
        }

        /* ---------------- primitives ---------------- */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--s-2);
            min-height: 44px;
            padding: 0 var(--s-5);
            border-radius: 999px;
            border: 1px solid transparent;
            background: transparent;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: .002em;
            white-space: nowrap;
            transition: background var(--t-base) ease, border-color var(--t-base) ease, color var(--t-base) ease, transform var(--t-fast) ease, box-shadow var(--t-base) ease;
        }

        .btn:active {
            transform: translateY(1px)
        }

        .btn-primary {
            background: var(--accent);
            color: var(--surface);
            box-shadow: var(--sh-1)
        }

        .btn-primary:hover {
            background: var(--accent-ink)
        }

        .btn-soft {
            background: var(--surface);
            border-color: var(--line);
            color: var(--ink)
        }

        .btn-soft:hover {
            background: var(--surface-2);
            border-color: var(--line-strong)
        }

        .btn-ghost {
            color: var(--ink-2)
        }

        .btn-ghost:hover {
            background: var(--hairline)
        }

        .btn-danger {
            background: var(--hard);
            color: var(--surface)
        }

        .btn-danger:hover {
            background: var(--hard-ink)
        }

        .danger-zone {
            margin-top: var(--s-5);
            padding-top: var(--s-4);
            border-top: 1px solid var(--line);
        }

        .danger-zone-head {
            font-family: var(--font-mono);
            font-size: 12px;
            letter-spacing: .13em;
            text-transform: uppercase;
            color: var(--muted-strong);
            margin-bottom: var(--s-3)
        }

        .danger-zone .wb-purge {
            margin-bottom: 0
        }

        .btn-danger-text {
            color: var(--hard);
            background: transparent;
            border: 1px solid transparent;
        }

        .btn-danger-text:hover {
            background: var(--hard-bg);
        }

        .btn[disabled] {
            opacity: .42;
            cursor: not-allowed;
            transform: none;
            box-shadow: none
        }

        .icon-btn {
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            border-radius: 11px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid transparent;
            background: transparent;
            cursor: pointer;
            color: var(--ink-2);
            transition: background var(--t-base) ease, color var(--t-base) ease;
        }

        .icon-btn:hover {
            background: var(--hairline);
            color: var(--ink)
        }

        .icon-btn.danger:hover {
            background: var(--hard-bg);
            color: var(--hard)
        }

        .icon-btn svg {
            width: 19px;
            height: 19px
        }

        .chip {
            display: inline-flex;
            align-items: center;
            height: 22px;
            padding: 0 var(--s-3);
            border-radius: 999px;
            font-family: var(--font-mono);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .chip-hard {
            background: var(--hard-bg);
            color: var(--hard)
        }

        .chip-ok {
            background: var(--ok-bg);
            color: var(--ok)
        }

        .chip-easy {
            background: var(--easy-bg);
            color: var(--easy)
        }

        .chip-new {
            background: var(--new-bg);
            color: var(--new)
        }

        .eyebrow {
            font-family: var(--font-mono);
            font-size: 12px;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--muted-strong);
            margin-bottom: var(--s-2);
        }

        .page-title {
            font-family: var(--font-display);
            font-size: 30px;
            line-height: 1.18;
            font-weight: 700
        }

        .page-sub {
            color: var(--muted-strong);
            font-size: 16px;
            margin-top: var(--s-2);
            max-width: 52ch
        }

        .page-head {
            margin-bottom: var(--s-5)
        }

        .segmented {
            display: inline-flex;
            flex-wrap: wrap;
            gap: var(--s-1);
            padding: var(--s-1);
            background: var(--control-bg);
            border-radius: 999px;
            max-width: 100%
        }

        .seg {
            min-height: 44px;
            padding: 0 var(--s-4);
            border: 0;
            border-radius: 999px;
            background: transparent;
            font-size: 14px;
            font-weight: 600;
            color: var(--ink-2);
            cursor: pointer;
            white-space: nowrap;
            transition: background var(--t-base) ease, color var(--t-base) ease, box-shadow var(--t-base) ease;
        }

        .seg:hover {
            color: var(--ink)
        }

        .seg.active {
            background: var(--surface);
            color: var(--ink);
            box-shadow: var(--sh-1)
        }

        .field {
            display: block;
            margin-bottom: var(--s-4)
        }

        .field-label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: var(--ink-2);
            margin-bottom: var(--s-2)
        }

        .field select,
        .field input,
        .field textarea {
            display: block;
            width: 100%;
            min-height: 46px;
            padding: var(--s-3) var(--s-4);
            border: 1px solid var(--line-strong);
            border-radius: var(--r-md);
            background: var(--surface);
            color: var(--ink);
            font-size: 16px;
            transition: border-color var(--t-base) ease, box-shadow var(--t-base) ease;
        }

        .field textarea {
            resize: vertical;
            line-height: 1.55
        }

        .field input::placeholder,
        .field textarea::placeholder {
            color: var(--muted-strong)
        }

        .field input:focus,
        .field textarea:focus {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft)
        }

        .field-err {
            color: var(--hard);
            font-size: 14px;
            margin-top: var(--s-2);
            font-weight: 600
        }

        .form-err {
            color: var(--hard);
            background: var(--hard-bg);
            border: 1px solid var(--line-warm);
            padding: var(--s-3) var(--s-4);
            border-radius: var(--r-md);
            font-size: 14px;
            font-weight: 600;
            margin: var(--s-1) 0 var(--s-4);
        }

        .hint {
            font-size: 14px;
            color: var(--muted-strong);
            margin-top: var(--s-3)
        }

        .pref-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: var(--s-3);
            margin-bottom: var(--s-4);
        }

        @media (max-width: 640px) {
            .pref-grid {
                grid-template-columns: 1fr;
            }

            .wb-sort .seg {
                padding: 0 var(--s-3);
                font-size: 14px
            }
        }

        .kw-presets {
            display: flex;
            flex-wrap: wrap;
            gap: var(--s-2);
            margin-bottom: var(--s-4);
        }

        .kw-chip[aria-pressed="true"] {
            background: var(--marker);
            color: var(--ink);
            border-color: var(--marker)
        }

        .muted {
            color: var(--muted-strong)
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            gap: var(--s-3);
            align-items: center
        }

        .row-end {
            display: flex;
            gap: var(--s-3);
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap
        }

        /* ---------------- app frame ---------------- */
        .app {
            min-height: 100dvh;
            display: flex;
            flex-direction: column
        }

        .topbar {
            position: sticky;
            top: 0;
            z-index: 40;
            background: var(--glass);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--line);
        }

        .topbar-inner {
            max-width: var(--shell);
            margin: 0 auto;
            padding: 0 var(--s-4);
            height: 56px;
            display: flex;
            align-items: center;
            gap: var(--s-3);
        }

        /* the brand doubles as the way back to reading */
        .brand {
            display: flex;
            align-items: center;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 16px;
            letter-spacing: -.01em;
            color: var(--ink);
            background: none;
            border: 0;
            padding: 0;
            margin: 0;
            cursor: pointer;
            border-radius: var(--r-sm);
            flex: 0 0 auto;
            transition: opacity var(--t-base) ease
        }

        .brand:hover {
            opacity: .82
        }

        /* the wordmark image carries the product name; keep it sharp and on the baseline */
        .brand-logo {
            display: block;
            width: auto;
            height: 40px;
            max-width: 168px;
            object-fit: contain;
            object-position: left center
        }

        .brand-sub {
            font-family: var(--font-mono);
            font-size: 12px;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--muted-strong);
            font-weight: 600
        }

        .mainnav {
            display: none
        }

        main {
            flex: 1;
            width: 100%
        }

        .shell {
            max-width: var(--shell);
            margin: 0 auto;
            padding: var(--s-5) var(--s-4) calc(var(--tabbar-h) + 30px + env(safe-area-inset-bottom))
        }

        .tabbar {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 45;
            display: flex;
            background: var(--glass-strong);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border-top: 1px solid var(--line);
            padding-bottom: env(safe-area-inset-bottom);
        }

        .tab {
            flex: 1;
            min-height: var(--tabbar-h);
            border: 0;
            background: transparent;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: var(--s-1);
            color: var(--muted-strong);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .01em;
            transition: color var(--t-base) ease;
        }

        .tab svg {
            width: 22px;
            height: 22px
        }

        .tab:hover {
            color: var(--ink-2)
        }

        .tab.active {
            color: var(--accent)
        }

        /* ---------------- login ---------------- */
        .login-wrap {
            min-height: 100dvh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--s-5) var(--s-4)
        }

        .login-card {
            width: 100%;
            max-width: 392px;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: 22px;
            box-shadow: var(--sh-2);
            padding: var(--s-6) var(--s-5) var(--s-5);
        }

        .login-brand {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: var(--s-5)
        }

        /* the wordmark image carries the product name (its alt is the
           accessible name) — no separate text title on the login card */
        .login-logo {
            display: block;
            width: auto;
            height: 88px;
            max-width: 100%;
            object-fit: contain;
            object-position: center
        }

        .login-sub {
            color: var(--muted-strong);
            font-size: 14px;
            margin: -12px 0 var(--s-5)
        }

        /* ---------------- read screen ---------------- */
        .panel,
        .reader-card,
        .add-card,
        .rail {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--r-lg);
            box-shadow: var(--sh-1);
        }

        .panel {
            padding: var(--s-5);
            max-width: 720px;
        }

        .drop {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: var(--s-3);
            padding: var(--s-7) var(--s-5);
            border: 2px dashed var(--line-strong);
            border-radius: var(--r-md);
            background: var(--surface-2);
            cursor: pointer;
            transition: border-color var(--t-base) ease, background var(--t-base) ease;
        }

        .drop:hover {
            border-color: var(--accent);
            background: var(--marker-soft)
        }

        .drop:focus-within {
            outline: 2px solid var(--accent);
            outline-offset: 2px
        }

        .drop-illus {
            color: var(--accent);
            display: block
        }

        .drop-title {
            font-size: 16px;
            font-weight: 650
        }

        .drop-sub {
            font-size: 14px;
            color: var(--muted-strong);
            max-width: 40ch
        }

        .drop-btn {
            margin-top: var(--s-2);
            pointer-events: none
        }

        .shot {
            display: flex;
            flex-direction: column;
            gap: var(--s-4)
        }

        .shot-frame {
            background: var(--surface-2);
            border: 1px solid var(--line);
            border-radius: var(--r-md);
            padding: var(--s-3);
            display: flex;
            justify-content: center;
        }

        .shot-frame img {
            max-height: 260px;
            width: auto;
            border-radius: 6px;
            box-shadow: var(--sh-1);
            background: var(--surface);
            object-fit: contain;
        }

        .shot-foot {
            display: flex;
            flex-wrap: wrap;
            gap: var(--s-3);
            align-items: center;
            justify-content: space-between
        }

        .shot-foot .muted {
            font-size: 14px
        }

        .spinner {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            flex: 0 0 16px;
            border: 2px solid var(--wash);
            border-top-color: var(--surface);
            animation: spin var(--t-spin) linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg)
            }
        }

        /* ---------------- reader ---------------- */
        .reader-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: var(--s-2);
            align-items: center;
            justify-content: space-between;
            margin-bottom: var(--s-5);
        }

        .reader-toolbar .btn-ghost {
            padding: 0 var(--s-3);
            font-size: 14px
        }

        .reader-toolbar .speed {
            flex: 1 1 100%
        }

        .speed {
            display: flex;
            align-items: center;
            gap: var(--s-3);
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--r-md);
            padding: 0 var(--s-4);
            min-height: 44px;
        }

        .speed-label {
            font-family: var(--font-mono);
            font-size: 12px;
            letter-spacing: .11em;
            text-transform: uppercase;
            color: var(--muted-strong);
            white-space: nowrap
        }

        .speed input[type=range] {
            flex: 1;
            min-width: 70px;
            accent-color: var(--accent);
            height: 24px
        }

        .speed-val {
            font-family: var(--font-mono);
            font-size: 14px;
            font-weight: 600;
            color: var(--ink);
            min-width: 38px;
            text-align: right
        }

        .reader-card {
            position: relative;
            overflow: hidden;
        }

        .reader-card::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: var(--marker);
        }

        .passage {
            padding: var(--s-6) var(--s-5) var(--s-6) var(--s-6);
            font-family: var(--font-read);
            font-size: 18px;
            line-height: 1.92;
            color: var(--ink);
            max-width: 70ch;
        }

        .passage p {
            margin: 0 0 1.05em
        }

        .passage p:last-child {
            margin-bottom: 0
        }

        .w {
            font: inherit;
            color: inherit;
            background: none;
            border: 0;
            padding: 0 var(--s-1);
            margin: 0 -1px;
            cursor: pointer;
            border-radius: 4px;
            transition: background var(--t-fast) ease, color var(--t-fast) ease;
            text-align: inherit;
        }

        .w:hover {
            background: var(--marker)
        }

        .w.saved {
            text-decoration: underline;
            text-decoration-color: var(--underline);
            text-decoration-thickness: 1.5px;
            text-underline-offset: 4px;
        }

        /* ---------------- word panel (sheet on mobile / modal on desktop) ---------------- */
        .layer {
            position: fixed;
            inset: 0;
            z-index: 70;
            display: none
        }

        .layer.open {
            display: block
        }

        .backdrop {
            position: absolute;
            inset: 0;
            background: var(--scrim);
            opacity: 0;
            transition: opacity var(--t-base) ease
        }

        .layer.open .backdrop {
            opacity: 1
        }

        .sheet {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--surface);
            border-radius: 20px 20px 0 0;
            padding: var(--s-2) var(--s-5) calc(22px + env(safe-area-inset-bottom));
            box-shadow: var(--sh-3);
            max-height: 86dvh;
            overflow: auto;
            transform: translateY(102%);
            transition: transform var(--t-sheet) cubic-bezier(.22, .72, .3, 1);
        }

        .layer.open .sheet {
            transform: translateY(0)
        }

        .sheet-handle {
            width: 42px;
            height: 4px;
            border-radius: 99px;
            background: var(--line-strong);
            margin: var(--s-2) auto var(--s-4)
        }

        .panel-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: var(--s-3)
        }

        .panel-top-actions {
            display: flex;
            align-items: center;
            gap: var(--s-3);
            flex: 0 0 auto
        }

        .panel-word {
            font-family: var(--font-display);
            font-size: 36px;
            line-height: 1.1;
            font-weight: 700;
            letter-spacing: -.01em;
            word-break: break-word
        }

        .panel-tag {
            font-family: var(--font-mono);
            font-size: 12px;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--muted-strong);
            margin-top: var(--s-2)
        }

        .panel-def {
            font-size: 16px;
            line-height: 1.6;
            color: var(--ink-2);
            margin: var(--s-4) 0 var(--s-5)
        }

        .panel-actions {
            display: flex;
            gap: var(--s-3);
            flex-wrap: wrap
        }

        .panel-actions .btn {
            flex: 1 1 auto
        }

        /* ---------- memory hook (personal mnemonic) ---------- */
        .mem-label {
            display: block;
            font-family: var(--font-mono);
            font-size: 12px;
            letter-spacing: .02em;
            text-transform: uppercase;
            color: var(--accent);
            margin: var(--s-4) 0 var(--s-2);
        }

        .mem-label-def {
            color: var(--muted-strong);
            margin-top: var(--s-3);
        }

        .panel-def-word {
            border-left: 2px solid var(--line-strong);
            padding-left: var(--s-4);
            margin-top: 0
        }

        /* ---------- memory hook: the learner's own sentence ---------- */
        .hook-scene {
            background: var(--marker-soft);
            border-left: 3px solid var(--accent);
            border-radius: var(--r-sm);
            padding: var(--s-3) var(--s-4) var(--s-4);
            margin: var(--s-2) 0 var(--s-3)
        }

        .hook-scene-text {
            font-family: var(--font-read);
            font-size: 16px;
            line-height: 1.6;
            color: var(--ink)
        }

        .hook-scene-text .kw {
            font-weight: 600;
            border-bottom: 1px solid var(--underline)
        }

        .hook-scene-empty {
            background: var(--surface-2);
            border-left-color: var(--line-strong)
        }

        .hook-scene-empty .hook-scene-text {
            font-family: var(--font-ui);
            font-size: 14px;
            color: var(--muted-strong)
        }

        .wb-hook {
            margin: var(--s-2) 0 var(--s-3)
        }

        .wb-hook .hook-scene-text {
            font-size: 15px
        }

        .card-hook {
            max-width: 34ch;
            margin: 0 auto var(--s-5)
        }

        .card-hook .hook-scene-text {
            font-size: 17px
        }

        .mem-empty {
            display: flex;
            align-items: center;
            gap: var(--s-3);
            justify-content: space-between;
            flex-wrap: wrap;
            background: var(--accent-soft);
            border: 1px dashed var(--underline-soft);
            border-radius: var(--r-md);
            padding: var(--s-3) var(--s-4);
            margin: 0 0 var(--s-4);
            font-size: 14px;
            color: var(--accent-ink);
        }

        .mem-empty .btn {
            flex: 0 0 auto
        }

        /* ---------------- wordbook ---------------- */
        .wb-bar {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--s-3);
            margin-bottom: var(--s-4)
        }

        .wb-bar .search {
            grid-column: 1 / -1
        }

        .wb-sort {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            gap: var(--s-3);
            flex-wrap: wrap
        }

        .search {
            position: relative;
            flex: 1 1 200px;
            min-width: 0
        }

        .search input {
            width: 100%;
            min-height: 46px;
            padding: 0 var(--s-4) 0 var(--s-7);
            border: 1px solid var(--line-strong);
            border-radius: var(--r-md);
            background: var(--surface);
            font-size: 16px;
        }

        .search input:focus {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft)
        }

        .search-ico {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--muted-strong);
            font-size: 18px;
            pointer-events: none
        }

        .wb-actions {
            grid-column: 1 / -1;
            display: flex;
            flex-wrap: wrap;
            gap: var(--s-2);
            align-items: center
        }

        .wb-purge {
            display: flex;
            flex-wrap: wrap;
            gap: var(--s-3);
            align-items: center;
            justify-content: space-between;
            background: var(--hard-bg);
            border: 1px solid var(--line-warm);
            border-radius: var(--r-lg);
            padding: var(--s-4) var(--s-4);
            margin-bottom: var(--s-4)
        }

        .wb-purge-text {
            display: grid;
            gap: var(--s-1);
            min-width: 240px
        }

        .wb-purge-text strong {
            font-size: 16px;
            color: var(--hard)
        }

        .wb-purge-text span {
            font-size: 14px;
            color: var(--ink-2)
        }

        .add-card {
            padding: var(--s-5);
            margin-bottom: var(--s-5);
            max-width: 640px;
        }

        .add-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: var(--s-4)
        }

        .add-head h2 {
            font-size: 18px;
            font-weight: 660
        }

        .wb-list {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--s-3)
        }

        .wb-row {
            display: flex;
            align-items: flex-start;
            gap: var(--s-3);
            justify-content: space-between;
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--r-md);
            padding: var(--s-4) var(--s-4) var(--s-4) var(--s-4);
            box-shadow: var(--sh-1);
        }

        .wb-main {
            min-width: 0;
            flex: 1
        }

        .wb-wordrow {
            display: flex;
            align-items: center;
            gap: var(--s-3);
            flex-wrap: nowrap
        }

        .wb-wordrow .speak-btn {
            margin-left: auto
        }

        .wb-word {
            font-family: var(--font-read);
            font-size: 20px;
            font-weight: 600;
            letter-spacing: -.01em;
            word-break: break-word;
            /* the word title is a button now — it opens the word panel */
            background: none;
            border: 0;
            padding: 0;
            margin: 0;
            text-align: left;
            cursor: pointer;
            color: inherit
        }

        .wb-word:hover {
            text-decoration: underline dotted var(--underline-soft)
        }

        .wb-word:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 3px;
            border-radius: 3px
        }

        .wb-def {
            color: var(--ink-2);
            font-size: 14px;
            line-height: 1.5;
            margin-top: 0;
            max-width: 60ch;
            overflow-wrap: anywhere
        }

        .wb-meta {
            display: flex;
            align-items: center;
            gap: var(--s-2);
            justify-content: space-between;
            font-family: var(--font-mono);
            font-size: 12px;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--muted-strong);
            margin-top: var(--s-3);
        }

        .wb-meta .icon-btn {
            width: 44px;
            height: 44px;
            flex: 0 0 44px
        }

        .speak-btn {
            font-size: 16px;
            line-height: 1
        }

        .speak-btn.is-speaking {
            background: var(--marker);
            color: var(--ink)
        }

        .btn-mini {
            min-height: 40px;
            padding: 0 var(--s-3);
            font-size: 14px;
            border-radius: var(--r-sm);
            font-weight: 600
        }

        .hook-regen {
            margin-top: var(--s-3);
            align-self: flex-start
        }

        .story-btn {
            margin-top: var(--s-3);
            display: flex;
            width: fit-content;
            margin-left: auto
        }

        /* ---------- background story (Tavily) ----------
           a neutral paper slip: source links stay grey, the accent stays with actions */
        .culture-scene {
            background: var(--surface-2);
            border-left: 2px solid var(--line-strong);
            border-radius: var(--r-sm);
            padding: var(--s-3) var(--s-4) var(--s-4);
            margin: var(--s-2) 0 var(--s-3)
        }

        .culture-text {
            font-family: var(--font-read);
            font-size: 15px;
            line-height: 1.6;
            color: var(--ink);
            margin: 0
        }

        .culture-scene.culture-empty {
            background: transparent;
            border: 1px dashed var(--line-strong)
        }

        .culture-scene.culture-empty .culture-text {
            font-family: var(--font-ui);
            font-size: 14px;
            color: var(--muted-strong)
        }

        .culture-sources {
            margin: var(--s-3) 0 0;
            display: flex;
            flex-wrap: wrap;
            gap: var(--s-2) var(--s-4);
            font-family: var(--font-mono);
            font-size: 12px;
            color: var(--muted-strong)
        }

        .culture-sources a {
            color: var(--muted-strong);
            text-decoration: none;
            border-bottom: 1px solid var(--muted-strong)
        }

        .culture-sources a:hover,
        .culture-sources a:focus-visible {
            color: var(--ink-2);
            border-bottom-color: var(--ink-2)
        }

        .culture-lookup {
            margin-top: var(--s-3);
            align-self: flex-start
        }

        .wb-confirm {
            display: flex;
            flex-wrap: wrap;
            gap: var(--s-3);
            align-items: center;
            justify-content: space-between;
            width: 100%
        }

        .wb-confirm span {
            font-size: 14px;
            color: var(--ink-2)
        }

        @media (hover:hover) {
            .wb-row:hover {
                border-color: var(--line-strong);
                box-shadow: var(--sh-2)
            }

            .card:hover {
                border-color: var(--line-strong)
            }
        }

        .wb-empty,
        .wb-nomatch {
            background: var(--surface);
            border: 1px dashed var(--line-strong);
            border-radius: var(--r-lg);
            padding: var(--s-7) var(--s-5);
            text-align: center;
            color: var(--muted-strong);
        }

        .wb-empty h3,
        .wb-nomatch h3 {
            color: var(--ink);
            font-size: 18px;
            margin-bottom: var(--s-2)
        }

        .wb-empty p,
        .wb-nomatch p {
            font-size: 14px;
            margin-bottom: var(--s-4)
        }

        /* ---------------- review ---------------- */
        .stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--s-3);
            margin-bottom: var(--s-5)
        }

        .stat {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--r-md);
            padding: var(--s-3) var(--s-3);
            box-shadow: var(--sh-1)
        }

        .stat-wide {
            grid-column: 1 / -1
        }

        .stat-num {
            display: block;
            font-family: var(--font-display);
            font-size: 24px;
            font-weight: 700;
            letter-spacing: -.02em;
            line-height: 1.1
        }

        .stat-label {
            display: block;
            font-family: var(--font-mono);
            font-size: 12px;
            letter-spacing: .09em;
            text-transform: uppercase;
            color: var(--muted-strong);
            margin-top: var(--s-2);
            line-height: 1.4
        }

        .dist {
            display: flex;
            flex-wrap: wrap;
            gap: var(--s-2);
            margin-top: var(--s-2)
        }

        .stat .chip {
            height: 20px;
            padding: 0 var(--s-2);
            font-size: 12px
        }

        .review-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--s-4);
            align-items: start
        }

        .review-stage {
            order: 1
        }

        .rail {
            order: 2;
            padding: var(--s-4)
        }

        .rail-label {
            display: block;
            font-family: var(--font-mono);
            font-size: 12px;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--muted-strong);
            margin-bottom: var(--s-3)
        }

        .rail-block+.rail-block {
            margin-top: var(--s-5)
        }

        .seg-stack {
            display: grid;
            grid-template-columns: 1fr 1fr;
            width: 100%
        }

        /* contingency: stacked rail segments stay rounded-rect, not pills */
        .seg-stack .seg {
            padding: 0 var(--s-3);
            font-size: 14px;
            border-radius: var(--r-sm)
        }

        .seg-stack {
            border-radius: var(--r-sm)
        }

        .rail .btn {
            width: 100%;
            margin-top: var(--s-5)
        }

        .card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--r-lg);
            box-shadow: var(--sh-2);
            padding: var(--s-5) var(--s-5);
            min-height: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .card-top {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: var(--s-4)
        }

        .card-pos {
            font-family: var(--font-mono);
            font-size: 12px;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--muted-strong)
        }

        .card-word {
            font-family: var(--font-display);
            font-size: 36px;
            line-height: 1.12;
            font-weight: 700;
            letter-spacing: -.015em;
            word-break: break-word;
            margin: var(--s-2) 0 var(--s-5)
        }

        .card-def {
            font-size: 18px;
            line-height: 1.55;
            color: var(--ink-2);
            max-width: 36ch;
            margin-bottom: var(--s-5)
        }

        .card-actions {
            display: flex;
            gap: var(--s-3);
            flex-wrap: wrap;
            justify-content: center;
            width: 100%
        }

        .card-actions .btn {
            flex: 1 1 150px
        }

        .card-foot {
            width: 100%;
            margin-top: var(--s-4)
        }

        .card-foot .btn {
            width: 100%
        }

        .rate {
            display: flex;
            gap: var(--s-3);
            width: 100%;
            max-width: 420px
        }

        .rate .btn {
            flex: 1 1 0;
            min-width: 0
        }

        .rate-hard {
            background: var(--hard-bg);
            color: var(--hard);
            border: 1px solid var(--line-warm)
        }

        .rate-hard:hover {
            background: var(--hard-bg-hover)
        }

        .rate-ok {
            background: var(--ok-bg);
            color: var(--ok);
            border: 1px solid var(--rate-ok-line)
        }

        .rate-ok:hover {
            background: var(--rate-ok-line-hover)
        }

        .rate-easy {
            background: var(--easy-bg);
            color: var(--easy);
            border: 1px solid var(--rate-easy-line)
        }

        .rate-easy:hover {
            background: var(--rate-easy-line-hover)
        }

        .card-done h2 {
            font-size: 20px;
            margin-bottom: var(--s-2)
        }

        .card-sub {
            color: var(--muted-strong);
            font-size: 14px;
            max-width: 40ch;
            margin-bottom: var(--s-5)
        }

        .done-mark {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: var(--easy-bg);
            color: var(--easy);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: var(--s-4);
        }

        /* ---------------- toast ---------------- */
        .toast {
            position: fixed;
            left: 50%;
            bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom));
            transform: translate(-50%, 14px);
            z-index: 90;
            max-width: calc(100vw - 32px);
            background: var(--ink);
            color: var(--surface-3);
            padding: var(--s-3) var(--s-5);
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            box-shadow: var(--sh-2);
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--t-base) ease, transform var(--t-base) ease;
            text-align: center;
        }

        .toast.show {
            opacity: 1;
            transform: translate(-50%, 0)
        }

        @media (max-width:767px) {
            body.modal .toast {
                bottom: auto;
                top: calc(12px + env(safe-area-inset-top));
                transform: translate(-50%, -14px);
            }

            body.modal .toast.show {
                transform: translate(-50%, 0)
            }
        }

        /* ---------------- celebration (practice flashcard) ---------------- */
        /* The confetti canvas and the one-shot explain line are created and
           removed by public/particle.js; they must never eat pointer events
           or leave a scrollbar behind. */
        .celebrate-canvas {
            position: fixed;
            inset: 0;
            z-index: 88;
            pointer-events: none
        }

        .celebrate-note {
            position: fixed;
            left: 50%;
            top: calc(96px + env(safe-area-inset-top));
            transform: translate(-50%, -8px);
            width: max-content;
            z-index: 89;
            max-width: min(360px, calc(100vw - 32px));
            background: var(--marker-soft);
            color: var(--ok);
            border: 1px solid var(--marker-line);
            border-radius: 999px;
            padding: var(--s-2) var(--s-4);
            font-size: 13px;
            font-weight: 600;
            line-height: 1.4;
            box-shadow: var(--sh-1);
            text-align: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--t-sheet) ease, transform var(--t-sheet) ease
        }

        .celebrate-note.show {
            opacity: 1;
            transform: translate(-50%, 0)
        }

        /* ============================================================
   Desktop / tablet (>=768px): intentional wide layout
   ============================================================ */
        @media (min-width:768px) {
            .topbar-inner {
                height: 64px;
                padding: 0 var(--s-5);
                gap: var(--s-5)
            }

            .mainnav {
                display: flex;
                align-items: center;
                gap: var(--s-1);
                margin-left: var(--s-4)
            }

            .navlink {
                min-height: 40px;
                padding: 0 var(--s-4);
                border: 0;
                border-radius: 10px;
                background: transparent;
                cursor: pointer;
                font-size: 14px;
                font-weight: 600;
                color: var(--ink-2);
                transition: background var(--t-base) ease, color var(--t-base) ease;
            }

            .navlink:hover {
                background: var(--hairline);
                color: var(--ink)
            }

            .navlink.active {
                background: var(--accent-soft);
                color: var(--accent-ink)
            }

            .tabbar {
                display: none
            }

            .shell {
                padding: var(--s-6) var(--s-5) var(--s-8)
            }

            .login-card {
                padding: var(--s-7) var(--s-6) var(--s-6)
            }

            .page-title {
                font-size: 30px
            }

            .panel {
                padding: var(--s-5)
            }

            .reader-toolbar {
                max-width: 800px;
                margin-left: auto;
                margin-right: auto;
                flex-wrap: nowrap;
                gap: var(--s-3)
            }

            .reader-toolbar .speed {
                flex: 0 0 236px
            }

            .reader-card {
                max-width: 800px;
                margin-left: auto;
                margin-right: auto
            }

            .passage {
                padding: var(--s-7) var(--s-7) var(--s-7) var(--s-7);
                font-size: 20px;
                line-height: 1.95
            }

            .reader-card::before {
                width: 6px
            }

            .wb-list {
                grid-template-columns: repeat(2, minmax(0, 1fr))
            }

            .wb-row {
                padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5)
            }

            .add-card {
                padding: var(--s-5)
            }

            .wb-bar {
                display: flex;
                flex-wrap: wrap;
                gap: var(--s-3);
                align-items: center;
                margin-bottom: var(--s-5)
            }

            .wb-bar .search {
                flex: 1 1 240px;
                grid-column: auto
            }

            .stats {
                grid-template-columns: 196px 196px 1fr
            }

            .stat-wide {
                grid-column: auto
            }

            .stat {
                padding: var(--s-4) var(--s-4)
            }

            .stat-num {
                font-size: 24px
            }

            .stat-label {
                font-size: 12px;
                letter-spacing: .11em
            }

            .stat .chip {
                height: 22px;
                padding: 0 var(--s-3);
                font-size: 12px
            }

            .review-grid {
                grid-template-columns: 264px minmax(0, 1fr);
                gap: var(--s-5)
            }

            .seg-stack {
                grid-template-columns: 1fr
            }

            .rail {
                order: 1;
                position: sticky;
                top: 84px
            }

            .review-stage {
                order: 2
            }

            .review-stage .card {
                max-width: 620px;
                margin-left: auto;
                margin-right: auto
            }

            .card {
                min-height: 420px;
                padding: var(--s-7) var(--s-6)
            }

            .card-word {
                font-size: 36px
            }

            .sheet {
                left: 50%;
                top: 50%;
                right: auto;
                bottom: auto;
                width: min(452px, calc(100vw - 56px));
                border-radius: 18px;
                padding: var(--s-5) var(--s-6) var(--s-6);
                max-height: 84dvh;
                transform: translate(-50%, -44%) scale(.97);
                opacity: 0;
                transition: transform var(--t-base) ease, opacity var(--t-base) ease;
            }

            .layer.open .sheet {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1
            }

            .sheet-handle {
                display: none
            }

            .panel-word {
                font-size: 36px
            }

            .toast {
                left: auto;
                right: 28px;
                bottom: 28px;
                transform: translateY(14px)
            }

            .toast.show {
                transform: translateY(0)
            }
        }

        @media (min-width:1180px) {
            .wb-list {
                grid-template-columns: repeat(3, minmax(0, 1fr))
            }

            .review-grid {
                grid-template-columns: 300px minmax(0, 1fr)
            }
        }

        @media (prefers-reduced-motion:reduce) {

            *,
            *::before,
            *::after {
                animation-duration: .001ms !important;
                animation: none !important;
                transition-duration: .001ms !important
            }

            .spinner {
                animation: none !important;
                border-color: var(--wash);
                border-top-color: var(--surface)
            }
        }