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

:root,
[data-theme="dark"] {
    --bg: #0f1117;
    --surface: #1a1d27;
    --surface-2: #242836;
    --border: #2e3348;
    --text: #e8eaf0;
    --text-muted: #8b90a5;
    --accent: #5b8def;
    --accent-hover: #4a7de0;
    --success: #3ecf8e;
    --error: #ef5f5f;
    --der: #4a8af4;
    --der-bg: rgba(74, 138, 244, 0.18);
    --der-border: rgba(74, 138, 244, 0.55);
    --die: #e85d8a;
    --die-bg: rgba(232, 93, 138, 0.18);
    --die-border: rgba(232, 93, 138, 0.55);
    --das: #34c77b;
    --das-bg: rgba(52, 199, 123, 0.18);
    --das-border: rgba(52, 199, 123, 0.55);
    --topbar-bg: #14161e;
    --radius: 12px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --topbar-height: 68px;
    --topbar-stack-height: calc(var(--topbar-height) + 1px);
    --trainer-toolbar-pad-y: 10px;
    --mastery-0-fg: #7a8096;
    --mastery-0-bg: rgba(139, 144, 165, 0.1);
    --mastery-0-border: rgba(139, 144, 165, 0.28);
    --mastery-1-fg: #7ec8ff;
    --mastery-1-bg: rgba(56, 189, 248, 0.34);
    --mastery-1-border: rgba(56, 189, 248, 0.72);
    --mastery-2-fg: #a5b4ff;
    --mastery-2-bg: rgba(99, 102, 241, 0.34);
    --mastery-2-border: rgba(129, 140, 248, 0.72);
    --mastery-3-fg: #d8b4fe;
    --mastery-3-bg: rgba(192, 132, 252, 0.34);
    --mastery-3-border: rgba(192, 132, 252, 0.72);
    --mastery-4-fg: #fde047;
    --mastery-4-bg: rgba(250, 204, 21, 0.32);
    --mastery-4-border: rgba(250, 204, 21, 0.78);
    --mastery-5-fg: #fb7185;
    --mastery-5-bg: linear-gradient(135deg, rgba(244, 63, 94, 0.38), rgba(217, 70, 239, 0.28));
    --mastery-5-border: rgba(244, 63, 94, 0.78);
    --article-trainer-column: 780px;
    --article-trainer-btn: 250px;
    --article-trainer-input: 420px;
    --article-trainer-btn-gap: 10px;
}

[data-theme="light"] {
    --bg: #f0f2f7;
    --surface: #ffffff;
    --surface-2: #f5f7fb;
    --border: #d8dce8;
    --text: #1a1d27;
    --text-muted: #6b7085;
    --accent: #3b7aed;
    --accent-hover: #2d6ad4;
    --success: #22a86b;
    --error: #d94444;
    --der: #2b6fd4;
    --der-bg: rgba(43, 111, 212, 0.12);
    --der-border: rgba(43, 111, 212, 0.45);
    --die: #d43d6e;
    --die-bg: rgba(212, 61, 110, 0.12);
    --die-border: rgba(212, 61, 110, 0.45);
    --das: #1fa85e;
    --das-bg: rgba(31, 168, 94, 0.12);
    --das-border: rgba(31, 168, 94, 0.45);
    --topbar-bg: #ffffff;
    --shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    --mastery-0-fg: #8a8fa3;
    --mastery-0-bg: #eef0f5;
    --mastery-0-border: #c8ceda;
    --mastery-1-fg: #0284c7;
    --mastery-1-bg: rgba(56, 189, 248, 0.24);
    --mastery-1-border: rgba(2, 132, 199, 0.55);
    --mastery-2-fg: #4338ca;
    --mastery-2-bg: rgba(99, 102, 241, 0.22);
    --mastery-2-border: rgba(67, 56, 202, 0.52);
    --mastery-3-fg: #7e22ce;
    --mastery-3-bg: rgba(192, 132, 252, 0.24);
    --mastery-3-border: rgba(126, 34, 206, 0.52);
    --mastery-4-fg: #b45309;
    --mastery-4-bg: rgba(250, 204, 21, 0.34);
    --mastery-4-border: rgba(180, 83, 9, 0.58);
    --mastery-5-fg: #be123c;
    --mastery-5-bg: linear-gradient(135deg, rgba(244, 63, 94, 0.26), rgba(192, 38, 211, 0.18));
    --mastery-5-border: rgba(190, 18, 60, 0.58);
}

html {
    width: 100%;
    overflow-y: scroll;
    overflow-x: clip;
}

body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    width: 100%;
    min-height: 100vh;
    line-height: 1.5;
    overflow-x: clip;
}

/* Top navigation bar */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    isolation: isolate;
}

/* Full-viewport header plate — survives scrollbar gutter / parent width quirks */
.topbar::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: -1;
    width: 100dvw;
    transform: translateX(-50%);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    pointer-events: none;
}

#app-shell {
    width: 100%;
    max-width: 100%;
}

.topbar-inner {
    position: relative;
    max-width: min(1240px, 100%);
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 32px);
    height: var(--topbar-height);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}

.topbar-inner .brand {
    justify-self: start;
}

.topbar-inner .topbar-actions {
    justify-self: end;
}

.topbar-inner .brand,
.topbar-actions {
    position: relative;
    z-index: 2;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.xp-hud {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-2) 80%, transparent);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.xp-hud:hover,
.xp-hud:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
    outline: none;
}

.xp-hud.is-level-up {
    animation: xp-hud-pulse 0.9s ease;
}

@keyframes xp-hud-pulse {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.06); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
}

.xp-hud-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, #3d8f52 20%, transparent);
    color: color-mix(in srgb, #2d6b3a 92%, #0a2010);
    font-size: 0.78rem;
    font-weight: 800;
}

.xp-hud-track {
    width: 56px;
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 85%, transparent);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

.xp-hud-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 0.35s ease;
    background-color: #4a9460;
    background-image:
        repeating-linear-gradient(
            92deg,
            transparent 0 3px,
            color-mix(in srgb, #1a4028 14%, transparent) 3px 4px
        ),
        radial-gradient(ellipse at 22% 28%, rgba(255, 255, 255, 0.22) 0%, transparent 48%),
        radial-gradient(ellipse at 72% 68%, rgba(40, 90, 50, 0.35) 0%, transparent 42%),
        radial-gradient(circle at 48% 42%, rgba(160, 220, 165, 0.28) 0%, transparent 35%),
        linear-gradient(100deg, #3a7a50 0%, #5a9a68 38%, #6ab078 62%, #4a8a58 100%);
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.14),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 0 6px color-mix(in srgb, #5aaa68 32%, transparent);
}

.user-menu-wrap {
    position: relative;
}

.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 4px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.user-menu-btn:hover,
.user-menu-btn.active,
.user-menu-wrap.open .user-menu-btn {
    background: var(--surface-2);
    border-color: var(--border);
}

.auth-user-avatar,
.auth-user-initials {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
}

.auth-user-avatar {
    object-fit: cover;
    border: 1px solid var(--border);
}

.auth-user-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.user-menu-chevron {
    width: 0;
    height: 0;
    margin-right: 2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--text-muted);
}

.user-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    z-index: 120;
}

.user-menu-wrap.open .user-menu {
    display: block;
}

.user-menu-header {
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.user-menu-name {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}

.user-menu-username {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.user-menu-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: none;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.user-menu-item:hover,
.user-menu-item:focus-visible,
.user-menu-item.active {
    background: var(--surface-2);
    outline: none;
}

.user-menu-item.active {
    color: var(--accent);
}

.user-menu-divider {
    height: 1px;
    margin: 6px 8px;
    background: var(--border);
}

.user-menu-item--danger {
    color: #d64545;
}

.user-menu-item--danger:hover,
.user-menu-item--danger:focus-visible {
    background: color-mix(in srgb, #d64545 10%, var(--surface-2));
}

html.auth-restoring #auth-overlay {
    display: none !important;
}

html.auth-restoring #app-shell.auth-shell {
    display: block !important;
}

html[data-boot-nav] .topnav-item {
    color: var(--text-muted);
    font-weight: 500;
}

html[data-boot-nav="home"] .topnav-item[data-view="home"],
html[data-boot-nav="trainers"] .topnav-item[data-view="trainers"],
html[data-boot-nav="skills"] .topnav-item[data-view="skills"],
html[data-boot-nav="words"] .topnav-item[data-view="words"] {
    color: var(--accent);
    font-weight: 600;
}

.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
}

.auth-card h2 {
    font-size: 1.3rem;
    margin-bottom: 6px;
}

.auth-tabs {
    display: flex;
    gap: 4px;
    margin: 20px 0 16px;
    background: var(--surface-2);
    border-radius: 8px;
    padding: 3px;
}

.auth-tab {
    flex: 1;
    border: none;
    background: none;
    color: var(--text-muted);
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
}

.auth-tab.active {
    background: var(--accent);
    color: #fff;
}

.auth-panel {
    display: none;
    flex-direction: column;
    gap: 14px;
}

.auth-panel.active {
    display: flex;
}

.auth-panel label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.auth-panel input {
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.9rem;
    width: 100%;
}

.password-field {
    position: relative;
    display: flex;
    align-items: center;
}

.password-field input {
    padding-right: 42px;
}

.password-toggle {
    position: absolute;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    line-height: 1;
}

.password-toggle:hover {
    color: var(--text);
}

.password-toggle-svg {
    display: block;
}

.field-status {
    font-size: 0.78rem;
    margin-top: 4px;
}

.field-status.available {
    color: var(--success);
}

.field-status.taken,
.field-status.error {
    color: var(--error);
}

.field-status.checking {
    color: var(--text-muted);
}

.auth-submit {
    width: 100%;
    margin-top: 4px;
}

.auth-error {
    font-size: 0.82rem;
    color: var(--error);
    padding: 8px 10px;
    background: rgba(239, 95, 95, 0.12);
    border-radius: 6px;
}

.auth-verify-hint {
    margin: 0 0 12px;
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.auth-verify-code {
    font-size: 1.45rem;
    letter-spacing: 0.35em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.auth-resend-row {
    margin-top: 10px;
    text-align: center;
}

.auth-verify-back {
    display: block;
    margin: 12px auto 0;
}

.auth-tabs.hidden {
    display: none;
}

.article-type-buffer {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 12px;
    min-height: 1.4em;
    letter-spacing: 0.08em;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text);
    flex-shrink: 0;
}

.brand-logo {
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.auth-brand-logo {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: contain;
    flex-shrink: 0;
}

.auth-brand-fallback {
    width: 64px;
    height: 64px;
    font-size: 1.1rem;
}

.brand-name {
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.topnav {
    justify-self: center;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0;
}

.topnav-rail {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-2) 82%, var(--topbar-bg));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}

.topnav-indicator {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
    box-shadow:
        0 6px 18px color-mix(in srgb, var(--accent) 12%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.topnav-indicator.is-animating {
    transition:
        transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.2s ease;
}

.topnav-indicator.is-visible {
    opacity: 1;
}

.topnav-item {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 26px;
    border: none;
    border-radius: 14px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.96rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.topnav-item:hover {
    color: var(--text);
}

.topnav-item.active {
    color: var(--accent);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .topnav-indicator {
        transition: none;
    }
}

.app {
    max-width: 720px;
    margin: 0 auto;
    padding: 28px 16px 48px;
}

.app.app-wide {
    max-width: 1100px;
}

.app.app-wide:has(#view-progress.active) {
    max-width: min(1600px, 100%);
    padding-left: clamp(16px, 3vw, 40px);
    padding-right: clamp(16px, 3vw, 40px);
}

.app.app-trainer {
    max-width: min(1100px, 100%);
    padding: 0 20px 20px;
}

.app.app-trainer :is(
    #view-trainer .article-trainer-top,
    #view-cases .cases-trainer-top,
    #view-plural > .trainer-toolbar,
    #view-singular > .trainer-toolbar
) {
    position: sticky;
    top: var(--topbar-stack-height);
    z-index: 90;
    margin: 0 -20px 14px;
    padding: var(--trainer-toolbar-pad-y) 20px 12px;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 75%, transparent);
}

.app.app-trainer #view-trainer .article-trainer-top {
    transition:
        grid-template-rows 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s ease,
        margin 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.app.app-trainer #view-trainer .article-trainer-top.is-collapsed {
    margin-bottom: 0;
}

.app.app-trainer :is(
    #view-trainer .article-trainer-top,
    #view-cases .cases-trainer-top,
    #view-plural > .trainer-toolbar,
    #view-singular > .trainer-toolbar
) .trainer-toolbar {
    margin-bottom: 0;
}

.app.app-trainer:has(#view-trainer.active) {
    padding-bottom: 16px;
}

.view {
    display: none;
}

.view.active {
    display: block;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.section-header h2 {
    font-size: 1.2rem;
}

/* Trainer */
.trainer-card {
    background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 36px 28px 32px;
    text-align: center;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 8px 28px rgba(0, 0, 0, 0.1);
    width: 100%;
}

[data-theme="light"] .trainer-card {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 6px 24px rgba(15, 17, 23, 0.06);
}

.trainer-label {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
}

.trainer-prompt {
    margin-bottom: 12px;
}

.trainer-prompt .trainer-word {
    margin-bottom: 8px;
}

.trainer-word {
    font-size: clamp(2rem, 5vw, 2.65rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.prompt-article {
    font-weight: 700;
    color: var(--text);
}

.trainer-input-optional {
    margin-top: 18px;
}

.trainer-text-input-compact {
    max-width: 200px;
    font-size: 0.88rem;
    font-weight: 400;
    padding: 10px 14px;
    border-width: 1px;
    border-radius: 12px;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .trainer-text-input-compact {
    background: rgba(255, 255, 255, 0.7);
}

.trainer-next-btn,
#plural-next,
#singular-next,
#pos-next-btn {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.trainer-next-btn.is-revealed,
#plural-next.is-revealed,
#singular-next.is-revealed,
#pos-next-btn.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.trainer-next-btn {
    margin-top: 16px;
}

/* Article trainer — open stage layout (no boxed card) */
.article-trainer-chrome {
    position: relative;
    width: 100%;
}

.article-trainer-top {
    margin-bottom: 0;
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    overflow: hidden;
}

.article-trainer-top > .trainer-toolbar {
    overflow: hidden;
    min-height: 0;
}

.article-trainer-top.is-collapsed {
    grid-template-rows: 0fr;
    opacity: 0;
    margin: 0;
    padding-top: 0;
    pointer-events: none;
}

.article-toolbar-toggle {
    position: fixed;
    top: calc(var(--topbar-height) - 9px);
    left: 50%;
    z-index: 101;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    border-radius: 999px;
    background: var(--topbar-bg);
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transform: translateX(-50%);
    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

#view-trainer.active .article-toolbar-toggle {
    opacity: 0.72;
    visibility: visible;
}

.article-toolbar-toggle:hover,
.article-toolbar-toggle:focus-visible {
    opacity: 1;
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    outline: none;
}

.article-toolbar-toggle-icon {
    width: 0.82rem;
    height: 0.82rem;
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.article-toolbar-toggle.is-collapsed .article-toolbar-toggle-icon {
    transform: rotate(180deg);
}

#view-trainer {
    position: relative;
}

#view-cases {
    position: relative;
}

.article-trainer-workspace,
.cases-trainer-workspace {
    position: relative;
}

#view-trainer .article-srs-hud,
#view-cases .article-srs-hud {
    position: fixed;
    left: var(--trainer-hud-left);
    bottom: var(--trainer-hud-bottom);
    z-index: 179;
    pointer-events: none;
}

#view-trainer .article-srs-hud-panel,
#view-cases .article-srs-hud-panel {
    pointer-events: auto;
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    margin: 0;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px) saturate(130%);
    overflow: hidden;
    white-space: nowrap;
}

#view-trainer .article-srs-hud-panel.hidden,
#view-cases .article-srs-hud-panel.hidden {
    display: none;
}

#view-trainer .article-srs-hud-content,
#view-cases .article-srs-hud-content {
    display: inline-flex;
    align-items: stretch;
    pointer-events: none;
}

.article-srs-hud-open-hint {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    margin: 0;
    border: none;
    border-left: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    border-radius: 0;
    background: transparent;
    color: var(--accent);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}

.article-srs-hud-open-hint:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
    color: color-mix(in srgb, var(--accent) 88%, var(--text));
}

.article-srs-hud-open-hint:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: -2px;
}

.article-srs-metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 14px 9px;
    min-width: 5.4rem;
}

.article-srs-metric + .article-srs-metric {
    border-left: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}

.article-srs-metric-label {
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    line-height: 1;
    text-transform: uppercase;
}

.article-srs-metric-value {
    color: var(--text);
    font-size: clamp(1.05rem, 2.4vw, 1.28rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1;
}

.article-srs-metric--remaining .article-srs-metric-value {
    color: #e6b25c;
}

[data-theme="dark"] .article-srs-metric--remaining .article-srs-metric-value {
    color: #fbbf24;
}

.article-intervals-overlay {
    position: fixed;
    inset: 0;
    z-index: 920;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

.article-intervals-overlay.hidden {
    display: none;
}

.article-intervals-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 18, 0.58);
    backdrop-filter: blur(4px);
}

.article-intervals-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(760px, 100%);
    max-height: min(82vh, 860px);
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.article-intervals-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.article-intervals-title {
    margin: 0;
    font-size: 1.05rem;
}

.article-intervals-lead {
    margin: 4px 0 0;
    font-size: 0.84rem;
    color: var(--text-muted);
}

.article-intervals-close {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.article-intervals-controls {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.8fr));
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.article-intervals-control-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.article-intervals-search,
.article-intervals-select {
    width: 100%;
    min-height: 2.05rem;
}

.article-intervals-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 8px 10px 14px;
}

.article-intervals-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.article-intervals-row + .article-intervals-row {
    margin-top: 8px;
}

.article-intervals-row.is-due {
    border-color: color-mix(in srgb, #e6b25c 42%, var(--border));
}

.article-intervals-row-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
    min-width: 0;
}

.article-intervals-row-word {
    font-weight: 600;
}

.article-intervals-row-translation {
    color: var(--text-muted);
    font-size: 0.84rem;
}

.article-intervals-row-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 12px;
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.article-intervals-row-level {
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.article-intervals-row-interval {
    font-weight: 700;
    color: var(--text);
}

.article-intervals-row-due {
    min-width: 4.5rem;
    text-align: right;
}

.article-intervals-empty {
    margin: 24px 8px;
    text-align: center;
    color: var(--text-muted);
}

body.article-intervals-open {
    overflow: hidden;
}

@media (max-width: 720px) {
    .article-intervals-controls {
        grid-template-columns: 1fr;
    }

    .article-intervals-row {
        grid-template-columns: 1fr;
    }

    .article-intervals-row-meta {
        justify-content: flex-start;
    }
}

.article-trainer-top .trainer-toolbar {
    margin-bottom: 0;
    width: 100%;
    align-items: end;
}

#view-trainer .trainer-toolbar--article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: 16px;
}

