*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --bg: #101214;
            --surface: #191d1d;
            --surface-2: #202524;
            --paper: #f2ead9;
            --paper-2: #e8deca;
            --ink: #171817;
            --ink-soft: #45413b;
            --text: #f6f0e5;
            --text-dim: rgba(246, 240, 229, 0.55);
            --line: rgba(245, 237, 220, 0.12);
            --line-strong: rgba(245, 237, 220, 0.22);
            --accent: #6fd3bf;
            --accent-strong: #8ce7d4;
            --again: #ff7c6e;
            --good: #6fd3bf;
            --amber: #e6b85d;
            --violet: #b7a6ff;
            --safe-top: env(safe-area-inset-top, 0px);
            --safe-bottom: env(safe-area-inset-bottom, 0px);
            --safe-left: env(safe-area-inset-left, 0px);
            --safe-right: env(safe-area-inset-right, 0px);
        }

        body {
            background:
                linear-gradient(90deg, rgba(245, 237, 220, 0.035) 1px, transparent 1px),
                linear-gradient(0deg, rgba(245, 237, 220, 0.025) 1px, transparent 1px),
                linear-gradient(145deg, rgba(111, 211, 191, 0.09), transparent 38%, rgba(230, 184, 93, 0.06) 72%, rgba(255, 124, 110, 0.05)),
                var(--bg);
            background-size: 44px 44px, 44px 44px, auto, auto;
            color: var(--text);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            min-height: 100vh;
            min-height: 100dvh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            -webkit-user-select: none;
            user-select: none;
            padding-top: var(--safe-top);
            padding-bottom: var(--safe-bottom);
        }

        /* Header */
        .header {
            position: sticky;
            top: 0;
            z-index: 25;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 12px;
            min-height: 58px;
            padding: 8px max(14px, calc(var(--safe-right) + 12px)) 8px max(14px, calc(var(--safe-left) + 12px));
            background:
                linear-gradient(180deg, rgba(16, 18, 20, 0.96), rgba(16, 18, 20, 0.88)),
                var(--bg);
            border-bottom: 1px solid var(--line);
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
            backdrop-filter: blur(18px);
            flex-shrink: 0;
        }
        .header-leading {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .header-title {
            display: grid;
            gap: 1px;
            min-width: 82px;
        }
        .header-title span {
            color: var(--accent);
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0;
            text-transform: uppercase;
        }
        .header-title strong {
            color: #fff8ed;
            font-size: 19px;
            font-weight: 820;
            line-height: 1.05;
            letter-spacing: 0;
        }
        .header-stats {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-width: 0;
            font-size: 13px;
        }
        .header-stats span { color: var(--text-dim); }
        #headerStats {
            min-width: 0;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: rgba(246, 240, 229, 0.68);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0;
        }
        .lane-chip {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            flex-shrink: 0;
            max-width: min(190px, 48vw);
            overflow: hidden;
            text-overflow: ellipsis;
            border: 1px solid rgba(111, 211, 191, 0.42);
            border-radius: 7px;
            color: var(--accent-strong);
            background: rgba(111, 211, 191, 0.1);
            padding: 3px 9px;
            font-size: 11px;
            font-weight: 700;
            white-space: nowrap;
            text-transform: uppercase;
        }
        .lane-chip[hidden] { display: none; }
        .header-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
            flex-shrink: 0;
            min-width: 0;
        }
        .account-chip {
            font-size: 12px;
            color: var(--text-dim);
            max-width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .account-chip.authenticated {
            color: var(--accent);
        }
        .header-btn {
            border: 1px solid rgba(245, 237, 220, 0.12);
            background: transparent;
            color: var(--text-dim);
            border-radius: 7px;
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }
        .header-btn:active { opacity: 0.7; }
        .header-back-btn,
        .header-menu-btn {
            display: none;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(245, 237, 220, 0.16);
            background: rgba(245, 237, 220, 0.035);
            color: var(--text);
            border-radius: 9px;
            min-height: 38px;
            font-size: 13px;
            font-weight: 760;
            cursor: pointer;
        }
        .header-back-btn {
            width: 38px;
            padding: 0;
            font-size: 23px;
            line-height: 1;
        }
        .header-menu-btn {
            padding: 0 11px;
        }
        .header-back-btn.visible,
        .header-menu-btn.visible {
            display: inline-flex;
        }
        .header-menu-btn.active {
            border-color: rgba(111, 211, 191, 0.54);
            background: rgba(111, 211, 191, 0.12);
            color: var(--accent-strong);
        }
        .header-back-btn:active,
        .header-menu-btn:active {
            opacity: 0.72;
        }
        .header-back-btn:disabled,
        .header-menu-btn:disabled {
            opacity: 0.42;
            cursor: default;
        }
        .conn-dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--accent);
            transition: background 0.3s;
        }
        .conn-dot.offline { background: var(--again); }
        .conn-dot.syncing { background: var(--amber); animation: pulse 1s infinite; }
        @keyframes pulse { 50% { opacity: 0.5; } }

        /* Main content */
        .screen {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 24px max(16px, calc(var(--safe-right) + 14px)) 24px max(16px, calc(var(--safe-left) + 14px));
            display: none;
            min-height: 0;
        }
        .screen.active { display: flex; }

        .app-menu-backdrop {
            position: fixed;
            inset: calc(var(--safe-top) + 58px) 0 0;
            z-index: 40;
            background: rgba(0, 0, 0, 0.52);
            backdrop-filter: blur(2px);
        }
        .app-menu-backdrop[hidden],
        .app-menu[hidden],
        .app-menu-action[hidden] {
            display: none;
        }
        .app-menu {
            position: fixed;
            top: calc(var(--safe-top) + 66px);
            right: max(12px, calc(var(--safe-right) + 10px));
            z-index: 41;
            display: grid;
            gap: 8px;
            width: min(320px, calc(100vw - 24px - var(--safe-left) - var(--safe-right)));
            max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 80px);
            overflow-y: auto;
            padding: 14px;
            border: 1px solid var(--line-strong);
            border-radius: 14px;
            background:
                linear-gradient(145deg, rgba(111, 211, 191, 0.07), transparent 48%),
                rgba(20, 23, 23, 0.985);
            box-shadow: 0 22px 56px rgba(0, 0, 0, 0.54);
        }
        .app-menu-heading {
            display: grid;
            gap: 3px;
            padding: 2px 4px 10px;
            border-bottom: 1px solid var(--line);
        }
        .app-menu-heading strong {
            color: #fff8ed;
            font-size: 17px;
        }
        .app-menu-heading span {
            color: var(--text-dim);
            font-size: 12px;
            line-height: 1.35;
        }
        .app-menu-action {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 10px;
            width: 100%;
            min-height: 48px;
            padding: 9px 11px;
            border: 1px solid rgba(245, 237, 220, 0.11);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.025);
            color: var(--text);
            text-align: left;
            cursor: pointer;
        }
        .app-menu-action:active {
            border-color: rgba(111, 211, 191, 0.42);
            background: rgba(111, 211, 191, 0.1);
        }
        .app-menu-action:disabled {
            opacity: 0.42;
            cursor: default;
        }
        .app-menu-action-copy {
            display: grid;
            gap: 2px;
            min-width: 0;
        }
        .app-menu-action-copy strong {
            font-size: 14px;
        }
        .app-menu-action-copy span {
            color: var(--text-dim);
            font-size: 11px;
            line-height: 1.3;
        }
        .app-menu-action-icon {
            color: var(--accent-strong);
            font-size: 18px;
        }
        .app-menu-signout {
            color: var(--again);
        }

        /* Sync screen */
        #syncScreen h1 { font-size: 28px; margin-bottom: 8px; color: var(--accent); }
        #syncScreen .subtitle { color: var(--text-dim); margin-bottom: 18px; font-size: 14px; }

        .sync-btn {
            background: var(--accent);
            color: var(--bg);
            border: none;
            border-radius: 12px;
            padding: 16px 48px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            min-height: 56px;
            transition: opacity 0.2s;
        }
        .sync-btn:active { opacity: 0.7; }
        .sync-btn:disabled { opacity: 0.4; cursor: default; }

        .sync-status {
            margin-top: 20px;
            font-size: 14px;
            color: var(--text-dim);
            text-align: center;
            min-height: 20px;
        }
        .sync-progress {
            margin-top: 12px;
            width: 200px;
            height: 4px;
            background: #2a2a3a;
            border-radius: 2px;
            overflow: hidden;
        }
        .sync-progress-bar {
            height: 100%;
            background: var(--accent);
            width: 0%;
            transition: width 0.3s;
        }
        .offline-info {
            margin-top: 16px;
            font-size: 13px;
            color: var(--text-dim);
        }
        .auth-panel {
            width: 100%;
            max-width: 380px;
            background: transparent;
            border: 0;
            border-top: 1px solid var(--line);
            border-radius: 0;
            padding: 20px 0 0;
            margin-bottom: 18px;
        }
        .auth-title {
            color: #fff8ed;
            font-size: 18px;
            font-weight: 700;
            line-height: 1.25;
            margin-bottom: 5px;
        }
        .auth-copy {
            font-size: 13px;
            line-height: 1.45;
            color: var(--text-dim);
            margin-bottom: 18px;
        }
        .auth-hint {
            font-size: 12px;
            line-height: 1.4;
            color: var(--text-dim);
            margin-top: 14px;
            text-align: center;
        }
        .auth-hint a {
            color: var(--accent-strong);
            text-decoration-color: rgba(140, 231, 212, 0.45);
            text-underline-offset: 2px;
        }
        .auth-form {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .auth-field {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }
        .auth-field span {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-dim);
        }
        .auth-field input {
            width: 100%;
            min-height: 44px;
            border: 1px solid rgba(245, 237, 220, 0.2);
            border-radius: 5px;
            background: var(--surface);
            color: var(--text);
            padding: 10px 12px;
            font-size: 16px;
        }
        .auth-field input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 2px rgba(111, 211, 191, 0.12);
        }
        .auth-submit {
            width: 100%;
            min-height: 46px;
            margin-top: 2px;
            border-radius: 6px;
            padding: 12px 18px;
            font-size: 15px;
            font-weight: 700;
        }
        .secondary-btn {
            width: 100%;
            margin-top: 10px;
            border: 1px solid rgba(245, 237, 220, 0.14);
            background: transparent;
            color: var(--text);
            border-radius: 7px;
            padding: 14px 16px;
            font-size: 16px;
            cursor: pointer;
            min-height: 52px;
        }
        .secondary-btn:active { opacity: 0.75; }
        .sync-status.error {
            color: #ff8f87;
        }
        .deck-panel {
            width: 100%;
            max-width: 540px;
            background: transparent;
            border: 0;
            border-radius: 0;
            padding: 0;
            margin-bottom: 18px;
        }
        .deck-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 10px;
        }
        .deck-panel-title {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0;
            text-transform: uppercase;
            color: var(--text-dim);
        }
        .deck-panel-meta {
            font-size: 12px;
            color: var(--text-dim);
            text-align: right;
        }
        .deck-options {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .deck-pill {
            border: 1px solid transparent;
            background: rgba(245, 237, 220, 0.045);
            color: rgba(246, 240, 229, 0.72);
            border-radius: 7px;
            padding: 8px 11px;
            font-size: 13px;
            font-weight: 720;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 36px;
        }
        .deck-pill.active {
            background: rgba(111, 211, 191, 0.1);
            border-color: rgba(111, 211, 191, 0.34);
            color: #dffcf4;
        }
        .deck-pill:disabled {
            cursor: default;
            opacity: 0.85;
        }
        .deck-pill-count {
            font-size: 11px;
            opacity: 0.7;
        }

        /* Review screen */
        #reviewScreen {
            justify-content: flex-start;
            padding-top: clamp(18px, 5vh, 42px);
            padding-bottom: max(18px, calc(var(--safe-bottom) + 16px));
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .review-stage {
            width: min(100%, 760px);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }
        .card {
            --text-primary: var(--ink);
            --text-secondary: var(--ink-soft);
            --text-muted: #71695e;
            --text-dim-card: #938878;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
                linear-gradient(90deg, rgba(111, 211, 191, 0.13) 0 6px, transparent 6px),
                var(--paper);
            border: 1px solid rgba(44, 38, 30, 0.28);
            border-radius: 8px;
            box-shadow:
                0 30px 80px rgba(0, 0, 0, 0.36),
                0 2px 0 rgba(255, 255, 255, 0.32) inset;
            color: var(--ink);
            padding: clamp(28px, 6vw, 46px) clamp(22px, 6vw, 52px);
            width: 100%;
            max-width: 760px;
            min-height: clamp(300px, 50vh, 430px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            flex: 0 0 auto;
            max-height: none;
            overflow: visible;
            -webkit-overflow-scrolling: touch;
        }
        .card-source {
            font-size: 12px;
            color: #776e61;
            margin-bottom: 14px;
            max-width: 100%;
            padding: 5px 9px;
            border: 1px solid rgba(44, 38, 30, 0.16);
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.38);
            font-weight: 760;
            overflow-wrap: anywhere;
        }
        .card-sentence {
            font-family: 'Noto Serif KR', 'Hahmlet', 'Malgun Gothic', 'Apple SD Gothic Neo', serif;
            font-size: clamp(30px, 8vw, 48px);
            font-weight: 700;
            line-height: 1.42;
            margin-bottom: 14px;
            word-break: keep-all;
            text-wrap: balance;
            overflow-wrap: anywhere;
        }
        .card-sentence .srs-v2-target-span {
            background: rgba(192, 138, 40, 0.13);
            border-bottom: 3px solid rgba(147, 92, 14, 0.82);
            border-radius: 3px 3px 1px 1px;
            box-decoration-break: clone;
            -webkit-box-decoration-break: clone;
            padding: 0 0.04em 0.02em;
        }
        .card-prompt {
            display: none;
            max-width: 620px;
            margin: -2px 0 14px;
            color: #685f52;
            font-size: clamp(13px, 3.5vw, 16px);
            font-weight: 680;
            line-height: 1.35;
        }
        .card-prompt.visible {
            display: block;
        }
        .card-answer {
            width: 100%;
            border-top: 1px solid rgba(44, 38, 30, 0.18);
            padding-top: 22px;
            margin-top: 10px;
        }
        .card-target {
            display: none;
            margin-bottom: 12px;
            font-family: 'Noto Serif KR', 'Hahmlet', 'Malgun Gothic', 'Apple SD Gothic Neo', serif;
            font-size: clamp(28px, 7vw, 40px);
            font-weight: 780;
            line-height: 1.28;
            color: var(--ink);
            overflow-wrap: anywhere;
            text-wrap: balance;
        }
        .card-target.visible {
            display: block;
        }

        /* Source-attached semantic-pair display */
        .pairs-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 4px 12px;
            margin-bottom: 12px;
        }
        .word-pair {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }
        .word-pair .ko {
            font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
            font-size: 16px;
            color: var(--ink);
        }
        .word-pair .en {
            font-size: 13px;
            color: #0d7b69;
            font-weight: 660;
        }

        /* Flat gloss fallback */
        .card-gloss {
            font-size: 23px;
            color: #0d7b69;
            margin-bottom: 8px;
            line-height: 1.6;
            font-weight: 760;
        }
        .card-contextual {
            font-size: 17px;
            color: #5d554b;
            font-style: normal;
            line-height: 1.5;
        }
        .card-image {
            display: block;
            max-width: 100%;
            max-height: 220px;
            margin: 16px auto 0;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 8px;
            object-fit: contain;
            background: #050507;
        }
        .card-image[hidden] {
            display: none;
        }

        /* Action buttons */
        .actions {
            width: 100%;
            max-width: 760px;
            padding: 0;
            flex-shrink: 0;
        }

        .show-btn {
            display: block;
            width: min(100%, 520px);
            margin: 0 auto;
            background: var(--paper);
            color: #151615;
            border: 1px solid rgba(255, 255, 255, 0.55);
            border-radius: 7px;
            padding: 15px 40px;
            font-size: 16px;
            font-weight: 760;
            cursor: pointer;
            min-height: 52px;
            box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
            transition: background 0.2s, transform 0.15s;
        }
        .show-btn:active { background: #fff7e9; transform: scale(0.99); }

        .rating-btns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            width: min(100%, 520px);
            margin: 0 auto;
        }
        .rate-btn {
            border: 1px solid rgba(245, 237, 220, 0.12);
            border-radius: 8px;
            padding: 14px 16px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            color: #fff8ed;
            min-height: 74px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            background: rgba(245, 237, 220, 0.055);
            transition: background 0.2s, border-color 0.2s, opacity 0.2s;
        }
        .rate-btn:active { opacity: 0.7; }
        .rate-btn.again { border-color: rgba(255, 124, 110, 0.28); }
        .rate-btn.good { border-color: rgba(111, 211, 191, 0.28); }
        .rate-btn.again:active { background: rgba(255, 124, 110, 0.13); }
        .rate-btn.good:active { background: rgba(111, 211, 191, 0.13); }
        .rate-btn .interval { font-size: 11px; font-weight: 400; opacity: 0.7; }

        .srs-v2-feedback {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            margin-top: 8px;
        }
        .srs-v2-feedback-btn {
            padding: 9px 8px;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-dim);
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(245, 237, 220, 0.12);
            border-radius: 7px;
            cursor: pointer;
            min-height: 38px;
        }
        .srs-v2-feedback-btn:disabled {
            opacity: 0.45;
            cursor: default;
        }
        .srs-v2-feedback-btn:active:not(:disabled) {
            background: rgba(255, 255, 255, 0.08);
        }

        .srs-v2-personal-flag-btn {
            display: none;
            align-items: center;
            justify-content: center;
            min-height: 28px;
            padding: 5px 8px;
            font-size: 11px;
            font-weight: 650;
            line-height: 1;
            color: var(--text-dim);
            opacity: 0.55;
            background: rgba(255, 255, 255, 0.018);
            border: 1px solid rgba(245, 237, 220, 0.1);
            border-radius: 6px;
            cursor: pointer;
        }
        .srs-v2-personal-flag-btn.visible {
            display: inline-flex;
        }
        .srs-v2-personal-flag-btn:disabled {
            cursor: default;
            opacity: 0.32;
        }
        .srs-v2-personal-flag-btn:active:not(:disabled) {
            background: rgba(255, 255, 255, 0.07);
        }

        .btn-row {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 10px;
        }

        .suspend-btn {
            padding: 8px 14px;
            font-size: 13px;
            color: var(--text-dim);
            background: transparent;
            border: 1px solid rgba(245, 237, 220, 0.11);
            border-radius: 7px;
            cursor: pointer;
        }
        .suspend-btn:active { opacity: 1; }

        .private-deck-curation-btn {
            padding: 8px 14px;
            font-size: 13px;
            color: #d4b978;
            background: rgba(178, 126, 34, 0.08);
            border: 1px solid rgba(212, 185, 120, 0.28);
            border-radius: 7px;
            cursor: pointer;
        }
        .private-deck-curation-btn.remove {
            color: #df8e86;
            background: rgba(163, 55, 46, 0.08);
            border-color: rgba(223, 142, 134, 0.3);
        }
        .private-deck-curation-btn:disabled {
            cursor: default;
            opacity: 0.4;
        }
        .private-deck-curation-btn:active:not(:disabled) {
            background: rgba(255, 255, 255, 0.07);
        }

        .replay-btn {
            padding: 8px 14px;
            font-size: 13px;
            color: var(--text-dim);
            background: transparent;
            border: 1px solid rgba(245, 237, 220, 0.11);
            border-radius: 7px;
            cursor: pointer;
        }
        .replay-btn:active { opacity: 1; }

        .review-tools-btn {
            padding: 8px 14px;
            font-size: 13px;
            color: var(--text-dim);
            background: transparent;
            border: 1px solid rgba(245, 237, 220, 0.11);
            border-radius: 7px;
            cursor: pointer;
        }
        .review-tools-btn:active { opacity: 1; }
        .review-tools-btn.active {
            opacity: 1;
            color: var(--text);
            border-color: rgba(111, 211, 191, 0.34);
            background: rgba(111, 211, 191, 0.1);
        }

        .review-action-flash {
            position: fixed;
            top: max(58px, calc(var(--safe-top) + 54px));
            left: 50%;
            z-index: 45;
            min-width: 96px;
            max-width: min(260px, calc(100vw - 32px));
            padding: 10px 14px;
            border-radius: 8px;
            color: white;
            background: rgba(46, 46, 58, 0.96);
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
            font-size: 14px;
            font-weight: 800;
            letter-spacing: 0;
            text-align: center;
            pointer-events: none;
            opacity: 0;
            transform: translate(-50%, -8px) scale(0.98);
            transition: opacity 0.12s ease, transform 0.12s ease;
        }

        .review-action-flash.visible {
            opacity: 1;
            transform: translate(-50%, 0) scale(1);
        }

        .review-action-flash.pass { background: rgba(39, 174, 96, 0.96); }
        .review-action-flash.fail { background: rgba(231, 76, 60, 0.96); }
        .review-action-flash.reveal { background: rgba(0, 125, 255, 0.96); }
        .review-action-flash.replay { background: rgba(0, 212, 170, 0.94); color: #061815; }
        .review-action-flash.skip { background: rgba(230, 126, 34, 0.96); }
        .review-action-flash.undo,
        .review-action-flash.feedback { background: rgba(108, 92, 231, 0.96); }

        .session-info {
            width: min(100%, 520px);
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 8px 14px;
            text-align: center;
            font-size: 13px;
            color: var(--text-dim);
            margin-bottom: 0;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }

        .review-audio-status,
        .review-save-error {
            margin: 8px auto 0;
            width: min(100%, 520px);
            color: #ffb6a8;
            font-size: 13px;
            font-weight: 600;
            text-align: center;
        }
        .review-audio-status[hidden],
        .review-save-error[hidden] { display: none; }

        .session-progress {
            display: grid;
            gap: 7px;
            width: min(100%, 520px);
            color: rgba(246, 240, 229, 0.55);
            font-size: 12px;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            text-align: center;
        }

        .session-progress-copy {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 4px;
        }

        .session-progress-track {
            height: 6px;
            overflow: hidden;
            border-radius: 4px;
            background: rgba(245, 237, 220, 0.08);
        }

        .session-progress-track span {
            display: block;
            width: var(--session-progress, 0%);
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--accent), var(--amber), var(--again));
            transition: width 0.2s ease;
        }

        /* Done screen */
        #doneScreen h2 { font-size: 24px; margin-bottom: 12px; }
        #doneScreen .done-stats { color: var(--text-dim); margin-bottom: 24px; font-size: 15px; }
        .pending-notice { color: #e67e22; font-size: 13px; margin-top: 12px; }
        #reviewConflictsDialog {
            width: min(560px, 92vw);
            max-height: 85dvh;
            overflow-y: auto;
            padding: 20px;
            border: 1px solid var(--text-dim);
            border-radius: 8px;
            background: var(--bg);
            color: var(--text);
        }
        #reviewConflictsDialog::backdrop { background: rgba(0, 0, 0, 0.6); }
        #reviewConflictsList > div { margin: 16px 0; }

        .review-tool-dock {
            position: fixed;
            right: max(14px, calc(var(--safe-right) + 10px));
            bottom: max(14px, calc(var(--safe-bottom) + 10px));
            z-index: 30;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
            min-width: 132px;
            padding: 10px;
            border: 1px solid rgba(245, 237, 220, 0.12);
            border-radius: 8px;
            background: rgba(14, 16, 16, 0.92);
            box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
            backdrop-filter: blur(12px);
        }

        .review-tool-btn {
            border: 1px solid rgba(245, 237, 220, 0.11);
            border-radius: 7px;
            background: rgba(255, 255, 255, 0.02);
            color: var(--text-dim);
            font-size: 12px;
            font-weight: 600;
            padding: 8px 10px;
            cursor: pointer;
            transition: background 0.2s, border-color 0.2s, color 0.2s;
        }

        .review-tool-btn:active {
            background: rgba(255, 255, 255, 0.08);
        }

        .review-tool-btn.active {
            border-color: rgba(111, 211, 191, 0.28);
            color: var(--text);
            background: rgba(111, 211, 191, 0.13);
        }

        .review-tool-close {
            width: 100%;
        }

        .review-tool-order {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
        }

        .review-tool-note {
            color: var(--text-dim);
            font-size: 11px;
            text-align: center;
        }

        .review-controller-panel {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .review-tool-check,
        .review-controller-field {
            display: grid;
            grid-template-columns: 56px 1fr;
            align-items: center;
            gap: 8px;
            color: var(--text-dim);
            font-size: 12px;
            font-weight: 600;
        }

        .review-controller-field {
            grid-template-columns: 56px minmax(0, 1fr) auto;
        }

        .review-tool-check {
            grid-template-columns: auto 1fr;
            justify-content: start;
        }

        .review-controller-field select {
            width: 100%;
            min-height: 34px;
            border: 1px solid rgba(245, 237, 220, 0.12);
            border-radius: 7px;
            background: #141717;
            color: var(--text);
            font-size: 12px;
            padding: 6px 8px;
        }

        .review-controller-map-btn {
            min-height: 34px;
            padding: 6px 10px;
            border: 1px solid rgba(245, 237, 220, 0.12);
            border-radius: 7px;
            background: rgba(255, 255, 255, 0.02);
            color: var(--text);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
        }

        @media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
            .header {
                grid-template-columns: auto minmax(0, 1fr) auto;
                gap: 8px;
                padding-top: 6px;
                padding-bottom: 6px;
            }
            .header-back-btn,
            .header-menu-btn { min-height: 44px; }
            .header-title {
                min-width: 62px;
            }
            .header-title span {
                font-size: 8px;
            }
            .header-title strong {
                font-size: 17px;
            }
            .header-stats {
                justify-content: flex-start;
            }
            #headerStats {
                font-size: 11px;
            }
            .account-chip {
                display: none;
            }
            #signOutBtn {
                display: none !important;
            }
            #syncScreen {
                justify-content: flex-start;
                overflow-y: auto;
                overscroll-behavior-y: contain;
                -webkit-overflow-scrolling: touch;
                padding-top: 16px;
                padding-bottom: max(16px, var(--safe-bottom));
            }
            .deck-pill,
            .sync-btn,
            .secondary-btn,
            .auth-submit {
                min-height: 48px;
            }
            .auth-field input {
                min-height: 48px;
                font-size: 16px;
            }
            #reviewScreen {
                align-items: stretch;
                justify-content: flex-start;
                min-height: 0;
                overflow: hidden;
                padding: 8px max(12px, var(--safe-right)) max(8px, var(--safe-bottom)) max(12px, var(--safe-left));
            }
            .review-stage {
                width: 100%;
                height: 100%;
                flex: 1;
                min-height: 0;
                align-items: stretch;
                gap: 8px;
            }
            .session-info,
            .session-progress {
                width: 100%;
                flex: 0 0 auto;
            }
            .card {
                width: 100%;
                max-width: none;
                min-height: 0;
                max-height: none;
                flex: 1 1 0;
                padding: clamp(14px, 4vw, 22px);
                overflow-y: auto;
                overscroll-behavior: contain;
            }
            .card-source {
                margin-bottom: 8px;
                font-size: 12px;
            }
            .card-sentence {
                font-size: clamp(24px, 7.4vw, 34px);
                line-height: 1.34;
                margin-bottom: 10px;
            }
            .actions {
                width: 100%;
                max-width: none;
                flex: 0 0 auto;
                padding: 8px 0 0;
            }
            .show-btn {
                width: 100%;
                min-height: 58px;
                padding: 12px 16px;
                touch-action: manipulation;
            }
            .rating-btns {
                width: 100%;
                gap: 8px;
            }
            .rate-btn {
                min-height: 64px;
                font-size: 16px;
                touch-action: manipulation;
            }
            .srs-v2-feedback-btn {
                min-height: 44px;
                font-size: 13px;
                touch-action: manipulation;
            }
            .btn-row {
                gap: 8px;
                margin-top: 8px;
            }
            .suspend-btn,
            .replay-btn,
            .review-tools-btn {
                min-height: 44px;
                flex: 1 1 0;
                padding: 9px 10px;
                touch-action: manipulation;
            }
            #reviewToolDock {
                left: max(10px, var(--safe-left));
                right: max(10px, var(--safe-right));
                bottom: max(10px, var(--safe-bottom));
                max-height: min(88dvh, 480px);
                overflow-y: auto;
                overscroll-behavior: contain;
                padding: 12px;
                border-radius: 14px;
                scrollbar-width: thin;
            }
            .review-tool-btn,
            .review-controller-field select,
            .review-controller-map-btn {
                min-height: 44px;
                touch-action: manipulation;
            }
            .review-controller-field {
                grid-template-columns: 48px minmax(0, 1fr) auto;
            }
            .review-controller-map-btn {
                padding: 8px 12px;
            }
            .review-tool-check input {
                width: 22px;
                height: 22px;
            }
            button,
            select {
                -webkit-tap-highlight-color: transparent;
                touch-action: manipulation;
            }
        }

        @media (max-width: 720px) and (max-height: 640px), (pointer: coarse) and (max-height: 520px) {
            #reviewScreen {
                padding-top: 4px;
            }
            .review-stage {
                gap: 6px;
            }
            .card {
                padding: 12px;
            }
            .actions {
                padding-top: 4px;
            }
            .rate-btn {
                min-height: 54px;
            }
            .session-progress {
                gap: 4px;
                font-size: 11px;
            }
        }

        @media (pointer: coarse) and (max-height: 520px) {
            #reviewToolDock {
                left: auto;
                right: max(10px, var(--safe-right));
                width: min(520px, calc(100vw - 20px));
            }
        }

        html.tv-review #reviewScreen {
            padding-top: 8px;
            padding-bottom: max(8px, calc(var(--safe-bottom) + 6px));
        }
        html.tv-review .review-stage {
            gap: 8px;
        }
        html.tv-review .card {
            min-height: clamp(180px, 38vh, 340px);
            max-height: max(220px, calc(100dvh - 320px));
            padding: clamp(16px, 2.5vh, 28px) clamp(18px, 3vw, 36px);
            overflow-y: auto;
        }
        html.tv-review .card-sentence,
        html.tv-review .card-target {
            font-size: clamp(22px, 3.5vh, 38px);
            line-height: 1.3;
        }