/*
 * Root color scheme variables. Each palette (light/dark) is declared exactly
 * once, as --light-color-* / --dark-color-* on :root. The three mode selectors
 * below only assign the active --color-* aliases from those two sources, so
 * a color value never needs to be edited in more than one place.
 */
:root {
    --light-color-bg: #f5f5f5;
    --light-color-surface: #ffffff;
    --light-color-text: #1a1a1a;
    --light-color-text-muted: #666666;
    --light-color-border: #e0e0e0;
    --light-color-primary: #4caf50;
    --light-color-primary-hover: #45a049;
    --light-color-secondary: #cccccc;
    --light-color-success: #4caf50;
    --light-color-error: #f44336;
    --light-color-on-primary: #ffffff;

    --dark-color-bg: #1e1e1e;
    --dark-color-surface: #2d2d2d;
    --dark-color-text: #e8e8e8;
    --dark-color-text-muted: #999999;
    --dark-color-border: #404040;
    --dark-color-primary: #66bb6a;
    --dark-color-primary-hover: #5ba364;
    --dark-color-secondary: #555555;
    --dark-color-success: #66bb6a;
    --dark-color-error: #ef5350;
    --dark-color-on-primary: #ffffff;

    /* Default (no saved/system preference yet): light palette. */
    --color-bg: var(--light-color-bg);
    --color-surface: var(--light-color-surface);
    --color-text: var(--light-color-text);
    --color-text-muted: var(--light-color-text-muted);
    --color-border: var(--light-color-border);
    --color-primary: var(--light-color-primary);
    --color-primary-hover: var(--light-color-primary-hover);
    --color-secondary: var(--light-color-secondary);
    --color-success: var(--light-color-success);
    --color-error: var(--light-color-error);
    --color-on-primary: var(--light-color-on-primary);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: var(--dark-color-bg);
        --color-surface: var(--dark-color-surface);
        --color-text: var(--dark-color-text);
        --color-text-muted: var(--dark-color-text-muted);
        --color-border: var(--dark-color-border);
        --color-primary: var(--dark-color-primary);
        --color-primary-hover: var(--dark-color-primary-hover);
        --color-secondary: var(--dark-color-secondary);
        --color-success: var(--dark-color-success);
        --color-error: var(--dark-color-error);
        --color-on-primary: var(--dark-color-on-primary);
    }
}

:root[data-theme="dark"] {
    --color-bg: var(--dark-color-bg);
    --color-surface: var(--dark-color-surface);
    --color-text: var(--dark-color-text);
    --color-text-muted: var(--dark-color-text-muted);
    --color-border: var(--dark-color-border);
    --color-primary: var(--dark-color-primary);
    --color-primary-hover: var(--dark-color-primary-hover);
    --color-secondary: var(--dark-color-secondary);
    --color-success: var(--dark-color-success);
    --color-error: var(--dark-color-error);
    --color-on-primary: var(--dark-color-on-primary);
}

:root[data-theme="light"] {
    --color-bg: var(--light-color-bg);
    --color-surface: var(--light-color-surface);
    --color-text: var(--light-color-text);
    --color-text-muted: var(--light-color-text-muted);
    --color-border: var(--light-color-border);
    --color-primary: var(--light-color-primary);
    --color-primary-hover: var(--light-color-primary-hover);
    --color-secondary: var(--light-color-secondary);
    --color-success: var(--light-color-success);
    --color-error: var(--light-color-error);
    --color-on-primary: var(--light-color-on-primary);
}

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

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: background-color 0.3s, color 0.3s;
}

/* Layout */
body {
    display: flex;
    flex-direction: column;
    /*
     * Exact viewport height (not min-height) so .app-main below is forced to
     * shrink to the remaining space instead of the flex column growing past
     * the viewport with tall content. overflow: hidden prevents a second,
     * whole-document scrollbar from appearing alongside .app-main's own
     * overflow-y: auto once the height is capped.
     */
    height: 100vh;
    overflow: hidden;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
    gap: 20px;
    /* Excludes this element from body's flex-shrink algorithm entirely, so
       only .app-main (flex: 1 1 auto, min-height: 0) absorbs a tall page. */
    flex-shrink: 0;
}

.header-left {
    /*
     * Comes first in source order and stays first on-screen: just the title
     * now (the learned indicator is its own full-width row below, see
     * .learned-indicator). Still allowed to shrink instead of forcing
     * .header-right to wrap on narrow screens.
     */
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
}

.app-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--color-text);
    margin: 0;
}