#view-trainer .trainer-toolbar-center {
    justify-content: center;
    justify-self: center;
    flex-wrap: wrap;
    gap: 0;
    max-width: 100%;
}

#view-trainer .trainer-toolbar-group {
    display: flex;
    align-items: flex-end;
    padding: 0 12px;
}

#view-trainer .article-mode-compact {
    max-width: none;
}

#view-trainer .trainer-delay-control {
    min-width: 5.6rem;
}

#view-trainer .trainer-toolbar-divider {
    width: 1px;
    align-self: stretch;
    min-height: 2.1rem;
    margin: 2px 2px 4px;
    background: color-mix(in srgb, var(--border) 52%, transparent);
    flex-shrink: 0;
}

#view-trainer .article-trainer-stage {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: clamp(12px, 2.5vh, 28px) 0 0;
    text-align: center;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
}

.article-trainer-focus {
    text-align: center;
    width: 100%;
    min-width: 0;
    margin-bottom: clamp(6px, 1.2vh, 10px);
}

#view-trainer .trainer-word {
    font-size: clamp(2.4rem, 7vw, 3.75rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin-bottom: 10px;
}

#view-trainer .trainer-translation {
    font-size: clamp(0.9rem, 1.8vw, 1.05rem);
    opacity: 0.78;
    margin-bottom: 0;
}

#view-trainer .trainer-translation:not(.hidden) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-trainer-focus:not(.article-trainer-focus--cloze)::after {
    content: "";
    display: block;
    width: min(120px, 28vw);
    height: 2px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(91, 141, 239, 0.22) 35%,
        rgba(91, 141, 239, 0.38) 50%,
        rgba(91, 141, 239, 0.22) 65%,
        transparent 100%
    );
}

.trainer-tier-panel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0 auto 10px;
    max-width: min(34rem, 92vw);
}

.trainer-tier-panel.hidden {
    display: none;
}

.trainer-tier-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(255, 255, 255, 0.65));
    background: rgba(91, 141, 239, 0.12);
    border: 1px solid rgba(91, 141, 239, 0.22);
}

.trainer-tier-hint {
    font-size: 0.74rem;
    line-height: 1.25;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
}

.trainer-sentence {
    margin: 0 auto 12px;
    max-width: 34rem;
    font-size: clamp(1.05rem, 2.8vw, 1.35rem);
    line-height: 1.45;
    font-weight: 500;
    color: var(--text-primary, inherit);
    text-align: center;
}

.article-trainer-focus--cloze {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
}

.trainer-sentence-rail.hidden {
    display: none;
}

.article-trainer-focus--cloze .trainer-sentence {
    font-size: clamp(1.85rem, 5.2vw, 2.75rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

#view-trainer .trainer-translation--compact {
    display: inline-block;
    width: auto;
    max-width: none;
    margin: 0 auto 4px;
    font-size: 0.86rem;
    line-height: 1.25;
    opacity: 0.76;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.trainer-translation-compact {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    white-space: nowrap;
}

#view-trainer .trainer-translation--word {
    display: block;
    text-align: center;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.trainer-translation-kicker {
    display: none;
}

.trainer-translation-phrase {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.5rem;
    font-size: clamp(0.92rem, 1.7vw, 1.05rem);
    line-height: 1.35;
}

.trainer-translation-lemma {
    font-weight: 650;
    color: var(--text);
}

.trainer-translation-sep {
    opacity: 0.45;
    font-weight: 500;
}

.trainer-translation-meaning {
    opacity: 0.82;
}

#view-trainer .article-trainer-stage--answered .article-trainer-focus--cloze .trainer-sentence {
    margin-bottom: 10px;
}

#view-trainer .article-trainer-stage--answered .trainer-translation--word .trainer-translation-phrase {
    font-size: 0.88rem;
}

.trainer-sentence .cloze-gap {
    display: inline-block;
    width: 2.75em;
    height: 1.05em;
    margin: 0 0.15em;
    padding: 0;
    vertical-align: -0.1em;
    border: 2px dashed rgba(91, 141, 239, 0.7);
    border-radius: 8px;
    background: rgba(91, 141, 239, 0.12);
    box-sizing: border-box;
}

[data-theme="light"] .trainer-sentence .cloze-gap {
    border-color: rgba(59, 110, 220, 0.75);
    background: rgba(91, 141, 239, 0.1);
}

.article-trainer-focus--cloze .trainer-sentence .cloze-gap {
    width: 2.5em;
    height: 1.1em;
}

.trainer-sentence .prompt-article {
    font-weight: 700;
    color: rgba(91, 141, 239, 0.95);
}

.article-trainer-focus--cloze::after {
    margin-top: 8px;
}

.word-mastery-panel {
    width: 100%;
    max-width: 420px;
    margin: 0 auto 6px;
}

.word-mastery-panel.is-collapsed {
    margin: 0 auto 4px;
}

.word-mastery-panel.hidden {
    display: none;
}

.word-mastery-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.word-mastery-panel.is-collapsed .word-mastery-strip {
    gap: 0;
    padding: 0;
}

.word-mastery-trainers-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.word-mastery-panel.is-collapsed .word-mastery-trainers-wrap {
    display: none;
}

.word-mastery-toggle {
    flex-shrink: 0;
    min-width: 1.85rem;
    height: 1.55rem;
    padding: 0 9px;
    margin: 0;
    border: 1px solid rgba(139, 144, 165, 0.28);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.word-mastery-panel.is-collapsed .word-mastery-toggle {
    margin: 2px 0 0;
}

.word-mastery-toggle:hover {
    opacity: 0.9;
    border-color: rgba(139, 144, 165, 0.45);
}

[data-theme="light"] .word-mastery-toggle {
    background: transparent;
}

.word-mastery-trainers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 8px 10px;
}

.word-mastery-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 4.1rem;
    padding: 5px 8px;
    border-radius: 9px;
    border: 1px solid transparent;
}

.word-mastery-item--active {
    border-color: rgba(91, 141, 239, 0.24);
    background: rgba(91, 141, 239, 0.07);
}

.word-mastery-item-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.85;
}

.word-mastery-item-badge .mastery-badge {
    font-size: 0.68rem;
    padding: 2px 7px;
}

[data-theme="light"] .word-mastery-item--active {
    border-color: rgba(74, 138, 244, 0.2);
    background: rgba(74, 138, 244, 0.05);
}

.word-mastery-item--pulse .word-mastery-item-badge .mastery-badge {
    animation: word-mastery-pulse 0.55s ease-out;
}

.word-mastery-item--rank-up .word-mastery-item-badge .mastery-badge {
    animation: word-mastery-rank-up 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.35);
}

@keyframes word-mastery-pulse {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.12);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes word-mastery-rank-up {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    35% {
        transform: scale(1.18);
        filter: brightness(1.15);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

.article-trainer-answer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.article-answer-input-wrap {
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 2;
}

.article-answer-input-wrap.hidden {
    display: none !important;
}

.article-answer-input {
    width: 100%;
    text-align: center;
    cursor: text;
}


.article-type-input {
    width: 5.5rem;
    padding: 6px 2px 8px;
    border: none;
    border-bottom: 1px solid rgba(139, 144, 165, 0.35);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.06em;
    transition: border-color 0.2s ease;
}

.article-type-input::placeholder {
    color: transparent;
}

.article-type-input:focus {
    outline: none;
    border-bottom-color: rgba(91, 141, 239, 0.65);
}

.article-type-input:disabled {
    opacity: 0.45;
}

.article-trainer-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 2.5rem;
}

#view-trainer .article-trainer-feedback,
#view-cases .article-trainer-feedback {
    margin-top: 0;
    padding: 12px 16px 12px 40px;
    border-radius: 10px;
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    width: 100%;
    position: relative;
    border: 1px solid transparent;
    animation: feedback-reveal 0.45s ease-out;
}

#view-trainer .article-trainer-feedback::before,
#view-cases .article-trainer-feedback::before {
    position: absolute;
    left: 16px;
    top: 18px;
    transform: none;
    font-size: 1.15rem;
    line-height: 1;
}

#view-trainer .article-trainer-feedback.correct,
#view-cases .article-trainer-feedback.correct {
    background: rgba(62, 207, 142, 0.24);
    color: #6dffc4;
    border-color: rgba(62, 207, 142, 0.55);
}

#view-trainer .article-trainer-feedback.correct::before,
#view-cases .article-trainer-feedback.correct::before {
    animation: feedback-icon-pop 0.55s ease-out;
}

#view-trainer .article-trainer-feedback.wrong,
#view-cases .article-trainer-feedback.wrong {
    background: rgba(239, 95, 95, 0.22);
    color: #ff8a8a;
    border-color: rgba(239, 95, 95, 0.55);
}

#view-trainer .article-trainer-feedback.wrong::before,
#view-cases .article-trainer-feedback.wrong::before {
    animation: feedback-icon-pop 0.55s ease-out;
}

#view-trainer .article-trainer-feedback.warning,
#view-cases .article-trainer-feedback.warning {
    background: rgba(230, 162, 60, 0.2);
    color: #f0b45a;
    border-color: rgba(230, 162, 60, 0.5);
}

#view-trainer .article-trainer-feedback.warning::before,
#view-cases .article-trainer-feedback.warning::before {
    content: "⚠";
}

[data-theme="light"] #view-trainer .article-trainer-feedback.warning,
[data-theme="light"] #view-cases .article-trainer-feedback.warning {
    color: #b86e00;
    background: rgba(230, 162, 60, 0.14);
}

[data-theme="light"] #view-trainer .article-trainer-feedback.correct,
[data-theme="light"] #view-cases .article-trainer-feedback.correct {
    color: #128f58;
    background: rgba(34, 168, 107, 0.16);
}

[data-theme="light"] #view-trainer .article-trainer-feedback.wrong,
[data-theme="light"] #view-cases .article-trainer-feedback.wrong {
    color: #c62828;
    background: rgba(217, 68, 68, 0.14);
}

#view-trainer .article-trainer-stage--answered .article-trainer-focus {
    margin-bottom: 4px;
}

#view-trainer .article-trainer-stage--answered .trainer-translation:not(.hidden) {
    -webkit-line-clamp: 1;
    font-size: 0.88rem;
}

#view-trainer .article-trainer-stage--answered .word-mastery-panel {
    margin-bottom: 2px;
}

#view-trainer .article-trainer-stage--answered .article-buttons {
    margin-top: 4px;
}

#view-trainer .article-trainer-stage--answered .article-trainer-result {
    gap: 6px;
}

#view-trainer .article-trainer-stage--answered .compare-row {
    padding: 6px 8px;
    gap: 4px 8px;
}

#view-trainer .article-trainer-stage--answered .article-trainer-feedback {
    padding: 10px 14px 10px 36px;
    font-size: 0.92rem;
}

#view-trainer .article-trainer-stage--answered .feedback-line--hint {
    padding: 6px 8px;
    font-size: 0.86rem;
}

#view-trainer .article-trainer-stage--answered .feedback-line--meta {
    font-size: 0.84rem;
}

.article-trainer-result {
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

#view-trainer .article-trainer-stage:has(.article-trainer-feedback:not(.hidden)) .article-trainer-result,
#view-trainer .article-trainer-stage:has(.article-answer-compare:not(.hidden)) .article-trainer-result {
    min-height: clamp(7.5rem, 18vh, 9.5rem);
}

.article-answer-compare {
    width: 100%;
    animation: feedback-reveal 0.35s ease-out;
}

.compare-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.compare-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    flex: 1 1 120px;
    max-width: 220px;
}

.compare-inline-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
}

.compare-inline-value {
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    word-break: break-word;
}

.compare-inline--yours .compare-inline-value {
    color: #ff8a8a;
}

.compare-inline--correct .compare-inline-value {
    color: #6dffc4;
}

[data-theme="light"] .compare-inline--yours .compare-inline-value {
    color: #c62828;
}

[data-theme="light"] .compare-inline--correct .compare-inline-value {
    color: #128f58;
}

.compare-inline-sep {
    flex: 0 0 auto;
    font-size: 1.1rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.article-answer-compare .article-srs-hint {
    margin: 8px 0 0;
    font-size: 0.82rem;
    opacity: 0.85;
    text-align: center;
}

#view-trainer .article-trainer-stage.article-trainer-stage--compare .article-trainer-result {
    width: 100%;
}

#view-trainer .article-trainer-stage.article-trainer-stage--compare .article-trainer-footer {
    margin-top: 0;
}

.article-answer-compare.hidden {
    display: none !important;
}

#view-trainer .article-trainer-feedback:not(.hidden) {
    width: 100%;
}

.feedback-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.feedback-line--main {
    font-weight: 600;
}

.feedback-line--rank-up {
    font-weight: 600;
    font-size: 0.95rem;
}

.feedback-line--meta {
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.35;
    opacity: 0.92;
}

.feedback-line--hint {
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text, inherit);
    padding: 8px 10px;
    margin-top: 2px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-left: 3px solid rgba(96, 165, 250, 0.85);
}

[data-theme="light"] .feedback-line--hint {
    background: rgba(37, 99, 235, 0.06);
    border-left-color: rgba(37, 99, 235, 0.55);
}

.compare-chip {
    flex: 1;
    max-width: 220px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 2px solid transparent;
    text-align: center;
}

.compare-chip-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
    opacity: 0.75;
}

.compare-chip-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.compare-chip--yours {
    background: rgba(239, 95, 95, 0.18);
    border-color: rgba(239, 95, 95, 0.55);
    color: #ff8a8a;
}

.compare-chip--correct {
    background: rgba(62, 207, 142, 0.18);
    border-color: rgba(62, 207, 142, 0.55);
    color: #6dffc4;
}

[data-theme="light"] .compare-chip--yours {
    color: #c62828;
    background: rgba(217, 68, 68, 0.12);
}

[data-theme="light"] .compare-chip--correct {
    color: #128f58;
    background: rgba(34, 168, 107, 0.14);
}

.compare-arrow {
    display: flex;
    align-items: center;
    font-size: 1.35rem;
    color: var(--text-muted);
    opacity: 0.7;
    flex-shrink: 0;
}

.article-trainer-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.trainer-filter-field--topics {
    flex: 1 1 100%;
}

.trainer-group-filter {
    max-height: 160px;
}

.trainer-group-empty {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.words-topic-filter {
    position: relative;
    width: 100%;
}

.words-topic-toggle {
    width: 100%;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.words-topic-toggle.has-filter {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.words-topic-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 220;
    width: min(280px, 80vw);
    max-height: min(60vh, 360px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

.words-topic-panel.hidden {
    display: none !important;
}

.words-group-filter {
    max-height: none;
    overflow: visible;
    border: none;
    background: transparent;
    padding: 0;
}

.trainer-filter-field--endings {
    flex-basis: 100%;
}

.article-patterns-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.article-patterns-toggle-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.article-patterns-toggle-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.article-patterns-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.65;
}

.article-patterns-selected-count {
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
    color: var(--text);
    background: rgba(139, 144, 165, 0.22);
}

.article-patterns-selected-count.hidden {
    display: none;
}

.article-patterns-body.is-collapsed {
    display: none;
}

.article-patterns-body:not(.is-collapsed) {
    margin-top: 8px;
}

.article-endings-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 6px;
}

.article-ending-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.article-ending-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    user-select: none;
}

.article-ending-section--der .article-ending-section-label {
    color: #7eb8ff;
}

.article-ending-section--die .article-ending-section-label {
    color: #ff8ab0;
}

.article-ending-section--das .article-ending-section-label {
    color: #8ee4a8;
}

.article-ending-section-count {
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
    opacity: 0;
}

.article-ending-section-count.is-active {
    opacity: 1;
    color: var(--text);
    background: rgba(139, 144, 165, 0.22);
}

.article-ending-section .article-endings-grid {
    margin-top: 0;
}

.article-endings-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.article-ending-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.article-ending-chip input {
    accent-color: currentColor;
}

.article-ending-chip--der {
    color: #7eb8ff;
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.35);
}

.article-ending-chip--die {
    color: #ff8ab0;
    background: rgba(236, 72, 153, 0.14);
    border-color: rgba(236, 72, 153, 0.35);
}

.article-ending-chip--das {
    color: #8ee4a8;
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.35);
}

.pos-level-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.pos-pick-banner,
.pos-task-banner {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.25);
    font-weight: 600;
}

.pos-text-body,
.pos-trainer-stage,
#view-trainer .article-trainer-stage,
#view-plural .trainer-card,
#view-singular .trainer-card {
    overflow-anchor: none;
}

.pos-part-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.pos-part-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    background: var(--card-bg, rgba(255, 255, 255, 0.04));
    cursor: pointer;
    text-align: left;
}

.pos-part-btn.is-active {
    border-color: rgba(99, 102, 241, 0.65);
    background: rgba(99, 102, 241, 0.16);
}

.pos-part-btn-label {
    font-weight: 700;
}

.pos-part-btn-example {
    font-size: 0.82rem;
    opacity: 0.75;
}

.pos-trainer-stage {
    max-width: 820px;
}

.pos-topic {
    margin: 0 0 12px;
    font-size: 0.9rem;
    opacity: 0.8;
}

.pos-text-body {
    line-height: 1.85;
    font-size: 1.15rem;
    margin-bottom: 20px;
    transition: min-height 0s;
}

.pos-token {
    display: inline;
    margin: 0 1px;
    padding: 2px 4px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: default;
}

button.pos-token {
    cursor: pointer;
}

button.pos-token:hover {
    background: rgba(99, 102, 241, 0.14);
}

.pos-token.is-selected {
    background: rgba(99, 102, 241, 0.22);
    border-color: rgba(99, 102, 241, 0.45);
}

.pos-token.is-correct {
    background: rgba(34, 197, 94, 0.22);
    border-color: rgba(34, 197, 94, 0.5);
}

.pos-token.is-missed {
    background: rgba(234, 179, 8, 0.22);
    border-color: rgba(234, 179, 8, 0.5);
}

.pos-token.is-wrong {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.45);
}

.pos-token--muted {
    opacity: 0.55;
}

.pos-trainer-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .trainer-scope-panel .trainer-filters {
        flex-direction: column;
    }

    .trainer-filter-field {
        flex-basis: 100%;
    }

    .trainer-rules-btn span {
        max-width: 9.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Home dashboard — layout display ONLY with .active (never leak to other tabs) */
.app.app-wide:has(#view-home.active) {
    max-width: min(980px, 100%);
}

.view.active.home-view {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 28px;
}

#view-home .home-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 30px 32px;
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
    background:
        radial-gradient(ellipse 80% 120% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 58%),
        linear-gradient(145deg, var(--surface) 0%, var(--surface-2) 58%, color-mix(in srgb, var(--accent) 8%, var(--surface-2)) 100%);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14);
}

#view-home .home-hero-copy {
    min-width: 0;
}

#view-home .home-greeting {
    margin: 0 0 6px;
    font-size: clamp(1.15rem, 2.6vw, 1.55rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--text);
}

#view-home .home-date {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

#view-home .home-clock-wrap {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.2rem;
    flex-shrink: 0;
}

#view-home .home-clock {
    display: block;
    margin: 0;
    font-size: clamp(3.4rem, 11vw, 5.4rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: var(--text);
    min-width: 5.5ch;
    text-align: right;
}

#view-home .home-clock-seconds {
    margin-top: 0.55rem;
    width: 2ch;
    min-width: 2ch;
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    color: var(--text-muted);
    opacity: 0.72;
    text-align: left;
    pointer-events: none;
}

#view-home .home-hub-card {
    border-radius: 18px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

#view-home .home-hub-card--action {
    width: 100%;
    padding: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#view-home .home-hub-card--action:hover {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

#view-home .home-hub-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
}

#view-home .home-hub-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
}

#view-home .home-hub-icon svg {
    width: 24px;
    height: 24px;
}

#view-home .home-hub-icon--streak {
    background: color-mix(in srgb, #f59e0b 14%, var(--surface-2));
    color: #d97706;
}

#view-home .home-hub-icon--progress {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
    color: var(--accent);
}

#view-home .home-hub-copy {
    flex: 1;
    min-width: 0;
}

#view-home .home-hub-eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

#view-home .home-hub-metric-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35em;
    margin: 0;
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text);
}

#view-home .home-hub-metric {
    font-size: clamp(2rem, 5vw, 2.35rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}

#view-home .home-hub-meta {
    margin: 6px 0 0;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--text-muted);
}

#view-home .home-hub-meta strong {
    color: var(--text);
    font-weight: 700;
}

#view-home .home-hub-title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text);
}

#view-home .home-hub-subtitle {
    margin: 5px 0 0;
    font-size: 0.88rem;
    line-height: 1.35;
    color: var(--text-muted);
}

#view-home .home-hub-trail {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#view-home .home-hub-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
}

#view-home .home-hub-chevron {
    font-size: 1.35rem;
    line-height: 1;
    color: var(--text-muted);
}

#view-home .home-metrics {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 14px;
    align-items: start;
}

#view-home .home-metrics-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#view-home .home-side-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 74px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#view-home .home-side-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

#view-home .home-side-card--progress {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

#view-home .home-side-card--progress:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

#view-home .home-side-icon--progress {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
    color: var(--accent);
}

#view-home .home-side-meta {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--text-muted);
}

#view-home .home-side-trail {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#view-home .home-side-card--primary {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

#view-home .home-side-card--primary:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

#view-home .home-side-card--skills {
    border-color: color-mix(in srgb, #34c77b 30%, var(--border));
}

#view-home .home-side-card--skills:hover {
    border-color: color-mix(in srgb, #34c77b 45%, var(--border));
}

#view-home .home-side-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

#view-home .home-side-icon svg {
    width: 22px;
    height: 22px;
}

#view-home .home-side-icon--trainers {
    background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
    color: var(--accent);
}

#view-home .home-side-icon--skills {
    background: color-mix(in srgb, #34c77b 14%, var(--surface-2));
    color: #2fad6a;
}

#view-home .home-side-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#view-home .home-side-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

#view-home .home-side-title {
    font-size: 0.94rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
}

#view-home .home-streak-card {
    position: relative;
    overflow: visible;
}

#view-home .home-streak-week {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 20px 14px;
}

#view-home .home-streak-week-label {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

#view-home .home-streak-week-strip {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 1;
}

#view-home .home-week-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 1.35rem;
}

#view-home .home-week-dot-mark {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--border) 70%, var(--surface-2));
    transition: background 0.15s ease, transform 0.15s ease;
}

#view-home .home-week-dot.is-active .home-week-dot-mark {
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

#view-home .home-week-dot.is-today .home-week-dot-mark {
    transform: scale(1.15);
}

#view-home .home-week-dot-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

#view-home .home-hub-foot-action {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-2) 42%, var(--surface));
    color: var(--text-muted);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

#view-home .home-hub-foot-action:hover {
    color: var(--accent);
    background: var(--surface-2);
}

#view-home .home-streak-card.activity-card--expanded .home-hub-foot-action {
    color: var(--accent);
    background: var(--surface-2);
}

#view-home .home-streak-card.activity-card--expanded .activity-toggle-chevron {
    transform: rotate(90deg);
}

#view-home .home-streak-calendar-panel.activity-calendar-panel {
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 20px;
    border-top: 1px solid transparent;
    transition:
        max-height 0.3s ease,
        opacity 0.22s ease,
        padding 0.3s ease,
        border-color 0.3s ease;
}

#view-home .home-streak-card.activity-card--expanded .home-streak-calendar-panel {
    max-height: 360px;
    opacity: 1;
    padding: 12px 20px 18px;
    border-top-color: var(--border);
    overflow: visible;
}

#view-home .home-streak-calendar-panel .activity-calendar-grid {
    gap: 4px;
}

#view-home .home-streak-calendar-panel .activity-weekday {
    font-size: 0.62rem;
}

#view-home .home-streak-calendar-panel .activity-day {
    aspect-ratio: auto;
    height: 28px;
    border-radius: 7px;
}

#view-home .home-streak-calendar-panel .activity-day-num {
    font-size: 0.7rem;
}

#view-home .home-streak-calendar-panel .activity-calendar-note {
    margin-top: 8px;
    font-size: 0.72rem;
}

#view-home .home-quote-card {
    margin: 0;
    padding: 18px 20px;
}

#view-home .home-launchpad {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 14px;
}

#view-home .home-launch-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 132px;
    padding: 22px 52px 22px 22px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

#view-home .home-launch-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

#view-home .home-launch-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

#view-home .home-launch-card--primary {
    border-color: rgba(91, 141, 239, 0.38);
}

#view-home .home-launch-card--primary::before {
    background: linear-gradient(135deg, rgba(91, 141, 239, 0.12), transparent 65%);
    opacity: 1;
}

#view-home .home-launch-card--skills {
    border-color: rgba(52, 199, 123, 0.35);
}

#view-home .home-launch-card--skills::before {
    background: linear-gradient(135deg, rgba(52, 199, 123, 0.12), transparent 65%);
    opacity: 1;
}

#view-home .home-launch-icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-shrink: 0;
}

#view-home .home-launch-icon svg {
    width: 28px;
    height: 28px;
}

#view-home .home-launch-icon--trainers {
    color: var(--accent);
    background: rgba(91, 141, 239, 0.14);
}

#view-home .home-launch-icon--skills {
    color: var(--das);
    background: rgba(52, 199, 123, 0.14);
}

#view-home .home-launch-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#view-home .home-launch-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

#view-home .home-launch-title {
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--text);
    line-height: 1.15;
}

#view-home .home-launch-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

#view-home .home-launch-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-muted);
}

.trainers-list-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.trainers-list-header .trainer-hub-title {
    margin: 0;
}

.smart-session-panel {
    margin: 0 0 18px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #3d6b45 28%, var(--border));
    background: color-mix(in srgb, #2a5c35 8%, var(--surface));
}

.smart-session-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.smart-session-hint {
    margin: 4px 0 0;
}

.smart-session-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
    margin-top: 12px;
}

.smart-session-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.smart-session-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.smart-session-progress {
    margin: 10px 0 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: color-mix(in srgb, #3d8f52 85%, var(--text));
}

.smart-session-progress--inline {
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: color-mix(in srgb, #3d8f52 12%, var(--surface));
    border: 1px solid color-mix(in srgb, #3d8f52 28%, var(--border));
    white-space: nowrap;
}

@media (max-width: 860px) {
    #view-home .home-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 22px;
    }

    #view-home .home-metrics {
        grid-template-columns: 1fr;
    }

    #view-home .home-streak-week {
        flex-direction: column;
        align-items: flex-start;
    }

    #view-home .home-streak-week-strip {
        width: 100%;
        justify-content: space-between;
    }
}

/* Trainers hub */
.motivation-card {
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
}

.motivation-card--compact {
    margin-bottom: 18px;
}

.motivation-quote-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.motivation-quote {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text);
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: opacity 200ms ease;
    opacity: 1;
}

.motivation-quote.is-fading {
    opacity: 0;
}

.motivation-quote.is-disabled {
    pointer-events: none;
}

.motivation-next-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--accent);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.motivation-next-btn:hover:not(:disabled) {
    border-color: rgba(91, 141, 239, 0.45);
    background: var(--surface);
}

.motivation-next-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.motivation-roadmap-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.motivation-roadmap-link:hover {
    text-decoration: underline;
}

body.skills-fullscreen {
    overflow: hidden;
}

body.skills-fullscreen .app.app-wide:has(#view-skills.active) {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.skills-view {
    width: 100%;
}

.skills-view.active {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--topbar-height));
    min-height: 0;
}

.skills-page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin: 0;
    padding: 8px 12px 8px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.skills-page-header .trainer-back-link {
    flex-shrink: 0;
}

.skills-page-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.mindmap-zoom-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.mindmap-zoom-btn {
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.mindmap-zoom-btn--label {
    min-width: 52px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
}

.mindmap-zoom-btn:hover {
    border-color: rgba(91, 141, 239, 0.45);
    color: var(--accent);
}

.mindmap-viewport {
    --mindmap-bg: var(--surface);
    --mindmap-grid: var(--border);
    --mindmap-grid-major: #3d4460;
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: none;
    border-radius: 0;
    background-color: var(--mindmap-bg);
    background-image:
        linear-gradient(var(--mindmap-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--mindmap-grid) 1px, transparent 1px),
        linear-gradient(var(--mindmap-grid-major) 1px, transparent 1px),
        linear-gradient(90deg, var(--mindmap-grid-major) 1px, transparent 1px);
    background-size: 32px 32px, 32px 32px, 128px 128px, 128px 128px;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}

[data-theme="light"] .mindmap-viewport {
    --mindmap-bg: var(--surface-2);
    --mindmap-grid: #c9d0dc;
    --mindmap-grid-major: #aab4c6;
}

.mindmap-viewport.is-panning {
    cursor: grabbing;
    user-select: none;
}

.mindmap-stage {
    position: relative;
}

.mindmap-canvas {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
}

.mindmap-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.mindmap-line {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.mindmap-line--goal {
    stroke: rgba(91, 141, 239, 0.45);
}

.mindmap-line--noun {
    stroke: rgba(52, 199, 123, 0.55);
}

.mindmap-line--literacy {
    stroke: rgba(74, 138, 244, 0.55);
}

.mindmap-line--syntax {
    stroke: rgba(230, 178, 92, 0.6);
}

.mindmap-line--listening {
    stroke: rgba(240, 160, 96, 0.6);
}

.mindmap-line--gap {
    stroke: var(--text-muted);
    stroke-dasharray: 7 9;
    opacity: 0.55;
}

.mindmap-nodes {
    position: relative;
    width: 100%;
    height: 100%;
}

.mindmap-node {
    position: absolute;
    transform: translate(-50%, -50%);
    width: max-content;
    max-width: min(220px, 42vw);
    padding: 11px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
    text-align: center;
    z-index: 1;
}

.mindmap-node--goal {
    max-width: min(260px, 50vw);
    padding: 18px 22px;
    border-width: 2px;
    border-color: rgba(91, 141, 239, 0.65);
    background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
    box-shadow: 0 6px 24px rgba(91, 141, 239, 0.15);
}

.mindmap-node--goal .mindmap-node-title {
    font-size: 1.05rem;
}

.mindmap-node--branch,
.mindmap-node--subbranch {
    background: var(--surface-2);
}

.mindmap-node--subbranch {
    max-width: min(190px, 38vw);
    padding: 9px 12px;
}

.mindmap-node--subbranch .mindmap-node-title {
    font-size: 0.8rem;
}

.mindmap-node--skill,
.mindmap-node--gap {
    border-left-width: 3px;
    border-left-style: solid;
}

.mindmap-node--gap {
    border-style: dashed;
    border-left-style: solid;
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
    opacity: 0.95;
}

.mindmap-branch--noun {
    --branch-accent: #34c77b;
}

.mindmap-branch--literacy {
    --branch-accent: #4a8af4;
}

.mindmap-branch--syntax {
    --branch-accent: #e6b25c;
}

.mindmap-branch--listening {
    --branch-accent: #f0a060;
}

.mindmap-node--branch.mindmap-branch--noun,
.mindmap-node--subbranch.mindmap-branch--noun,
.mindmap-node--skill.mindmap-branch--noun,
.mindmap-node--gap.mindmap-branch--noun {
    border-color: color-mix(in srgb, var(--branch-accent) 45%, var(--border));
}

.mindmap-node--branch.mindmap-branch--literacy,
.mindmap-node--subbranch.mindmap-branch--literacy,
.mindmap-node--skill.mindmap-branch--literacy,
.mindmap-node--gap.mindmap-branch--literacy {
    border-color: color-mix(in srgb, var(--branch-accent) 45%, var(--border));
}

.mindmap-node--branch.mindmap-branch--syntax,
.mindmap-node--subbranch.mindmap-branch--syntax,
.mindmap-node--skill.mindmap-branch--syntax,
.mindmap-node--gap.mindmap-branch--syntax {
    border-color: color-mix(in srgb, var(--branch-accent) 45%, var(--border));
}

.mindmap-node--branch.mindmap-branch--listening,
.mindmap-node--subbranch.mindmap-branch--listening,
.mindmap-node--skill.mindmap-branch--listening,
.mindmap-node--gap.mindmap-branch--listening {
    border-color: color-mix(in srgb, var(--branch-accent) 45%, var(--border));
}

.mindmap-node--skill.mindmap-branch--noun,
.mindmap-node--gap.mindmap-branch--noun,
.mindmap-node--skill.mindmap-branch--literacy,
.mindmap-node--gap.mindmap-branch--literacy,
.mindmap-node--skill.mindmap-branch--syntax,
.mindmap-node--gap.mindmap-branch--syntax,
.mindmap-node--skill.mindmap-branch--listening,
.mindmap-node--gap.mindmap-branch--listening {
    border-left-color: var(--branch-accent);
}

.mindmap-node-progress {
    margin-top: 8px;
}

.mindmap-node-progress-track {
    height: 5px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

.mindmap-node-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--branch-accent, var(--accent));
}

.mindmap-node-progress-label {
    margin: 5px 0 0;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
}

.mindmap-node-planned {
    display: block;
    margin-top: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
}

.mindmap-node-title {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
}

.mindmap-node-desc {
    margin: 5px 0 0;
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.mindmap-node-trainer {
    display: inline-block;
    margin-top: 9px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(91, 141, 239, 0.45);
    background: var(--surface);
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.mindmap-node-trainer:hover {
    border-color: var(--accent);
    background: var(--surface-2);
}

.mindmap-node-gap {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px dashed var(--border);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.trainer-hub-header {
    margin-bottom: 20px;
    padding-top: 0;
}

.trainer-hub-title {
    font-size: 1.65rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.15;
}

.trainers-list-view:not(.trainers-view--ready) .trainer-hub-grid,
.trainers-list-view:not(.trainers-view--ready) .smart-session-panel {
    opacity: 0;
    pointer-events: none;
}

.trainers-list-view.trainers-view--ready .trainer-hub-grid,
.trainers-list-view.trainers-view--ready .smart-session-panel {
    opacity: 1;
    transition: opacity 0.12s ease;
}

.trainer-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.trainer-hub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-height: 280px;
    padding: 24px 24px 20px;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.22s ease,
        box-shadow 0.22s ease;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 10px 30px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .trainer-hub-card {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 8px 28px rgba(15, 17, 23, 0.06);
}

.trainer-hub-card-glow {
    position: absolute;
    inset: -40% -20% auto;
    height: 70%;
    opacity: 0.45;
    pointer-events: none;
    filter: blur(28px);
    transition: opacity 0.25s ease;
}

.trainer-hub-card--articles .trainer-hub-card-glow {
    background: radial-gradient(circle at 30% 20%, rgba(91, 141, 239, 0.35), transparent 68%);
}

.trainer-hub-card--cases .trainer-hub-card-glow {
    background: radial-gradient(circle at 30% 20%, rgba(200, 135, 26, 0.34), transparent 68%);
}

.trainer-hub-card--plural .trainer-hub-card-glow {
    background: radial-gradient(circle at 30% 20%, rgba(155, 120, 220, 0.32), transparent 68%);
}

.trainer-hub-card--singular .trainer-hub-card-glow {
    background: radial-gradient(circle at 30% 20%, rgba(62, 207, 142, 0.28), transparent 68%);
}

.trainer-hub-card:hover:not(:disabled):not(.is-disabled) {
    transform: translateY(-3px);
    border-color: rgba(91, 141, 239, 0.35);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 18px 40px rgba(0, 0, 0, 0.18);
}

.trainer-hub-card:hover:not(:disabled):not(.is-disabled) .trainer-hub-card-glow {
    opacity: 0.75;
}

.trainer-hub-card:hover:not(:disabled):not(.is-disabled) .trainer-hub-arrow {
    opacity: 1;
    transform: translateX(2px);
}

.trainer-hub-card:active:not(:disabled):not(.is-disabled) {
    transform: translateY(-1px);
}

.trainer-hub-card:disabled,
.trainer-hub-card.is-disabled {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
}

.trainer-hub-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 22px;
}

.trainer-hub-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text);
}

[data-theme="light"] .trainer-hub-icon {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--border);
}

.trainer-hub-svg {
    width: 44px;
    height: 44px;
    display: block;
}

.trainer-hub-card--articles .trainer-hub-icon {
    color: #6b9ef0;
}

.trainer-hub-card--cases .trainer-hub-icon {
    color: #c8871a;
}

.trainer-hub-card--plural .trainer-hub-icon {
    color: #a88fd8;
}

.trainer-hub-card--singular .trainer-hub-icon {
    color: #4fbf8a;
}