.header-center {
    /*
     * Ordered after .learned-indicator on purpose: row 1 is title + theme
     * toggle, row 2 is the learned-progress bar (always present), row 3 is
     * quiz-session progress (only on quiz pages). On most pages this block
     * is empty (no quiz in progress), so it is removed from the layout
     * entirely via the :empty rule below and reserves no space at all.
     */
    order: 4;
    flex: 1 1 100%;
    min-width: 0;
}

.header-center:empty {
    display: none;
}

.learned-indicator {
    /*
     * A direct child of .app-header (not nested in .header-left) so it gets
     * its own full-width flex row below the title/theme-toggle row, all the
     * way to the header's right edge — the theme-toggle buttons live on the
     * row above and never share space with this one.
     */
    order: 3;
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.learned-indicator-text {
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.learned-indicator-bar {
    /* Stretches to fill the remaining header width up to .header-right,
       instead of staying a fixed-width sliver. */
    flex: 1 1 auto;
    width: auto;
    min-width: 24px;
    height: 3px;
    background-color: var(--color-border);
    border-radius: 2px;
    overflow: hidden;
}

.learned-indicator-fill {
    height: 100%;
    background-color: var(--color-primary);
    transition: width 0.3s ease;
}

.header-right {
    /* Ordered right after .header-left so the theme toggle always stays on
       the title's row instead of wrapping onto its own full-width line. */
    order: 2;
    flex: 0 0 auto;
}

.app-main {
    flex: 1 1 auto;
    /*
     * min-height: 0 overrides the flex item's default auto min-height
     * (which equals its content's height in the flex axis) — without it,
     * .app-main would refuse to shrink below its own content height even
     * though body is now capped at height: 100vh, and overflow-y: auto
     * below would never actually engage.
     */
    min-height: 0;
    padding: 20px;
    overflow-y: auto;
}

/* Main Navigation */
.main-nav {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    /*
     * overflow-x: auto implicitly sets overflow-y: auto too (CSS Overflow's
     * "value pairing" rule), which makes this flex item's automatic minimum
     * size along body's vertical main axis 0 instead of its content height
     * (Flexbox spec). Without flex-shrink: 0 it would then get squeezed
     * almost flat whenever a tall .app-main pushes body's total height past
     * 100vh, instead of only .app-main (which is meant to shrink) doing so.
     */
    flex-shrink: 0;
}

.main-nav-link {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.main-nav-link:hover {
    color: var(--color-text);
}

/* Progress Bar */
.progress-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background-color: var(--color-border);
    border-radius: 3px;
    overflow: hidden;
    min-width: 200px;
}

.progress-fill {
    height: 100%;
    background-color: var(--color-primary);
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Theme Toggle */
.theme-toggle {
    display: flex;
    gap: 8px;
    background-color: var(--color-bg);
    border-radius: 4px;
    padding: 4px;
}

.theme-btn {
    width: 28px;
    height: 28px;
    border: none;
    background-color: transparent;
    color: var(--color-text-muted);
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s;
}

.theme-btn:hover {
    background-color: var(--color-border);
}

.theme-btn.active {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

/* Buttons */
.btn {
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-text);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-border);
}

.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-large {
    padding: 14px 24px;
    font-size: 15px;
}

/* Quiz Container */
.quiz-container {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

.quiz-card {
    background-color: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: 6px;
    padding: 40px;
    gap: 30px;
    display: flex;
    flex-direction: column;
}

.quiz-direction {
    font-size: 11px;
    font-weight: bold;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quiz-question {
    text-align: center;
}

.word-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.question-word {
    font-size: 44px;
    font-weight: bold;
    color: var(--color-text);
    margin: 0;
}

.transcription {
    font-size: 15px;
    color: var(--color-text-muted);
    margin: 0;
    font-style: italic;
}

.play-btn {
    width: 40px;
    height: 40px;
    border: 1.5px solid transparent;
    border-radius: 50%;
    background-color: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.play-btn:hover,
.play-btn:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: rgba(76, 175, 80, 0.12);
}

.play-btn:active {
    transform: scale(0.9);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.play-icon {
    width: 20px;
    height: 20px;
}

.quiz-context {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 16px;
}

.quiz-context p {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.quiz-option {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background-color: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.quiz-option:hover {
    border-color: var(--color-primary);
}

.quiz-option input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-right: 12px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.option-label {
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-text);
}

.quiz-option input[type="radio"]:checked + .option-label {
    font-weight: 600;
}

.quiz-navigation {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.quiz-navigation .btn {
    flex: 0 1 auto;
}

.quiz-finish-now {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

/* Home Container */
.home-container {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.welcome-section {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 40px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.welcome-section h2 {
    font-size: 28px;
    margin: 0;
    color: var(--color-text);
}

.welcome-section p {
    font-size: 16px;
    color: var(--color-text-muted);
    margin: 0;
}

.stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.stat-card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.stat-label {
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.stat-value {
    font-size: 28px;
    font-weight: bold;
    color: var(--color-primary);
}

/* Import Container */
.import-container {
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.import-instructions {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 24px;
    text-align: center;
}

.import-instructions h2 {
    margin: 0 0 8px;
    color: var(--color-text);
}

.import-instructions p {
    margin: 0;
    color: var(--color-text-muted);
}

.import-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--color-text-muted);
}

/* Author `display: flex` above wins over UA `[hidden] { display: none }` at equal specificity, so this must be explicit. */
.import-loading[hidden] {
    display: none;
}

.import-loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: import-spin 0.8s linear infinite;
}

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

.import-result-success,
.import-result-error {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 20px;
}

.import-result-summary {
    margin: 0 0 12px;
    font-weight: 600;
    color: var(--color-text);
}

.import-word-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Import result cards reuse `.dictionary-entry` and its descendant classes
   (see buildImportWordItem in app.js) - only the "новое"/"дополнено"
   status badge is import-specific, styled as an emphasized `.dict-badge`. */
.import-word-status {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.import-result-error-message {
    color: var(--color-error);
    margin: 0 0 8px;
    font-weight: 600;
}

.import-result-retry-hint {
    margin: 0;
    color: var(--color-text-muted);
}

/* Diagnostic line ("Модель: ... · Попыток: ...") shown under every import
   result (success or failure), so Gemini API instability - retries caused
   by transient 503/504 errors - is visible live (CLAUDE.md). */
.import-result-diagnostics {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Result Container */
.result-container {
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
}

.result-card {
    background-color: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: 6px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.result-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.result-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-on-primary);
}

.result-status.correct .result-icon {
    background-color: var(--color-success);
}

.result-status.incorrect .result-icon {
    background-color: var(--color-error);
}

.result-icon svg {
    width: 32px;
    height: 32px;
}

.result-message {
    font-size: 28px;
    margin: 0;
}

.result-status.correct .result-message {
    color: var(--color-success);
}

.result-status.incorrect .result-message {
    color: var(--color-error);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.result-details, .result-learning-status {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 16px;
}

.result-details-label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.result-details-value {
    font-size: 16px;
    font-weight: bold;
    margin-top: 4px;
}

.result-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.result-option {
    padding: 12px 16px;
    background-color: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: 4px;
    font-size: 14px;
    color: var(--color-text);
}

.result-option-correct {
    border-color: var(--color-success);
    background-color: rgba(76, 175, 80, 0.12);
    color: var(--color-success);
    font-weight: 600;
}

.result-option-incorrect {
    border-color: var(--color-error);
    background-color: rgba(244, 67, 54, 0.12);
    color: var(--color-error);
    font-weight: 600;
}

.result-contexts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.result-context-item {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 12px 16px;
}

.result-context-en {
    font-size: 13px;
    margin: 0;
}

.result-context-ru {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 4px 0 0;
}

.result-context-de {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 4px 0 0;
}

.result-actions {
    display: flex;
    justify-content: center;
}

.result-actions .btn {
    width: 100%;
}

/* Session Result */
.session-result-container {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.session-result-card {
    background-color: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: 6px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.session-result-title {
    font-size: 28px;
    margin: 0;
}

.accuracy-gauge {
    position: relative;
    width: 160px;
    height: 160px;
}

.accuracy-gauge svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.accuracy-gauge-track {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 10;
}

.accuracy-gauge-fill {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s ease;
}

.accuracy-gauge-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    font-weight: bold;
    color: var(--color-primary);
}

.session-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
}

.session-stat-card {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.session-stat-correct {
    border-color: var(--color-success);
    background-color: rgba(76, 175, 80, 0.08);
}

.session-stat-incorrect {
    border-color: var(--color-error);
    background-color: rgba(244, 67, 54, 0.08);
}

.session-stat-label {
    font-size: 11px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-weight: 600;
}

.session-stat-correct .session-stat-label {
    color: var(--color-success);
}

.session-stat-incorrect .session-stat-label {
    color: var(--color-error);
}

.session-stat-value {
    font-size: 28px;
    font-weight: bold;
}

.session-stat-correct .session-stat-value {
    color: var(--color-success);
}

.session-stat-incorrect .session-stat-value {
    color: var(--color-error);
}

.session-result-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 100%;
}

.session-result-actions form,
.session-result-actions .btn {
    flex: 1;
}

.session-result-actions form .btn {
    width: 100%;
}

/* Mobile Responsive */
/* Statistics Screen */
.stats-container {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.stats-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.stats-group {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stats-group-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin: 0;
}

.stats-group-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
}

.stat-card-compact {
    padding: 10px;
    gap: 4px;
}

.stat-card-compact .stat-label {
    font-size: 10px;
}

.stat-card-compact .stat-value {
    font-size: 20px;
}

.stat-value-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.stats-section {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 16px;
}

.stats-section-title {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--color-text);
}

.table-scroll {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.data-table th {
    color: var(--color-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
}

.empty-state {
    color: var(--color-text-muted);
    font-size: 13px;
}

/* Dictionary Screen */
.dictionary-container {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.dictionary-actions form {
    display: contents;
}

.dictionary-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 14px;
    align-items: center;
}

.dict-filter-input,
.dict-filter-select {
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: 13px;
}

.dict-filter-input {
    flex: 1 1 180px;
}

.dictionary-summary {
    font-size: 12px;
    color: var(--color-text-muted);
}

.dictionary-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dictionary-entry {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dictionary-entry-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.dict-word-display {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.dict-word-en {
    font-size: 18px;
    margin: 0;
}

.play-btn-small {
    width: 26px;
    height: 26px;
}

.play-btn-small .play-icon {
    width: 14px;
    height: 14px;
}

.dict-transcription {
    font-size: 13px;
    margin: 0;
}

.dict-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    text-transform: uppercase;
}

.dict-badge-success {
    color: var(--color-success);
    border-color: var(--color-success);
}

.dict-badge-error {
    color: var(--color-error);
    border-color: var(--color-error);
}

.dict-delete-btn {
    width: 26px;
    height: 26px;
    margin-left: auto;
    border: 1.5px solid transparent;
    border-radius: 50%;
    background-color: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.dict-delete-btn:hover,
.dict-delete-btn:focus-visible {
    border-color: var(--color-error);
    color: var(--color-error);
    background-color: rgba(244, 67, 54, 0.12);
}

.dict-delete-btn:active {
    transform: scale(0.9);
    background-color: var(--color-error);
    color: var(--color-on-primary);
}

.dict-delete-icon {
    width: 14px;
    height: 14px;
}

.dict-line {
    font-size: 13px;
    margin: 0;
    color: var(--color-text);
}

.dict-meta {
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 0;
}

.dict-contexts {
    font-size: 13px;
    margin-top: 4px;
}

.dict-contexts summary {
    cursor: pointer;
    color: var(--color-primary);
    font-weight: 600;
}

.dict-context-item {
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 10px 12px;
    margin-top: 8px;
}

.dict-context-en {
    margin: 0;
}

.dict-context-ru,
.dict-context-de {
    margin: 4px 0 0;
    color: var(--color-text-muted);
}

.dict-context-quote {
    margin: 6px 0 0;
    font-style: italic;
    color: var(--color-text-muted);
}

.dict-context-footer {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 8px 0 0;
}

.dictionary-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.dictionary-pagination-info {
    font-size: 12px;
    color: var(--color-text-muted);
}

@media (max-width: 768px) {
    .app-header {
        /*
         * Stay in a row here (see base .app-header/.header-* rules): the
         * title and theme toggle always share the top row, at every width
         * (see base .header-left/.header-right rules) — only .header-center
         * (quiz progress, when present) drops to its own full-width line.
         */
        gap: 12px;
        padding: 12px;
    }

    .progress-section {
        width: 100%;
    }

    .progress-bar {
        min-width: auto;
    }

    .quiz-card {
        padding: 20px;
        gap: 20px;
    }

    .question-word {
        font-size: 32px;
    }

    .welcome-section {
        padding: 20px;
    }

    .stats-overview {
        grid-template-columns: 1fr;
    }

    .quiz-navigation {
        flex-direction: column-reverse;
    }

    .quiz-navigation .btn {
        width: 100%;
    }

    .result-card, .session-result-card {
        padding: 20px;
    }

    .session-stats-grid {
        grid-template-columns: 1fr;
    }

    .session-result-actions {
        flex-direction: column;
    }

    .main-nav {
        padding: 0 8px;
    }

    .dictionary-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .dictionary-filters .btn {
        width: 100%;
    }

    .dictionary-pagination {
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    /*
     * Narrowest fallback: the theme toggle (.header-right) must never wrap
     * onto its own line, so the header stays a row at every width (see base
     * .app-header/.header-* rules) — .header-left just keeps shrinking (the
     * title gets narrower) instead; .learned-indicator already has its own
     * full-width row and shrinks independently via its own min-width: 0.
     */
    .app-title {
        font-size: 18px;
    }

    .question-word {
        font-size: 28px;
    }

    .quiz-card {
        padding: 16px;
    }

    .welcome-section {
        padding: 16px;
    }

    .stat-value {
        font-size: 24px;
    }
}