.trainer-hub-arrow {
    font-size: 1.1rem;
    color: var(--text-muted);
    opacity: 0.35;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.trainer-hub-card-name {
    position: relative;
    z-index: 1;
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin-bottom: 6px;
}

.trainer-hub-card-tag {
    position: relative;
    z-index: 1;
    margin-bottom: auto;
    padding-bottom: 20px;
    font-size: 0.84rem;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.trainer-hub-stats {
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.trainer-hub-level-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
}

.trainer-hub-level-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    min-height: 50px;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.2s ease, background 0.2s ease;
}

[data-theme="light"] .trainer-hub-level-chip {
    background: rgba(255, 255, 255, 0.72);
}

.trainer-hub-card:hover:not(:disabled):not(.is-disabled) .trainer-hub-level-chip {
    border-color: rgba(255, 255, 255, 0.12);
}

.trainer-hub-level-chip-name {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
}

.trainer-hub-level-chip-count {
    font-size: 0.84rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    line-height: 1.1;
}

.trainer-hub-level-chip--a1 {
    border-color: rgba(79, 191, 138, 0.28);
    background: rgba(79, 191, 138, 0.09);
}
.trainer-hub-level-chip--a1 .trainer-hub-level-chip-name { color: #4fbf8a; }

.trainer-hub-level-chip--a2 {
    border-color: rgba(107, 158, 240, 0.28);
    background: rgba(107, 158, 240, 0.09);
}
.trainer-hub-level-chip--a2 .trainer-hub-level-chip-name { color: #6b9ef0; }

.trainer-hub-level-chip--b1 {
    border-color: rgba(120, 140, 230, 0.28);
    background: rgba(120, 140, 230, 0.09);
}
.trainer-hub-level-chip--b1 .trainer-hub-level-chip-name { color: #8a9ee8; }

.trainer-hub-level-chip--b2 {
    border-color: rgba(168, 143, 216, 0.3);
    background: rgba(168, 143, 216, 0.1);
}
.trainer-hub-level-chip--b2 .trainer-hub-level-chip-name { color: #a88fd8; }

.trainer-hub-level-chip--c1 {
    border-color: rgba(230, 178, 92, 0.32);
    background: rgba(230, 178, 92, 0.1);
}
.trainer-hub-level-chip--c1 .trainer-hub-level-chip-name { color: #e6b25c; }

.trainer-hub-level-chip--c2 {
    border-color: rgba(232, 130, 150, 0.3);
    background: rgba(232, 130, 150, 0.1);
}
.trainer-hub-level-chip--c2 .trainer-hub-level-chip-name { color: #e88296; }

.trainer-hub-total {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.14);
    text-align: center;
}

[data-theme="light"] .trainer-hub-total {
    background: rgba(255, 255, 255, 0.78);
}

.trainer-hub-total-count {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--text);
}

.trainer-hub-total-label {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.trainer-hub-waiting {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px dashed rgba(230, 178, 92, 0.35);
    background: rgba(230, 178, 92, 0.08);
    font-size: 0.72rem;
    font-weight: 500;
    color: #e6b25c;
    text-align: center;
    letter-spacing: 0.02em;
}

@media (max-width: 820px) {
    .trainer-hub-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .trainer-hub-card {
        min-height: auto;
    }

    .trainer-hub-level-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.trainer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.trainer-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
}

.trainer-toolbar,
#view-trainer .article-trainer-top:not(.is-collapsed) {
    overflow: visible;
}

.trainer-delay-control {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    flex-shrink: 0;
}

:root {
    --trainer-hud-left: max(18px, env(safe-area-inset-left, 0px));
    --trainer-hud-bottom: max(22px, env(safe-area-inset-bottom, 0px));
    --trainer-srs-slot: 3.35rem;
    --trainer-streak-slot: 3.35rem;
    --trainer-hud-stack-gap: 0.625rem;
}

.trainer-streak-hud {
    position: fixed;
    left: var(--trainer-hud-left);
    bottom: calc(var(--trainer-hud-bottom) + var(--trainer-srs-slot) + var(--trainer-hud-stack-gap));
    z-index: 180;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.94);
    transition:
        opacity 0.28s ease,
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.28s ease;
}

.trainer-streak-hud.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.trainer-streak-hud-mark {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.85rem 0.5rem 0.65rem;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, #ff8a3d 22%, var(--border));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px) saturate(130%);
}

.trainer-streak-hud-flame {
    width: 2rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: block;
    overflow: visible;
    filter:
        drop-shadow(0 2px 4px rgba(91, 20, 8, 0.35))
        drop-shadow(0 0 8px rgba(255, 90, 20, 0.42));
}

.trainer-streak-hud-flame-art {
    transform-origin: 16px 37px;
}

.trainer-streak-hud.is-visible .trainer-streak-hud-flame-art {
    animation: trainer-streak-flame-flicker 2.6s ease-in-out infinite;
}

.trainer-streak-hud.is-visible .trainer-streak-hud-flame {
    animation: trainer-streak-flame-glow 2.6s ease-in-out infinite;
}

.trainer-streak-hud-flame-wing {
    opacity: 0.88;
}

.trainer-streak-hud-flame-spark {
    opacity: 0.95;
}

.trainer-streak-hud.is-visible .trainer-streak-hud-flame-spark {
    animation: trainer-streak-flame-spark 2.6s ease-in-out infinite;
}

.trainer-streak-hud.is-visible .trainer-streak-hud-flame-spark--small {
    animation-delay: 0.8s;
}

@keyframes trainer-streak-flame-flicker {
    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }
    35% {
        transform: scale(1.03, 0.98) rotate(-1.2deg);
    }
    68% {
        transform: scale(0.98, 1.02) rotate(1deg);
    }
}

@keyframes trainer-streak-flame-glow {
    0%,
    100% {
        filter:
            drop-shadow(0 2px 4px rgba(91, 20, 8, 0.35))
            drop-shadow(0 0 7px rgba(255, 90, 20, 0.38));
    }
    50% {
        filter:
            drop-shadow(0 2px 5px rgba(91, 20, 8, 0.42))
            drop-shadow(0 0 14px rgba(255, 110, 30, 0.62));
    }
}

@keyframes trainer-streak-flame-spark {
    0%,
    100% {
        opacity: 0.55;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-1px);
    }
}

.trainer-streak-hud-count {
    min-width: 1.15em;
    font-size: clamp(1.2rem, 3.2vw, 1.45rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #c2410c;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .trainer-streak-hud-count {
    color: #fb923c;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

body.placement-trainer-mode .trainer-streak-hud {
    bottom: calc(max(88px, calc(env(safe-area-inset-bottom, 0px) + 72px)) + var(--trainer-srs-slot) + var(--trainer-hud-stack-gap));
}

@media (min-width: 900px) {
    :root {
        --trainer-hud-left: max(28px, env(safe-area-inset-left, 0px));
        --trainer-hud-bottom: max(28px, env(safe-area-inset-bottom, 0px));
    }
}

.trainer-hub-card.is-locked {
    opacity: 0.72;
    cursor: not-allowed;
}

.trainer-hub-card.is-locked .trainer-hub-arrow {
    opacity: 0.35;
}

.trainer-delay-label {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.trainer-delay-input {
    width: 4.2rem;
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.trainer-delay-input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.trainer-queue-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.76rem;
    font-weight: 500;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    white-space: nowrap;
}

.trainer-queue-line {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}

.trainer-queue-label {
    color: var(--text-muted);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.trainer-queue-value {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.trainer-queue-line--remaining .trainer-queue-value {
    color: #e6b25c;
}

.trainer-back-link {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 0;
    cursor: pointer;
}

.trainer-back-link:hover {
    color: var(--accent);
}

.trainer-rules-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(91, 141, 239, 0.5);
    background: rgba(91, 141, 239, 0.14);
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: none;
    line-height: 1.2;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

[data-theme="light"] .trainer-rules-btn {
    background: rgba(59, 122, 237, 0.1);
    border-color: rgba(59, 122, 237, 0.42);
}

.trainer-rules-btn:hover {
    background: rgba(91, 141, 239, 0.24);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.12);
}

.trainer-intervals-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.trainer-intervals-btn:hover {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
    box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.1);
}

.trainer-intervals-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    opacity: 0.88;
}

#view-trainer .trainer-toolbar-group:has(.trainer-intervals-btn) {
    display: inline-flex;
    align-items: flex-end;
    gap: 8px;
}

.trainer-rules-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.trainer-scope--compact {
    position: relative;
    width: auto;
    flex-shrink: 0;
}

.trainer-scope--compact .trainer-scope-toggle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: auto;
    min-width: 9rem;
    max-width: min(18rem, 42vw);
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.trainer-scope--compact .trainer-scope-toggle:hover {
    border-color: rgba(91, 141, 239, 0.4);
    background: var(--surface-2);
}

.trainer-scope--compact.is-open .trainer-scope-toggle {
    border-color: rgba(91, 141, 239, 0.45);
}

.trainer-scope--compact.has-filter .trainer-scope-toggle {
    border-color: rgba(91, 141, 239, 0.4);
}

.trainer-scope--compact .trainer-scope-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.trainer-scope--compact .trainer-scope-summary {
    flex: none;
    width: 100%;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.25;
    white-space: normal;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trainer-scope--compact.has-filter .trainer-scope-summary {
    color: var(--accent);
}

.article-mode-compact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    flex-shrink: 0;
    width: auto;
    max-width: min(9.5rem, 30vw);
}

.article-mode-compact-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1;
}

.article-mode-select {
    width: 100%;
    min-height: 2.05rem;
    padding: 5px 24px 5px 10px;
    font-size: 0.82rem;
    font-weight: 500;
    border-radius: 10px;
}

.article-tier-compact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    flex-shrink: 0;
    width: auto;
}

.article-tier-pills {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-2);
}

.article-tier-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 2.55rem;
    padding: 3px 7px 4px;
    border: none;
    border-right: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1.05;
}

.article-tier-pill-num {
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.article-tier-pill-tag {
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    opacity: 0.78;
    max-width: 3.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.article-trainer-case-badge {
    display: inline-flex;
    align-items: center;
    height: 2.05rem;
    padding: 0 0.65rem;
    border: 1px solid rgba(91, 141, 239, 0.35);
    border-radius: 10px;
    background: rgba(91, 141, 239, 0.1);
    color: var(--accent, #5b8def);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.article-tier-compact.hidden {
    display: none;
}

.article-tier-pill:last-child {
    border-right: 0;
}

.article-tier-pill:hover {
    background: var(--surface-2);
    color: var(--text);
}

.article-tier-pill.active {
    background: rgba(91, 141, 239, 0.18);
    color: var(--accent, #5b8def);
}

.article-tier-pill.active .article-tier-pill-tag {
    opacity: 1;
}

.trainer-scope--compact .trainer-scope-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 200;
    width: min(360px, 92vw);
    max-height: min(75vh, 520px);
    overflow-y: auto;
    padding: 12px 14px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

.trainer-scope-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.trainer-scope-save {
    min-width: 5.5rem;
    padding: 6px 14px;
    font-size: 0.82rem;
}

.article-srs-hint {
    flex-basis: 100%;
    margin: 2px 0 0;
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.trainer-scope--compact .trainer-filters {
    flex-direction: column;
    gap: 10px;
}

.trainer-scope--compact .trainer-filter-field {
    flex-basis: auto;
}

.trainer-scope--compact .filter-select {
    width: 100%;
    min-width: 0;
}

.trainer-scope-hint {
    margin: 0 0 12px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.trainer-filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 140px;
    min-width: 0;
}

.trainer-filter-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.trainer-rules-hint {
    margin-top: -12px;
    margin-bottom: 20px;
    color: var(--accent);
    font-size: 0.82rem;
}

#view-rules > .trainer-back-link {
    margin-bottom: 14px;
}

.trainer-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.filter-select {
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.85rem;
    min-width: 140px;
}

.groups-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}

.groups-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.groups-panel-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.group-level-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.group-level-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.group-level-hint {
    margin: 0;
    font-size: 0.78rem;
    color: #e85d5d;
}

#new-group-level.is-invalid {
    border-color: #e85d5d;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 10, 18, 0.62);
    backdrop-filter: blur(4px);
}

.modal-overlay.hidden {
    display: none;
}

.modal-card {
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
}

.modal-title {
    margin: 0 0 8px;
    font-size: 1.1rem;
}

.modal-meta {
    margin: 0 0 18px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.modal-meta strong {
    color: var(--text);
    font-weight: 600;
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.modal-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.modal-form input {
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.9rem;
    width: 100%;
}

.modal-form input:focus {
    outline: none;
    border-color: var(--accent);
}

.modal-error {
    margin: 0;
    font-size: 0.8rem;
    color: #e85d5d;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.modal-hint {
    margin: 0 0 18px;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.modal-level-tag {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-dim);
    color: var(--accent);
    vertical-align: middle;
}

.level-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-dim);
    color: var(--accent);
    margin-left: 8px;
}

.import-group-field {
    min-width: 220px;
}

.import-group-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.import-group-row .filter-select {
    flex: 1;
    min-width: 0;
}

.import-new-group-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.import-new-group-btn:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
}

.import-duplicate-scope {
    margin-bottom: 12px;
    padding: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.translation-empty,
.plural-empty {
    color: var(--text-muted);
}

.groups-panel-header h3 {
    font-size: 1rem;
}

.groups-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.groups-level-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.groups-level-heading {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.groups-level-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.groups-custom-empty {
    margin: 0;
}

.group-item {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
}

.group-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.subgroup-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
    padding-left: 12px;
}

.subgroup-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.trainer-input-center {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.trainer-action-center {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.trainer-text-input {
    width: 100%;
    max-width: 280px;
    padding: 11px 16px;
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
}

[data-theme="light"] .trainer-text-input {
    background: rgba(255, 255, 255, 0.75);
}

.trainer-text-input:focus {
    outline: none;
    border-color: var(--accent);
}

.trainer-text-input:disabled {
    opacity: 0.7;
}

.trainer-translation {
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.4;
    letter-spacing: 0.01em;
    opacity: 0.78;
}

html[data-hide-translations] .translation-col-header,
html[data-hide-translations] .translation-col,
html[data-hide-translations] .translation-cell,
html[data-hide-translations] .trainer-translation {
    display: none !important;
}

.settings-subhint {
    margin-top: 6px;
    margin-bottom: 0;
}

.mastery-na {
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 0;
}

.group-cell {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.keyboard-hint {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 24px;
}

.article-buttons {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 770px;
    margin: 0 auto;
}

.article-btn {
    flex: 1;
    min-width: 0;
    max-width: 250px;
    padding: 16px 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

.article-btn[data-article="der"] {
    border-color: var(--der-border);
    background: var(--der-bg);
}

.article-btn[data-article="die"] {
    border-color: var(--die-border);
    background: var(--die-bg);
}

.article-btn[data-article="das"] {
    border-color: var(--das-border);
    background: var(--das-bg);
}

.article-btn[data-article="der"] .article-label {
    color: var(--der);
}

.article-btn[data-article="die"] .article-label {
    color: var(--die);
}

.article-btn[data-article="das"] .article-label {
    color: var(--das);
}

[data-theme="light"] .article-btn {
    background: rgba(255, 255, 255, 0.72);
}

[data-theme="light"] .article-btn[data-article="der"] {
    background: var(--der-bg);
}

[data-theme="light"] .article-btn[data-article="die"] {
    background: var(--die-bg);
}

[data-theme="light"] .article-btn[data-article="das"] {
    background: var(--das-bg);
}

.article-btn[data-article="der"]:hover:not(:disabled) {
    border-color: var(--der);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--der) 35%, transparent);
}

.article-btn[data-article="die"]:hover:not(:disabled) {
    border-color: var(--die);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--die) 35%, transparent);
}

.article-btn[data-article="das"]:hover:not(:disabled) {
    border-color: var(--das);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--das) 35%, transparent);
}

@media (hover: hover) and (pointer: fine) {
    .article-btn:hover:not(:disabled) {
        transform: none;
    }
}

.article-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.article-label {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
}

.article-key {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    opacity: 0.8;
    line-height: 1;
}

.article-buttons--locked {
    pointer-events: none;
}

.article-btn.is-chosen {
    opacity: 1 !important;
    transform: scale(0.98);
    border-width: 2px;
    transition: none;
}

.article-btn[data-article="der"].is-chosen {
    border-color: var(--der) !important;
    background: var(--der-bg) !important;
    box-shadow: 0 0 0 4px rgba(74, 138, 244, 0.32);
}

.article-btn[data-article="die"].is-chosen {
    border-color: var(--die) !important;
    background: var(--die-bg) !important;
    box-shadow: 0 0 0 4px rgba(232, 93, 138, 0.32);
}

.article-btn[data-article="das"].is-chosen {
    border-color: var(--das) !important;
    background: var(--das-bg) !important;
    box-shadow: 0 0 0 4px rgba(52, 199, 123, 0.32);
}

.article-buttons--locked .article-btn:not(.is-chosen):not(.correct):not(.wrong) {
    opacity: 0.78;
}

.article-btn:disabled {
    cursor: default;
    transform: none;
}

.article-btn:disabled:not(.correct):not(.wrong) {
    opacity: 0.38;
}

.article-btn.correct {
    opacity: 1 !important;
    border-width: 2px;
}

.article-btn[data-article="der"].correct {
    border-color: var(--der) !important;
    background: var(--der-bg) !important;
    box-shadow: 0 0 0 4px rgba(74, 138, 244, 0.28);
}

.article-btn[data-article="die"].correct {
    border-color: var(--die) !important;
    background: var(--die-bg) !important;
    box-shadow: 0 0 0 4px rgba(232, 93, 138, 0.28);
}

.article-btn[data-article="das"].correct {
    border-color: var(--das) !important;
    background: var(--das-bg) !important;
    box-shadow: 0 0 0 4px rgba(52, 199, 123, 0.28);
}

.article-btn.correct .article-label {
    font-weight: 700;
}

.article-btn.wrong {
    opacity: 1 !important;
    border-color: var(--error) !important;
    border-width: 2px;
    background: rgba(239, 95, 95, 0.24) !important;
    box-shadow: 0 0 0 4px rgba(239, 95, 95, 0.28);
}

.article-btn.wrong .article-label {
    color: var(--error) !important;
    font-weight: 700;
}

.feedback {
    margin-top: 24px;
    padding: 12px 16px 12px 42px;
    border-radius: 8px;
    font-size: 0.95rem;
    position: relative;
    border: 1px solid transparent;
    animation: feedback-reveal 0.45s ease-out;
}

.feedback::before {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    line-height: 1;
}

.feedback.pending {
    animation: none;
    background: var(--surface-2);
    color: var(--text-muted);
    border-color: var(--border);
    min-height: 44px;
}

.feedback.pending::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: feedback-pending-pulse 0.9s ease-in-out infinite;
}

@keyframes feedback-pending-pulse {
    0%,
    100% {
        opacity: 0.35;
        transform: translateY(-50%) scale(0.85);
    }
    50% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

.feedback.correct {
    background: rgba(62, 207, 142, 0.12);
    color: var(--success);
    border-color: rgba(62, 207, 142, 0.25);
}

.feedback.correct::before {
    content: "✦";
    animation: feedback-icon-pop 0.55s ease-out;
}

.feedback.wrong {
    background: rgba(210, 120, 100, 0.1);
    color: #c97868;
    border-color: rgba(210, 120, 100, 0.22);
}

.feedback.wrong::before {
    content: "○";
    font-size: 0.95rem;
    animation: feedback-icon-pop 0.55s ease-out;
}

@keyframes feedback-reveal {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes feedback-icon-pop {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0.4);
    }
    60% {
        opacity: 1;
        transform: translateY(-50%) scale(1.08);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

#view-trainer .article-trainer-stage.answer-correct .article-trainer-focus {
    animation: article-focus-glow-success 1.3s ease-out;
}

#view-trainer .article-trainer-stage.answer-soft-wrong .article-trainer-focus {
    animation: article-focus-glow-wrong 1.1s ease-out;
}

#view-plural .trainer-card.answer-correct,
#view-singular .trainer-card.answer-correct {
    animation: card-glow-success 1.3s ease-out;
}

#view-plural .trainer-card.answer-soft-wrong,
#view-singular .trainer-card.answer-soft-wrong {
    animation: card-glow-soft-wrong 1.1s ease-out;
}

@keyframes article-focus-glow-success {
    35% {
        filter: drop-shadow(0 0 18px rgba(62, 207, 142, 0.22));
    }
    100% {
        filter: none;
    }
}

@keyframes article-focus-glow-wrong {
    35% {
        filter: drop-shadow(0 0 12px rgba(210, 120, 100, 0.16));
    }
    100% {
        filter: none;
    }
}

@keyframes card-glow-success {
    0% {
        box-shadow: var(--shadow);
        border-color: var(--border);
    }
    35% {
        box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.18), 0 8px 28px rgba(62, 207, 142, 0.12);
        border-color: rgba(62, 207, 142, 0.45);
    }
    100% {
        box-shadow: var(--shadow);
        border-color: var(--border);
    }
}

@keyframes card-glow-soft-wrong {
    0% {
        box-shadow: var(--shadow);
        border-color: var(--border);
    }
    35% {
        box-shadow: 0 0 0 2px rgba(210, 120, 100, 0.14);
        border-color: rgba(210, 120, 100, 0.35);
    }
    100% {
        box-shadow: var(--shadow);
        border-color: var(--border);
    }
}

.hidden {
    display: none !important;
}

.empty-message {
    text-align: center;
    color: var(--text-muted);
    padding: 48px 16px;
}

.trainer-empty-slot {
    width: 100%;
}

.trainer-empty-slot .empty-message {
    max-width: 36rem;
    margin-inline: auto;
    line-height: 1.55;
}

.trainer-session-done {
    width: min(100%, 34rem);
    margin: 12px auto 24px;
    padding: 28px 24px 24px;
    text-align: center;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
    background:
        radial-gradient(120% 80% at 50% -20%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
        linear-gradient(165deg, var(--surface) 0%, var(--surface-2) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 10px 32px rgba(0, 0, 0, 0.08);
    animation: trainer-session-done-enter 0.45s ease-out both;
}

[data-theme="light"] .trainer-session-done {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 8px 28px rgba(15, 17, 23, 0.07);
}

@keyframes trainer-session-done-enter {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.trainer-session-done__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.trainer-session-done__ring {
    position: relative;
    width: 72px;
    height: 72px;
}

.trainer-session-done__ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.trainer-session-done__ring-bg {
    fill: none;
    stroke: color-mix(in srgb, var(--text-muted) 18%, transparent);
    stroke-width: 5;
}

.trainer-session-done__ring-fill {
    fill: none;
    stroke: color-mix(in srgb, #22c55e 78%, var(--accent));
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 188.5;
    stroke-dashoffset: 0;
    animation: trainer-session-done-ring 0.9s ease-out 0.15s both;
}

@keyframes trainer-session-done-ring {
    from {
        stroke-dashoffset: 188.5;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.trainer-session-done__check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    font-weight: 700;
    color: color-mix(in srgb, #16a34a 82%, var(--accent));
    animation: trainer-session-done-check 0.35s ease-out 0.55s both;
}

@keyframes trainer-session-done-check {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.trainer-session-done__eyebrow {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, #16a34a 70%, var(--text));
    background: color-mix(in srgb, #22c55e 12%, var(--surface-2));
}

.trainer-session-done__title {
    margin: 0;
    font-size: clamp(1.35rem, 3vw, 1.65rem);
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text);
}

.trainer-session-done__lead {
    margin: 0;
    max-width: 28rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.trainer-session-done__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 20px 0 16px;
}

.trainer-session-done__stat {
    padding: 12px 8px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}

.trainer-session-done__stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.15;
}

.trainer-session-done__stat-value--time {
    font-size: clamp(0.82rem, 2.4vw, 0.98rem);
    font-weight: 650;
}

.trainer-session-done__stat-label {
    display: block;
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.trainer-session-done__streak {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #d97706;
    background: color-mix(in srgb, #f59e0b 12%, var(--surface-2));
    border: 1px solid color-mix(in srgb, #f59e0b 24%, transparent);
}

.trainer-session-done__streak-icon {
    font-size: 0.95rem;
    line-height: 1;
}

.trainer-session-done__tip {
    margin: 0 0 20px;
    padding: 12px 14px;
    border-radius: 12px;
    text-align: left;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
}

.trainer-session-done__tip::before {
    content: "💡";
    margin-right: 6px;
}

.trainer-session-done__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.trainer-session-done__actions .btn-primary,
.trainer-session-done__actions .btn-secondary {
    width: 100%;
}

.trainer-session-done__scope-hint {
    margin: 10px 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.trainer-scope--pulse-hint {
    animation: trainer-scope-pulse-hint 1.8s ease-out 2;
}

@keyframes trainer-scope-pulse-hint {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
    }
    70% {
        box-shadow: 0 0 0 10px transparent;
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

@media (min-width: 520px) {
    .trainer-session-done {
        padding: 32px 28px 26px;
    }

    .trainer-session-done__actions {
        flex-direction: row;
        justify-content: center;
    }

    .trainer-session-done__actions .btn-primary,
    .trainer-session-done__actions .btn-secondary {
        width: auto;
        min-width: 11rem;
    }
}

@media (max-width: 420px) {
    .trainer-session-done__stats {
        grid-template-columns: 1fr;
    }

    .trainer-session-done__stat {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: left;
    }

    .trainer-session-done__stat-label {
        margin-top: 0;
        text-align: right;
    }
}

/* Buttons */
.btn-primary,
.btn-secondary,
.btn-danger {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

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

.btn-secondary {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    border-color: var(--accent);
}

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

.btn-danger:hover {
    background: rgba(239, 95, 95, 0.1);
}

.btn-small {
    padding: 6px 14px;
    font-size: 0.8rem;
}

.trainer-card .btn-primary {
    padding: 10px 26px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

#trainer-next {
    margin-top: 16px;
}

/* Dictionary */
.badge {
    display: inline-block;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: 6px;
}

.import-panel,
.settings-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.settings-panel h3 {
    font-size: 1rem;
    margin-bottom: 16px;
}

.settings-locale-select {
    max-width: 280px;
}

.profile-avatar-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.profile-avatar-preview {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-avatar-initials {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-muted);
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-upload-btn {
    cursor: pointer;
    margin: 0;
}

.profile-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.profile-section:first-of-type {
    margin-top: 16px;
    padding-top: 0;
    border-top: none;
}

.profile-section .settings-section-title {
    margin-bottom: 2px;
}

.profile-section .profile-fields {
    margin-top: 0;
}

.achievements-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.trainer-records-root {
    margin-bottom: 20px;
}

.trainer-records-card {
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.trainer-records-header {
    margin-bottom: 12px;
}

.trainer-records-title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 600;
}

.trainer-records-hint {
    margin: 0;
    font-size: 0.85rem;
}

.trainer-records-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.trainer-records-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
}

.trainer-records-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
}

.trainer-records-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.trainer-records-link {
    margin-top: 10px;
}

#settings-trainer-records + .trainer-records-link {
    margin-top: -8px;
    margin-bottom: 4px;
}

.home-side-card--guide .home-side-icon--guide {
    font-size: 1.35rem;
    line-height: 1;
}

.guide-view {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px 48px;
}

.guide-page-header {
    margin: 8px 0 20px;
}

.guide-page-title {
    margin: 0;
    font-size: 1.5rem;
}

.guide-page-lead {
    margin: 8px 0 0;
    color: var(--text-muted);
}

.guide-content-root {
    display: grid;
    gap: 20px;
}

.guide-sections {
    display: grid;
    gap: 16px;
}

.guide-section,
.guide-library {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 16px 18px;
}

.guide-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.guide-section-icon {
    font-size: 1.25rem;
}

.guide-section-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.guide-paragraph {
    margin: 0 0 10px;
    color: var(--text);
    line-height: 1.55;
}

.guide-paragraph:last-child {
    margin-bottom: 0;
}

.guide-rank-table {
    display: grid;
    gap: 6px;
    margin-top: 12px;
    font-size: 0.88rem;
}

.guide-rank-row {
    display: grid;
    grid-template-columns: minmax(88px, 0.9fr) 1fr 1fr;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--surface-elevated, rgba(255, 255, 255, 0.03));
}

.guide-rank-row--head {
    font-weight: 700;
    color: var(--text-muted);
    background: transparent;
    padding-top: 0;
}

.guide-rank-label {
    font-weight: 600;
}

.guide-library-summary {
    margin: 0 0 6px;
    font-weight: 600;
}

.guide-library-hint {
    margin: 0 0 14px;
}

.wisdom-book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.wisdom-book-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-elevated, rgba(255, 255, 255, 0.03));
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}

.wisdom-book-card.is-unlocked:hover {
    border-color: var(--book-color, var(--accent));
    transform: translateY(-1px);
}

.wisdom-book-card.is-locked {
    opacity: 0.55;
    cursor: default;
}

.wisdom-book-card.is-highlight {
    box-shadow: 0 0 0 2px var(--book-color, var(--accent));
}

.wisdom-book-icon {
    font-size: 1.5rem;
}

.wisdom-book-faction {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.wisdom-book-title {
    font-weight: 700;
    font-size: 0.92rem;
}

.wisdom-book-excerpt {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.guide-book-panel {
    max-width: 520px;
    width: calc(100% - 32px);
    padding: 22px 24px;
}

.guide-book-close {
    position: absolute;
    top: 12px;
    right: 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
}

.guide-book-meta {
    margin: 0 0 4px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.guide-book-title {
    margin: 0 0 12px;
    font-size: 1.2rem;
}

.guide-book-body {
    margin: 0;
    line-height: 1.6;
    white-space: pre-wrap;
}

.home-side-card--collection .home-side-icon--collection {
    background: linear-gradient(145deg, rgba(184, 160, 120, 0.35), rgba(120, 96, 72, 0.2));
}

.collection-view {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 16px 56px;
}

.collection-header,
.archive-header {
    margin: 4px 0 18px;
}

.collection-kicker {
    margin: 0 0 6px;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a89070;
    font-family: Georgia, "Times New Roman", serif;
}

.collection-title {
    margin: 0;
    font-size: 1.65rem;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    color: var(--text);
}

.collection-lead {
    margin: 10px 0 0;
    color: var(--text-muted);
    max-width: 52ch;
    line-height: 1.55;
}

.archive-tabs,
.collection-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 18px;
}

.archive-tab,
.collection-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border: 1px solid rgba(168, 144, 112, 0.35);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 248, 235, 0.04), rgba(0, 0, 0, 0.08)),
        var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    font-family: Georgia, "Times New Roman", serif;
}

.archive-tab.is-active,
.collection-tab.is-active {
    color: var(--text);
    border-color: rgba(200, 176, 120, 0.75);
    box-shadow: inset 0 0 0 1px rgba(200, 176, 120, 0.25), 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.archive-tab-icon {
    font-size: 1.35rem;
    filter: sepia(0.35);
}

.collection-panel,
.archive-panel {
    display: none;
}

.collection-panel.active,
.archive-panel.active {
    display: block;
}

.archive-frame {
    padding: 18px;
    border: 1px solid rgba(168, 144, 112, 0.28);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255, 248, 235, 0.03), transparent 40%),
        var(--surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.archive-panel-title {
    margin: 0 0 6px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.15rem;
}

.archive-summary {
    font-family: Georgia, "Times New Roman", serif;
    color: #a89070;
}

.archive-shelf .library-slot,
.archive-tablet-grid {
    margin-top: 8px;
}

.archive-tablet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.archive-tablet {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 148px;
    padding: 14px;
    border: 1px dashed rgba(168, 144, 112, 0.4);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.08);
    text-align: left;
}

.archive-tablet.is-empty {
    justify-content: center;
    opacity: 0.62;
}

.archive-tablet.is-filled {
    border-style: solid;
    border-color: var(--tablet-color, #b8a078);
    cursor: pointer;
    background:
        linear-gradient(145deg, rgba(255, 248, 235, 0.05), rgba(0, 0, 0, 0.12));
    transition: transform 0.15s, box-shadow 0.15s;
}

.archive-tablet.is-filled:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}

.archive-tablet.is-highlight {
    box-shadow: 0 0 0 2px var(--tablet-color, #b8a078);
}

.archive-tablet-index {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: Georgia, "Times New Roman", serif;
}

.archive-tablet-dust {
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: rgba(168, 144, 112, 0.45);
}

.archive-tablet-label {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.archive-tablet-icon {
    font-size: 1.4rem;
    filter: sepia(0.4);
}

.archive-tablet-author {
    font-size: 0.78rem;
    font-weight: 700;
    font-family: Georgia, "Times New Roman", serif;
    color: var(--tablet-color, #b8a078);
}

.archive-tablet-preview {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-muted);
    font-style: italic;
}

.archive-tablet-panel .guide-book-body,
.archive-tablet-body {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.02rem;
    line-height: 1.65;
    font-style: italic;
    white-space: pre-wrap;
}

.guide-footer {
    margin-top: 8px;
}

.library-view {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 16px 48px;
}

.library-page-header {
    margin: 8px 0 20px;
}

.library-page-title {
    margin: 0;
    font-size: 1.5rem;
}

.library-page-lead {
    margin: 8px 0 0;
    color: var(--text-muted);
}

.library-shelf-root {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.library-slot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-height: 148px;
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: 14px;
    background: var(--surface);
    text-align: left;
}

.library-slot.is-empty {
    justify-content: center;
    opacity: 0.65;
}

.library-slot.is-filled {
    border-style: solid;
    border-color: var(--book-color, var(--accent));
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.library-slot.is-filled:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.library-slot.is-highlight {
    box-shadow: 0 0 0 2px var(--book-color, var(--accent));
}

.library-slot-index {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.library-slot-placeholder {
    font-size: 1.4rem;
    color: var(--text-muted);
}

.library-slot-label {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.library-slot-icon {
    font-size: 1.6rem;
}

.library-slot-faction {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.library-slot-title {
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.35;
}

.inventory-root {
    margin-top: 4px;
}

.inventory-hint {
    margin: 0 0 12px;
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.inventory-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 96px;
    padding: 10px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--surface-elevated, rgba(255, 255, 255, 0.03));
}

.inventory-slot-index {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.inventory-slot-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
}

.records-view {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 16px 48px;
}

.records-xp-hero {
    padding: 20px 22px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #3d6b45 35%, var(--border));
    background: linear-gradient(
        145deg,
        color-mix(in srgb, #2a5c35 14%, var(--surface)),
        var(--surface-2)
    );
    box-shadow: 0 10px 28px color-mix(in srgb, #1f4a28 12%, transparent);
}

.records-xp-hero-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.records-xp-level-badge {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: color-mix(in srgb, #3d8f52 88%, #1a3d24);
}

.records-xp-total {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
}

.records-xp-bar {
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 80%, transparent);
    overflow: hidden;
}

.records-xp-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 0.35s ease;
    background-color: #4a9460;
    background-image:
        repeating-linear-gradient(
            92deg,
            transparent 0 3px,
            color-mix(in srgb, #1a4028 14%, transparent) 3px 4px
        ),
        radial-gradient(ellipse at 22% 28%, rgba(255, 255, 255, 0.22) 0%, transparent 48%),
        radial-gradient(ellipse at 72% 68%, rgba(40, 90, 50, 0.35) 0%, transparent 42%),
        radial-gradient(circle at 48% 42%, rgba(160, 220, 165, 0.28) 0%, transparent 35%),
        linear-gradient(100deg, #3a7a50 0%, #5a9a68 38%, #6ab078 62%, #4a8a58 100%);
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.14),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 0 6px color-mix(in srgb, #5aaa68 32%, transparent);
}

.records-xp-hero.is-level-up .records-xp-bar-fill {
    animation: records-xp-pulse 0.9s ease;
}

@keyframes records-xp-pulse {
    0%, 100% { filter: brightness(1); }
    45% { filter: brightness(1.18); }
}

.records-xp-next {
    margin: 8px 0 0;
}

.records-section {
    margin-top: 18px;
}

.records-section-header {
    margin-bottom: 10px;
}

.records-section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.records-section-hint {
    margin: 4px 0 0;
}

.records-section-body {
    display: block;
}

.records-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.records-stat-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.records-stat-card {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.records-stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.records-stat-value {
    margin-top: 6px;
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.records-stat-hint {
    margin: 6px 0 0;
    font-size: 0.78rem;
}

.xp-mana-fill,
.records-xp-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 0.35s ease;
}

.collectible-toast-root {
    position: fixed;
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    z-index: 1190;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
    max-width: min(320px, calc(100vw - 24px));
}

.xp-toast-root {
    position: fixed;
    left: 50%;
    bottom: max(120px, calc(env(safe-area-inset-bottom, 0px) + 96px));
    z-index: 220;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    transform: translateX(-50%);
}

.xp-toast {
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    background: var(--accent);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 42%, transparent);
    opacity: 0;
    transform: translateY(8px);
    animation: xp-toast-in 1.4s ease forwards;
}

.xp-toast--level-up {
    font-size: 1.02rem;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    box-shadow: 0 12px 32px rgba(239, 68, 68, 0.28);
}

@keyframes xp-toast-in {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    12%,
    78% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-6px);
    }
}

.collectible-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--badge-color) 50%, var(--border));
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--badge-color) 16%, var(--surface)),
        var(--surface-2)
    );
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.collectible-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.collectible-toast--clickable {
    cursor: pointer;
}

.collectible-toast-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: color-mix(in srgb, var(--badge-color) 22%, transparent);
}

.collectible-toast-kicker {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--badge-color) 70%, var(--text));
}

.collectible-toast-title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
}

.collectible-toast-desc {
    margin-top: 2px;
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.achievement-toast-hint {
    margin-top: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
}

.records-page-header {
    margin: 8px 0 20px;
}

.records-page-title {
    margin: 0;
    font-size: 1.5rem;
}

.records-page-lead {
    margin: 8px 0 0;
    color: var(--text-muted);
}

.personal-records-root {
    display: grid;
    gap: 16px;
}

.personal-records-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 16px 18px;
}

.personal-records-card-header {
    margin-bottom: 12px;
}

.personal-records-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.personal-records-card-hint {
    margin: 6px 0 0;
}

.personal-records-grid {
    display: grid;
    gap: 8px;
}

.personal-records-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-elevated, rgba(255, 255, 255, 0.03));
}

.personal-records-label {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.personal-records-value {
    font-size: 0.95rem;
    font-weight: 600;
    text-align: right;
}

#achievements-trainer-records + .trainer-records-link {
    margin-top: 10px;
}

.achievements-page-hint {
    margin-top: 6px;
}

.achievements-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.achievements-summary {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.achievements-sections {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.achievement-category {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.achievement-category-header,
.achievement-subcategory-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.achievement-category-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.achievement-subcategory-title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.achievement-category-summary {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-muted);
}

.achievement-subcategories {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.achievement-subcategory {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
}

[data-theme="light"] .achievement-subcategory {
    background: rgba(255, 255, 255, 0.72);
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 10px;
}

.setting-group.is-disabled {
    opacity: 0.48;
}

.setting-group.is-disabled .input-medium,
.setting-group.is-disabled .settings-input-num {
    cursor: not-allowed;
}

.achievement-badge {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    min-height: 88px;
    transition: transform 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
}

[data-theme="light"] .achievement-badge {
    background: rgba(255, 255, 255, 0.82);
}

.achievement-badge.is-locked {
    filter: grayscale(1);
    opacity: 0.58;
}

.achievement-badge.is-unlocked {
    border-color: color-mix(in srgb, var(--badge-color) 42%, var(--border));
    background: color-mix(in srgb, var(--badge-color) 12%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--badge-color) 10%, transparent) inset;
}

.achievement-badge-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.06);
}

.achievement-badge.is-unlocked .achievement-badge-icon {
    background: color-mix(in srgb, var(--badge-color) 22%, transparent);
}

.achievement-badge-body {
    min-width: 0;
}

.achievement-badge-title {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    margin-bottom: 4px;
}

.achievement-badge-desc {
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.achievement-toast-root {
    position: fixed;
    top: 78px;
    right: 18px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: min(360px, calc(100vw - 24px));
}

.achievement-toast-root--welcome {
    z-index: 990;
    top: max(18px, env(safe-area-inset-top, 0px));
    right: max(18px, env(safe-area-inset-right, 0px));
}

.achievement-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--badge-color) 45%, var(--border));
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--badge-color) 18%, var(--surface)),
        var(--surface-2)
    );
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.achievement-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.achievement-toast-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: color-mix(in srgb, var(--badge-color) 24%, transparent);
}

.achievement-toast-kicker {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--badge-color) 70%, var(--text));
    margin-bottom: 3px;
}

[data-theme="light"] .achievement-toast-kicker {
    color: color-mix(in srgb, var(--badge-color) 45%, #14213d);
}

.achievement-toast-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}

.achievement-toast-desc {
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.profile-readonly-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-reveal {
    margin-top: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.profile-reveal.hidden {
    display: none !important;
}

.profile-session {
    padding-top: 16px;
}

.profile-save-bar {
    margin-top: 12px;
}

.profile-reset-all-label {
    margin-top: 4px;
}

.profile-reset-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-reset-filters.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.profile-advanced {
    margin-bottom: 8px;
}

.profile-panel {
    padding: 28px 32px 32px;
}

.profile-panel .settings-section-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 14px;
    color: var(--text);
}

.profile-panel .setting-label {
    font-size: 0.95rem;
    margin-bottom: 8px;
}

.profile-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
}

.profile-panel .password-field .profile-input {
    flex: 1;
    min-width: 0;
}

.profile-panel .password-field {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.profile-panel .profile-fields label {
    gap: 8px;
}

.profile-panel .hint,
.profile-panel .settings-subhint {
    font-size: 0.9rem;
    line-height: 1.45;
}

.profile-action-btn {
    flex: 1 1 180px;
    min-height: 44px;
    padding: 12px 18px;
    font-size: 0.95rem;
}

.profile-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.profile-value-text {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text);
    padding: 4px 0 2px;
}

.profile-save-btn,
.profile-logout-btn {
    width: 100%;
    max-width: none;
    min-height: 48px;
    padding: 14px 24px;
    font-size: 1rem;
    border-radius: 10px;
}

.profile-panel .profile-inline-actions .btn-primary,
.profile-panel .profile-inline-actions .btn-secondary,
.profile-panel .profile-inline-actions .btn-danger {
    min-height: 44px;
    padding: 12px 22px;
    font-size: 0.95rem;
}

.profile-reveal {
    padding: 20px;
    border-radius: 12px;
}

.profile-panel .checkbox-list {
    max-height: 280px;
    padding: 12px 14px;
    font-size: 0.95rem;
}

.profile-panel .checkbox-list label {
    font-size: 0.95rem;
    padding: 4px 0;
}

.profile-status {
    font-size: 0.92rem;
}

.profile-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
}

.profile-fields label {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-inline-actions {
    display: flex;
    gap: 8px;
}

.profile-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 8px 0;
}

.settings-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.changelog-shell {
    max-width: 680px;
    margin: 0 auto;
}

.changelog-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 28px;
    box-shadow: var(--shadow);
}

.changelog-panel-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.changelog-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.changelog-entry {
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    border-radius: 0;
}

.changelog-entry:first-child {
    padding-top: 0;
}

.changelog-entry:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.changelog-entry-meta {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.changelog-entry-title {
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: none;
}

.changelog-entry-body {
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--text-secondary, var(--text));
}

.changelog-entry-body .changelog-p {
    margin: 0 0 12px;
}

.changelog-entry-body .changelog-p:last-child {
    margin-bottom: 0;
}

.changelog-entry-body .changelog-h2 {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 16px 0 8px;
}

.changelog-entry-body .changelog-h2:first-child {
    margin-top: 0;
}

.changelog-entry-body .changelog-h3 {
    font-size: 0.98rem;
    font-weight: 600;
    margin: 14px 0 6px;
}

.changelog-entry-body .changelog-h1 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 14px 0 8px;
}

.changelog-entry-body .changelog-ul {
    margin: 0 0 4px;
    padding-left: 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.changelog-entry-body .changelog-ul li {
    padding-left: 2px;
}

.changelog-entry-body .changelog-ul li::marker {
    color: var(--text-muted);
}

.changelog-entry-body strong {
    font-weight: 600;
    color: var(--text);
}

.changelog-entry-body em {
    font-style: italic;
}

.changelog-show-more {
    margin-top: 16px;
}

.changelog-prompt-overlay {
    position: fixed;
    inset: 0;
    z-index: 940;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.38s ease;
}

.changelog-prompt-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.changelog-prompt-overlay.hidden {
    display: none;
}

.changelog-prompt-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 90% 70% at 50% 35%, rgba(91, 141, 239, 0.22) 0%, transparent 62%),
        rgba(8, 10, 18, 0.72);
    backdrop-filter: blur(6px);
}

.changelog-prompt-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.changelog-prompt-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    padding: 28px 26px 24px;
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
    background:
        radial-gradient(ellipse 120% 80% at 50% -20%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 58%),
        linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.34),
        0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
        0 0 48px color-mix(in srgb, var(--accent) 16%, transparent);
    overflow: hidden;
    opacity: 0;
    transform: translateY(28px) scale(0.94);
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.changelog-prompt-overlay.is-visible .changelog-prompt-card.is-ready {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.changelog-prompt-glow {
    position: absolute;
    top: -40%;
    left: 50%;
    width: 280px;
    height: 280px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 42%, transparent) 0%, transparent 70%);
    opacity: 0.55;
    pointer-events: none;
    animation: changelog-glow-pulse 3.2s ease-in-out infinite;
}

.changelog-prompt-badge {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.72);
}

.changelog-prompt-card.is-animate .changelog-prompt-badge {
    animation: changelog-badge-pop 0.78s cubic-bezier(0.34, 1.56, 0.64, 1) 0.06s forwards;
}

.changelog-prompt-badge-ring {
    position: absolute;
    inset: -6px;
    border-radius: 22px;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
    box-shadow: 0 0 28px color-mix(in srgb, var(--accent) 28%, transparent);
    opacity: 0.85;
    animation: changelog-badge-ring 2.8s ease-in-out infinite;
}

.changelog-prompt-logo {
    position: relative;
    z-index: 1;
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    object-fit: contain;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.changelog-prompt-headline {
    position: relative;
    z-index: 1;
    margin: 0 0 16px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
    opacity: 0;
    transform: translateY(10px);
}

.changelog-prompt-card.is-animate .changelog-prompt-headline {
    animation: changelog-fade-up 0.55s ease 0.18s forwards;
}

.changelog-prompt-highlight {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
    opacity: 0;
    transform: translateY(12px);
}

.changelog-prompt-card.is-animate .changelog-prompt-highlight {
    animation: changelog-fade-up 0.55s ease 0.28s forwards;
}

.changelog-prompt-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text);
    text-align: center;
}

.changelog-prompt-meta {
    margin: 6px 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--accent);
}

.changelog-prompt-teaser {
    position: relative;
    z-index: 1;
    margin: 0 0 22px;
    padding: 0 4px;
    font-size: 0.9rem;
    line-height: 1.55;
    text-align: center;
    color: var(--text-muted);
    opacity: 0;
    transform: translateY(10px);
}

.changelog-prompt-card.is-animate .changelog-prompt-teaser {
    animation: changelog-fade-up 0.55s ease 0.38s forwards;
}

.changelog-prompt-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    opacity: 0;
    transform: translateY(10px);
}

.changelog-prompt-card.is-animate .changelog-prompt-actions {
    animation: changelog-fade-up 0.55s ease 0.48s forwards;
}

.changelog-prompt-btn {
    width: 100%;
    margin: 0;
    padding: 13px 18px;
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.changelog-prompt-btn:active {
    transform: scale(0.985);
}

.changelog-prompt-btn-primary {
    border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    background: linear-gradient(
        135deg,
        var(--accent) 0%,
        color-mix(in srgb, var(--accent) 78%, #2d4a8a) 100%
    );
    color: #fff;
    box-shadow:
        0 10px 26px color-mix(in srgb, var(--accent) 32%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.changelog-prompt-btn-primary:hover {
    background: linear-gradient(
        135deg,
        var(--accent-hover) 0%,
        color-mix(in srgb, var(--accent-hover) 80%, #2d4a8a) 100%
    );
    box-shadow:
        0 12px 28px color-mix(in srgb, var(--accent) 38%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.changelog-prompt-btn-ghost {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-weight: 500;
    padding: 11px 18px;
}

.changelog-prompt-btn-ghost:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
    border-color: color-mix(in srgb, var(--accent) 16%, transparent);
}

@keyframes changelog-fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes changelog-badge-pop {
    0% {
        opacity: 0;
        transform: scale(0.72);
    }
    70% {
        opacity: 1;
        transform: scale(1.06);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes changelog-badge-ring {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@keyframes changelog-glow-pulse {
    0%, 100% {
        opacity: 0.45;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 0.72;
        transform: translateX(-50%) scale(1.08);
    }
}

.changelog-empty {
    margin: 0;
}

.settings-danger,
.profile-danger-zone {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-danger-title {
    color: var(--error);
}

.profile-reset-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-reset-scope.hidden {
    display: none !important;
}

.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

.checkbox-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    cursor: pointer;
}

.checkbox-list input {
    flex-shrink: 0;
}

.profile-status {
    font-size: 0.82rem;
    margin-top: 4px;
}

.profile-status.success {
    color: var(--success, #2d8a4e);
}

.profile-status.error {
    color: var(--danger, #c0392b);
}

.profile-status.info {
    color: var(--text-muted);
}

.settings-subhint {
    margin-bottom: 0;
}

.import-panel h3 {
    font-size: 1rem;
    margin-bottom: 8px;
}

.hint {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-bottom: 12px;
}

.hint code {
    background: var(--surface-2);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.hint.example {
    margin-top: 4px;
}

.import-settings,
.import-positions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
}

.import-settings label,
.import-positions label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.input-short {
    width: 80px;
    padding: 6px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.9rem;
}

.input-medium {
    width: 140px;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.9rem;
}

.checkbox-label {
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
    padding-top: 18px;
}

textarea {
    width: 100%;
    padding: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: "Cascadia Code", "Consolas", monospace;
    font-size: 0.85rem;
    resize: vertical;
    margin-bottom: 12px;
}

.import-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.import-result {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
}

.import-result.success {
    background: rgba(62, 207, 142, 0.15);
    color: var(--success);
}

.import-result.error {
    background: rgba(239, 95, 95, 0.15);
    color: var(--error);
}

.words-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin-bottom: 12px;
    align-items: flex-end;
}

.words-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 128px;
    min-width: 0;
    max-width: 100%;
}

.words-filter-field--search {
    flex: 2 1 220px;
    min-width: min(100%, 200px);
}

.words-filter-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.words-toolbar-actions {
    display: flex;
    align-items: flex-end;
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 0;
}

@media (max-width: 640px) {
    .words-filter-field--search,
    .words-toolbar-actions {
        flex-basis: 100%;
    }

    .words-toolbar-actions {
        margin-left: 0;
        justify-content: flex-start;
    }
}

.word-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.9rem;
}

.words-count-detail {
    margin-top: 4px;
    margin-bottom: 0;
}

.word-list-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.word-table {
    width: 100%;
    min-width: 840px;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.word-table .col-article { width: 52px; }
.word-table .col-word { width: 16%; }
.word-table .col-translation { width: 18%; min-width: 120px; }
.word-table .col-plural { width: 16%; min-width: 100px; }
.word-table .col-group { width: 24%; }
.word-table .col-mastery { width: 92px; }
.word-table .col-actions { width: 40px; }

.word-table th {
    text-align: left;
    padding: 8px 10px;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.75rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.word-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.word-cell,
.group-cell,
.mastery-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.translation-cell,
.plural-cell {
    overflow: visible;
    white-space: normal;
    line-height: 1.35;
    word-break: break-word;
}

.actions-cell {
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}

.word-table .article-der { color: var(--der); font-weight: 600; }
.word-table .article-die { color: var(--die); font-weight: 600; }
.word-table .article-das { color: var(--das); font-weight: 600; }

.word-table .plural-empty {
    color: var(--text-muted);
}

.mastery-badge {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 3px 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}

.mastery-level-0 {
    background: var(--mastery-0-bg);
    color: var(--mastery-0-fg);
    border-color: var(--mastery-0-border);
    border-style: dashed;
    font-weight: 500;
}

.mastery-learning {
    background: rgba(120, 160, 200, 0.14);
    color: var(--text);
    border-color: rgba(120, 160, 200, 0.45);
    border-style: dotted;
    font-weight: 600;
}

.mastery-level-1 {
    background: var(--mastery-1-bg);
    color: var(--mastery-1-fg);
    border-color: var(--mastery-1-border);
}

.mastery-level-2 {
    background: var(--mastery-2-bg);
    color: var(--mastery-2-fg);
    border-color: var(--mastery-2-border);
}

.mastery-level-3 {
    background: var(--mastery-3-bg);
    color: var(--mastery-3-fg);
    border-color: var(--mastery-3-border);
}

.mastery-level-4 {
    background: var(--mastery-4-bg);
    color: var(--mastery-4-fg);
    border-color: var(--mastery-4-border);
}

.mastery-level-5 {
    background: var(--mastery-5-bg);
    color: var(--mastery-5-fg);
    border-color: var(--mastery-5-border);
    box-shadow: 0 0 10px color-mix(in srgb, var(--mastery-5-fg) 18%, transparent);
}

.btn-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.15s;
}

.btn-delete:hover {
    color: var(--error);
}

/* Settings */
.setting-group {
    margin-bottom: 24px;
}

.setting-group:last-of-type {
    margin-bottom: 12px;
}

.setting-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text);
}

.radio-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.radio-group-vertical {
    flex-direction: column;
    gap: 10px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-muted);
    cursor: pointer;
}

.radio-option input[type="radio"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.radio-option:has(input:checked) {
    color: var(--text);
}

.settings-note {
    margin-bottom: 0;
}

.checkbox-setting {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--text-muted);
    cursor: pointer;
}

.checkbox-setting input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-setting:has(input:checked) {
    color: var(--text);
}

.auth-field-hint {
    margin-top: 2px;
    margin-bottom: 0;
}

/* Welcome screen — fullscreen cinematic */
.welcome-overlay {
    position: fixed;
    inset: 0;
    z-index: 980;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: clamp(28px, 5vh, 64px) clamp(32px, 8vw, 140px);
    background: #070a12;
    opacity: 0;
    transition: opacity 0.65s ease;
    overflow: hidden;
}

.welcome-overlay.welcome-visible {
    opacity: 1;
}

.welcome-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 160% 90% at 50% -10%, rgba(91, 141, 239, 0.12) 0%, transparent 58%),
        radial-gradient(ellipse 130% 60% at 50% 110%, rgba(15, 20, 35, 0.6) 0%, transparent 62%),
        linear-gradient(180deg, #0c1019 0%, #090d15 55%, #070a12 100%);
}

.welcome-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1280px;
    min-height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    color: #f4f6fb;
}

.welcome-brand {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 24px);
    align-self: flex-start;
}

.welcome-logo {
    display: block;
    width: clamp(72px, 8vw, 96px);
    height: clamp(72px, 8vw, 96px);
    border-radius: 22px;
    object-fit: contain;
    opacity: 0;
    flex-shrink: 0;
}

.welcome-stage.welcome-animate .welcome-logo {
    animation: welcome-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.welcome-brand-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}

.welcome-app-name {
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 246, 251, 0.92);
    opacity: 0;
}

.welcome-app-tagline {
    font-size: clamp(0.78rem, 1.1vw, 0.9rem);
    color: rgba(244, 246, 251, 0.42);
    letter-spacing: 0.02em;
    opacity: 0;
}

.welcome-stage.welcome-animate .welcome-app-name {
    animation: welcome-fade-up 0.75s ease 0.22s forwards;
}

.welcome-stage.welcome-animate .welcome-app-tagline {
    animation: welcome-fade-up 0.75s ease 0.32s forwards;
}

.welcome-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-top: clamp(20px, 4vh, 48px);
    padding-top: clamp(8px, 2vh, 20px);
}

.welcome-greeting {
    font-size: clamp(1.35rem, 2.8vw, 2.1rem);
    font-weight: 300;
    color: rgba(244, 246, 251, 0.68);
    margin-bottom: clamp(12px, 2.5vh, 28px);
    letter-spacing: 0.04em;
    opacity: 0;
}

.welcome-stage.welcome-animate .welcome-greeting {
    animation: welcome-fade-up 0.8s ease 0.48s forwards;
}

.welcome-name {
    font-size: clamp(3.2rem, 12vw, 7.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.98;
    margin-bottom: clamp(20px, 4vh, 44px);
    color: #ffffff;
    width: 100%;
    max-width: 14ch;
    opacity: 0;
}

.welcome-stage.welcome-animate .welcome-name {
    animation: welcome-name-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.68s forwards;
}

.welcome-divider {
    width: 0;
    height: 4px;
    margin-bottom: clamp(28px, 4vh, 44px);
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(91, 141, 239, 0.18) 20%,
        rgba(91, 141, 239, 0.38) 50%,
        rgba(91, 141, 239, 0.18) 80%,
        transparent 100%
    );
    opacity: 0.65;
}

.welcome-stage.welcome-animate .welcome-divider {
    animation: welcome-line-grow 1s cubic-bezier(0.22, 1, 0.36, 1) 1.05s forwards;
}

.welcome-subtitle {
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    color: rgba(244, 246, 251, 0.58);
    max-width: 36rem;
    line-height: 1.55;
    margin-bottom: clamp(36px, 5vh, 56px);
    opacity: 0;
}

.welcome-stage.welcome-animate .welcome-subtitle {
    animation: welcome-fade-up 0.8s ease 1.2s forwards;
}

.welcome-cta {
    display: inline-flex;
    justify-content: center;
}

.welcome-dismiss {
    opacity: 0;
    transform: translateY(18px);
    pointer-events: none;
    min-width: 220px;
    padding: 16px 52px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

.welcome-overlay.welcome-ready .welcome-dismiss {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.55s ease, transform 0.55s ease, background 0.2s ease, border-color 0.2s ease;
}

.welcome-overlay.welcome-ready .welcome-dismiss:hover {
    border-color: rgba(255, 255, 255, 0.26);
}

@media (max-width: 640px) {
    .welcome-brand {
        align-self: center;
        flex-direction: column;
        text-align: center;
    }

    .welcome-brand-text {
        text-align: center;
        align-items: center;
    }
}

@keyframes welcome-fade-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes welcome-name-in {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.92);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes welcome-line-grow {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: min(480px, 72vw);
        opacity: 0.65;
    }
}

/* Gentle answer celebration particles */
.answer-fx-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    overflow: hidden;
}

.fx-particle {
    position: fixed;
    font-size: 1rem;
    line-height: 1;
    opacity: 0;
    transform: translate(0, 0) scale(var(--scale, 1)) rotate(0deg);
    animation: fx-float var(--duration, 1.2s) ease-out var(--delay, 0s) forwards;
    will-change: transform, opacity;
}

.fx-particle--success {
    color: rgba(62, 207, 142, 0.85);
    text-shadow: 0 0 8px rgba(62, 207, 142, 0.35);
}

.fx-particle--soft {
    color: rgba(210, 120, 100, 0.55);
    font-size: 0.75rem;
}

@keyframes fx-float {
    0% {
        opacity: 0;
        transform: translate(0, 8px) scale(calc(var(--scale, 1) * 0.5)) rotate(0deg);
    }
    18% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(var(--dx, 0), var(--dy, -80px)) scale(var(--scale, 1))
            rotate(var(--spin, 0deg));
    }
}

@media (prefers-reduced-motion: reduce) {
    .fx-particle {
        animation: none;
        display: none;
    }

    .feedback {
        animation: none;
    }

    #view-trainer .article-trainer-stage.answer-correct .article-trainer-focus,
    #view-trainer .article-trainer-stage.answer-soft-wrong .article-trainer-focus,
    #view-plural .trainer-card.answer-correct,
    #view-singular .trainer-card.answer-correct,
    #view-plural .trainer-card.answer-soft-wrong,
    #view-singular .trainer-card.answer-soft-wrong {
        animation: none;
    }
}

/* Rules */
.level-toggle {
    display: flex;
    gap: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
}

.level-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.level-btn:hover {
    color: var(--text);
}

.level-btn.active {
    background: var(--accent);
    color: #fff;
}

.rules-level-hint {
    margin-top: -12px;
    margin-bottom: 20px;
}

.rules-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rules-principle {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow);
}

.rules-principle-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    line-height: 1.4;
}

.rules-principle p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.rules-principle strong {
    color: var(--text);
}

.rules-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    box-shadow: var(--shadow);
}

.rules-section-der {
    border-top: 3px solid var(--der);
}

.rules-section-die {
    border-top: 3px solid var(--die);
}

.rules-section-das {
    border-top: 3px solid var(--das);
}

.rules-section-neutral {
    border-top: 3px solid var(--accent);
}

.rules-section-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.rules-subsection {
    margin-bottom: 16px;
}

.rules-subsection:last-child {
    margin-bottom: 0;
}

.rules-subsection-title {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.rules-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rules-list li {
    font-size: 0.875rem;
    line-height: 1.55;
    padding-left: 14px;
    position: relative;
}

.rules-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: 0.5;
}

.rules-item-text {
    color: var(--text);
}

.rules-examples {
    color: var(--text-muted);
}

.rules-examples::before {
    content: " ";
}

.word-example {
    font-weight: 500;
    white-space: nowrap;
}

.rules-arrow {
    color: var(--text-muted);
    margin: 0 6px;
    font-weight: 600;
}

.rules-or {
    color: var(--text-muted);
    font-weight: 400;
}

.trainer-hub-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.activity-card {
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
}

.activity-card-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
}

.activity-streak-block {
    display: flex;
    flex-direction: column;
    min-width: 4.5rem;
}

.activity-streak-value {
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--text);
}

.activity-streak-label {
    margin-top: 4px;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-muted);
}

.activity-meta-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 14px;
    border-left: 1px solid var(--border);
}

.activity-meta-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
}

.activity-meta-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}

.activity-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 2px;
    border: none;
    background: transparent;
    color: var(--accent);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.activity-toggle-chevron {
    font-size: 1.2rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.activity-card--expanded .activity-toggle-chevron {
    transform: rotate(90deg);
}

.activity-calendar-panel {
    display: none;
    padding: 0 14px 14px;
    border-top: 1px solid var(--border);
}

.activity-card--expanded .activity-calendar-panel {
    display: block;
}

.activity-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0 10px;
}

.activity-month-label {
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.activity-nav-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.activity-nav-btn:hover {
    color: var(--text);
}

.activity-calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.activity-weekdays,
.activity-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.activity-weekday {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-muted);
}

.activity-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--surface-2);
}

.activity-day--blank {
    background: transparent;
}

.activity-day-num {
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--text-muted);
}

.activity-day--active {
    background: rgba(91, 141, 239, 0.22);
}

.activity-day--active .activity-day-num {
    color: var(--accent);
    font-weight: 600;
}

.activity-day--today {
    box-shadow: inset 0 0 0 1.5px var(--accent);
}

.activity-calendar-note {
    margin: 10px 0 0;
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.trainer-hub-insights {
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
}

.insights-hub-entry {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}

.insights-hub-entry:hover {
    background: var(--surface-2);
}

.insights-hub-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
}

.insights-hub-icon svg {
    width: 20px;
    height: 20px;
    opacity: 0.88;
}

.insights-hub-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.insights-hub-title {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
}

.insights-hub-subtitle {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.3;
}

.insights-hub-trail {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.insights-hub-badge {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
}

.insights-hub-chevron {
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
    color: var(--text-muted);
}

.progress-view {
    width: 100%;
}

.admin-view {
    width: 100%;
}

.admin-page-header {
    margin: 8px 0 20px;
}

.admin-page-title {
    margin: 0 0 4px;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.admin-page-lead,
.admin-curve-note {
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.admin-report-root {
    display: grid;
    gap: 16px;
}

.admin-panel-card,
.admin-trainer-card {
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    background: var(--surface-raised);
}

.admin-section-title,
.admin-trainer-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.admin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.admin-reset-btn {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 0.78rem;
    white-space: nowrap;
}

.admin-panel-card > .admin-metrics-grid,
.admin-trainer-card > .admin-metrics-grid {
    margin-top: 0;
}

.admin-trainer-section {
    display: grid;
    gap: 12px;
}

.admin-trainer-grid {
    display: grid;
    gap: 12px;
}

.admin-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-metric {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--surface-base);
    border: 1px solid var(--border-subtle);
}

.admin-metric-label {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.admin-metric-value {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

@media (max-width: 720px) {
    .admin-metrics-grid {
        grid-template-columns: 1fr;
    }
}

.progress-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 8px 0 20px;
    flex-wrap: wrap;
}

.progress-page-title {
    margin: 0 0 4px;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.progress-page-lead,
.progress-report-legend,
.progress-loading,
.progress-error {
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.progress-week-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
}

.progress-week-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.progress-report-root {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.progress-report-header {
    width: 100%;
    padding: 2px 2px 10px;
}

.progress-report-kicker {
    margin: 0 0 4px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
}

.progress-report-period {
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.progress-report-legend {
    margin: 0;
    max-width: 52rem;
}

.insights-card {
    width: 100%;
    padding: 0;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    overflow: hidden;
}

.insights-card-title {
    margin: 0;
    padding: 14px 16px 10px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.insights-card-note {
    margin: -4px 16px 10px;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.insights-grid {
    display: flex;
    flex-direction: column;
}

.insights-row {
    display: grid;
    grid-template-columns: minmax(7.5rem, 1.35fr) repeat(4, minmax(4.5rem, 1fr));
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-top: 1px solid var(--border);
}

.insights-row--head {
    padding-top: 8px;
    padding-bottom: 8px;
    background: var(--surface-2);
}

.insights-row--total {
    background: rgba(255, 255, 255, 0.02);
}

[data-theme="light"] .insights-row--total {
    background: rgba(0, 0, 0, 0.02);
}

.insights-cell {
    min-width: 0;
}

.insights-cell--head {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.25;
}

.insights-cell--label {
    text-align: left;
}

.insights-cell--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.insights-label {
    display: block;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
}

.insights-cell--muted {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-muted);
}

.insights-row:not(.insights-row--head) .insights-cell:nth-child(3) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-size: 0.9rem;
    font-weight: 500;
}

.insights-change-value {
    font-variant-numeric: tabular-nums;
}

.insights-cell--current {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}

.insights-change--up,
.insights-growth--up {
    color: var(--success);
}

.insights-change--down,
.insights-growth--down {
    color: var(--error);
}

.insights-change--flat,
.insights-growth--flat {
    color: var(--text-muted);
}

.insights-footnote {
    display: block;
    margin-top: 3px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--accent);
    line-height: 1.3;
}

.insights-arrow {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

.insights-arrow--up {
    color: var(--success);
}

.insights-arrow--down {
    color: var(--error);
}

.insights-arrow--flat {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1;
}

.insights-growth--up,
.insights-growth--down,
.insights-growth--flat {
    font-size: 0.86rem;
    font-weight: 500;
}

@media (max-width: 720px) {
    .insights-row {
        grid-template-columns: minmax(5.5rem, 1.2fr) repeat(4, minmax(3.2rem, 1fr));
        gap: 4px;
        padding: 10px 12px;
    }

    .insights-cell--head {
        font-size: 0.66rem;
    }

    .insights-label {
        font-size: 0.82rem;
    }

    .insights-cell--muted,
    .insights-cell--change,
    .insights-cell--current {
        font-size: 0.82rem;
    }
}

.progress-toast-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.progress-report-toast .progress-toast-btn {
    flex: 1;
    margin-top: 0;
}

@media (max-width: 900px) {
    .topbar-inner {
        grid-template-columns: auto 1fr auto;
    }

    .topnav {
        justify-self: end;
        position: static;
        left: auto;
        top: auto;
        flex: 1;
        transform: none;
        justify-content: flex-end;
        padding: 0;
    }

    .topnav-rail {
        gap: 4px;
        padding: 5px;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .topnav-rail::-webkit-scrollbar {
        display: none;
    }

    .topnav-item {
        min-height: 40px;
        padding: 10px 18px;
        font-size: 0.88rem;
    }
}

@media (max-width: 600px) {
    .topbar-inner {
        padding: 0 12px;
        gap: 12px;
    }

    .brand-name {
        display: none;
    }

    .topnav-item {
        padding: 10px 14px;
        font-size: 0.84rem;
    }
}

/* Settings page (scoped) */
.settings-view {
    padding-bottom: 32px;
}

.settings-view .settings-page-header {
    max-width: 760px;
    margin: 0 auto 28px;
}

.settings-view .settings-page-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.settings-view .settings-page-lead {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.settings-view .settings-page-body {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-view .settings-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.settings-view .settings-card-title {
    margin: 0;
    padding: 12px 16px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.settings-view .settings-card-title--danger {
    color: var(--error);
}

.settings-view .settings-card-intro {
    padding: 12px 16px 2px;
}

.settings-view .settings-card-heading {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}

.settings-view .settings-card-heading--danger {
    color: var(--error);
}

.settings-view .settings-card-desc {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.settings-view .settings-card-body {
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.settings-view .settings-card-footnote {
    margin: 0;
    padding: 0 16px 12px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.settings-view .settings-list {
    padding: 2px 16px 8px;
}

.settings-view .settings-list--compact-footer {
    padding-top: 0;
}

.settings-view .settings-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 16px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}

.settings-view .settings-list-row--action {
    align-items: start;
}

.settings-view .settings-list-row--action .settings-list-control {
    padding-top: 1px;
}

.settings-view .settings-list-label--danger {
    color: var(--error);
}

.settings-view .settings-list-status {
    margin: -4px 16px 8px;
}

.settings-view .settings-list-row:first-child {
    border-top: none;
}

.settings-view .settings-list-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.settings-view .settings-list-label {
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.35;
}

.settings-view .settings-list-hint {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.settings-view .settings-list-control {
    justify-self: end;
}

.settings-view .settings-select {
    min-width: 220px;
    max-width: 280px;
}

.settings-view .settings-segment {
    display: inline-flex;
    padding: 3px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    gap: 2px;
}

.settings-view .settings-segment-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 8px 14px;
    border-radius: 7px;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.settings-view .settings-segment-btn input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-view .settings-segment-btn:has(input:checked) {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.settings-view .settings-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.settings-view .settings-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-view .settings-switch-ui {
    position: relative;
    display: block;
    width: 46px;
    height: 28px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 35%, var(--border));
    transition: background 0.2s ease;
}

.settings-view .settings-switch-ui::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease;
}

.settings-view .settings-switch input:checked + .settings-switch-ui {
    background: var(--accent);
}

.settings-view .settings-switch input:checked + .settings-switch-ui::after {
    transform: translateX(18px);
}

.settings-view .settings-switch input:focus-visible + .settings-switch-ui {
    outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
    outline-offset: 2px;
}

.settings-view .settings-list-row--switch {
    cursor: pointer;
}

.settings-view .settings-list-row--nested {
    margin-left: 16px;
    padding-left: 16px;
    border-left: 2px solid color-mix(in srgb, var(--accent) 30%, var(--border));
}

.settings-view .settings-list-row--nested.is-disabled {
    opacity: 0.42;
}

.settings-view .settings-list-row--disabled {
    opacity: 0.55;
}

.settings-view .settings-list-row--disabled .settings-switch {
    pointer-events: none;
}

.settings-view .settings-list-copy--stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.settings-view .settings-list-row--compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px 10px;
    padding: 0;
}

.settings-view .settings-break-prefs-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px minmax(72px, max-content);
    gap: 8px 10px;
    align-items: center;
}

.settings-view .settings-break-prefs-grid .settings-list-row--compact {
    display: contents;
}

.settings-view .settings-break-prefs-grid .settings-list-control {
    justify-self: stretch;
}

.settings-view .settings-break-prefs-grid .settings-input-num {
    width: 100%;
    box-sizing: border-box;
}

.settings-view .settings-list-suffix {
    font-size: 0.82rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.settings-view .settings-inline-btn {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.settings-view .settings-inline-btn:hover {
    color: var(--text);
}

.settings-view .settings-input-num {
    width: 120px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
}

.settings-view .settings-input-num:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.settings-view .settings-callout {
    margin: 4px 24px 0;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-2));
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.55;
}

.settings-view .settings-callout:empty {
    display: none;
}

.settings-view .settings-card--danger {
    border-color: color-mix(in srgb, var(--error) 28%, var(--border));
    background: color-mix(in srgb, var(--error) 4%, var(--surface));
}

@media (max-width: 720px) {
    .settings-view .settings-page-header,
    .settings-view .settings-page-body {
        max-width: none;
    }

    .settings-view .settings-list-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .settings-view .settings-list-control {
        justify-self: stretch;
    }

    .settings-view .settings-select {
        width: 100%;
        max-width: none;
    }

    .settings-view .settings-segment {
        width: 100%;
    }

    .settings-view .settings-segment-btn {
        flex: 1;
    }

    .settings-view .settings-list-row--nested {
        margin-left: 0;
        padding-left: 12px;
    }
}

.settings-view .settings-hub {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 24px;
    max-width: 760px;
    margin: 0 auto;
    align-items: start;
}

.settings-view .settings-hub-nav {
    position: sticky;
    top: calc(var(--topbar-height) + 16px);
}

.settings-view .settings-hub-nav-title {
    margin: 0 0 12px;
    padding: 0 8px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.settings-view .settings-hub-nav-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings-view .settings-nav-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.settings-view .settings-nav-item:hover {
    background: var(--surface-2);
    color: var(--text);
}

.settings-view .settings-nav-item.active {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
    color: var(--text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, var(--border));
}

.settings-view .settings-hub-main {
    min-width: 0;
    max-width: 520px;
}

.settings-view .settings-hub-header {
    margin-bottom: 12px;
}

.settings-view .settings-hub-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.settings-view .settings-hub-lead {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.settings-view .settings-hub-panel {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.settings-view .settings-hub-panel.active {
    display: flex;
}

.settings-view .settings-avatar-block {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 16px 0;
}

.settings-view .settings-avatar-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.settings-view .settings-form-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 16px 12px;
}

.settings-view .settings-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-view .profile-input,
.settings-view .settings-text-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
}

.settings-view .profile-input:focus,
.settings-view .settings-text-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.settings-view .profile-fields {
    gap: 10px;
    margin-top: 0;
}

.settings-view .profile-fields label {
    gap: 4px;
}

.settings-view .profile-save-bar {
    margin-top: 2px;
}

.settings-view .profile-save-btn,
.settings-view .profile-logout-btn {
    width: auto;
    max-width: none;
    min-height: 0;
}

.settings-view .profile-action-btn {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0;
}

.settings-view .profile-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 10px;
}

.settings-view .profile-value-text {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0;
}

.settings-view .profile-avatar-preview {
    width: 56px;
    height: 56px;
}

.settings-view .profile-avatar-initials {
    font-size: 1rem;
}

.settings-view .profile-avatar-actions {
    gap: 6px;
}

.settings-view .setting-label {
    font-size: 0.84rem;
}

.settings-view .settings-subhint,
.settings-view .hint {
    font-size: 0.78rem;
    line-height: 1.35;
}

.settings-view .password-field {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.settings-view .password-field .profile-input {
    flex: 1;
    min-width: 0;
}

.settings-view .settings-form-actions {
    padding-top: 4px;
}

.settings-view .settings-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0 4px;
}

.settings-view .settings-expand {
    margin: -2px 16px 10px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.settings-view .settings-expand .profile-inline-actions .btn-primary,
.settings-view .settings-expand .profile-inline-actions .btn-secondary,
.settings-view .settings-expand .profile-inline-actions .btn-danger {
    min-height: 0;
}

.settings-view .settings-expand .checkbox-list {
    max-height: 180px;
    padding: 8px 10px;
    font-size: 0.84rem;
}

.settings-view .settings-expand.hidden {
    display: none;
}

.settings-view .settings-list-value {
    font-size: 0.92rem;
    color: var(--text-muted);
}

.settings-view .settings-list-value--strong {
    color: var(--text);
    font-weight: 500;
}

.settings-view .settings-logout-btn {
    width: auto;
    max-width: none;
}

@media (max-width: 860px) {
    .settings-view .settings-hub {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .settings-view .settings-hub-main {
        max-width: none;
    }

    .settings-view .settings-hub-nav {
        position: static;
    }

    .settings-view .settings-hub-nav-list {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .settings-view .settings-hub-nav-list::-webkit-scrollbar {
        display: none;
    }

    .settings-view .settings-nav-item {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .settings-view .settings-hub-nav-title {
        padding: 0;
        margin-bottom: 12px;
    }
}

/* Coaching overlays */
.coaching-overlay {
    position: fixed;
    inset: 0;
    z-index: 990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 5vh, 48px) clamp(20px, 6vw, 80px);
    background: #070a12;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.coaching-overlay.coaching-visible {
    opacity: 1;
}

.coaching-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 140% 80% at 50% -10%, rgba(91, 141, 239, 0.14) 0%, transparent 58%),
        linear-gradient(180deg, #0c1019 0%, #070a12 100%);
}

.coaching-stage {
    position: relative;
    z-index: 1;
    width: min(640px, 100%);
    color: #f4f6fb;
}

.coaching-stage-centered {
    text-align: center;
}

.coaching-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.coaching-content-praise {
    align-items: center;
    gap: 20px;
}

.coaching-greeting {
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(244, 246, 251, 0.72);
}

.coaching-title {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.2;
}

.coaching-title-large {
    font-size: clamp(1.75rem, 5vw, 2.4rem);
}

.coaching-body,
.coaching-note {
    margin: 0;
    color: rgba(244, 246, 251, 0.86);
    line-height: 1.55;
    font-size: 1.02rem;
}

.coaching-note {
    color: rgba(244, 246, 251, 0.62);
    font-size: 0.95rem;
}

.coaching-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.coaching-actions-primary {
    margin-top: 12px;
}

.coaching-btn {
    width: 100%;
    min-height: 46px;
}

.coaching-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #f4f6fb;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.coaching-btn-ghost {
    background: color-mix(in srgb, var(--surface-2) 35%, transparent);
    color: var(--text-muted);
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.12s ease;
}

.coaching-btn-ghost:hover {
    background: color-mix(in srgb, var(--surface-2) 92%, transparent);
    border-color: var(--border);
    color: var(--text);
}

.coaching-btn-ghost:active {
    transform: scale(0.98);
}

.coaching-btn-back {
    width: auto;
    min-height: auto;
    padding: 8px 12px;
    font-size: 0.92rem;
}

.coaching-pause-clock {
    font-size: clamp(2.5rem, 10vw, 4rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}

.achievement-toast.coaching-toast .achievement-toast-kicker {
    color: color-mix(in srgb, var(--badge-color) 65%, var(--text));
}

[data-theme="light"] .achievement-toast.coaching-toast .achievement-toast-kicker {
    color: color-mix(in srgb, var(--badge-color) 40%, #14213d);
}

.flow-overlay:not(.flow-visible) .flow-backdrop,
.placement-overlay:not(.flow-visible):not(.placement-visible) .flow-backdrop,
.placement-overlay:not(.flow-visible):not(.placement-visible) .placement-bg {
    opacity: 0;
}

html.flow-scroll-lock,
html.flow-scroll-lock body {
    overflow: hidden;
}

.onboarding-wizard-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.onboarding-wizard-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
}

.onboarding-wizard-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 35%, transparent);
    transition: transform 0.24s ease, background 0.24s ease;
}

.onboarding-wizard-dot.is-active {
    transform: scale(1.25);
    background: var(--accent);
}

.onboarding-wizard-dot.is-done {
    background: color-mix(in srgb, var(--accent) 55%, var(--text-muted));
}

.onboarding-wizard-step {
    display: none;
}

.onboarding-wizard-step.is-active {
    display: block;
    animation: onboarding-step-in 0.28s ease;
}

@keyframes onboarding-step-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.confirm-flow-panel .flow-panel-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.trainer-difficulty {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 2px 0 8px;
}

.trainer-difficulty-pepper {
    font-size: 0.98rem;
    line-height: 1;
    opacity: 0.34;
    filter: grayscale(1) saturate(0);
}

.trainer-difficulty-pepper.is-hot {
    opacity: 1;
    filter: none;
}

.placement-overlay,
.flow-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    opacity: 1;
    pointer-events: none;
}

.placement-overlay.placement-visible,
.placement-overlay.flow-visible,
.flow-overlay.placement-visible,
.flow-overlay.flow-visible {
    pointer-events: auto;
}

.placement-bg,
.flow-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg) 42%, transparent);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    opacity: 0;
    transition: opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity;
}

.placement-overlay.placement-visible .placement-bg,
.placement-overlay.flow-visible .flow-backdrop,
.flow-overlay.flow-visible .flow-backdrop {
    opacity: 1;
}

.placement-stage,
.flow-panel {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: min(88vh, 760px);
    overflow: auto;
    overflow-anchor: none;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-muted) 42%, transparent) transparent;
    padding: clamp(22px, 4vw, 32px);
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    background: var(--surface);
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.18);
    text-align: left;
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.flow-overlay.flow-visible .flow-panel,
.placement-overlay.placement-visible .placement-stage {
    opacity: 1;
    transform: translateY(0);
}

.flow-panel::-webkit-scrollbar {
    width: 8px;
}

.flow-panel::-webkit-scrollbar-track {
    background: transparent;
}

.flow-panel::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 42%, transparent);
}

.flow-panel::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--text-muted) 58%, transparent);
}

.flow-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.flow-panel-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

.flow-panel-kicker,
.placement-kicker {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.flow-panel-title,
.placement-title {
    margin: 0 0 10px;
    font-size: clamp(1.35rem, 4vw, 1.75rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.flow-panel-stat {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
}

.flow-panel-stat + .flow-panel-stat {
    margin-bottom: 14px;
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.flow-panel-body,
.placement-body {
    margin: 0 0 20px;
    color: var(--text-muted);
    line-height: 1.55;
}

.flow-panel-notes {
    margin: 0 0 18px;
    padding-left: 1.15em;
    color: var(--text-muted);
    line-height: 1.55;
}

.flow-panel-notes li + li {
    margin-top: 10px;
}

.flow-panel-sendoff {
    margin: 0 0 22px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.45;
}

.flow-panel-meta,
.placement-result-anchor {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.flow-panel-level,
.placement-result-level {
    margin: 0 0 8px;
    font-size: clamp(2.5rem, 10vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
}

.flow-panel-section {
    margin-bottom: 18px;
}

.flow-panel-section-label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.flow-panel-actions,
.placement-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.flow-panel-btn,
.placement-btn {
    width: 100%;
}

.flow-panel-btn-ghost,
.placement-btn-ghost {
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 10px 0;
    font-size: 0.92rem;
}

.flow-panel-btn-ghost:hover,
.placement-btn-ghost:hover {
    color: var(--text);
}

@media (min-width: 720px) {
    .flow-overlay,
    .placement-overlay {
        align-items: center;
        padding: 24px;
    }

    .flow-panel,
    .placement-stage {
        border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
        border-radius: 24px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    }
}

.changelog-flow-overlay {
    z-index: 940;
}

.changelog-flow-panel.is-ready {
    opacity: 1;
}

.changelog-flow-panel.is-animate {
    animation: flow-panel-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes flow-panel-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.placement-progress {
    margin: 0 0 12px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.placement-word {
    margin: 0 0 8px;
    font-size: clamp(2.2rem, 8vw, 3.2rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.placement-translation {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.placement-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.placement-buttons .article-btn {
    max-width: none;
}

.placement-feedback {
    margin-top: 8px;
    font-size: 0.92rem;
    font-weight: 600;
}

.placement-feedback.correct {
    color: var(--success);
}

.placement-feedback.wrong {
    color: var(--error);
}

.placement-result-level {
    margin: 0 0 8px;
    font-size: clamp(2.5rem, 10vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
}

.placement-result-anchor {
    margin: 0 0 16px;
    color: var(--text-muted);
}

.placement-trainer-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(230, 178, 92, 0.35);
    background: rgba(230, 178, 92, 0.12);
}

/* Calibration banner: text + skip only (delay lives in the trainer toolbar). */
.placement-trainer-banner > :not(.placement-trainer-banner-copy):not(#placement-skip-banner),
.placement-trainer-banner .trainer-delay-control {
    display: none !important;
}

.placement-settings-return {
    margin: 0 0 14px;
}

.placement-settings-return-btn {
    border: 1px solid rgba(230, 178, 92, 0.45);
    border-radius: 12px;
    background: rgba(230, 178, 92, 0.12);
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    padding: 10px 14px;
}

.onboarding-locale-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.onboarding-theme-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.onboarding-locale-option,
.onboarding-theme-option {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    padding: 14px 12px;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.onboarding-locale-option:hover,
.onboarding-theme-option:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.onboarding-locale-option.is-selected,
.onboarding-theme-option.is-selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
    transform: translateY(-1px);
}

.onboarding-catchup-notice {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.45;
}

.flow-panel-actions--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.flow-panel-actions-primary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: min(100%, 240px);
}

.onboarding-audience-grid {
    display: grid;
    gap: 10px;
    margin: 16px 0 20px;
}

.onboarding-audience-option {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.onboarding-audience-option-title {
    font-size: 0.95rem;
    font-weight: 600;
}

.onboarding-audience-option-body {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.onboarding-audience-option:hover,
.onboarding-audience-option.is-selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
}

.achievement-toast--clickable {
    cursor: pointer;
}

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

.achievement-badge.is-newly-unlocked {
    animation: achievement-unlock-pop 1.1s ease;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--badge-color, var(--accent)) 55%, transparent);
}

@keyframes achievement-unlock-pop {
    0% { transform: scale(0.96); filter: grayscale(0.35); }
    45% { transform: scale(1.04); filter: grayscale(0); }
    100% { transform: scale(1); }
}

.placement-trainer-banner-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.placement-trainer-banner-title {
    font-size: 0.88rem;
    font-weight: 600;
}

.placement-trainer-banner-progress {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.placement-trainer-banner-skip {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 6px 8px;
}

body.placement-trainer-mode .trainer-back-link,
body.placement-trainer-mode .trainer-scope,
body.placement-trainer-mode .trainer-rules-btn,
body.placement-trainer-mode .topnav-item,
body.placement-trainer-mode .brand {
    pointer-events: none;
    opacity: 0.42;
}

body.placement-trainer-mode .user-menu-btn {
    pointer-events: auto;
    opacity: 1;
}

body.placement-trainer-mode .user-menu-item:not([data-view="settings"]) {
    pointer-events: none;
    opacity: 0.42;
}

body.placement-trainer-mode .user-menu-item[data-view="settings"] {
    pointer-events: auto;
    opacity: 1;
}

body.placement-trainer-mode .trainer-delay-control,
body.placement-trainer-mode .placement-trainer-banner-skip {
    pointer-events: auto;
    opacity: 1;
}

body.placement-trainer-mode #trainer-next.hidden {
    display: none !important;
}

body.placement-trainer-mode #trainer-next.is-revealed {
    display: inline-flex !important;
}

body.placement-recheck-mode #placement-skip-banner,
body.placement-recheck-mode .trainer-delay-control,
body.placement-recheck-mode .user-menu-btn,
body.placement-recheck-mode .user-menu-item {
    display: none !important;
    pointer-events: none;
}

/* Trainer readiness briefing — parchment sheet */
.trainer-briefing-overlay {
    position: fixed;
    inset: 0;
    z-index: 12050;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.trainer-briefing-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.trainer-briefing-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, #1a1408 42%, transparent);
}

.trainer-briefing-sheet {
    position: relative;
    width: min(520px, 100%);
    max-height: min(86vh, 720px);
    overflow: auto;
    padding: 28px 26px 22px;
    border-radius: 4px 8px 10px 5px;
    border: 1px solid color-mix(in srgb, #c4a24a 55%, #8b6914);
    background: linear-gradient(165deg, #fff8df 0%, #f8ebc0 38%, #f3e2ad 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        0 18px 42px rgba(40, 28, 8, 0.28),
        3px 6px 0 rgba(120, 90, 30, 0.12);
    transform: rotate(-0.35deg) translateY(8px);
    transition: transform 0.32s ease;
}

.trainer-briefing-overlay.is-visible .trainer-briefing-sheet {
    transform: rotate(-0.35deg) translateY(0);
}

.trainer-briefing-sheet-texture {
    pointer-events: none;
    position: absolute;
    inset: 0;
    opacity: 0.45;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent 0 3px,
            color-mix(in srgb, #8b6914 7%, transparent) 3px 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0 5px,
            color-mix(in srgb, #8b6914 5%, transparent) 5px 6px
        );
    mix-blend-mode: multiply;
}

.trainer-briefing-sheet-header,
.trainer-briefing-intro,
.trainer-briefing-list,
.trainer-briefing-advanced,
.trainer-briefing-actions {
    position: relative;
    z-index: 1;
}

.trainer-briefing-kicker {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, #6b4f12 78%, #2a1f08);
}

.trainer-briefing-title {
    margin: 6px 0 0;
    font-size: 1.35rem;
    line-height: 1.2;
    color: #2a1f08;
}

.trainer-briefing-intro {
    margin: 14px 0 0;
    line-height: 1.5;
    color: color-mix(in srgb, #2a1f08 88%, #6b4f12);
}

.trainer-briefing-list {
    margin: 14px 0 0;
    padding-left: 1.15rem;
    line-height: 1.45;
    color: #2a1f08;
}

.trainer-briefing-list li + li {
    margin-top: 8px;
}

.trainer-briefing-advanced {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-left: 3px solid color-mix(in srgb, #c4a24a 70%, #8b6914);
    background: color-mix(in srgb, #fffdf4 55%, transparent);
}

.trainer-briefing-actions {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
}

.trainer-toolbar-icon-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.trainer-briefing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid color-mix(in srgb, #c4a24a 45%, var(--border));
    background: color-mix(in srgb, #fff8df 70%, var(--surface));
    color: color-mix(in srgb, #6b4f12 80%, var(--text));
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.trainer-briefing-btn:hover {
    background: color-mix(in srgb, #f8ebc0 80%, var(--surface));
    border-color: color-mix(in srgb, #c4a24a 65%, var(--border));
}

.cases-trainer-chrome {
    position: relative;
    width: 100%;
}

#view-cases .trainer-toolbar--cases {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: 16px;
}

#view-cases .trainer-toolbar-center {
    justify-content: center;
    justify-self: center;
    flex-wrap: wrap;
    gap: 0;
    max-width: 100%;
}

#view-cases .trainer-toolbar-group {
    display: flex;
    align-items: flex-end;
    padding: 0 12px;
}

#view-cases .trainer-toolbar-divider {
    width: 1px;
    align-self: stretch;
    min-height: 2.1rem;
    margin: 2px 2px 4px;
    background: color-mix(in srgb, var(--border) 52%, transparent);
    flex-shrink: 0;
}

#view-cases .cases-tier-compact {
    max-width: none;
}

.cases-input-toggle-btn {
    min-width: 0;
}

.cases-input-toggle-btn[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
    color: var(--accent);
}

.cases-input-toggle-icon {
    font-size: 0.82rem;
    line-height: 1;
}

#view-cases .cases-trainer-stage {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: clamp(12px, 2.5vh, 28px) 0 0;
    text-align: center;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: visible;
    width: 100%;
    max-width: none;
}

#view-cases .cases-trainer-focus {
    text-align: center;
    width: min(780px, 100%);
    min-width: 0;
    margin: 0 auto clamp(6px, 1.2vh, 10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: center;
}

#view-cases .cases-trainer-interaction {
    width: min(780px, 100%);
    margin-inline: auto;
    align-self: stretch;
}

#view-cases .cases-trainer-answer.article-trainer-answer {
    width: 100%;
    align-items: stretch;
}

#view-cases .cases-trainer-result.article-trainer-result {
    align-items: stretch;
    width: 100%;
}

#view-cases .cases-trainer-focus--cloze .cases-sentence {
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    line-height: 1.5;
    margin: 0;
    max-width: 100%;
}

#view-cases .cases-trainer-focus--cloze .cloze-gap {
    min-width: 3.4rem;
}

#view-cases .cases-sentence--feedback {
    font-size: clamp(1.28rem, 2.3vw, 1.68rem);
    line-height: 1.48;
}

#view-cases .article-trainer-feedback .feedback-line--sentence {
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.45;
    opacity: 1;
}

#view-cases .cases-article-buttons {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

#view-cases .cases-trainer-answer {
    gap: 14px;
}

#view-cases .cases-trainer-answer .article-answer-input-wrap {
    margin-inline: auto;
}

#view-cases .cases-article-buttons .article-btn {
    min-width: 88px;
    flex: 1 1 88px;
    max-width: 140px;
}

#view-cases .cases-trainer-footer .cases-submit-btn {
    margin-top: 0;
}

.cases-case-badge {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, #3d6b45 85%, var(--text));
    background: color-mix(in srgb, #3d8f52 12%, var(--surface));
    border: 1px solid color-mix(in srgb, #3d8f52 28%, var(--border));
}

.cases-case-badge--acc {
    color: color-mix(in srgb, #2b6fd4 88%, var(--text));
    background: color-mix(in srgb, #2b6fd4 12%, var(--surface));
    border-color: color-mix(in srgb, #2b6fd4 30%, var(--border));
}

.cases-case-badge--dat {
    color: color-mix(in srgb, #7e22ce 88%, var(--text));
    background: color-mix(in srgb, #7e22ce 12%, var(--surface));
    border-color: color-mix(in srgb, #7e22ce 30%, var(--border));
}

.cases-sentence {
    font-size: 1.35rem;
    line-height: 1.45;
    margin: 0 0 10px;
}

.cases-article-buttons {
    justify-content: center;
    flex-wrap: wrap;
}

.cases-tier-control {
    display: inline-flex;
    gap: 4px;
    padding: 2px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.cases-tier-pill {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-muted);
}

.cases-tier-pill.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
}