/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */

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

/* ==========================================================================
   THEME VARIABLES
   ========================================================================== */

:root {
    --bg-body: #E2E8F0;
    --bg-app: #F0F4F8;
    --bg-card: #FFFFFF;
    --bg-input: #EDF2F7;
    --bg-hover: rgba(59, 130, 246, 0.08);
    --text-primary: #1A202C;
    --text-secondary: #4A5568;
    --text-muted: #A0AEC0;
    --border-color: #E2E8F0;
    --popup-bg: #FFFFFF;

    --brand-primary: #3B82F6;
    --brand-primary-dark: #2563EB;

    --bg-placeholder: #E2E8F0;
    --border-interactive: #CBD5E0;
    --border-focus: #3B82F6;

    --color-success: #34D399;
    --color-success-dark: #10B981;
    --color-error: #EF4444;
    --color-error-light: #F87171;
    --color-error-dark: #DC2626;
    --color-error-bg: #FEF2F2;
    --color-warning: #FBBF24;
    --color-warning-dark: #D97706;
    --color-learning: #3B82F6;
    --color-teal: #06B6D4;
    --color-teal-dark: #0891B2;
    --reader-bg: #FFFFFF;
    --reader-nav-bg: rgba(0,0,0,0.04);
    --reader-nav-hover: rgba(0,0,0,0.08);
    /* Подсветка слов в читалке по уровню запоминания (mastered не подсвечивается).
       Оттенки мягкие — книга не должна пестрить. */
    --reader-word-tier-0: rgba(59, 130, 246, 0.15);  /* голубой (только добавлено, не тренировано) */
    --reader-word-tier-1: rgba(252, 211, 77, 0.18);  /* лёгкий жёлтый */
    --reader-word-tier-2: rgba(245, 158, 11, 0.20);  /* средний жёлтый */
    --reader-word-tier-3: rgba(202, 138, 4, 0.18);   /* бежевый */
}

[data-theme="dark"] {
    --bg-body: #0f0f23;
    --bg-app: #1a1a2e;
    --bg-card: #16213e;
    --bg-input: rgba(255,255,255,0.06);
    --bg-hover: rgba(255,255,255,0.1);
    --text-primary: #e0e0e0;
    --text-secondary: #a0aec0;
    --text-muted: #718096;
    --border-color: rgba(255,255,255,0.08);
    --popup-bg: #1e1e3a;

    --brand-primary: #667eea;
    --brand-primary-dark: #764ba2;

    --bg-placeholder: #1a202c;
    --border-interactive: #2d3748;
    --border-focus: #667eea;

    --color-success: #48bb78;
    --color-success-dark: #38a169;
    --color-error: #f56565;
    --color-error-light: #fc8181;
    --color-error-dark: #c53030;
    --color-error-bg: #2D1B1B;
    --color-warning: #ecc94b;
    --color-warning-dark: #d69e2e;
    --color-learning: #667eea;
    --color-teal: #38b2ac;
    --color-teal-dark: #319795;
    --reader-bg: #0f0f23;
    --reader-nav-bg: rgba(255,255,255,0.06);
    --reader-nav-hover: rgba(255,255,255,0.12);
    /* Подсветка слов в читалке (dark theme) — те же оттенки, чуть выше прозрачности
       чтобы быть заметнее на тёмном фоне. */
    --reader-word-tier-0: rgba(102, 126, 234, 0.20);
    --reader-word-tier-1: rgba(252, 211, 77, 0.22);
    --reader-word-tier-2: rgba(245, 158, 11, 0.24);
    --reader-word-tier-3: rgba(202, 138, 4, 0.22);
}

[data-theme="dark"] .card-preview-hint {
    background: #2D2006;
    color: #FBBF24;
}

body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* ==========================================================================
   2. LAYOUT — App container, header, content
   ========================================================================== */

#app {
    width: 100%;
    min-width: 360px;
    max-width: 600px;
    height: 100vh;
    background: var(--bg-app);
    border-radius: 0;
    box-shadow: none;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    padding: 14px 20px;
    padding-top: calc(14px + var(--safe-top));
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Системный 1px progress-bar под header'ом. По умолчанию невидим (opacity 0,
   width 0). Любой потребитель активирует через useGlobalProgress.show(percent).
   Используется в тренировках (прогресс раунда), читалке (процент книги) и
   других местах где нужен общий индикатор прогресса под navigation. */
.header-progress {
    height: 1px;
    width: 0%;
    background: var(--brand-primary);
    opacity: 0;
    transition: width 300ms ease, opacity 200ms ease;
    flex-shrink: 0;
}
.header-progress--visible {
    opacity: 1;
}

.header-title {
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header .back-btn {
    background: var(--bg-hover);
    border: none;
    color: var(--text-primary);
    width: 32px;
    height: 32px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.header .back-btn:hover { background: var(--border-color); }

.header-avatar-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: opacity 0.2s;
}
.header-avatar-btn:hover { opacity: 0.7; }
.header-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

@media (min-width: 1024px) {
    .header-avatar-btn { display: none; }
}

.content {
    flex: 1;
    min-width: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

/* Резервируем место снизу под FAB на экранах, где он есть, чтобы последний
   элемент списка можно было доскроллить выше плавающих кнопок.
   80px (отступ FAB снизу) + 52px (высота FAB) + 16px воздуха + safe-bottom. */
.content--with-fab {
    padding-bottom: calc(80px + 52px + 16px + var(--safe-bottom));
}

.subtitle {
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
    padding: 8px 0;
}

/* --- Карточки тренировок --- */

.train-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.train-category-back {
    background: var(--bg-input);
    border: none;
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: var(--text-primary);
    transition: background 0.15s;
}
.train-category-back:hover { background: var(--border-color); }

.train-category-name {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.train-section {
    margin-top: 8px;
}

.train-section__title {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px;
}

.train-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.train-grid--3col {
    grid-template-columns: 1fr 1fr 1fr;
}

.train-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
    text-align: left;
    font-family: 'Inter', system-ui, sans-serif;
}

.train-card:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 4px 16px rgba(59,130,246,0.12), 0 1px 3px rgba(0,0,0,0.05);
    background: #F8FBFF;
}

.train-card:hover .train-card__title {
    color: var(--brand-primary);
}

.train-card:hover .train-card__icon {
    background: rgba(59,130,246,0.15);
}

/* Цвета иконок тренировок */
.train-card__icon--blue    { background: #3B82F615; color: #3B82F6; }
.train-card__icon--green   { background: #34D39915; color: #34D399; }
.train-card__icon--teal    { background: #06B6D415; color: #06B6D4; }
.train-card__icon--orange  { background: #F59E0B15; color: #F59E0B; }
.train-card__icon--red     { background: #FEF2F2;   color: #EF4444; }
.train-card__icon--amber   { background: #FFF7ED;   color: #F97316; }
.train-card__icon--lime    { background: #F0FDF4;   color: #22C55E; }
.train-card__icon--sky     { background: #EFF6FF;   color: #3B82F6; }
.train-card__icon--mint    { background: #F0FDFA;   color: #14B8A6; }

.train-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
}

.train-card__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.train-card__desc {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}

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

.app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.content-aside {
    display: none;
}

/* --- Article Progress --- */

.article-progress-card {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.article-progress-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.article-progress-goal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
    color: var(--text-secondary);
}

.article-progress-goal-value {
    font-weight: 600;
    color: var(--text-primary);
}

.article-progress-bar {
    display: flex;
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
}

.article-progress-bar-lookup {
    height: 100%;
    background: var(--color-warning);
    transition: width 0.3s;
}

.article-progress-bar-sentence {
    height: 100%;
    background: var(--brand-primary);
    transition: width 0.3s;
}

.article-progress-bar-added {
    height: 100%;
    background: var(--color-success-dark);
    transition: width 0.3s;
}

.article-progress-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.article-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
}

.article-progress-row-label {
    color: var(--text-secondary);
}

.article-progress-row-value {
    font-weight: 600;
    color: var(--text-primary);
}

.article-progress-row-value.lookup   { color: var(--color-warning); }
.article-progress-row-value.sentence { color: var(--brand-primary); }
.article-progress-row-value.added    { color: var(--color-success-dark); }

/* --- Article Analysis Stats --- */

.article-analysis-stats-card {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.article-analysis-stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.article-analysis-stats-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.article-analysis-stats-lang {
    font-family: Inter, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-input);
    border-radius: 8px;
    padding: 3px 10px;
}

.article-analysis-stats-bar {
    display: flex;
    height: 10px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
}

.article-analysis-stats-bar-fill {
    height: 100%;
    transition: width 0.3s;
}

.article-analysis-stats-bar-fill--known   { background: var(--color-success-dark); }
.article-analysis-stats-bar-fill--learning { background: var(--color-warning); }
.article-analysis-stats-bar-fill--unknown  { background: var(--color-error); }

.article-analysis-stats-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.article-analysis-stats-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}

.article-analysis-stats-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.article-analysis-stats-legend-item--known   .article-analysis-stats-legend-dot { background: var(--color-success-dark); }
.article-analysis-stats-legend-item--learning .article-analysis-stats-legend-dot { background: var(--color-warning); }
.article-analysis-stats-legend-item--unknown  .article-analysis-stats-legend-dot { background: var(--color-error); }

.article-analysis-stats-meta {
    display: flex;
    justify-content: space-between;
    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
    color: var(--text-secondary);
}

.article-analysis-stats-meta-density {
    color: var(--text-muted);
}

.article-analysis-stats-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0;
}

.article-analysis-stats-hint {
    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.article-analysis-stats-all-known {
    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-success-dark);
    margin: 0;
    text-align: center;
}

.article-analysis-stats-words-title {
    font-family: Inter, system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.article-analysis-stats-words {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.article-analysis-stats-word-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}

.article-analysis-stats-word-lemma {
    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
    color: var(--text-primary);
}

.article-analysis-stats-word-freq {
    font-family: Inter, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-input);
    border-radius: 10px;
    padding: 2px 8px;
}

/* --- Article Word List --- */

.article-word-list-card {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.article-word-list-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.article-word-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
}

.article-word-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
}

.article-word-list-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.article-word-list-dot.lookup   { background: var(--color-warning); }
.article-word-list-dot.sentence { background: var(--brand-primary); }
.article-word-list-dot.added    { background: var(--color-success-dark); }

.article-word-list-word {
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
}

.article-word-list-translation {
    color: var(--text-secondary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Learning Progress --- */

.learning-progress {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    padding: 16px;
}

.learning-progress-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.learning-progress-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.learning-progress-total-value {
    font-family: Inter, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.learning-progress-bar {
    display: flex;
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.learning-progress-bar-segment {
    height: 100%;
    transition: width 0.3s;
}

.learning-progress-bar-segment.mastered { background: var(--color-success-dark); }
.learning-progress-bar-segment.reviewed { background: var(--color-success); }
.learning-progress-bar-segment.learning { background: var(--brand-primary); }
.learning-progress-bar-segment.due { background: var(--color-warning); }

.learning-progress-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 14px;
}

.learning-progress-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.learning-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.learning-progress-dot.mastered { background: var(--color-success-dark); }
.learning-progress-dot.reviewed { background: var(--color-success); }
.learning-progress-dot.learning { background: var(--brand-primary); }
.learning-progress-dot.due { background: var(--color-warning); }
.learning-progress-dot.new-word { background: var(--bg-input); }

.learning-progress-legend-label {
    color: var(--text-secondary);
}

.learning-progress-legend-value {
    font-weight: 600;
    color: var(--text-primary);
}

.learning-progress-metrics {
    display: flex;
    gap: 4px;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}

.learning-progress-metric {
    flex: 1;
    text-align: center;
}

.learning-progress-metric-value {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.learning-progress-metric-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 1px;
}

.learning-progress-streak-icon {
    display: inline-flex;
}

.learning-progress-metric-value.streak-bolt {
    color: var(--color-warning);
}

.learning-progress-metric-value.streak-fist {
    color: var(--color-warning-dark);
}

.learning-progress-metric-value.streak-fire {
    color: var(--color-error);
}

.content-aside-mobile-visible {
    display: flex;
    flex-direction: column;
    gap: 16px;
    order: -1;
}

/* --- App Navigation (bottom bar на мобильных, sidebar на десктопе) --- */

.app-nav {
    display: flex;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    padding: 6px 0;
    padding-bottom: calc(6px + var(--safe-bottom));
    flex-shrink: 0;
    order: 1;
}

.app-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 11px;
    font-family: inherit;
    transition: color 0.15s;
}

.app-nav-item.active {
    color: var(--brand-primary);
}

.app-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}

.app-nav-label {
    line-height: 1;
}

.app-nav-items {
    display: contents;
}

.app-nav-logo {
    display: none;
}

.app-nav-profile {
    display: none;
}

.app-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
}

/* ==========================================================================
   3. SHARED — Buttons, cards, forms, animations
   ========================================================================== */

.btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    height: 52px;
    border: none;
    border-radius: 14px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    color: white;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.btn:active { transform: translateY(0); }
.btn svg { flex-shrink: 0; }

.btn-group-block {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 12px;
}
.btn-group-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.btn-group {
    display: flex;
    gap: 10px;
}
.btn-group-item {
    flex: 1;
    justify-content: center;
    height: 48px;
    font-size: 13px;
}

.btn-blue { background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); }
.btn-green { background: linear-gradient(135deg, var(--color-success), var(--color-success-dark)); }
.btn-orange { background: linear-gradient(135deg, var(--color-warning), var(--color-warning-dark)); }
.btn-red { background: linear-gradient(135deg, var(--color-error), var(--color-error-dark)); }
.btn-outline-red { background: transparent; border: 1px solid var(--color-error); color: var(--color-error); }
.btn-outline-red:hover { background: var(--color-error); color: #fff; }
.btn-teal { background: linear-gradient(135deg, var(--color-teal), var(--color-teal-dark)); }

.rw-translation {
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    color: var(--text-primary);
    padding: 16px 0;
}

.cb-latin-word {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    color: var(--text-primary);
}

.cb-russian {
    font-size: 18px;
    text-align: center;
    color: var(--text-secondary);
}

.card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

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

/* WordCard — переиспользуемый компонент карточки слова */

.wc {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wc__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.wc__word {
    font-size: 20px;
    font-weight: 700;
    color: #1A202C;
    word-break: break-word;
    line-height: 1.3;
}

.wc__transcription {
    font-size: 13px;
    color: #A0AEC0;
    font-style: italic;
    margin-top: 2px;
}

.wc__sound-btn {
    background: #EDF2F7;
    border: none;
    color: #4A5568;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wc__sound-btn:hover {
    background: #E2E8F0;
}

.wc__divider {
    height: 1px;
    background: var(--border);
    margin: 10px 0;
}

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

.wc__label {
    font-size: 10px;
    color: #A0AEC0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.wc__translation {
    font-size: 15px;
    font-weight: 500;
    color: #1A202C;
}

.wc__pos {
    font-size: 10px;
    color: #3B82F6;
    font-style: italic;
    font-weight: 600;
}

.wc__image {
    width: 100%;
    border-radius: 10px;
    object-fit: contain;
    max-height: 180px;
    background: #EDF2F7;
}

.wc__context {
    font-size: 13px;
    font-style: italic;
    color: #1A202C;
    line-height: 1.5;
    background: #EDF2F7;
    border-radius: 10px;
    padding: 10px 12px;
}

.wc__actions {
    display: flex;
    gap: 8px;
}

.wc__action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
}

.wc__action-btn--edit {
    background: #EDF2F7;
    color: #4A5568;
    border: 1px solid #E2E8F0;
}

.wc__action-btn--edit:hover {
    background: #E2E8F0;
}

.wc__action-btn--delete {
    background: rgba(245,101,101,0.06);
    color: #EF4444;
    border: none;
}

.wc__action-btn--delete:hover {
    background: rgba(245,101,101,0.15);
}

.wc__context-translation {
    font-size: 13px;
    color: #4A5568;
    line-height: 1.5;
    margin-top: 4px;
    padding: 0 2px;
}

.wc__translate-link {
    background: none;
    border: none;
    color: #3B82F6;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    align-self: flex-end;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.wc__translate-link:hover {
    text-decoration: underline;
}

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

.wc__status-label {
    font-size: 12px;
    color: #4A5568;
    font-weight: 500;
}

.wc__status-badge {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 10px;
    font-weight: 600;
}

.wc__status-badge--not-added {
    background: var(--bg-main);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.wc__status-badge--new {
    background: rgba(59,130,246,0.12);
    color: #3B82F6;
}

.wc__status-badge--learning {
    background: rgba(59,130,246,0.12);
    color: #3B82F6;
}

.wc__status-badge--mastered {
    background: #F0FDF4;
    color: #22C55E;
}

.wc__source {
    font-size: 10px;
    color: #A0AEC0;
    text-align: right;
    margin-top: 8px;
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

/* Предпросмотр карточки (aside на странице добавления) */

.card-preview-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-preview-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.card-preview-section .wc--empty .wc__word,
.card-preview-section .wc--empty .wc__sound-btn,
.card-preview-section .wc--empty .wc__translation {
    opacity: 0.45;
}

.card-preview-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    background: #FFF7ED;
    border-radius: 10px;
    font-size: 13px;
    color: #92400E;
    line-height: 1.5;
}

.card-preview-hint__icon {
    flex-shrink: 0;
    font-size: 16px;
}

.add-card-wrap {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 28px 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    width: 100%;
}

.add-card-header {
    margin-bottom: 4px;
}

.add-card-header__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.add-card-header__subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.add-card-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Сообщение пользователю о том что карточка-дубль обогащена контекстом, а не создана заново. */
.add-card-notice {
    margin-top: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fff8e1;
    color: #5d4037;
    border-left: 3px solid #ffb300;
    font-size: 14px;
    line-height: 1.4;
}


.form-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}

.form-input {
    background: var(--bg-card);
    border: 1px solid var(--border-interactive);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text-primary);
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
}
.form-input:focus { border-color: var(--brand-primary); }
.form-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.form-textarea {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

.image-dropzone {
    border: 2px dashed var(--border-interactive);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
    min-height: 80px;
}
.image-dropzone:hover {
    border-color: var(--text-muted);
    background: rgba(45, 55, 72, 0.3);
}
.image-dropzone-active {
    border-color: var(--brand-primary);
    background: rgba(59, 130, 246, 0.08);
}
.image-dropzone-has-image {
    padding: 8px;
    border-style: solid;
    border-color: var(--border-interactive);
}
.image-dropzone-icon {
    margin-bottom: 8px;
    opacity: 0.5;
}
.image-dropzone-text {
    font-size: 13px;
    color: var(--text-muted);
}
.image-dropzone-preview {
    max-width: 100%;
    max-height: 160px;
    border-radius: 6px;
    object-fit: contain;
}
.image-dropzone-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: var(--text-primary);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    line-height: 1;
}
.image-dropzone-remove:hover {
    background: rgba(245, 101, 101, 0.8);
}

/* --- Autocomplete dropdown --- */

.ac-wrapper {
    position: relative;
}

.ac-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-interactive);
    border-radius: 10px;
    z-index: 50;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.ac-scroll {
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
}

/* Custom scrollbar */
.ac-scroll::-webkit-scrollbar {
    width: 6px;
}
.ac-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.ac-scroll::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 3px;
}
.ac-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--brand-primary);
}

.ac-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 15px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.ac-item:active {
    background: var(--border-interactive);
}

.ac-item--active {
    background: var(--border-interactive);
}

.ac-item--exists {
    color: var(--color-success);
}

.ac-item--exists .ac-item-badge {
    font-size: 12px;
    color: var(--color-success);
    margin-left: 8px;
    flex-shrink: 0;
}

.ac-item-word {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Touch-friendly: larger targets on mobile */
@media (pointer: coarse) {
    .ac-item {
        padding: 14px 16px;
        font-size: 16px;
        min-height: 48px;
    }
    .ac-scroll {
        max-height: 280px;
    }
}

@media (hover: hover) {
    .ac-item:hover {
        background: var(--border-interactive);
    }
}

.translate-input-wrapper {
    position: relative;
}
.translate-spinner {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--text-muted);
    border-top-color: var(--color-success);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

.translit-preview {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
    min-height: 18px;
}

.screen-enter-active { animation: slideIn 0.25s ease-out; }

@keyframes slideIn {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

.fab {
    /* 80px = высота .app-nav (~64px) + воздух между FAB и меню (~16px). */
    position: fixed;
    bottom: calc(80px + var(--safe-bottom));
    right: 24px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    color: white;
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Над контентом (.dict-actions z-index: 1), под модалками (z-index: 1000). */
    z-index: 100;
}
.fab:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(59, 130, 246, 0.5); }
.fab-train { right: 84px; }

.pagination {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
}
.pagination .btn {
    flex: none;
    padding: 10px 20px;
    font-size: 14px;
}
.pagination .btn:disabled {
    opacity: 0.4;
    cursor: default;
    transform: none;
    box-shadow: none;
}
.pagination-info {
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

/* ==========================================================================
   4. COMPONENTS — Tabs, language picker
   ========================================================================== */

/* --- Tabs --- */

.tab-bar {
    display: flex;
    background: var(--bg-card);
    padding: 0 20px;
    margin: -24px -24px 0 -24px;
}

.tab-btn {
    flex: 1;
    height: 44px;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    color: var(--text-muted);
    transition: color 0.2s, border-color 0.2s;
}
.tab-btn.active {
    color: var(--brand-primary);
    font-weight: 600;
    border-bottom-color: var(--brand-primary);
}

/* --- Language picker --- */

.lang-picker {
    position: relative;
    margin-left: auto;
}

.lang-picker-btn {
    background: var(--bg-hover);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.lang-picker-btn:hover { background: var(--border-color); }

.lang-picker-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: var(--bg-app);
    border: 1px solid var(--border-interactive);
    border-radius: 10px;
    overflow: hidden;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.lang-picker-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    transition: background 0.15s;
}
.lang-picker-option:hover { background: var(--border-interactive); }
.lang-picker-option.active { background: var(--border-interactive); }

.lang-flag-img {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    vertical-align: middle;
}


/* ==========================================================================
   5. SCREEN — Dictionary
   ========================================================================== */

.dict-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dict-item {
    padding: 16px 18px 12px 22px;
    background: var(--bg-card);
    border-radius: 14px;
    font-size: 15px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

/* Colored left status bar */
.dict-status-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 5px;
    border-radius: 14px 0 0 14px;
    cursor: pointer;
}

.dict-img-area {
    width: 100px;
    min-width: 100px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-placeholder);
    border-radius: 8px;
    overflow: hidden;
}

.dict-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.dict-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.dict-word {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    word-break: break-word;
    line-height: 1.3;
}
.dict-word-alt {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 15px;
}

.dict-translation {
    font-size: 15px;
    color: var(--text-secondary);
    word-break: break-word;
    line-height: 1.3;
}

.dict-context {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 2px;
}

/* --- Dictionary search bar --- */

/* --- Dictionary category chips --- */

.dict-cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.dict-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(59, 130, 246, 0.15);
    color: var(--brand-primary);
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

.dict-cat-chip-x {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}
.dict-cat-chip-x:hover { color: var(--color-error); }

/* --- Category management modal --- */

.cat-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.cat-modal {
    background: var(--bg-app);
    border: 1px solid var(--border-interactive);
    border-radius: 16px;
    padding: 20px;
    max-width: 340px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cat-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.cat-modal-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 300px;
    overflow-y: auto;
}

.cat-modal-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: background 0.15s;
}
.cat-modal-item:hover { background: var(--border-interactive); }

.cat-modal-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.cat-modal-close {
    padding: 10px 20px !important;
    font-size: 14px !important;
    align-self: stretch;
}

/* --- Dictionary card expand --- */

.dict-card-row {
    display: flex;
    flex-direction: row;
    gap: 14px;
    align-items: center;
    /* Резервируем место справа под кнопки действий (.dict-actions absolute) —
       чтобы длинное слово/перевод не уезжало под них. */
    padding-right: 72px;
}

.dict-expand-grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 8px 20px;
    font-size: 14px;
    width: 100%;
}

.dict-audio-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 4px;
    margin-left: 4px;
    opacity: 0.6;
    transition: opacity 0.15s;
    vertical-align: middle;
}
.dict-audio-btn:hover { opacity: 1; }

.dict-stat-label { color: var(--text-secondary); }
.dict-stat-value { color: var(--text-primary); font-weight: 600; }

.dict-expand-stats {
    border-top: 1px solid var(--border-interactive);
    margin-top: 10px;
    padding-top: 10px;
}

/* --- Dictionary status tooltip --- */

.dict-status-tooltip {
    position: absolute;
    top: 10px;
    left: 16px;
    background: var(--border-interactive);
    color: var(--text-primary);
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 6px;
    z-index: 10;
    white-space: nowrap;
    pointer-events: auto;
}

/* --- Dictionary action toolbar --- */

.dict-toolbar {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.dict-toolbar-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-hover);
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.dict-toolbar-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.dict-toolbar-btn-delete:hover {
    background: rgba(245, 101, 101, 0.15);
    color: var(--color-error);
}
.dict-toolbar-icon {
    font-size: 18px;
    line-height: 1;
}

/* --- Dictionary confirm bar --- */

.dict-confirm-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(245, 101, 101, 0.15);
    border-radius: 0 0 14px 14px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--color-error);
    z-index: 10;
}

.dict-confirm-yes, .dict-confirm-no {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.dict-confirm-yes { color: var(--color-error); }
.dict-confirm-yes:hover { background: rgba(245, 101, 101, 0.2); }

.dict-confirm-no { color: var(--text-secondary); }
.dict-confirm-no:hover { background: var(--bg-hover); }

/* ==========================================================================
   6. SCREEN — Quiz
   ========================================================================== */

.quiz-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.quiz-score {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--text-secondary);
    padding: 0 4px;
}
.quiz-score-correct {
    color: var(--color-success);
    font-weight: 600;
}

.quiz-timer-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--border-interactive);
    overflow: hidden;
}

.quiz-timer-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-dark));
    border-radius: 3px;
    transition: width 0.1s linear;
}

.quiz-question {
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    padding: 16px 0;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: break-word;
}

.quiz-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.quiz-grid-left,
.quiz-grid-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.quiz-option {
    padding: 14px 18px;
    border: 2px solid var(--border-interactive);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 15px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 12px;
}

.quiz-option-kbd {
    display: none;
}
.quiz-next-kbd {
    display: none;
}
.quiz-option:hover { border-color: var(--brand-primary); }

.quiz-option--unknown {
    color: var(--text-muted);
    border-style: dashed;
    margin-top: 4px;
}
.quiz-option--unknown:hover {
    color: var(--text-secondary);
    border-color: var(--text-muted);
}

.quiz-option.correct {
    border-color: var(--color-success);
    background: rgba(72, 187, 120, 0.15);
    color: var(--color-success);
}
.quiz-option.wrong {
    border-color: var(--color-error);
    background: rgba(245, 101, 101, 0.15);
    color: var(--color-error);
}
.quiz-option.disabled {
    cursor: default;
    pointer-events: none;
}

.quiz-skip {
    padding: 10px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    transition: color 0.15s;
}
.quiz-skip:hover { color: var(--text-secondary); }

/* === TrainingCardActions — действия над текущей карточкой тренировки === */
.training-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 4px;
    width: 100%;
}
.quiz-card .training-card-actions {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    margin-top: 4px;
}
.training-card-actions__delete {
    background: transparent;
    border: none;
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.training-card-actions__delete:hover {
    color: var(--color-error, #ef4444);
    background: var(--bg-hover);
}
.memory-ring {
    --ring-progress: 0deg;
    --ring-fill: var(--border-color);
    --ring-bg: var(--border-color);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    cursor: help;
}
.memory-ring::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        var(--ring-fill) 0 var(--ring-progress),
        var(--ring-bg) var(--ring-progress) 360deg
    );
    -webkit-mask: radial-gradient(circle, transparent 35%, black 36%);
    mask: radial-gradient(circle, transparent 35%, black 36%);
}
.memory-ring::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    background: var(--text-primary);
    color: var(--bg-card);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 10;
}
.memory-ring:hover::after,
.memory-ring--touched::after {
    opacity: 1;
}
.memory-ring--tier-0 {
    --ring-fill: var(--border-color);
    --ring-progress: 0deg;
}
.memory-ring--tier-1 {
    --ring-fill: var(--color-warning);
    --ring-progress: 90deg;
}
.memory-ring--tier-2 {
    --ring-fill: var(--color-warning);
    --ring-progress: 180deg;
}
.memory-ring--tier-3 {
    --ring-fill: var(--color-success);
    --ring-progress: 270deg;
}
.memory-ring--tier-4 {
    --ring-fill: var(--color-success-dark);
    --ring-progress: 360deg;
}

/* === TrainingFeedback (общий для всех движков тренировок) === */
.training-feedback {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 0;
    line-height: 1.2;
}
.training-feedback--correct { color: var(--color-success, #22C55E); }
.training-feedback--wrong   { color: var(--color-error, #EF4444); }
.training-feedback--timeout { color: var(--color-warning, #F59E0B); }

.quiz-result {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.quiz-result-score {
    font-size: 48px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--brand-primary), #60A5FA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.quiz-result-label {
    font-size: 16px;
    color: var(--text-secondary);
}

.quiz-result-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.quiz-warning {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 16px;
}

/* Спиннер предзагрузки TTS */
.preload-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 12px;
}

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

/* --- Quiz answer card --- */

.quiz-answer-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    margin-top: 8px;
}

.quiz-answer-img {
    align-self: center;
    max-width: 100%;
    max-height: 120px;
    border-radius: 8px;
    object-fit: contain;
}

.quiz-answer-headline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}
.quiz-answer-headline-dash {
    color: var(--text-muted);
    font-weight: 400;
}

.quiz-answer-context {
    font-size: 14px;
    color: var(--text-muted);
    font-style: italic;
}

/* ReadingMethodModal — модалка с объяснением методики Comprehensible Input */
.reading-method-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.reading-method {
    position: relative;
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 16px;
    padding: 28px 24px 24px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.reading-method__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 8px;
}
.reading-method__close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.reading-method__title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
}
.reading-method p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.reading-method__legend {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.reading-method__legend li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}
.reading-method__swatch {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}
.reading-method__swatch--tier-0 { background: var(--reader-word-tier-0); }
.reading-method__swatch--tier-1 { background: var(--reader-word-tier-1); }
.reading-method__swatch--tier-2 { background: var(--reader-word-tier-2); }
.reading-method__swatch--tier-3 { background: var(--reader-word-tier-3); }
.reading-method__swatch--mastered { background: transparent; }

/* CardContextList — переиспользуемый компонент контекстов слова */
.card-context-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.card-context-list__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.card-context-list__main {
    font-size: 14px;
    color: var(--text-muted);
    font-style: italic;
    flex: 1;
}
.card-context-list__toggle {
    border: 1px solid var(--border-interactive);
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    flex-shrink: 0;
    line-height: 1.4;
}
.card-context-list__toggle:hover {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.card-context-list__toggle--expanded {
    color: var(--text-secondary);
    border-color: var(--border-color);
}
.card-context-list__extras {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.card-context-list__extra {
    font-size: 13px;
    color: var(--text-muted);
    font-style: italic;
    padding-left: 12px;
    border-left: 2px solid var(--border-color);
}

/* Старые стили — используются в wb-result-card (builder/fill engines),
   у которых ответ-карточка пока без новой headline-разметки. */
.quiz-answer-word {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}
.quiz-answer-alt {
    font-size: 15px;
    color: var(--text-muted);
}
.quiz-answer-translation {
    font-size: 16px;
    color: var(--text-secondary);
}

.quiz-next-btn {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   7. SCREEN — Vocabulary
   ========================================================================== */

.vocab-count-display {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.vocab-count-number {
    font-size: 72px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--brand-primary), #60A5FA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   8. SCREEN — Import
   ========================================================================== */

.import-message {
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    font-size: 15px;
}
.import-success {
    background: rgba(72, 187, 120, 0.15);
    color: var(--color-success);
}
.import-error {
    background: rgba(245, 101, 101, 0.15);
    color: var(--color-error);
}

.import-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}
.import-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.import-result {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.import-stats {
    display: flex;
    gap: 12px;
    justify-content: center;
}

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

.import-stat-number {
    font-size: 32px;
    font-weight: 700;
}
.import-stat-added { color: var(--color-success); }
.import-stat-skipped { color: var(--color-warning); }
.import-stat-errors { color: var(--color-error); }

.import-stat-label {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ==========================================================================
   9. SCREEN — Sync
   ========================================================================== */

.sync-status {
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sync-status-ok {
    background: rgba(72, 187, 120, 0.12);
    border: 1px solid rgba(72, 187, 120, 0.3);
}

.sync-status-error {
    background: rgba(245, 101, 101, 0.12);
    border: 1px solid rgba(245, 101, 101, 0.3);
    color: var(--color-error);
}

.sync-log {
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    font-family: monospace;
    color: var(--text-secondary);
}
.sync-log-line {
    padding: 2px 0;
    border-bottom: 1px solid var(--border-color);
}
.sync-log-line:last-child {
    border-bottom: none;
}

.sync-space-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    color: var(--text-secondary);
}

.sync-space-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--border-interactive);
    overflow: hidden;
    margin-top: 8px;
}

.sync-space-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-dark));
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* ==========================================================================
   10. SCREEN — Word Builder
   ========================================================================== */

.wb-progress {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
}

.wb-image {
    display: flex;
    justify-content: center;
}
.wb-image img {
    max-width: 100%;
    max-height: 120px;
    border-radius: 8px;
    object-fit: contain;
}

.wb-translation {
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    padding: 8px 0;
}

.wb-assembled {
    display: flex;
    justify-content: center;
    gap: 4px;
    font-size: 24px;
    font-weight: 600;
    min-height: 40px;
    letter-spacing: 2px;
}

.wb-assembled-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 40px;
    color: var(--text-primary);
    text-transform: uppercase;
}
.wb-assembled-letter.correct { color: var(--color-success); }
.wb-assembled-letter.wrong { color: var(--color-error); }

.wb-assembled-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 40px;
    color: var(--text-muted);
}

.wb-letters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 8px 0;
}

.wb-letter {
    width: 48px;
    height: 48px;
    background: var(--bg-card);
    border: 2px solid var(--border-interactive);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    transition: border-color 0.15s, background 0.15s, opacity 0.3s;
}
.wb-letter:hover { border-color: var(--brand-primary); }

.wb-letter.used {
    opacity: 0.2;
    pointer-events: none;
}
.wb-letter.shake {
    animation: wb-shake 0.4s ease;
    border-color: var(--color-error);
    background: rgba(245, 101, 101, 0.15);
}
.wb-letter.correct {
    border-color: var(--color-success);
    background: rgba(72, 187, 120, 0.15);
}

@keyframes wb-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.wb-feedback {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    padding: 8px;
}
.wb-feedback-correct { color: var(--color-success); }

.wb-result-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
}

.wb-result-word {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-error);
}

.wb-result-translation {
    font-size: 16px;
    color: var(--text-secondary);
}

.wb-result-img {
    max-width: 100%;
    max-height: 120px;
    border-radius: 8px;
    object-fit: contain;
}

.wb-result-context {
    font-size: 14px;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
}

.wb-result-card-correct {
    border: 1px solid rgba(72, 187, 120, 0.3);
}

/* ==========================================================================
   11. SCREEN — Categories
   ========================================================================== */

.cat-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cat-filter-tabs,
.filter-tabs {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.cat-filter-tab,
.filter-tab {
    padding: 8px 20px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-secondary);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.cat-filter-tab:hover:not(:disabled),
.filter-tab:hover:not(:disabled) {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.cat-filter-tab:disabled,
.filter-tab:disabled {
    opacity: 0.5;
    cursor: default;
}

.cat-filter-tab--active,
.filter-tab--active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.cat-filter-tab--active:hover:not(:disabled),
.filter-tab--active:hover:not(:disabled) {
    border-color: var(--brand-primary);
    color: #fff;
}

.cat-search {
    flex: 1;
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
}

.cat-search-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}

.cat-search-icon svg {
    width: 16px;
    height: 16px;
}

.cat-search-input {
    border: none;
    background: none;
    outline: none;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: var(--text-primary);
    width: 100%;
}

.cat-search-input::placeholder {
    color: var(--text-muted);
}

.cat-add-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 10px;
    border: none;
    background: var(--brand-primary);
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.cat-add-btn:hover {
    opacity: 0.85;
}

.cat-add-btn .app-icon svg {
    width: 16px;
    height: 16px;
}

/* --- Create category modal --- */

.cat-create-overlay {
    position: fixed;
    inset: 0;
    background: #00000050;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cat-create-modal {
    background: var(--bg-card);
    border-radius: 16px;
    width: 560px;
    max-width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px #00000025;
}

.cat-create-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.cat-create-header-title {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.cat-create-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
}
.cat-create-close:hover { color: var(--text-secondary); }
.cat-create-close .app-icon svg { width: 20px; height: 20px; }

.cat-create-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
}

.cat-create-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cat-create-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.cat-create-input {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 16px;
    outline: none;
    transition: border-color 0.15s;
}
.cat-create-input:focus { border-color: var(--border-focus); }

.cat-create-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 80px;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
    overflow: hidden;
}
.cat-create-dropzone:hover,
.cat-create-dropzone--active {
    border-color: var(--brand-primary);
    background: var(--bg-hover);
}
.cat-create-dropzone .app-icon svg { width: 20px; height: 20px; }
.cat-create-dropzone-icon { color: var(--text-muted); display: flex; }
.cat-create-dropzone-text {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: var(--text-muted);
}
.cat-create-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.cat-create-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 80px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
.cat-create-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cat-create-preview-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.cat-create-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
}

.cat-create-btn-cancel {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.15s;
}
.cat-create-btn-cancel:hover { background: var(--bg-input); }

.cat-create-btn-submit {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--brand-primary);
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.15s;
}
.cat-create-btn-submit:hover { background: var(--brand-primary-dark); }
.cat-create-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Mobile adjustments for create modal */
@media (max-width: 600px) {
    .cat-create-overlay { padding: 0; align-items: flex-end; }
    .cat-create-modal {
        width: 100%;
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
    }
    .cat-create-header { padding: 16px 20px; }
    .cat-create-header-title { font-size: 16px; }
    .cat-create-body { padding: 20px; gap: 16px; }
    .cat-create-input { padding: 10px 14px; }
    .cat-create-dropzone { height: 72px; }
    .cat-create-preview { height: 72px; }
    .cat-create-footer {
        flex-direction: column;
        padding: 14px 20px;
        gap: 10px;
    }
    .cat-create-btn-cancel,
    .cat-create-btn-submit {
        width: 100%;
        text-align: center;
        padding: 10px 16px;
    }
}

.cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.cat-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.cat-card-clickable {
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.cat-card-clickable:hover {
    opacity: 0.85;
}

.cat-card-img-area {
    height: 160px;
    background: var(--bg-placeholder);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-card-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cat-card-name {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.cat-card-stats {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    color: var(--text-secondary);
}

.cat-card-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
}

.cat-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.15s;
}
.cat-action-btn:hover { background: var(--bg-card); }

.cat-action-edit { color: var(--color-warning); }
.cat-action-delete { color: var(--color-error); }

/* Универсальная модалка подтверждения (см. components/confirm-modal.ts).
   Используется для destructive actions — удаление категории, удаление книги и т.д.
   На мобильных рендерится bottom-sheet, на широких экранах — центрированная карточка. */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
}
.confirm-modal {
    background: var(--popup-bg);
    border-radius: 16px 16px 0 0;
    padding: 20px;
    padding-bottom: max(20px, var(--safe-bottom));
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: popup-slide-up 0.2s ease-out;
    border: 1px solid var(--border-color);
    border-bottom: none;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
}
@media (min-width: 768px) {
    .confirm-overlay { align-items: center; }
    .confirm-modal {
        border-radius: 16px;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 20px;
    }
}
.confirm-modal-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
}
.confirm-modal-message {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
}
.confirm-modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.confirm-btn-cancel,
.confirm-btn-confirm,
.modal-btn-cancel,
.modal-btn-primary {
    flex: 1;
    height: 40px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s, opacity 0.15s;
    font-family: inherit;
}
.confirm-btn-cancel,
.modal-btn-cancel {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.confirm-btn-cancel:hover,
.modal-btn-cancel:hover { background: var(--bg-hover); }
.confirm-btn-primary,
.modal-btn-primary { background: var(--brand-primary); color: #fff; }
.confirm-btn-primary:hover,
.modal-btn-primary:hover { background: var(--brand-primary-dark); }
.confirm-btn-danger { background: var(--color-error); color: #fff; }
.confirm-btn-danger:hover { background: var(--color-error-dark); }
.confirm-btn-confirm:disabled,
.modal-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* Кнопки действий в строке слова внутри категории (редактировать / убрать).
   Фиксируем в правом верхнем углу карточки .dict-item (у неё position: relative). */
.dict-actions {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    flex-direction: row;
    gap: 6px;
    z-index: 1;
}
.dict-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.15s, border-color 0.15s;
    padding: 0;
}
.dict-action-btn:hover { background: var(--bg-card); }
.dict-action-btn-edit { color: var(--color-warning); }
.dict-action-btn-edit:hover { border-color: var(--color-warning); }
.dict-action-btn-remove { color: var(--color-error); font-size: 18px; line-height: 1; }
.dict-action-btn-remove:hover { border-color: var(--color-error); }


/* --- Categories aside widgets --- */

.cat-aside-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cat-aside-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.cat-aside-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: var(--text-secondary);
}

.cat-aside-val {
    font-weight: 700;
    color: var(--text-primary);
}

.cat-aside-val--red { color: var(--color-error); }
.cat-aside-val--green { color: var(--color-success-dark); }
.cat-aside-val--orange { color: var(--color-warning-dark); }
.cat-aside-val--touched { color: var(--color-success); }

.cat-aside-sep {
    height: 1px;
    background: var(--border-color);
}

.cat-progress-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cat-progress-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cat-progress-name {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
}

.cat-progress-pct {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.cat-progress-track {
    position: relative;
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
}

.cat-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.cat-progress-fill--touched { background: color-mix(in srgb, var(--color-success) 30%, transparent); }
.cat-progress-fill--mastered { z-index: 1; }
.cat-progress-fill--green { background: var(--color-success-dark); }
.cat-progress-fill--orange { background: var(--color-warning-dark); }
.cat-progress-fill--red { background: var(--color-error); }

.cat-progress-legend {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
}

.cat-progress-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.cat-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cat-progress-dot--touched { background: color-mix(in srgb, var(--color-success) 30%, transparent); }
.cat-progress-dot--mastered { background: var(--color-success-dark); }

.cat-progress-legend-label {
    color: var(--text-secondary);
}

/* ==========================================================================
   12. COMPONENT — Reset modal
   ========================================================================== */

.reset-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.reset-modal {
    background: var(--bg-app);
    border: 1px solid var(--border-interactive);
    border-radius: 16px;
    padding: 24px;
    max-width: 360px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.reset-modal-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.reset-modal-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 16px;
}

.reset-modal-error {
    background: rgba(245, 101, 101, 0.15);
    color: var(--color-error);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 12px;
    word-break: break-word;
}

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

/* ==========================================================================
   13. SCREEN — Logs
   ========================================================================== */

.logs-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 400px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 12px;
}

.log-entry {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
}

.log-time {
    color: var(--text-muted);
    flex-shrink: 0;
}

.log-level-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
}

.log-badge-info {
    background: rgba(160, 174, 192, 0.2);
    color: var(--text-secondary);
}

.log-badge-warn {
    background: rgba(236, 201, 75, 0.2);
    color: var(--color-warning);
}

.log-badge-error {
    background: rgba(245, 101, 101, 0.2);
    color: var(--color-error);
}

.log-message {
    color: var(--text-primary);
    word-break: break-word;
}

.log-level-error {
    background: rgba(245, 101, 101, 0.08);
}

.log-level-warn {
    background: rgba(236, 201, 75, 0.08);
}

/* ==========================================================================
   13. COMPONENT — Category export/import
   ========================================================================== */

.header-action-btn {
    background: var(--bg-hover);
    border: none;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.header-action-btn:hover { background: var(--border-color); }
.header-action-btn:disabled { opacity: 0.4; cursor: default; }
.tts-toggle-btn { font-size: 16px; }
.tts-toggle-btn.muted { opacity: 0.5; }
.theme-toggle-btn { font-size: 16px; }

.import-file-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
}

.import-file-item {
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s;
    word-break: break-all;
}
.import-file-item:hover {
    background: var(--border-interactive);
}

/* ==========================================================================
   15. SCREEN — Context Game
   ========================================================================== */

.cg-sentence {
    font-size: 20px;
    line-height: 1.6;
    text-align: center;
    color: var(--text-primary);
    padding: 12px 0;
    word-break: break-word;
}

/* Обёртка: пунктирная линия с буквами сверху + текст-подсказка снизу. inline-flex column
   с vertical-align: baseline — соседний текст в строке остаётся выровнен по baseline
   пунктирной линии (первый flex-item = baseline обёртки), не "пляшет". Подсказка в потоке,
   создаёт место под собой — не накладывается на следующую строку при переносе.
   При showHint=true строка с пунктирной линией становится выше ровно в этом месте,
   соседние строки не задеваются — это ожидаемое поведение (юзер сам запросил показ). */
.cg-blank-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: baseline;
    margin: 0 2px;
}

.cg-blank {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    border-bottom: 2px dashed var(--brand-primary);
    padding: 2px 4px;
    min-width: 40px;
}


.cg-hidden-word {
    color: var(--brand-primary);
    letter-spacing: 2px;
    border-bottom: 2px dashed var(--brand-primary);
    padding: 0 4px;
}

.fw-blank-letter {
    display: inline-block;
    width: 22px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--brand-primary);
    border-bottom: 2px solid var(--border-color);
    margin: 0 1px;
    transition: border-color 0.2s, color 0.2s;
}

.fw-blank-letter.filled {
    border-color: var(--brand-primary);
}

.fw-hint-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--text-muted);
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    margin-left: 6px;
    vertical-align: middle;
    padding: 0;
    line-height: 1;
    transition: border-color 0.2s, color 0.2s;
}

.fw-hint-btn:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.fw-hint-popup {
    margin-top: 4px;
    font-size: 24px;
    font-weight: 600;
    color: var(--brand-primary);
    font-style: italic;
    letter-spacing: 1px;
    white-space: nowrap;
    pointer-events: none;
}

.fw-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
}

.fw-result-feedback {
    font-size: 20px;
    font-weight: 600;
}

.fw-result-feedback--correct { color: var(--color-success); }
.fw-result-feedback--wrong { color: var(--color-error); }

.fw-result-sentence {
    font-size: 20px;
    line-height: 1.6;
}

.fw-result-word {
    font-weight: 700;
    padding: 0 2px;
    border-radius: 4px;
}

.fw-result-word--correct {
    color: var(--color-success);
}

.fw-result-word--wrong {
    color: var(--color-error);
    text-decoration: underline;
    text-decoration-style: wavy;
    text-underline-offset: 3px;
}

.fw-result-translation {
    font-size: 16px;
    color: var(--text-secondary);
    text-align: center;
}

/* ==========================================================================
   16. SEMANTIC COLOR CLASSES — status, feedback, buttons
   ========================================================================== */

/* --- Word status colors (dots, labels, stats) --- */
.color-not-studied { color: var(--brand-primary); }
.color-learning { color: var(--color-warning); }
.color-mastered { color: var(--color-success); }
.color-difficult { color: var(--color-error); }

.bg-not-studied { background: var(--brand-primary); }
.bg-learning { background: var(--color-warning); }
.bg-mastered { background: var(--color-success); }
.bg-difficult { background: var(--color-error); }

/* --- Category stats plaque --- */
.category-stats-plaque {
    background: var(--bg-hover);
    border-radius: 14px;
    padding: 16px 12px;
    margin-bottom: 18px;
}
.category-stats-row {
    display: flex;
    justify-content: space-around;
}
.category-stats-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.category-stats-num {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}
.category-stats-label {
    font-size: 11px;
    opacity: 0.7;
    text-align: center;
}

/* --- Feedback --- */
.wb-feedback-wrong { color: var(--color-error); }

/* --- Load error message --- */
.load-error-msg {
    font-size: 12px;
    margin-top: 8px;
    color: var(--color-error);
    word-break: break-all;
}

/* --- Modal / dialog buttons --- */
.btn-modal {
    padding: 10px 20px;
}
.btn-modal-sm {
    padding: 8px 16px;
    font-size: 14px;
}
.btn-secondary {
    background: var(--border-interactive);
}
.btn-danger {
    background: linear-gradient(135deg, var(--color-error), #DC2626);
}

/* --- Sync OAuth form --- */
.sync-oauth-input {
    width: 100%;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid var(--border-interactive);
    background: var(--bg-app);
    color: var(--text-primary);
    box-sizing: border-box;
}

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */


.toggle-switch {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--text-muted);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
    margin-left: 12px;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--bg-card);
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle-switch.active {
    background: var(--color-success);
}

.toggle-switch.active::after {
    transform: translateX(16px);
}

.sync-progress { margin-top: 12px; }
.sync-progress-bar {
    height: 14px;
    border-radius: 7px;
    background: var(--border-interactive);
    overflow: hidden;
}
.sync-progress-bar-inner {
    height: 100%;
    background: linear-gradient(90deg, var(--color-success), #10B981);
    border-radius: 7px;
    transition: width 0.3s ease;
}
.sync-progress-text {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* ==========================================================================
   18. SCREEN — Listening Game
   ========================================================================== */

.lg-speaker-block { display:flex; flex-direction:column; align-items:center; margin:20px 0 16px; }
.lg-speaker-btn { font-size:48px; background:none; border:2px solid var(--brand-primary); border-radius:50%; width:80px; height:80px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.15s; color:var(--brand-primary); }
.lg-speaker-btn:hover:not(:disabled) { background:rgba(59,130,246,0.1); }
.lg-speaker-btn:disabled { opacity:0.4; cursor:default; }
.lg-speaker-hint { font-size:13px; color:var(--text-muted); margin-top:8px; }

/* --- Mobile: растягиваем на весь экран --- */
@media (max-width: 767px) {
    body {
        height: 100%;
        min-height: 100dvh;
        align-items: stretch;
    }

    #app {
        max-width: 100%;
        min-height: 100dvh;
        border-radius: 0;
        box-shadow: none;
    }
}

/* --- Планшет portrait (768–1023px) --- */
@media (min-width: 768px) {
    #app {
        max-width: 900px;
    }

    .content {
        padding: 28px 32px;
    }

    .bookshelf-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 170px));
        gap: 20px;
    }

    /* Словарь: карточки в 2 колонки */
    .dict-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    /* Категории: 4 колонки */
    .cat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Тренировки: карточка на десктопе */
    .quiz-card {
        max-width: 880px;
        margin: auto;
        padding: 40px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 20px;
        gap: 24px;
    }
    .quiz-card .quiz-score {
        font-size: 15px;
        font-weight: 500;
    }
    .quiz-card .quiz-question {
        font-size: 40px;
        font-weight: 800;
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        padding: 8px 0;
    }

    /* 2-колоночный layout: вопрос+ответ слева, варианты+Далее справа */
    .quiz-card .quiz-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 32px;
        row-gap: 0;
        align-items: start;
    }
    .quiz-card .quiz-grid-left,
    .quiz-card .quiz-grid-right {
        gap: 16px;
    }

    .quiz-card .quiz-option {
        min-height: 56px;
        padding: 0 24px;
        border-radius: 14px;
        font-size: 16px;
        font-weight: 500;
        align-items: center;
    }
    .quiz-card .quiz-options {
        gap: 12px;
    }
    .quiz-card .quiz-option-kbd {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        font-size: 12px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        color: var(--text-muted);
        border: 1px solid var(--border-interactive);
        border-radius: 6px;
        flex-shrink: 0;
        background: var(--bg-page, #f5f7fa);
    }
    .quiz-card .quiz-option:hover .quiz-option-kbd {
        border-color: var(--brand-primary);
        color: var(--brand-primary);
    }
    .quiz-card .quiz-skip {
        height: 52px;
        border: 2px solid var(--border-interactive);
        border-radius: 14px;
        font-size: 16px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .quiz-card .quiz-option.disabled {
        opacity: 0.4;
    }
    .quiz-card .quiz-option.correct {
        opacity: 1;
    }
    .quiz-card .quiz-answer-card {
        align-self: stretch;
        background: none;
        padding: 0;
        margin-top: 0;
        border-top: 1px solid var(--border-color);
        border-radius: 0;
        padding-top: 16px;
    }
    .quiz-card .quiz-answer-headline {
        font-size: 24px;
    }
    .quiz-card .quiz-next-btn {
        width: 100%;
        height: 52px;
        border-radius: 14px;
        font-size: 16px;
        font-weight: 600;
        margin-top: 4px;
        gap: 8px;
    }
    .quiz-card .quiz-next-kbd {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        opacity: 0.85;
    }
    .quiz-answer-card,
    .wb-result-card,
    .fw-result,
    .quiz-result {
        max-width: 680px;
        margin-left: auto;
        margin-right: auto;
    }
    .wb-result-card,
    .quiz-answer-card {
        padding: 32px 40px;
        gap: 12px;
    }
    .wb-result-img,
    .quiz-answer-img {
        max-height: 180px;
    }
    .wb-assembled,
    .wb-letters {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Формы: ограничить ширину */
    .card-form {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    /* «Сейчас читаю»: обложка крупнее */
    .reading-now-cover,
    .reading-now-cover-placeholder {
        width: 110px;
        height: 160px;
    }

    /* Статистика: карточки крупнее */
}

/* --- Планшет landscape / десктоп (1024px+) --- */
@media (min-width: 1024px) {
    #app {
        max-width: none;
        flex-direction: row;
    }

    .app-nav {
        flex-direction: column;
        width: 240px;
        border-top: none;
        border-right: 1px solid var(--border-color);
        padding: max(20px, var(--safe-top)) 12px max(20px, var(--safe-bottom)) 12px;
        gap: 4px;
        order: 0;
    }

    .app-nav-item {
        flex: none;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 10px 16px;
        border-radius: 10px;
        font-size: 14px;
    }

    .app-nav-item.active {
        background: var(--bg-hover);
    }

    .app-nav-icon {
        height: auto;
        width: 22px;
    }

    .app-nav-items {
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
    }

    .app-nav-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 16px 24px;
    }

    .app-nav-logo-text {
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .app-nav-profile {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 16px;
        border-top: 1px solid var(--border-color);
        margin-top: auto;
        cursor: pointer;
    }

    .app-nav-profile:hover {
        background: var(--bg-hover);
        border-radius: 10px;
    }

    .app-nav-profile-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--bg-input);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--text-muted);
    }

    .app-nav-profile-avatar-img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

    .app-nav-profile-info {
        flex: 1;
        min-width: 0;
    }

    .app-nav-profile-name {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .app-nav-profile-level {
        font-size: 12px;
        color: var(--text-muted);
    }

    .app-nav-profile-settings {
        cursor: pointer;
        flex-shrink: 0;
    }

    .content {
        padding: 32px 40px;
        padding-bottom: calc(32px + var(--safe-bottom));
    }

    .content:has(.content-aside) {
        padding-top: 8px;
    }

    .content-main {
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-width: 0;
    }

    .content-aside {
        display: flex;
        flex-direction: column;
        gap: 16px;
        order: -1;
        padding-top: 0;
    }

    .train-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
    }

    .train-card {
        padding: 24px;
        gap: 12px;
        border-radius: 16px;
    }

    .train-card__icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .train-card__title {
        font-size: 16px;
    }

    .train-card__desc {
        font-size: 13px;
    }

    .train-section__title {
        font-size: 22px;
        margin-bottom: 16px;
    }

    /* Библиотека: 5 колонок */
    .bookshelf-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 180px));
        gap: 24px;
    }

    /* Словарь: 2 колонки (оставляем, 3 слишком узкие для карточек) */

    /* Категории: 5 колонок */
    .cat-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    /* «Сейчас читаю»: ещё крупнее */
    .reading-now {
        padding: 24px 32px;
    }
    .reading-now-cover,
    .reading-now-cover-placeholder {
        width: 130px;
        height: 190px;
    }
    .reading-now-book-title {
        font-size: 20px;
    }

    /* Тренировки: карточки результата шире на десктопе */
    .quiz-answer-card,
    .wb-result-card,
    .fw-result,
    .quiz-result {
        max-width: 720px;
    }
    .wb-result-card,
    .quiz-answer-card {
        padding: 36px 48px;
        gap: 14px;
        border-radius: 16px;
    }
    .wb-result-img,
    .quiz-answer-img {
        max-height: 200px;
    }
    .quiz-answer-word {
        font-size: 26px;
    }
    .quiz-answer-translation {
        font-size: 17px;
    }
    .quiz-answer-context {
        font-size: 15px;
    }
    .wb-assembled,
    .wb-letters {
        max-width: 640px;
    }
}

/* --- Десктоп (1280px+): aside в sidebar --- */
@media (min-width: 1280px) {
    .content:has(.content-aside) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 32px;
        align-items: start;
        padding-right: 24px;
    }
    .content-aside {
        order: 0;
        padding-top: 8px;
    }
    .content-main .card-form {
        max-width: 720px;
    }
}

/* ==========================================================================
   DAILY STATS BLOCK (SM-2 Plan)
   ========================================================================== */



/* ==========================================================================
   LIBRARY
   ========================================================================== */

.library-wrap {
    overflow-y: auto;
    /* Резервируем место под вертикальный скроллбар всегда: иначе при смене
       длинной сетки книг на короткий контент (пустой фильтр/вкладка «Статьи»)
       скроллбар исчезает, контент расширяется на его ширину и TopBar «прыгает». */
    scrollbar-gutter: stable;
    position: relative;
}
/* --- LibraryTopBar: контент-табы слева + инструменты справа (макет v4) --- */

.library-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.library-tabs {
    display: flex;
    gap: 4px;
}

.library-tab {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.library-tab:hover {
    background: var(--bg-hover);
}

.library-tab.active {
    /* Светло-синяя «пилюля» из макета (#EFF6FF). color-mix — чтобы работало и в
       тёмной теме, подстраиваясь под --brand-primary. */
    background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
    color: var(--brand-primary);
    font-weight: 600;
}

.library-topbar-tools {
    display: flex;
    align-items: center;
    gap: 12px;
}

.library-topbar-tools .search-field {
    width: 220px;
}

.library-fav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.library-fav-toggle:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.library-fav-toggle.active {
    /* Активное «избранное» — янтарная звезда (макет): #FEF3C7 / #FBBF24 / #D97706. */
    background: #FEF3C7;
    border-color: #FBBF24;
    color: #D97706;
}

/* --- Библиотека: «Сейчас читаю» --- */

/* NowReadingCard — карточка «Сейчас читаю» в aside (макет v4). Показывается
   только при 1024+ (.content-aside), поэтому базовый стиль и есть финальный. */
.reading-now {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
}
.reading-now-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.reading-now-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.reading-now-all {
    border: none;
    background: transparent;
    padding: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: var(--brand-primary);
    cursor: pointer;
}
.reading-now-card {
    display: flex;
    gap: 12px;
    cursor: pointer;
}
.reading-now-cover,
.reading-now-cover-placeholder {
    width: 56px;
    height: 80px;
    border-radius: 6px;
    flex-shrink: 0;
}
.reading-now-cover {
    object-fit: cover;
}
.reading-now-cover-placeholder {
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
}
.reading-now-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.reading-now-book-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}
.reading-now-author {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    color: var(--text-muted);
}
.reading-now-progress {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}
.reading-now-progress-fill {
    height: 100%;
    background: var(--brand-primary);
    border-radius: 2px;
}
.reading-now-percent {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    color: var(--text-muted);
}
.reading-now-continue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: var(--brand-primary);
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.reading-now-continue:hover {
    background: var(--brand-primary-dark);
}
.reading-now-continue .app-icon svg {
    width: 16px;
    height: 16px;
}

/* ReadingStatsCard — блок «Статистика чтения» в aside (макет v4). */
.reading-stats {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
}
.reading-stats-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 14px;
}
.reading-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
}
.reading-stats-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: var(--text-secondary);
}
.reading-stats-icon svg {
    width: 16px;
    height: 16px;
}
.reading-stats-icon--streak  { color: #F59E0B; }
.reading-stats-icon--started { color: var(--brand-primary); }
.reading-stats-icon--words   { color: #10B981; }
.reading-stats-value {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.reading-stats-divider {
    height: 1px;
    background: var(--border-color);
}

/* --- Библиотека: сетка книг --- */

.bookshelf-grid {
    display: grid;
    /* Плотность макета v4: карточка ~160px (как BookCard), auto-fill + 1fr —
       колонки тянутся по ширине контента (на широком десктопе ~6 в ряд). */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    padding: 16px 20px 20px;
}
.bookshelf-item {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    /* Нижнюю границу не рисуем бордером — её роль играет 2px-полоса прогресса
       (.bookshelf-progress, последний потомок): трек = цвет границы, синяя
       заливка = % прочитанного. overflow:hidden + radius загибают её по углам. */
    border-bottom: none;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s;
}
.bookshelf-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.bookshelf-cover {
    height: 220px;
    overflow: hidden;
    background: var(--bg-input);
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
}
.bookshelf-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bookshelf-cover-placeholder {
    font-size: 28px;
    opacity: 0.4;
}
/* FavStar в углу обложки — всегда видна, тоггл избранного (макет: 28×28 круг,
   полупрозрачный чёрный фон, активная звезда #FBBF24). */
.bookshelf-fav {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.48);
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.bookshelf-fav svg { width: 16px; height: 16px; }
.bookshelf-fav:hover { background: rgba(0,0,0,0.62); }
.bookshelf-fav.active { color: #FBBF24; }

/* Прогресс чтения — тонкая полоса во всю ширину у нижнего края карточки
   (последний flex-child .bookshelf-item): трек --border-color, синяя заливка.
   margin-top:auto прижимает её к самому низу, даже когда карточка растянута
   grid'ом до высоты ряда (иначе полоса «всплывает» под контент с зазором снизу). */
.bookshelf-progress {
    margin-top: auto;
    height: 2px;
    background: var(--border-color);
}
.bookshelf-progress-fill {
    height: 100%;
    background: var(--brand-primary);
}

.bookshelf-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px 12px;
}
.bookshelf-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.bookshelf-author {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    color: var(--text-muted);
}

.bookshelf-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.bookshelf-badge {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    width: fit-content;
}
.bookshelf-badge--format  { background: #F0F4F8; color: #4A5568; }
.bookshelf-badge--known   { background: #D1FAE5; color: #065F46; }
.bookshelf-badge--pending { background: var(--bg-input); color: var(--text-muted); font-style: italic; }

/* --- Тизер «Подбор по силам» (aside, пока словарь < 150) --- */

.coverage-teaser {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.coverage-teaser-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.coverage-teaser-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary);
}
.coverage-teaser-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--border-color);
    overflow: hidden;
}
.coverage-teaser-fill {
    height: 100%;
    background: var(--brand-primary);
    transition: width 0.3s;
}
.coverage-teaser-count {
    font-size: 12px;
    color: var(--text-muted);
}
.coverage-teaser-cta {
    margin-top: 2px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: var(--brand-primary);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.coverage-teaser-cta:hover { background: var(--brand-primary-dark); }

/* ==========================================================================
   ARTICLE ITEM (вкладка «Статьи» в Библиотеке, макет v4 BHtNv)
   ========================================================================== */

.article-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 20px;
}
.article-item {
    display: flex;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}
.article-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.article-item-thumb {
    position: relative;
    width: 120px;
    flex-shrink: 0;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.article-item-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-item-thumb-placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}
.article-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
}
.article-item-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.article-item-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    color: var(--text-muted);
}
.article-item-meta-icon svg { width: 11px; height: 11px; }
.article-item-spacer { flex: 1; }
.article-item-lang {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: #F0F4F8;
    color: #4A5568;
    font-size: 10px;
    font-weight: 600;
}
.article-item-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}
.article-item-badge {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}
.article-item-badge--cov  { background: #D1FAE5; color: #065F46; }
.article-item-badge--done { background: #D1FAE5; color: #065F46; }
.bookshelf-info-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.5);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    font-family: serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.bookshelf-item:hover .bookshelf-info-btn { opacity: 1; }
.bookshelf-info-btn:hover { color: #fff; }
@media (hover: none) {
    .bookshelf-info-btn { opacity: 0.7; }
}

/* --- Анализ книги: страница «i» --- */


/* ===== Страница анализа контента (книга / статья) ===== */
.book-info-status { padding: 32px 0; color: var(--text-muted); }
.book-info-status--error { color: var(--color-error); margin-bottom: 12px; }
.book-info-pending { text-align: center; padding: 40px 0; }
.book-info-pending p { color: var(--text-muted); margin-bottom: 16px; }

/* Секция */
.book-info-sec { margin-bottom: 24px; }
.book-info-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.book-info-sec-icon { color: var(--text-secondary); }
.book-info-sec-icon--teal   { color: var(--color-teal); }
.book-info-sec-icon--purple { color: var(--brand-primary); }
.book-info-sec-icon--orange { color: var(--color-warning-dark); }
.book-info-sec-icon--green  { color: var(--color-success-dark); }
.book-info-sec-title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.book-info-imported {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-input);
    border-radius: 4px;
    padding: 3px 8px;
    white-space: nowrap;
}
.book-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px 18px;
}
.book-info-help { position: relative; color: var(--text-muted); cursor: help; }
.book-info-help::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 240px;
    background: var(--text-primary);
    color: var(--bg-card);
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.4;
    text-align: left;
    padding: 8px 10px;
    border-radius: 8px;
    white-space: normal;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 30;
}
.book-info-help:hover::after { opacity: 1; }

/* ── Прогресс-дашборд (/app/progress) ── */
/* Плейсхолдеры каркаса (MainContent). Удаляются по мере наполнения секций. */
.progress-dash-placeholder {
    padding: 24px;
    border: 1px dashed var(--border-color);
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}
.pd-stats-link {
    display: block;
    text-align: center;
    padding: 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--brand-primary);
    text-decoration: none;
}
.pd-stats-link:hover { text-decoration: underline; }

/* MainContent — вертикальный стек секций */
.progress-dash .content-main { display: flex; flex-direction: column; gap: 20px; }

/* ActivityBlock — призыв к повторению */
.pd-activity {
    display: flex; align-items: center; gap: 16px;
    padding: 20px; border-radius: 14px;
    background: #FFFBEB; border: 1px solid #FDE68A;
}
.pd-activity-icon {
    width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #FEF3C7; color: #D97706;
}
.pd-activity-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.pd-activity-title { font-size: 14px; font-weight: 700; color: #92400E; }
.pd-activity-sub { font-size: 12px; color: #B45309; }
.pd-activity-btn {
    flex-shrink: 0; border: none; cursor: pointer;
    background: #D97706; color: #fff;
    border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 600;
}
.pd-activity-btn:hover { background: #B45309; }

/* StreakRow — две карточки серий */
.pd-streak-row { display: flex; gap: 16px; }
.pd-streak-row > * { flex: 1; min-width: 0; }
.pd-streak {
    display: flex; flex-direction: column; gap: 12px;
    padding: 20px; border-radius: 14px; border: 1px solid;
}
.pd-streak--amber { background: #FFFBEB; border-color: #FDE68A; }
.pd-streak--blue  { background: #EFF6FF; border-color: #BFDBFE; }
.pd-streak-top { display: flex; align-items: center; gap: 12px; }
.pd-streak-icon {
    width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.pd-streak--amber .pd-streak-icon { background: #FEF3C7; color: #F59E0B; }
.pd-streak--blue  .pd-streak-icon { background: #DBEAFE; color: #3B82F6; }
.pd-streak-day { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 20px; font-weight: 800; color: var(--text-primary); }
.pd-streak-sub { font-size: 12px; }
.pd-streak--amber .pd-streak-sub { color: #D97706; }
.pd-streak--blue  .pd-streak-sub { color: #2563EB; }
.pd-streak-stats { display: flex; justify-content: space-between; }
.pd-streak-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pd-streak-stat-value { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 18px; font-weight: 700; color: #3B82F6; }
.pd-streak-stat-label { font-size: 11px; color: #A0AEC0; }

/* ActivityHeatmap — 52 недели (колонки) × 7 дней (строки Пн..Вс) */
.pd-heat {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: 14px; padding: 20px;
    display: flex; flex-direction: column; gap: 12px;
}
.pd-heat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pd-heat-title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.pd-heat-presets { display: flex; gap: 4px; }
.pd-heat-chip {
    border: 1px solid var(--border-color); background: transparent; cursor: pointer;
    border-radius: 999px; padding: 4px 12px; font-size: 12px; color: var(--text-secondary);
}
.pd-heat-chip:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.pd-heat-chip--active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
/* Календарь: 7 колонок (Пн..Вс сверху) × N строк-недель, ячейки во всю ширину */
.pd-heat-cal { display: flex; flex-direction: column; gap: 8px; }
.pd-heat-labels { display: flex; }
.pd-heat-label { flex: 1; min-width: 0; text-align: center; font-size: 11px; color: var(--text-muted); }
.pd-heat-rows { display: flex; flex-direction: column; }
.pd-heat-rowline { display: flex; }
.pd-heat-c { flex: 1; min-width: 0; border-radius: 4px; }
.pd-heat-c--l0 { background: #F3F4F6; }
.pd-heat-c--l1 { background: #BBF7D0; }
.pd-heat-c--l2 { background: #4ADE80; }
.pd-heat-c--l3 { background: #22C55E; }
.pd-heat-c--l4 { background: #16A34A; }
.pd-heat-c--future { background: transparent; }

/* Год — GitHub-раскладка: недели-колонки, дни Пн..Вс слева, квадратики */
.pd-heat-gh { display: flex; gap: 6px; }
.pd-heat-gh-days { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.pd-heat-gh-day { height: 11px; line-height: 11px; font-size: 9px; color: var(--text-muted); }
.pd-heat-gh-grid { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; }
.pd-heat-gh-col { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pd-heat-sq { width: 100%; aspect-ratio: 1; border-radius: 2px; }

/* Achievements — грид 2×N карточек с прогрессом */
.pd-ach-section { display: flex; flex-direction: column; gap: 12px; }
.pd-sec-title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.pd-ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pd-ach {
    display: flex; align-items: center; gap: 12px;
    padding: 16px; border: 1px solid var(--border-color); border-radius: 12px;
    background: var(--bg-card);
}
.pd-ach--locked { opacity: 0.55; }
.pd-ach-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.pd-ach-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pd-ach-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.pd-ach-hint { font-size: 12px; color: var(--text-secondary); }

/* Мобайл (<768px): каждый блок дашборда — на всю ширину (стек в 1 колонку) */
@media (max-width: 767px) {
    .pd-streak-row { flex-direction: column; }
    .pd-ach-grid { grid-template-columns: 1fr; }
    /* Год (GitHub-раскладка) на узком экране: фикс-размер квадратиков + горизонтальный
       скролл сетки (подписи дней слева остаются на месте), вместо сжатия во flex. */
    .pd-heat-gh-col { flex: 0 0 auto; }
    .pd-heat-sq { width: 11px; }
}

/* Язык и качество */
.book-info-lang-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.book-info-lang-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.book-info-lang-name .app-icon { color: var(--color-teal); }
.book-info-ocr-sep { width: 1px; height: 18px; background: var(--border-color); }
.book-info-ocr {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-success-dark);
}
.book-info-ocr--good { color: var(--color-success-dark); }
.book-info-ocr--medium { color: var(--color-warning-dark); }
.book-info-ocr--bad { color: var(--color-error-dark); }
.book-info-ocr-hint { font-size: 12px; }
.book-info-ocr-hint--medium { color: var(--color-warning-dark); }
.book-info-ocr-hint--bad { color: var(--color-error-dark); }

/* Твой уровень */
.book-info-level { display: flex; flex-direction: column; gap: 16px; }
.book-info-verdict {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}
.book-info-bar {
    height: 28px;
    border-radius: 8px;
    background: var(--bg-input);
    overflow: hidden;
    display: flex;
}
.book-info-bar-fill { height: 100%; transition: width 0.4s ease; }
.book-info-bar--known    { background: var(--color-success-dark); }
.book-info-bar--learning { background: var(--brand-primary); }
.book-info-bar--unknown  { background: var(--border-interactive); }
.book-info-legend { display: flex; gap: 24px; }
.book-info-legend-item { display: flex; flex-direction: column; gap: 4px; }
.book-info-legend-num {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
}
.book-info-dot { width: 10px; height: 10px; border-radius: 50%; }
.book-info-dot--known    { background: var(--color-success-dark); }
.book-info-dot--learning { background: var(--brand-primary); }
.book-info-dot--unknown  { background: var(--border-interactive); }
.book-info-legend-label { font-size: 13px; color: var(--text-muted); }
.book-info-density {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
}
.book-info-density-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.book-info-density-value { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.book-info-hint { font-size: 13px; color: var(--text-muted); }

/* Лексика */
.book-info-stats { display: flex; gap: 16px; }
.book-info-stat {
    flex: 1;
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.book-info-stat-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.book-info-stat-value {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: var(--text-primary);
}
.book-info-stat-value--accent { color: var(--brand-primary); }
.book-info-stat-value--warn { color: var(--color-warning-dark); }
.book-info-stat-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.book-info-diversity { margin-top: 10px; font-size: 12px; font-style: italic; color: var(--text-muted); }

/* Набор новых слов */
.book-info-import-result {
    font-size: 13px;
    color: var(--color-success-dark);
    background: color-mix(in srgb, var(--color-success) 10%, transparent);
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
}
.book-info-selectbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
}
.book-info-selectall { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text-primary); cursor: pointer; user-select: none; }
.book-info-selcount { font-size: 13px; color: var(--text-muted); }
.book-info-selcount b { color: var(--brand-primary); font-weight: 800; }
.book-info-wordlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.book-info-wordcard {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: border-color 0.12s;
}
.book-info-wordcard:hover { border-color: var(--border-interactive); }
.book-info-wordcard--selected { border-color: var(--brand-primary); box-shadow: inset 0 0 0 1px var(--brand-primary); }
.book-info-wordcard-top { display: flex; align-items: flex-start; gap: 10px; }
.book-info-check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid var(--border-interactive);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}
.book-info-check--on { background: var(--brand-primary); border-color: var(--brand-primary); }
.book-info-word-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.book-info-word {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
}
.book-info-word-tr { font-size: 13px; color: var(--text-secondary); }
.book-info-word-freq {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-input);
    border-radius: 4px;
    padding: 2px 7px;
}
.book-info-word-ctx { margin-top: 8px; font-size: 12px; font-style: italic; color: var(--text-muted); line-height: 1.4; }
.book-info-word-hit { color: var(--brand-primary); font-weight: 800; font-style: italic; }
.book-info-add-btn {
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
    height: auto;
    padding: 7px 12px;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
}
.book-info-add-btn:hover { transform: none; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25); }
.book-info-add-btn svg { width: 14px; height: 14px; }

/* Топ новых слов (fallback) */
.book-info-topwords { display: flex; flex-direction: column; }
.book-info-topword {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}
.book-info-topword:last-child { border-bottom: none; }
.book-info-topword-lemma { font-size: 14px; color: var(--text-primary); }

/* Aside: карточка книги */
.book-info-bookcard {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
}
.book-info-cover {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-input);
}
.book-info-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-info-cover-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.book-info-meta { display: flex; flex-direction: column; gap: 4px; }
.book-info-booktitle {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}
.book-info-bookauthor { font-size: 13px; color: var(--text-muted); }
.book-info-tags { display: flex; gap: 6px; }
.book-info-format { font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--bg-input); border-radius: 4px; padding: 3px 8px; }
.book-info-progress { display: flex; flex-direction: column; gap: 6px; }
.book-info-progress-track { height: 6px; border-radius: 3px; background: var(--bg-input); overflow: hidden; }
.book-info-progress-fill { height: 100%; background: var(--brand-primary); }
.book-info-progress-label { font-size: 12px; color: var(--text-muted); }
.book-info-aside-divider { height: 1px; background: var(--border-color); }
.book-info-calc-date { font-size: 11px; color: var(--text-muted); }
.book-info-recalc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 12px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.book-info-recalc:hover:not(:disabled) { color: var(--brand-primary); border-color: var(--brand-primary); }
.book-info-recalc:disabled { opacity: 0.5; cursor: default; }
.book-info-recalc-notice {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-warning-dark);
    text-align: center;
}

/* Адаптив: узкая колонка — компактнее */
@media (max-width: 1279px) {
    .book-info-cover { width: 110px; align-self: flex-start; }
}
@media (max-width: 767px) {
    .book-info-wordlist { grid-template-columns: 1fr; }
    .book-info-stats { flex-direction: column; }
    .book-info-legend { gap: 16px; }
}

.bookshelf-delete {
    position: absolute;
    top: 8px;
    left: 38px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.bookshelf-item:hover .bookshelf-delete { opacity: 1; }
.bookshelf-delete:hover { color: var(--color-error); }
@media (hover: none) {
    .bookshelf-delete { opacity: 0.7; }
}

/* --- Библиотека: пустое состояние --- */

.library-empty {
    text-align: center;
    padding: 60px 20px;
    opacity: 0.6;
}
.library-empty-icon { font-size: 48px; margin-bottom: 12px; }
.library-empty-hint { font-size: 13px; margin-top: 6px; }
.library-no-results {
    text-align: center;
    padding: 60px 20px;
    opacity: 0.6;
}

.library-error {
    padding: 12px 20px;
}

.seed-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    margin: 0 0 16px;
    background: var(--bg-card);
    border: 1px solid var(--brand-primary);
    border-radius: 12px;
}

.seed-banner-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.seed-banner-text strong {
    font-size: 15px;
    color: var(--text-primary);
}

.seed-banner-text span {
    font-size: 13px;
    color: var(--text-secondary);
}

.seed-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.seed-banner-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s;
}

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

.seed-banner-accept {
    background: var(--brand-primary);
    color: #fff;
}

.seed-banner-dismiss {
    background: transparent;
    color: var(--text-secondary);
}

.seed-banner-dismiss:hover {
    color: var(--text-primary);
}

@media (max-width: 600px) {
    .seed-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .seed-banner-actions {
        justify-content: center;
    }
}

.loading-placeholder {
    text-align: center;
    padding: 60px;
    opacity: 0.5;
}

/* --- FAB (кнопка загрузки) --- */

.library-toolbar {
    display: flex;
    gap: 8px;
    padding: 0;
    margin-bottom: 8px;
}

.library-filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.library-filter-btn:hover,
.library-filter-btn.active {
    background: var(--bg-hover);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

/* FilterSheet — оверлей-шторка фильтров книг (макет v4): backdrop + панель. */
.filter-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.filter-sheet {
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--bg-card);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
}
.filter-sheet-handle {
    align-self: center;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-color);
    margin: 12px 0 4px;
}
.filter-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 20px 16px;
}
.filter-sheet-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}
.filter-sheet-reset {
    border: none;
    background: transparent;
    padding: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-primary);
    cursor: pointer;
}
.filter-sheet-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 20px 20px;
    border-top: 1px solid var(--border-color);
}
.filter-sheet-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}
.filter-sheet-apply {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 12px;
    background: var(--brand-primary);
    color: #fff;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.filter-sheet-apply:hover { background: var(--brand-primary-dark); }

.library-filter-select {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

.library-filter-select select {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    cursor: pointer;
}

.library-filter-select select:focus {
    border-color: var(--brand-primary);
}

.library-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
}

.library-filter-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-primary);
    cursor: pointer;
}

.library-add-btn {
    /* 80px = высота .app-nav (~64px) + воздух между FAB и меню (~16px). */
    position: fixed;
    bottom: calc(80px + var(--safe-bottom));
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    color: white;
    cursor: pointer;
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: background 0.15s;
    z-index: 10;
}

.library-add-btn:hover {
    background: var(--brand-primary-dark);
}

.library-add-btn.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.library-add-btn-text {
    display: none;
}

@media (min-width: 768px) {
    .library-add-btn {
        position: static;
        width: auto;
        height: 36px;
        border-radius: 8px;
        background: var(--brand-primary);
        font-size: 14px;
        font-weight: 600;
        font-family: inherit;
        padding: 0 16px;
        gap: 6px;
        box-shadow: none;
    }
    .library-add-btn-text {
        display: inline;
    }
}

/* ==========================================================================
   READER
   ========================================================================== */

.reader-screen {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    background: var(--reader-bg);
}

/* reader-header удалён — читалка использует общий .header */

.reader-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: var(--reader-bg);
}
.reader-container foliate-view {
    background: var(--reader-bg);
}
.reader-container foliate-view::part(filter) {
    background: var(--reader-bg) !important;
}

.reader-toolbar {
    display: flex;
    align-items: center;
    padding: 6px 20px;
    gap: 8px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.reader-font-btn {
    background: var(--bg-input);
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.reader-font-btn:hover { background: var(--bg-hover); }
.reader-toolbar .theme-toggle-btn {
    background: var(--bg-input);
    color: var(--text-primary);
}
.reader-toolbar .theme-toggle-btn:hover { background: var(--bg-hover); }
.reader-percent {
    font-size: 13px;
    color: var(--brand-primary);
    white-space: nowrap;
    margin-left: auto;
}

.reader-loading, .reader-error {
    text-align: center;
    padding: 40px;
}
.reader-error { color: var(--color-error); }

/* Кнопки перелистывания */
.reader-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 80px;
    background: var(--reader-nav-bg);
    border: none;
    color: var(--text-muted);
    font-size: 28px;
    cursor: pointer;
    z-index: 10;
    border-radius: 8px;
    transition: background 0.15s, opacity 0.15s;
    opacity: 0.5;
}
.reader-nav:hover { background: var(--reader-nav-hover); opacity: 1; }
.reader-nav-prev { left: 4px; }
.reader-nav-next { right: 4px; }

/* Word popup */
.word-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 100;
    touch-action: manipulation;
}
.word-popup {
    background: var(--popup-bg);
    border-radius: 16px 16px 0 0;
    padding: 14px;
    padding-bottom: max(14px, var(--safe-bottom));
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: popup-slide-up 0.2s ease-out;
    transition: opacity 0.3s;
    border: 1px solid var(--border-color);
    border-bottom: none;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
}
.word-popup--saved { opacity: 0.5; }
@keyframes popup-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Header: слово + озвучка */
.word-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}
.word-popup-word-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.word-popup-word {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}
.word-popup-lemma {
    font-size: 13px;
    color: var(--text-muted);
}
.word-popup-grammar {
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.7;
}
.word-popup-speaker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg-input);
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    flex-shrink: 0;
    transition: background 0.15s;
}
.word-popup-speaker-btn:hover { background: var(--border-color); }

.word-popup-sentence-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg-input);
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.15s, color 0.15s;
}
.word-popup-sentence-btn:hover { background: var(--border-color); }
.word-popup-sentence-btn--active { color: var(--brand-primary); background: rgba(59,130,246,0.1); }
.word-popup-sentence-btn:disabled { opacity: 0.5; cursor: default; }

/* Редактирование слова */
.word-popup-word-ac {
    position: relative;
    flex: 1;
    min-width: 0;
}
.word-popup-word-input {
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 4px 8px;
    outline: none;
}
.word-popup-word-input:focus { border-color: var(--brand-primary); }
.word-popup-suggest { z-index: 1010; }

.word-popup-original {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: -4px;
}

/* Разделитель */
.word-popup-divider {
    height: 1px;
    background: var(--border-color);
}

/* Секции */
.word-popup-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.word-popup-section-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Поле ввода перевода */
.word-popup-field { margin: 0; }
.word-popup-translate-wrap { position: relative; }
.word-popup-input {
    width: 100%;
    padding: 8px 36px 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}
.word-popup-input:focus { border-color: var(--brand-primary); }
.word-popup-input--loading { color: var(--text-muted); }
.word-popup-spinner {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: popup-spin 0.6s linear infinite;
}
@keyframes popup-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* Чипы переводов */
.word-popup-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.word-popup-chip {
    padding: 6px 14px;
    border: none;
    border-radius: 20px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1.2;
}
.word-popup-chip:hover { background: var(--border-color); }
.word-popup-chip:active {
    background: var(--brand-primary);
    color: #fff;
}
.word-popup-chip--more {
    color: var(--brand-primary);
    background: transparent;
    border: 1px dashed var(--brand-primary);
}
.word-popup-chip--more:hover {
    background: rgba(59, 130, 246, 0.1);
}

/* Часть речи */
.word-popup-pos {
    font-size: 10px;
    font-weight: 600;
    font-style: italic;
    color: var(--brand-primary);
}
.word-popup-content {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.4;
}

/* Контекст */
.word-popup-context-text {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
}
.word-popup-highlight {
    color: var(--brand-primary);
    font-weight: 600;
    font-style: normal;
}
.word-popup-sentence-translation {
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.5;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--border-color);
}
.word-popup-sentence-loading {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
    animation: pulse 1s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* SentenceTranslationModal — широкая модалка перевода предложения (Баг #25, дабл-тап) */
.sentence-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 110;
    touch-action: manipulation;
}
.sentence-modal {
    background: var(--popup-bg);
    border-radius: 16px 16px 0 0;
    padding: 20px;
    padding-bottom: max(20px, var(--safe-bottom));
    width: 100%;
    max-width: 720px;
    max-height: 80vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: popup-slide-up 0.2s ease-out;
    border: 1px solid var(--border-color);
    border-bottom: none;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
    position: relative;
}
.sentence-modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    color: var(--text-secondary);
}
.sentence-modal__close:hover { color: var(--text-primary); }
.sentence-modal__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
    padding-right: 32px;
}
.sentence-modal__section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sentence-modal__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.sentence-modal__original,
.sentence-modal__translation {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
}
.sentence-modal__loading {
    font-size: 14px;
    color: var(--text-muted);
    font-style: italic;
    animation: pulse 1s infinite;
}

/* Предупреждение */
.word-popup-warning {
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 180, 0, 0.15);
    color: var(--color-warning);
    font-size: 13px;
    line-height: 1.4;
}

/* Кнопки действий */
.word-popup-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.word-popup-camera-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    color: var(--text-muted);
}
.word-popup-camera-btn:hover { background: var(--border-color); }
.word-popup-photo-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;
}
.word-popup-photo-remove {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    background: var(--color-error);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.word-popup-add-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: var(--brand-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.word-popup-add-btn:hover { opacity: 0.9; }
.word-popup-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.word-popup-saved-hint {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* Источник + отзыв */
.word-popup-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.word-popup-source-row {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-size: 10px;
    opacity: 0.5;
}
.word-popup-feedback-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 10px;
    opacity: 0.5;
    cursor: pointer;
    padding: 2px 0;
    white-space: nowrap;
}
.word-popup-feedback-btn:hover { opacity: 0.8; }
.word-popup-feedback-sent {
    font-size: 10px;
    color: var(--color-green);
    opacity: 0.7;
}
.word-popup-feedback-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.word-popup-feedback-textarea {
    width: 100%;
    resize: vertical;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    box-sizing: border-box;
}
.word-popup-feedback-textarea:focus {
    outline: none;
    border-color: var(--color-blue);
}
.word-popup-feedback-submit {
    align-self: flex-end;
    padding: 4px 12px;
    font-size: 12px;
    background: var(--bg-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
}
.word-popup-feedback-submit:hover { background: var(--border-color); }
.word-popup-feedback-submit:disabled { opacity: 0.4; cursor: default; }

.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-secondary {
    background: var(--bg-hover);
    color: var(--text-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

/* ==========================================================================
   PAGE TABS (reusable component — level 1 navigation)
   ========================================================================== */

.page-tabs {
    display: flex;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    width: 100%;
    flex-shrink: 0;
}

.page-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    transition: color 0.15s, border-color 0.15s;
    flex: 1;
}

.page-tab .app-icon {
    display: none;
}

.page-tab:hover {
    color: var(--text-secondary);
}

.page-tab--active {
    color: var(--brand-primary);
    font-weight: 600;
    border-bottom-color: var(--brand-primary);
}

@media (min-width: 768px) {
    .page-tabs {
        height: 52px;
    }
    .page-tab {
        height: 52px;
        padding: 0 28px;
        font-size: 14px;
        flex: none;
    }
    .page-tab .app-icon {
        display: inline-flex;
    }
    .page-tab .app-icon svg {
        width: 16px;
        height: 16px;
    }
}

/* ==========================================================================
   SUB TABS (reusable component — level 2 navigation)
   ========================================================================== */

.sub-tabs {
    display: flex;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    width: 100%;
    flex-shrink: 0;
}

.sub-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 40px;
    padding: 0 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    transition: color 0.15s, border-color 0.15s;
    flex: 1;
}

.sub-tab .app-icon svg {
    width: 12px;
    height: 12px;
}

.sub-tab:hover {
    color: var(--text-secondary);
}

.sub-tab--active {
    color: var(--brand-primary);
    font-weight: 600;
    border-bottom-color: var(--brand-primary);
}

.sub-tab--active .app-icon {
    color: var(--brand-primary);
}

/* ==========================================================================
   SETTINGS PAGE
   ========================================================================== */

.settings-layout {
    display: grid;
    gap: 20px;
}

.settings-col-left,
.settings-col-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Карточка --- */
.s-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
}

.s-card-compact {
    padding: 0;
}

.s-card-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* --- Профиль --- */
.s-profile-card {
    padding: 32px;
}

.s-profile-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

@media (min-width: 490px) {
    .content {
        padding: 24px;
    }
    .s-profile-top {
        flex-direction: row;
        align-items: flex-start;
        gap: 32px;
    }
}

.s-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.s-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.s-avatar .app-icon svg {
    width: 40px;
    height: 40px;
}

.s-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.s-change-photo {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: none;
    cursor: pointer;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    color: var(--text-secondary);
    transition: border-color 0.15s;
}
.s-change-photo:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.s-profile-form {
    flex: 1;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.s-name-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 768px) {
    .s-name-row {
        flex-direction: row;
    }
}
.s-name-row .s-field {
    flex: 1;
}

.s-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.s-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.s-input {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0 14px;
    height: 44px;
    outline: none;
    transition: border-color 0.15s;
}
.s-input:focus {
    border-color: var(--brand-primary);
}
.s-input::placeholder {
    color: var(--text-muted);
}
.s-input--error {
    border-color: var(--color-error);
    background: var(--color-error-bg);
}
.s-input--error:focus {
    border-color: var(--color-error);
}
.s-field-error {
    font-size: 12px;
    color: var(--color-error);
    margin-top: 2px;
}

.s-input-display {
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0 14px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.s-verified-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(52, 211, 153, 0.08);
    color: #34D399;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
}

.s-verified-badge--no {
    background: rgba(251, 191, 36, 0.1);
    color: var(--color-warning-dark);
}

.s-verified-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    z-index: 10;
    white-space: normal;
}

.s-verified-badge:hover .s-verified-tooltip {
    display: block;
}

.s-btn-primary,
.s-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 32px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-dark));
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    align-self: flex-start;
    transition: opacity 0.15s;
}
.s-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.s-btn-primary:hover,
.s-save-btn:not(:disabled):hover {
    opacity: 0.9;
}
.s-save-btn--shake {
    animation: shake 0.3s ease;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

@media (max-width: 489px) {
    .s-save-btn {
        width: 100%;
        align-self: stretch;
    }
    .s-card {
        padding: 16px;
    }
}

/* --- Язык --- */
.s-lang-row {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.s-lang-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 12px 16px;
    border-radius: 12px;
    height: 72px;
}

.s-lang-active {
    background: rgba(59, 130, 246, 0.03);
    border: 2px solid var(--brand-primary);
}

.s-lang-disabled {
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    opacity: 0.6;
}

.s-lang-flag {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.s-lang-disabled .s-lang-flag {
    font-weight: 500;
    color: var(--text-secondary);
}

.s-lang-badge {
    font-size: 10px;
    color: var(--brand-primary);
}

.s-lang-badge-soon {
    font-size: 10px;
    color: var(--text-muted);
}

/* --- Инструменты --- */
.s-tools-title {
    padding: 16px 24px 12px;
}

.s-tool-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
    padding: 0 24px;
    background: none;
    border: none;
    border-top: 1px solid var(--border-color);
    cursor: pointer;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: var(--text-primary);
    transition: background 0.15s;
}
.s-tool-item:hover {
    background: var(--bg-hover);
}

.s-tool-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.s-tool-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.s-tool-arrow {
    color: var(--text-muted);
    font-size: 18px;
    font-weight: 300;
}

.s-tool-item--danger {
    color: var(--color-error);
}

.s-tool-item--toggle {
    cursor: default;
}
.s-tool-item--toggle:hover {
    background: none;
}

.s-tool-icon--orange { color: #F59E0B; }

.s-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
}
.s-toggle input {
    display: none;
}
.s-toggle-slider {
    position: absolute;
    inset: 0;
    background: #CBD5E0;
    border-radius: 22px;
    transition: background 0.2s;
}
.s-toggle-slider::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.s-toggle input:checked + .s-toggle-slider {
    background: var(--color-primary, #4F46E5);
}
.s-toggle input:checked + .s-toggle-slider::before {
    transform: translateX(18px);
}

.s-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    padding: 8px 0;
}

.s-footer-link {
    color: #9CA3AF;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.15s;
}

.s-footer-link:hover {
    color: #4A5568;
    text-decoration: underline;
}

.s-footer-sep {
    color: #D1D5DB;
    font-size: 13px;
}

/* --- Уровень владения --- */
.s-level-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.s-level-badge {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 8px;
    font-family: 'Inter', system-ui, sans-serif;
}

.s-level-bar-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.s-level-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
}

.s-level-fill {
    height: 100%;
    background: var(--brand-primary);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.s-level-labels {
    display: flex;
    justify-content: space-between;
}

.s-level-remaining {
    font-size: 11px;
    color: var(--text-muted);
}

.s-level-percent {
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-primary);
}

/* --- Статистика аккаунта --- */
.s-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

.s-stat-cell {
    background: var(--bg-app);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.s-stat-value {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.s-stat-label {
    font-size: 11px;
    color: var(--text-muted);
}

/* --- Достижения --- */
.s-achievements-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.s-ach-icon {
    font-size: 18px;
}

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

.s-ach-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.s-ach-item-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.s-ach-icon--blue { background: #EBF5FF; }
.s-ach-icon--green { background: #F0FFF4; }
.s-ach-icon--amber { background: #FFFBEB; }

[data-theme="dark"] .s-ach-icon--blue { background: rgba(59, 130, 246, 0.15); }
[data-theme="dark"] .s-ach-icon--green { background: rgba(52, 211, 153, 0.15); }
[data-theme="dark"] .s-ach-icon--amber { background: rgba(251, 191, 36, 0.15); }

.s-ach-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.s-ach-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.s-ach-item-desc {
    font-size: 12px;
    color: var(--text-muted);
}

.settings-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-content {
    gap: 20px;
}

@media (min-width: 1200px) {
    .settings-layout {
        grid-template-columns: 1fr 280px;
        gap: 32px;
    }
    .settings-col-right {
        grid-column: 2;
        grid-row: 1;
    }
    .s-footer-links {
        grid-column: 1;
    }
    .settings-tab-hidden {
        display: flex;
    }
}

@media (min-width: 1400px) {
    .settings-layout {
        grid-template-columns: 1fr 360px;
    }
}

/* ==========================================================================
   STATS PAGE
   ========================================================================== */

.stats-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.stats-sidebar {
    flex-shrink: 0;
}

.stats-sidebar-title {
    display: none;
}

.stats-placeholder {
    color: var(--text-muted);
    font-size: 14px;
    padding: 16px 0;
}

@media (min-width: 1024px) {
    .stats-body {
        flex-direction: row;
        height: 100%;
    }

    .stats-sidebar {
        width: 250px;
        flex-shrink: 0;
        background: var(--bg-card);
        border-right: 1px solid var(--border-color);
        padding: 24px 0;
    }

    .stats-sidebar-title {
        display: block;
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
        letter-spacing: 0.5px;
        padding: 0 20px 8px 20px;
    }

    .stats-sidebar .sub-tabs {
        flex-direction: column;
        background: transparent;
        border-bottom: none;
        width: 100%;
    }

    .stats-sidebar .sub-tab {
        justify-content: flex-start;
        height: 40px;
        padding: 0 20px;
        gap: 8px;
        font-size: 13px;
        border-bottom: none;
        border-radius: 0;
        flex: none;
    }

    .stats-sidebar .sub-tab--active {
        background: rgba(59, 130, 246, 0.06);
        border-bottom: none;
    }

    .stats-sidebar .sub-tab .app-icon svg {
        width: 16px;
        height: 16px;
    }
}

/* ==========================================================================
   KPI CARDS
   ========================================================================== */

/* Статистика: вертикальный ритм секций и на мобиле. Общий .content-main включает flex-стек
   только в desktop-@media, поэтому на узком экране секциям нужен явный gap здесь. */
.stats-page .content-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kpi-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.kpi-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.kpi-value {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-size: 24px;
    font-weight: 800;
}

.kpi-icon {
    margin-right: 2px;
}

.kpi-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.kpi-hint-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: none;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 600;
    font-family: 'Inter', system-ui, sans-serif;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s;
}

.kpi-hint-btn:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.kpi-hint {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    color: var(--text-secondary);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    line-height: 1.5;
    z-index: 10;
}

@media (min-width: 768px) {
    .kpi-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .kpi-value {
        font-size: 28px;
    }
}

@media (min-width: 1700px) {
    .kpi-row {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .cat-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
}

/* ==========================================================================
   BOOK STATS TABLE
   ========================================================================== */

.book-stats-table {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
}

.book-stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.book-stats-title {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.book-stats-filters {
    display: flex;
    gap: 8px;
}

.book-stats-filter {
    padding: 4px 12px;
    border-radius: 20px;
    border: none;
    background: var(--bg-app);
    color: var(--text-secondary);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.book-stats-filter--active {
    background: var(--brand-primary);
    color: #fff;
    font-weight: 600;
}

.book-stats-thead {
    display: flex;
    align-items: center;
    padding: 8px 0;
}

.book-stats-th {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.book-stats-th--name { flex: 1; }
.book-stats-th--progress { width: 160px; text-align: center; }
.book-stats-th--words { width: 100px; text-align: center; }

.book-stats-sep {
    height: 1px;
    background: var(--border-color);
}

.book-stats-row {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.book-stats-row--clickable {
    cursor: pointer;
    border-radius: 8px;
    margin: 0 -8px;
    padding: 10px 8px;
    transition: background 0.15s;
}

.book-stats-row--clickable:hover {
    background: var(--bg-app);
}

.book-stats-cell--name {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.book-stats-book-title {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-stats-book-author {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-stats-cell--progress {
    width: 160px;
    display: flex;
    justify-content: center;
}

.book-stats-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.book-stats-bar-bg {
    width: 80px;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-app);
    overflow: hidden;
}

.book-stats-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.book-stats-pct {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    min-width: 36px;
}

.book-stats-cell--words {
    width: 100px;
    text-align: center;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    color: var(--text-secondary);
}

.book-stats-empty {
    padding: 24px 0;
    text-align: center;
    color: var(--text-muted);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
}

.book-stats-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    margin-top: 8px;
    border-top: 1px solid var(--border-color);
}

.book-stats-limit {
    display: flex;
    align-items: center;
    gap: 6px;
}

.book-stats-limit-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    color: var(--text-muted);
}

.book-stats-limit-btn {
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: none;
    color: var(--text-secondary);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.book-stats-limit-btn:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.book-stats-limit-btn--active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.book-stats-pager {
    display: flex;
    align-items: center;
    gap: 8px;
}

.book-stats-pager-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: none;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s;
}

.book-stats-pager-btn:hover:not(:disabled) {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.book-stats-pager-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.book-stats-pager-info {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    color: var(--text-muted);
    min-width: 40px;
    text-align: center;
}

@media (max-width: 600px) {
    .book-stats-table { padding: 16px; }
    .book-stats-th--progress, .book-stats-cell--progress { width: 120px; }
    .book-stats-th--words, .book-stats-cell--words { width: 60px; }
    .book-stats-bar-bg { width: 50px; }
}

/* ==========================================================================
   ACTIVITY CHART
   ========================================================================== */

.act-chart {
    display: flex;
    flex-direction: column;
}

.act-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 0 20px;
}

.act-chart-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.act-chart-title {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.act-chart-subtitle {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    color: var(--text-muted);
}

.act-chart-legend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    flex-wrap: wrap;
    gap: 8px;
}

.act-chart-legends {
    display: flex;
    align-items: center;
    gap: 20px;
}

.act-chart-leg {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    border: none;
    background: none;
    padding: 0;
    transition: opacity 0.2s;
    cursor: default;
}

.act-chart-leg--toggle {
    cursor: pointer;
}

.act-chart-leg-dot {
    width: 14px;
    height: 10px;
    border-radius: 2px;
}

.act-chart-leg--off {
    opacity: 0.5;
}

.act-chart-leg--off span:last-child {
    text-decoration: line-through;
}

.act-chart-periods {
    display: flex;
    align-items: center;
    gap: 1px;
    background: var(--bg-app);
    border-radius: 6px;
    padding: 2px 3px;
}

.act-chart-period {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 9px;
    border: none;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    color: var(--text-muted);
    transition: background 0.15s, color 0.15s;
}

.act-chart-period--active {
    background: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
}

.act-chart-hint {
    margin: 0 20px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--bg-app);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    line-height: 1.6;
}

.act-chart-body {
    padding: 0 4px;
}

.wdc-toggle {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    color: var(--brand-primary);
    font-weight: 500;
    transition: opacity 0.15s;
}

.wdc-toggle:hover {
    opacity: 0.7;
}

.wdc-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    color: var(--text-muted);
    font-size: 13px;
}

/* ==========================================================================
   ONBOARDING (Driver.js overrides)
   Специфичность повышена удвоением класса вместо !important.
   Все цвета — через CSS-переменные проекта.
   ========================================================================== */

/* --- Контейнер попапа --- */

.driver-popover.driver-popover {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.09), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 20px 24px 16px;
    max-width: 340px;
}

/* --- Заголовок и описание --- */

.driver-popover.driver-popover .driver-popover-title {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.driver-popover.driver-popover .driver-popover-description {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* --- Кнопка закрытия (крестик) --- */

.driver-popover.driver-popover .driver-popover-close-btn {
    color: var(--text-muted);
    font-size: 16px;
    opacity: 0.5;
}

.driver-popover.driver-popover .driver-popover-close-btn:hover {
    opacity: 1;
}

/* --- Футер: прогресс и кнопки --- */

.driver-popover.driver-popover .driver-popover-footer {
    margin-top: 16px;
    padding-top: 8px;
}

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

.driver-popover.driver-popover .driver-popover-footer button {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    border-radius: 10px;
    height: 36px;
    padding: 0 20px;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    /* Driver.js по дефолту ставит text-shadow:1px 1px 0 #fff — невидимо на светлом
       prev-btn, но создаёт двойной контур на цветном next-btn (белый текст +
       сдвинутая белая тень = blurred effect). */
    text-shadow: none;
}

.driver-popover.driver-popover .driver-popover-prev-btn {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0 16px;
}

.driver-popover.driver-popover .driver-popover-prev-btn:hover {
    background: var(--bg-hover);
}

.driver-popover.driver-popover .driver-popover-next-btn {
    background: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    color: #fff;
}

.driver-popover.driver-popover .driver-popover-next-btn:hover {
    background: var(--brand-primary-dark);
}

/* Кнопка «Готово» (последний шаг) — стиль как у «Далее» */
.driver-popover.driver-popover .driver-popover-footer .driver-popover-close-btn {
    background: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
    color: #fff;
    font-size: 14px;
    width: auto;
    height: 36px;
    border-radius: 10px;
    position: static;
    padding: 0 20px;
}

.driver-popover.driver-popover .driver-popover-footer .driver-popover-close-btn::after {
    content: none;
}

.driver-popover.driver-popover .driver-popover-footer .driver-popover-close-btn:hover {
    background: var(--brand-primary-dark);
}

/* --- Стрелка --- */
/* Стрелка — CSS-треугольник через border. Driver.js делает 3 стороны transparent,
   оставляя одну цветную. Переопределяем только видимую сторону для каждого направления. */

.driver-popover.driver-popover .driver-popover-arrow-side-left  { border-left-color: var(--bg-card); }
.driver-popover.driver-popover .driver-popover-arrow-side-right { border-right-color: var(--bg-card); }
.driver-popover.driver-popover .driver-popover-arrow-side-top   { border-top-color: var(--bg-card); }
.driver-popover.driver-popover .driver-popover-arrow-side-bottom { border-bottom-color: var(--bg-card); }

/* ── Merge Accounts ──────────────────────────────────────────── */

.merge-title { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: var(--text-primary); }
.merge-desc { color: var(--text-secondary); margin: 0 0 24px; line-height: 1.5; max-width: 560px; }

.merge-section { margin-bottom: 28px; }
.merge-section-title { font-size: 15px; font-weight: 600; margin: 0 0 12px; color: var(--text-primary); }

.merge-form { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.merge-input {
    padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-color);
    background: var(--bg-input); color: var(--text-primary); font-size: 14px;
}
.merge-input:focus { border-color: var(--border-focus); outline: none; }

.merge-error { color: var(--color-error); margin-top: 12px; font-size: 14px; }

/* --- Account cards (choose step) --- */

.merge-accounts { display: flex; gap: 16px; align-items: stretch; margin-bottom: 8px; }

.merge-account-card {
    flex: 1; min-width: 220px; max-width: 300px;
    padding: 24px; border-radius: 16px;
    background: var(--bg-card); border: 2px solid var(--border-color);
    display: flex; flex-direction: column; gap: 6px;
    cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    position: relative; text-align: left;
    font: inherit; color: inherit;
}
.merge-account-card:hover {
    border-color: var(--border-interactive);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.merge-account-card--selected {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 99,102,241), 0.15), 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.merge-account-badge {
    position: absolute; top: -10px; right: 16px;
    background: var(--brand-primary); color: #fff;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 3px 10px; border-radius: 6px;
}

.merge-account-email { font-weight: 600; font-size: 16px; color: var(--text-primary); word-break: break-all; }
.merge-account-tag { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }

.merge-account-stats {
    display: flex; gap: 12px; margin: 8px 0 4px;
}
.merge-stat { display: flex; flex-direction: column; align-items: center; }
.merge-stat-value { font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.merge-stat-label { font-size: 12px; color: var(--text-muted); }

.merge-account-total {
    font-size: 13px; color: var(--text-secondary);
    padding-top: 8px; border-top: 1px solid var(--border-color); margin-top: 4px;
}

.merge-accounts-divider {
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: var(--text-muted);
    padding: 0 4px; flex-shrink: 0;
}

/* --- Action button (appears after selection) --- */

.merge-action { text-align: center; margin-top: 16px; }
.merge-action-hint { color: var(--text-muted); font-size: 13px; margin: 0 0 12px; }
.merge-action-btn { font-size: 15px; padding: 12px 32px; }

.merge-fade-enter-active { transition: opacity 0.3s, transform 0.3s; }
.merge-fade-enter-from { opacity: 0; transform: translateY(8px); }

/* --- Merging progress --- */

.merge-progress {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 64px 0; text-align: center;
}
.merge-progress-spinner {
    width: 48px; height: 48px; border-radius: 50%;
    border: 4px solid var(--border-color);
    border-top-color: var(--brand-primary);
    animation: merge-spin 0.8s linear infinite;
    margin-bottom: 24px;
}
@keyframes merge-spin { to { transform: rotate(360deg); } }

.merge-progress-title { font-size: 18px; font-weight: 600; color: var(--text-primary); margin: 0 0 8px; }
.merge-progress-text { color: var(--text-secondary); max-width: 380px; line-height: 1.5; margin: 0; }

/* --- Success --- */

.merge-success { text-align: center; padding: 48px 0; }
.merge-success-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--color-success); color: #fff;
    font-size: 28px; font-weight: 700; line-height: 56px;
    margin: 0 auto 16px; display: block;
}
.merge-success-title { font-size: 20px; font-weight: 600; color: var(--text-primary); margin: 0 0 4px; }
.merge-success-subtitle { color: var(--text-secondary); margin: 0 0 24px; }

.merge-transferred { margin-bottom: 24px; }
.merge-transferred-title { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
.merge-transferred-grid { display: flex; gap: 24px; justify-content: center; }
.merge-transferred-item { display: flex; flex-direction: column; align-items: center; }
.merge-transferred-value { font-size: 28px; font-weight: 700; color: var(--brand-primary); line-height: 1.2; }
.merge-transferred-label { font-size: 13px; color: var(--text-secondary); }
.merge-transferred-empty { color: var(--text-muted); margin-bottom: 24px; }

/* --- Google button --- */

.btn-google {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: #fff; color: #333; border: 1px solid #dadce0; border-radius: 8px;
    padding: 10px 20px; font-size: 14px; cursor: pointer; font-weight: 500;
}
.btn-google:hover { background: #f8f9fa; }
.btn-google-icon { color: #4285F4; font-weight: 700; font-size: 18px; }

/* --- Responsive --- */
@media (max-width: 560px) {
    .merge-accounts { flex-direction: column; }
    .merge-account-card { max-width: 100%; }
    .merge-accounts-divider { padding: 4px 0; }
}

/* ==========================================================================
   WELCOME SCREEN — точка входа мобильного приложения (Android, далее iOS).
   Не используется на web (dialekt.rs остаётся на лендинге).
   ========================================================================== */

.welcome {
    min-height: 100vh;
    min-height: 100dvh; /* учёт мобильной адресной строки */
    display: flex;
    flex-direction: column;
    padding: calc(48px + var(--safe-top)) 24px calc(24px + var(--safe-bottom));
    background: var(--bg-app);
    color: var(--text-primary);
}

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

.welcome__logo {
    width: 88px;
    height: 88px;
    /* Внутренние пути BRAND_LOGO_SVG используют currentColor — на welcome
       это тёмный текст-цвет на светлом фоне. */
    color: var(--text-primary);
}

.welcome__name {
    font-family: var(--font-display, 'Plus Jakarta Sans', system-ui, sans-serif);
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.welcome__tagline {
    font-size: 16px;
    color: var(--text-secondary);
    max-width: 320px;
    line-height: 1.4;
}

.welcome__spacer {
    flex: 1;
    min-height: 32px;
}

.welcome__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* Базовая стилизация кнопок welcome — общий размер/радиус для consistency. */
.welcome__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    border-radius: 12px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
}
.welcome__btn:active { transform: scale(0.98); }
.welcome__btn:disabled { opacity: 0.6; cursor: default; }

/* Google: белый фон + цветной G-логотип, по бренд-гайдам Google. */
.welcome__btn--google {
    background: #FFFFFF;
    color: #1F1F1F;
    border: 1px solid var(--border-interactive);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.welcome__btn--google:hover:not(:disabled) {
    background: #F8F9FA;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.welcome__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Email — primary brand-цвет (как btn-blue в системе). */
.welcome__btn--email {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.welcome__btn--email:hover {
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.welcome__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 13px;
    margin: 4px 0;
}
.welcome__divider::before,
.welcome__divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.welcome__login {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 8px;
}
.welcome__login a {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 600;
}
.welcome__login a:hover { text-decoration: underline; }

.welcome__error {
    text-align: center;
    font-size: 13px;
    color: var(--color-error, #E53E3E);
    margin: 0;
}

/* === Achievement Toast === */

.achievement-toast-stack {
    position: fixed;
    bottom: calc(var(--safe-bottom, 0px) + 16px);
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.achievement-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--bg-elevated, #fff);
    border-left: 4px solid var(--tier-color, #3B82F6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    max-width: 360px;
    cursor: pointer;
    animation: achievement-toast-in 250ms ease-out;
}

@keyframes achievement-toast-in {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

.achievement-toast__icon {
    font-size: 32px;
    color: var(--tier-color, #3B82F6);
    flex-shrink: 0;
}

.achievement-toast__body { flex: 1; min-width: 0; }
.achievement-toast__title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary, #1A1A1A);
}
.achievement-toast__sub {
    font-size: 13px;
    color: var(--text-secondary, #666);
    margin-top: 2px;
}

/* Цветовые токены тиров — единый источник правды для тостов и плиток */
.achievement-toast--bronze   { --tier-color: #B08D57; }
.achievement-toast--gold     { --tier-color: #EAB308; }
.achievement-toast--sapphire { --tier-color: #0F52BA; }
.achievement-toast--emerald  { --tier-color: #0D9F5E; }
.achievement-toast--ruby     { --tier-color: #E0115F; }
.achievement-toast--amethyst { --tier-color: #9333EA; }
.achievement-toast--diamond  { --tier-color: #38BDF8; }

@media (max-width: 480px) {
    .achievement-toast-stack { left: 16px; right: 16px; }
    .achievement-toast { min-width: 0; max-width: none; }
}

/* === Achievements page === */

.achievements-header {
    margin-bottom: 24px;
}
.achievements-header__title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
}
.achievements-header__stats {
    color: var(--text-secondary, #666);
    font-size: 14px;
}
.achievements-header__stats strong {
    color: var(--text-primary, #1A1A1A);
    font-weight: 700;
}
.achievements-loading,
.achievements-error,
.achievements-empty {
    padding: 32px;
    text-align: center;
    color: var(--text-secondary, #666);
}
.achievements-error__detail {
    font-size: 13px;
    margin: 8px 0 16px;
    color: var(--color-error, #E53E3E);
}

.achievements-filters {
    margin-bottom: 16px;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
@media (max-width: 600px) {
    .achievements-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* === AchievementTile === */

.achievement-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    aspect-ratio: 1 / 1;
    padding: 16px 12px;
    border-radius: 12px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--tier-color, #E2E8F0);
    cursor: pointer;
    text-align: center;
    font-family: inherit;
    color: inherit;
    transition: opacity 120ms ease;
    animation: achievement-tile-pulse 3.5s ease-in-out infinite;
}
@keyframes achievement-tile-pulse {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50%      { box-shadow: 0 0 14px -2px color-mix(in srgb, var(--tier-color, transparent) 50%, transparent); }
}

.achievement-tile--locked {
    opacity: 0.45;
    border-color: var(--border-color, #E2E8F0);
    animation: none;
}
.achievement-tile--locked:hover {
    opacity: 0.75;
}

.achievement-tile__tier-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--tier-color, #94A3B8);
    line-height: 1;
    letter-spacing: 0.02em;
}

.achievement-tile__icon {
    font-size: 48px;
    line-height: 1;
    color: var(--tier-color, #C7CDD3);
}
.achievement-tile__title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary, #1A1A1A);
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.achievement-tile__tiers {
    display: flex;
    gap: 4px;
}
.tier-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--dot-color, #E2E8F0);
}
/* Палитра rarity через драгоценности (без silver — конфликт с locked-state). */
.tier-dot--locked    { --dot-color: #E2E8F0; }
.tier-dot--bronze    { --dot-color: #B08D57; }
.tier-dot--gold      { --dot-color: #EAB308; }
.tier-dot--sapphire  { --dot-color: #0F52BA; }
.tier-dot--emerald   { --dot-color: #0D9F5E; }
.tier-dot--ruby      { --dot-color: #E0115F; }
.tier-dot--amethyst  { --dot-color: #9333EA; }
.tier-dot--diamond   { --dot-color: #38BDF8; }

.achievement-tile--locked    { --tier-color: #C7CDD3; }
.achievement-tile--bronze    { --tier-color: #B08D57; }
.achievement-tile--gold      { --tier-color: #EAB308; }
.achievement-tile--sapphire  { --tier-color: #0F52BA; }
.achievement-tile--emerald   { --tier-color: #0D9F5E; }
.achievement-tile--ruby      { --tier-color: #E0115F; }
.achievement-tile--amethyst  { --tier-color: #9333EA; }
.achievement-tile--diamond   { --tier-color: #38BDF8; }

/* === AchievementDetailModal === */

.achievement-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
}
.achievement-modal {
    position: relative;
    background: var(--popup-bg, #fff);
    border-radius: 16px 16px 0 0;
    padding: 24px 20px;
    padding-bottom: max(24px, var(--safe-bottom));
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: popup-slide-up 0.2s ease-out;
    border: 1px solid var(--border-color, #E2E8F0);
    border-bottom: none;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    border-top: 4px solid var(--tier-color, #C7CDD3);
}
@media (min-width: 768px) {
    .achievement-modal-overlay { align-items: center; }
    .achievement-modal {
        border-radius: 16px;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 24px;
    }
}

.achievement-modal--locked    { --tier-color: #C7CDD3; }
.achievement-modal--bronze    { --tier-color: #B08D57; }
.achievement-modal--gold      { --tier-color: #EAB308; }
.achievement-modal--sapphire  { --tier-color: #0F52BA; }
.achievement-modal--emerald   { --tier-color: #0D9F5E; }
.achievement-modal--ruby      { --tier-color: #E0115F; }
.achievement-modal--amethyst  { --tier-color: #9333EA; }
.achievement-modal--diamond   { --tier-color: #38BDF8; }

.achievement-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--text-secondary, #666);
    cursor: pointer;
    padding: 4px 8px;
}
.achievement-modal__close:hover { color: var(--text-primary, #1A1A1A); }

.achievement-modal__head {
    display: flex;
    gap: 16px;
    align-items: center;
}
.achievement-modal__icon {
    font-size: 64px;
    line-height: 1;
    color: var(--tier-color, #C7CDD3);
    flex-shrink: 0;
}
.achievement-modal__head-text { flex: 1; min-width: 0; }
.achievement-modal__title {
    font-weight: 700;
    font-size: 20px;
    color: var(--text-primary, #1A1A1A);
    margin-bottom: 4px;
}
.achievement-modal__desc {
    font-size: 14px;
    color: var(--text-secondary, #666);
    line-height: 1.4;
}

.achievement-modal__progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.achievement-modal__progress-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1A1A1A);
}
.achievement-modal__progress-pct {
    color: var(--tier-color, #C7CDD3);
}
.achievement-modal__progress-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--bg-input, #F1F5F9);
    overflow: hidden;
}
.achievement-modal__progress-fill {
    height: 100%;
    background: var(--tier-color, #C7CDD3);
    transition: width 200ms ease;
}

.achievement-modal__tiers {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--border-color, #E2E8F0);
}
.achievement-modal__tier-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    font-size: 14px;
}
.achievement-modal__tier-row .tier-dot {
    width: 12px;
    height: 12px;
}
.achievement-modal__tier-row--locked {
    opacity: 0.5;
}
.achievement-modal__tier-name {
    color: var(--text-primary, #1A1A1A);
    font-weight: 500;
}
.achievement-modal__tier-threshold {
    color: var(--text-secondary, #666);
    font-variant-numeric: tabular-nums;
}
.achievement-modal__tier-date {
    color: var(--text-secondary, #666);
    font-size: 13px;
    text-align: right;
}

.achievement-modal__actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* === Achievements: home widget + settings preview === */

.home-achievements-widget {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-elevated, #fff);
    border: 1px solid var(--border-color, #E2E8F0);
    text-decoration: none;
    color: var(--text-primary, #1A1A1A);
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.home-achievements-widget:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.home-achievements-widget__icon {
    font-size: 28px;
    color: #F59E0B;
    flex-shrink: 0;
}
.home-achievements-widget__body { flex: 1; min-width: 0; }
.home-achievements-widget__title {
    font-weight: 600;
    font-size: 14px;
}
.home-achievements-widget__sub {
    font-size: 12px;
    color: var(--text-secondary, #666);
    margin-top: 2px;
}
.home-achievements-widget__arrow {
    color: var(--text-secondary, #666);
    font-size: 18px;
}

.s-achievements-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.s-achievements-preview__head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.s-achievements-preview__icon {
    font-size: 22px;
    color: #F59E0B;
}
.s-achievements-preview__stats {
    font-size: 14px;
    color: var(--text-secondary, #666);
    margin-bottom: 8px;
}
.s-achievements-preview__stats strong {
    color: var(--text-primary, #1A1A1A);
    font-weight: 700;
}

/* ===== Application 404 page (см. docs/tasks/application-errors.md) ====== */
.not-found-page {
    /* width:100% / flex:1 нужны потому что body и #app — глобальные flex
       row-контейнеры. Без явной ширины .not-found-page сжимается до
       intrinsic width содержимого и уходит к левому краю — собственный
       justify-content внутри её бесполезен. */
    width: 100%;
    flex: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #f9fafb;
}
.not-found__card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    padding: 40px;
    max-width: 440px;
    width: 100%;
}
.not-found__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}
.not-found__logo {
    display: block;
    height: 32px;
    width: auto;
    /* BRAND_LOGO_SVG использует currentColor для тёмных paths — цвет берётся
       отсюда через color, синие brand-paths остаются синими всегда. */
    color: var(--text-primary, #111827);
}
.not-found__name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary, #111827);
    line-height: 1;
}
.not-found__title {
    margin: 0 0 12px 0;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary, #111827);
}
.not-found__text {
    margin: 0 0 28px 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-secondary, #4b5563);
}
.not-found__home {
    display: inline-block;
    color: var(--brand-primary, #3b82f6);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: border-color 0.15s ease;
}
.not-found__home:hover,
.not-found__home:focus {
    border-bottom-color: var(--brand-primary, #3b82f6);
    outline: none;
}
@media (max-width: 480px) {
    .not-found__card {
        padding: 32px 24px;
        border-radius: 12px;
    }
    .not-found__title { font-size: 22px; }
}

/* ─── Лента новостей ────────────────────────────────────────────────────────── */


.feed-page-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.feed-page-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 2px 0 0;
}

/* Сетка карточек — 3 колонки */
.feed-grid {
    columns: 3;
    column-gap: 16px;
}

.feed-card {
    break-inside: avoid;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.feed-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-1px);
}

.feed-card--completed {
    opacity: 0.6;
}

.feed-card--completed .feed-card__title {
    text-decoration: line-through;
    text-decoration-color: var(--text-muted);
}

.feed-card__img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.feed-card__body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.feed-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.feed-card__category {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.12);
    color: var(--color-learning);
    text-transform: capitalize;
}

.feed-card__time {
    font-size: 11px;
    color: var(--text-muted);
}

.feed-card__title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feed-card__difficulty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-success-dark);
    background: rgba(52, 211, 153, 0.12);
    padding: 2px 8px;
    border-radius: 20px;
    width: fit-content;
}

.feed-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    gap: 8px;
}

.feed-card__source {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.feed-card__import-btn {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-learning);
    background: rgba(59, 130, 246, 0.1);
    border: none;
    border-radius: 20px;
    padding: 4px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.feed-card__import-btn:hover {
    background: rgba(59, 130, 246, 0.2);
}

.feed-card__imported-mark {
    font-size: 12px;
    color: var(--color-success-dark);
    font-weight: 600;
}

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

.feed-card__info-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--bg-hover);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    font-family: serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.feed-card__info-btn:hover {
    background: var(--border-color);
    color: var(--text-primary);
}


.feed-sidebar-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
}

.feed-sidebar-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 10px;
}

.feed-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.feed-chip {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.feed-chip:hover,
.feed-chip--active {
    background: var(--color-learning);
    color: #fff;
    border-color: var(--color-learning);
}

.feed-source-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.feed-source-item {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.feed-source-item::before {
    content: '•';
    color: var(--color-learning);
    font-size: 16px;
    line-height: 1;
}

.feed-source-item--active {
    color: var(--text-primary);
    font-weight: 600;
}

.feed-source-item--active::before {
    color: var(--color-mastered);
}

/* filterBar: чипы стран + кнопка-триггер шита, на всех вьюпортах.
   Десктоп/планшет: «Страны:» + чипы + кнопка справа от чипов.
   Мобилка: чипы во всю ширину (скролл) + кнопка-оверлей справа. */
.feed-mobile-filterbar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}
.feed-filterbar-label {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--text-secondary);
}
.feed-mobile-countries {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.feed-mobile-country {
    flex: 0 0 auto;
    white-space: nowrap;
}
.feed-mobile-filters-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
}

@media (max-width: 767px) {
    .feed-filterbar-label {
        display: none;
    }
    .feed-mobile-countries {
        flex: 1;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .feed-mobile-countries::-webkit-scrollbar {
        display: none;
    }
    .feed-mobile-filters-btn {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* ResponsiveSheet — обёртка модалок: мобилка = снизу + ручка + свайп, десктоп = центр/снизу.
   Панель оформляет консьюмер (panelClass); тут только фон, выравнивание, ручка, drag-переход. */
.rsheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
}
.rsheet-backdrop--center {
    align-items: center;
    justify-content: center;
}
.rsheet-backdrop--bottom {
    align-items: flex-end;
    justify-content: center;
}
.rsheet-panel {
    transition: transform 0.22s ease;
}
.rsheet-panel--dragging {
    transition: none;
}
.rsheet-handle {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    align-items: center;
    height: 24px;
    touch-action: none;
    cursor: grab;
}
.rsheet-handle::before {
    content: '';
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-color);
}

/* Шит фильтров: панель внутри ResponsiveSheet (backdrop/ручка/свайп — там).
   Десктоп — 420px по центру; мобилка — на всю ширину снизу (см. @media ниже). */
.feed-filter-sheet {
    width: 420px;
    max-width: calc(100vw - 32px);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-radius: 20px;
}

@media (max-width: 767px) {
    .feed-filter-sheet {
        width: 100%;
        max-width: none;
        border-radius: 20px 20px 0 0;
    }
}

.feed-filter-sheet__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 20px 16px;
}

.feed-filter-sheet__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.feed-filter-sheet__reset {
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-learning);
    cursor: pointer;
}

.feed-filter-sheet__body {
    flex: 1;
    overflow-y: auto;
}

.feed-filter-sheet__section {
    padding: 16px 20px;
    border-top: 1px solid var(--border-color);
}

.feed-filter-sheet__section-title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.feed-filter-sheet__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feed-filter-sheet__sources {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.feed-filter-sheet__apply {
    margin: 16px 20px calc(16px + var(--safe-bottom, 0px));
    height: 48px;
    border: none;
    border-radius: 12px;
    background: var(--color-learning);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

/* Пустое состояние */
.feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 64px 24px;
    color: var(--text-muted);
    font-size: 14px;
}

.feed-empty-icon {
    font-size: 40px;
}

/* Кнопка «Загрузить ещё» */
.feed-load-more {
    display: block;
    width: 100%;
    padding: 12px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s;
}

.feed-load-more:hover {
    background: var(--bg-hover);
    color: var(--color-learning);
}

@media (max-width: 1100px) {
    .feed-grid { columns: 2; }
}

@media (max-width: 680px) {
    .feed-grid { columns: 1; }
}

/* ─── Article Reader ─────────────────────────────────────────── */


.article-reader-status {
    padding: 40px 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: 15px;
}
.article-reader-status--error { color: var(--color-error); }

.article-reader {
    max-width: 720px;
    background: var(--bg-card);
    border-radius: 16px;
    padding: 28px 32px 36px;
}

.article-reader__header {
    margin-bottom: 24px;
}

.article-reader__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.article-reader__source {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.article-reader__category {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-input);
    border-radius: 6px;
    padding: 2px 8px;
}

.article-reader__date {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
}

.article-reader__title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    margin: 0 0 16px;
}

.article-reader__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.article-reader__orig-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--brand-primary);
    text-decoration: none;
    border: 1px solid var(--brand-primary);
    border-radius: 8px;
    padding: 5px 12px;
    transition: background 0.15s, color 0.15s;
}
.article-reader__orig-link:hover {
    background: var(--brand-primary);
    color: #fff;
}

.article-reader__complete-btn {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-input);
    border: none;
    border-radius: 8px;
    padding: 5px 12px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.article-reader__complete-btn:hover:not(:disabled) {
    background: var(--color-success);
    color: #fff;
}
.article-reader__complete-btn:disabled { opacity: 0.6; cursor: default; }

.article-reader__completed-mark {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-success);
}

.article-reader__body {
    padding-top: 20px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-primary);
}

.article-reader__para {
    margin: 0 0 1.1em;
}
.article-reader__para:last-child { margin-bottom: 0; }

.article-reader__word {
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.1s;
}
.article-reader__word:hover { background: var(--bg-hover); }

.article-reader__no-body {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.article-reader__no-body-text {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
}

.article-reader__import-btn {
    align-self: flex-start;
}

@media (max-width: 767px) {
    .article-reader {
        border-radius: 12px;
        padding: 20px 18px 28px;
    }
    .article-reader__title { font-size: 19px; }
    .article-reader__body { font-size: 16px; }
    .article-reader__date { margin-left: 0; }
}

/* ==========================================================================
   TRAINING SCREEN v4
   ========================================================================== */

/* Заголовок секции с иконкой */
.training-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.training-section-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.training-section-icon {
    display: flex;
    align-items: center;
    color: var(--text-muted);
}

/* Строка карточек (горизонтально на планшете+, вертикально на мобиле) */
.training-cards-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 768px) {
    .training-cards-row {
        flex-direction: row;
        gap: 16px;
    }
}

/* Карточка режима тренировки */
.training-mode-card {
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;        /* оверлей с описанием обрезается по rounded-corners */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font-family: 'Inter', system-ui, sans-serif;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

/* Hover на карточку — лёгкий синий стиль; подавляется когда активен оверлей */
@media (hover: hover) {
    .training-mode-card:hover:not(:has(.training-mode-card-info:hover)) {
        border-color: var(--brand-primary);
        box-shadow: 0 4px 16px rgba(59,130,246,0.12), 0 1px 3px rgba(0,0,0,0.05);
        background: #F8FBFF;
    }

    .training-mode-card:hover:not(:has(.training-mode-card-info:hover)) .training-mode-card-title {
        color: var(--brand-primary);
    }

    .training-mode-card:hover:not(:has(.training-mode-card-info:hover)) .training-mode-card-icon-wrap {
        background: rgba(59, 130, 246, 0.15);
    }
}

/* Оверлей с полным описанием.
   clip-path: inset(0 0 100% 0) — полностью скрыт (обрезан снизу).
   clip-path: inset(0 0 0% 0)   — полностью раскрыт.
   Эффект: плашка «разворачивается» сверху вниз. */
.training-mode-card-desc--full {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 20px;
    background: #1E40AF;
    font-size: 13px;
    line-height: 1.5;
    pointer-events: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.35s ease;
}

/* Двойной класс — специфичность 0-2-0 побеждает .training-mode-card-desc (0-1-0),
   который приходит позже в файле и иначе перебивает цвет. */
.training-mode-card-desc.training-mode-card-desc--full {
    color: #BFDBFE;
}

@media (hover: hover) {
    /* Белый цвет ℹ при наведении */
    .training-mode-card:has(.training-mode-card-info:hover) .training-mode-card-info {
        color: #FFFFFF;
    }

    /* Плашка спускается сверху вниз через 0.5s */
    .training-mode-card:has(.training-mode-card-info:hover) .training-mode-card-desc--full {
        clip-path: inset(0 0 0% 0);
        transition-delay: 0.5s;
    }
}

.training-mode-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* CSS-переменные задаются inline из Vue, переопределяются hover-правилом */
.training-mode-card-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--tmc-icon-bg);
    color: var(--tmc-icon-color);
    transition: background 0.2s, color 0.2s;
}

.training-mode-card-info {
    color: var(--text-muted);
    transition: color 0.2s;
    cursor: help;
}

.training-mode-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    transition: color 0.2s;
}

.training-mode-card-desc {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    transition: color 0.2s;
    line-height: 1.4;
}

/* Строка достижений в сайдбаре */
.training-achievements-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.training-achievements-row:hover {
    background: var(--bg-hover);
}

.training-achievements-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #FFFBEB;
    color: #F59E0B;
    flex-shrink: 0;
}

.training-achievements-body {
    flex: 1;
    min-width: 0;
}

.training-achievements-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.training-achievements-sub {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.training-achievements-arrow {
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

/* ==========================================================================
   HOME SCREEN v4
   ========================================================================== */

/* --- StreakCard --- */
.streak-card {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: var(--radius-card, 12px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.streak-card-top { display: flex; align-items: center; gap: 12px; }
.streak-card-flame-wrap {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 12px;
    background: #FEF3C7; flex-shrink: 0; color: #F59E0B;
}
.streak-card-day { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 20px; font-weight: 800; color: var(--text-primary); }
.streak-card-sub { font-size: 12px; color: #D97706; margin-top: 2px; }
.streak-card-stats { display: flex; justify-content: space-between; }
.streak-card-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.streak-card-stat-value { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 18px; font-weight: 700; color: #3B82F6; }
.streak-card-stat-label { font-size: 11px; color: #A0AEC0; }

/* --- TrainingCTACard --- */
.training-cta-card {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-card, 12px); padding: 20px;
    display: flex; flex-direction: column; gap: 12px;
    cursor: pointer; transition: box-shadow 0.15s; flex: 1; min-width: 0;
}
.training-cta-card:hover { box-shadow: 0 4px 16px rgba(59,130,246,0.12); }
.training-cta-badge { display: flex; align-items: center; gap: 6px; color: #A0AEC0; font-size: 11px; font-weight: 600; }
.training-cta-title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 18px; font-weight: 700; color: var(--text-primary); }
.training-cta-stats { display: flex; gap: 20px; }
.training-cta-stat { display: flex; flex-direction: column; gap: 2px; }
.training-cta-stat-value { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 18px; font-weight: 700; color: #3B82F6; }
.training-cta-stat-label { font-size: 11px; color: #A0AEC0; }
.training-cta-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 0; border-radius: 10px; border: none;
    background: linear-gradient(180deg, #3B82F6 0%, #1D4ED8 100%);
    color: #FFFFFF; font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px; font-weight: 600; cursor: pointer; width: 100%;
}

/* --- GoalBlock --- */
.goal-block {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-card, 12px); padding: 16px 20px;
    display: flex; flex-direction: column; gap: 12px;
}
.goal-block-header { display: flex; align-items: center; gap: 6px; color: #94A3B8; font-size: 11px; font-weight: 600; }
.goal-block-header-icon { display: flex; align-items: center; }
.goal-block-tasks { display: flex; flex-direction: column; gap: 8px; }
.goal-task {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 10px; border: 1px solid;
    font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600;
    cursor: pointer; text-align: left; width: 100%;
}
.goal-task--blue  { background: #EFF6FF; border-color: #BFDBFE; color: #1E40AF; }
.goal-task--green { background: #F0FDF4; border-color: #BBF7D0; color: #15803D; }
.goal-task-divider { font-size: 11px; font-weight: 700; color: #CBD5E1; text-align: center; }

/* --- WordSetsPanel --- */
.word-sets-panel {
    background: var(--bg-card); border: 1px solid var(--border-color);
    border-radius: var(--radius-card, 12px); padding: 20px 24px;
    display: flex; flex-direction: column; gap: 16px;
}
.word-sets-header { display: flex; align-items: center; justify-content: space-between; }
.word-sets-title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 18px; font-weight: 700; color: var(--text-primary); }
.word-sets-scroll { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.word-sets-scroll::-webkit-scrollbar { display: none; }
.word-set-card {
    flex-shrink: 0; width: 180px; background: var(--bg-card);
    border: 1px solid var(--border-color); border-radius: 14px; padding: 16px;
    display: flex; flex-direction: column; gap: 8px;
    cursor: pointer; text-align: left; font-family: 'Inter', system-ui, sans-serif;
    transition: box-shadow 0.15s;
}
.word-set-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.word-set-cover {
    width: 100%; height: 90px; border-radius: 8px; overflow: hidden;
    background: var(--bg-input); display: flex; align-items: center; justify-content: center; color: var(--text-muted);
}
.word-set-cover-img { width: 100%; height: 100%; object-fit: cover; }
.word-set-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.word-set-count { font-size: 12px; color: #A0AEC0; }
.word-set-btn {
    background: #3B82F6; color: #FFFFFF; border: none; border-radius: 8px;
    padding: 8px 0; font-size: 13px; font-weight: 600; cursor: pointer; width: 100%;
    font-family: 'Inter', system-ui, sans-serif;
}

/* --- Превью ленты --- */
.home-feed-section { display: flex; flex-direction: column; gap: 12px; }
.home-feed-header { display: flex; align-items: center; justify-content: space-between; }
.home-feed-title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.home-feed-all { background: none; border: none; color: var(--brand-primary); font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', system-ui, sans-serif; }
.home-feed-grid { display: flex; flex-direction: column; gap: 12px; }
.home-news-card {
    display: flex; gap: 12px; background: var(--bg-card);
    border: 1px solid var(--border-color); border-radius: 12px;
    overflow: hidden; cursor: pointer; transition: box-shadow 0.15s;
}
.home-news-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.home-news-card-img { width: 80px; height: 72px; object-fit: cover; flex-shrink: 0; }
.home-news-card-body { padding: 12px 12px 12px 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home-news-card-source { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.home-news-card-title { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* --- ProgressCard --- */
.progress-card {
    background: var(--bg-body, var(--bg-app)); border: 1px solid var(--border-color);
    border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
.progress-card-title { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 18px; font-weight: 700; color: var(--text-primary); }
.progress-card-bar-wrap { display: flex; flex-direction: column; gap: 8px; }
.progress-card-bar-labels { display: flex; justify-content: space-between; }
.progress-card-bar-label { font-size: 13px; color: var(--text-secondary); }
.progress-card-bar-label--value { font-weight: 600; color: var(--text-primary); }
.progress-card-bar { height: 8px; border-radius: 4px; background: var(--bg-input); display: flex; overflow: hidden; }
.progress-card-bar-fill { height: 100%; transition: width 0.5s ease; }
.progress-card-bar-fill--mastered { background: #22C55E; border-radius: 4px 0 0 4px; }
.progress-card-bar-fill--due      { background: #F59E0B; }
.progress-card-bar-fill--learning { background: #8B5CF6; }
.progress-card-legend { display: flex; justify-content: space-between; }
.progress-card-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.progress-card-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.progress-card-dot--mastered { background: #22C55E; }
.progress-card-dot--due      { background: #F59E0B; }
.progress-card-dot--learning { background: #8B5CF6; }
.progress-card-stats { display: flex; flex-direction: column; gap: 12px; }
.progress-card-stat-row { display: flex; justify-content: space-between; align-items: center; }
.progress-card-stat-label { font-size: 13px; color: var(--text-secondary); }
.progress-card-stat-value { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.progress-card-stat-value--orange { color: #F59E0B; }
.progress-card-stat-value--green  { color: #22C55E; }
.progress-card-stat-value--purple { color: #8B5CF6; }

/* --- HomeScreen layout --- */
.home-top-row { display: flex; flex-direction: column; gap: 16px; }
.home-reading-card { flex: 1; min-width: 0; }
.home-aside-achievements { display: flex; flex-direction: column; gap: 8px; }
.home-aside-achievements-label { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.home-aside-achievement-row {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px;
    text-decoration: none; color: inherit; transition: background 0.15s;
}
.home-aside-achievement-row:hover { background: var(--bg-hover); }
.home-aside-achievement-icon {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px;
    background: #FFFBEB; color: #F59E0B; flex-shrink: 0;
}
.home-aside-achievement-body { flex: 1; min-width: 0; }
.home-aside-achievement-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.home-aside-achievement-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

@media (min-width: 768px) {
    .home-top-row { flex-direction: row; }
    .home-feed-grid { flex-direction: row; gap: 16px; }
    .home-news-card { flex-direction: column; flex: 1; min-width: 0; }
    .home-news-card-img { width: 100%; height: 120px; }
    .home-news-card-body { padding: 12px; }
}

/* ─── WORDSET CARD (Слова, Главная) ─── хрома по теме, акценты — по варианту */
.wordset-card { width: 180px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; }
.wordset-cover { position: relative; height: 90px; border-radius: 8px; overflow: hidden; background: var(--bg-app); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.wordset-cover-img { width: 100%; height: 100%; object-fit: cover; }
.wordset-cover-ph { color: var(--text-muted); opacity: 0.5; display: flex; }
.wordset-cover-ph svg { width: 28px; height: 28px; }
.wordset-badge { position: absolute; top: 6px; left: 6px; padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.wordset-badge--editorial { background: #3B82F620; color: #1D4ED8; }
.wordset-badge--foryou { background: #3B82F620; color: #1D4ED8; }
.wordset-badge--mine { background: #64748B20; color: #374151; }
/* Заголовок набора: максимум 2 строки с многоточием (line-clamp). min-height
   резервирует 2 строки даже под коротким текстом — кнопки «Открыть/Учить»
   выравниваются в один уровень по всем карточкам ряда. Полный текст — в title-атрибуте. */
.wordset-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--text-primary); cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.wordset-meta { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); }
.wordset-meta-icon { display: inline-flex; }
.wordset-meta-icon svg { width: 12px; height: 12px; }
.wordset-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border: none; border-radius: 8px; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.wordset-btn-icon { display: inline-flex; }
.wordset-btn-icon svg { width: 12px; height: 12px; }
.wordset-btn--editorial { background: #3B82F6; }
.wordset-btn--foryou { background: var(--brand-primary); }
.wordset-btn--mine { background: #64748B; }
.wordset-btn--learned { background: var(--bg-app); color: #16A34A; cursor: default; }
.wordset-btn:hover:not(:disabled) { filter: brightness(1.08); }

/* ─── WORDS SCREEN (/app/words): вкладки, статистика, секции наборов ─── */
.words-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 16px; }
.words-tab { padding: 8px 14px; border: none; background: none; color: var(--text-muted); font-size: 14px; font-weight: 500; cursor: pointer; border-radius: 6px 6px 0 0; font-family: inherit; }
.words-tab.active { color: var(--text-primary); font-weight: 600; background: var(--bg-card); }
/* Блоки статистики (макет Pencil): компактные белые карточки, прижаты влево —
   число над подписью. Ширина по содержимому (не растягиваются на всю строку);
   на узком экране переносятся. */
.words-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.words-stat { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 16px; }
.words-stat-val { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--text-primary); }
.words-stat-val--warn { color: #F59E0B; }
.words-stat-val--new { color: var(--brand-primary); }
.words-stat-label { font-size: 12px; color: var(--text-muted); }
.words-section { margin-bottom: 24px; }
.words-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; }
.words-section-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.words-section-controls { display: flex; align-items: center; gap: 8px; }
.words-create-btn { background: var(--brand-primary); color: #fff; border: none; border-radius: 8px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
/* «Все →» — текстовая ссылка на список группы (фильтр через GET). */
.words-all-link { background: none; border: none; color: var(--brand-primary); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; padding: 6px 4px; }
.words-all-link:hover { text-decoration: underline; }
/* Стрелки карусели — навигация для мыши (desktop). Размещены по бокам трека,
   поверх крайних карточек (паттерн Netflix/Spotify): на десктопе свайпать непривычно,
   стрелки дают явное управление. На тач (hover:none) скрыты — там свайп + peek. */
.words-track-wrap { position: relative; }
.words-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.words-arrow:hover { background: var(--bg-hover); color: var(--text-primary); }
.words-arrow svg { width: 16px; height: 16px; }
.words-arrow--prev { left: -6px; }
.words-arrow--next { right: -6px; }
@media (hover: none) { .words-arrow { display: none; } }
/* Трек карточек: горизонтальный ряд, полоса прокрутки скрыта (навигация — стрелками),
   нативный свайп на тач сохранён. min-width:0 — чтобы трек не растягивал родителя
   и реально переполнялся (иначе flex-карточки переносятся столбиком). */
.words-track { display: flex; flex-wrap: nowrap; gap: 16px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 4px; min-width: 0; scrollbar-width: none; -ms-overflow-style: none; }
.words-track::-webkit-scrollbar { display: none; }
/* Сетка наборов на полноэкранной странице-списке (карточки переносятся по строкам,
   в отличие от горизонтального трека карусели). */
.words-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.words-grid-empty { color: var(--text-muted); font-size: 14px; padding: 32px 0; text-align: center; }
.words-list-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.words-list-back { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; }
.words-list-back:hover { background: var(--bg-hover); color: var(--text-primary); }
.words-list-back svg { width: 16px; height: 16px; }
.words-list-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 700; color: var(--text-primary); }
.words-add-tile { flex-shrink: 0; width: 180px; min-height: 196px; border: 1px dashed var(--border-color); border-radius: 12px; background: var(--bg-app); color: var(--text-muted); font-size: 12px; cursor: pointer; font-family: inherit; }
.words-add-tile:hover { border-color: var(--text-muted); }
.words-search-card { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; width: 100%; text-align: left; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; cursor: pointer; font-family: inherit; }
.words-search-title { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.words-search-hint { font-size: 11px; color: var(--text-muted); }

/* ─── WORD TABLE — единый список словарных карточек (макет Pencil) ─── */
.wt { display: flex; flex-direction: column; }
.wt-toolbar { display: flex; align-items: center; gap: 8px; }
.wt-toolbar:empty { display: none; }

/* --- SearchField: единый аффорданс поиска (filled-gray, макет v4). Поиск намеренно
   отличается от полей форм — серая плашка с лупой. focus-within даёт рамку, чтобы
   поле не читалось как заблокированное. Используется в словаре и библиотеке. --- */
.search-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-interactive);
    border-radius: 10px;
    padding: 0 12px;
    height: 40px;
    transition: border-color 0.2s;
}
.search-field:focus-within { border-color: var(--brand-primary); }
.search-field--disabled { opacity: 0.4; pointer-events: none; }
.search-field-icon { color: var(--text-muted); flex-shrink: 0; }
.search-field-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font-size: 14px;
    color: var(--text-primary);
    font-family: inherit;
}
.search-field-input::placeholder { color: var(--text-muted); }
.search-field-clear {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
}
.search-field-clear:hover { color: var(--text-primary); }
.wt-empty { color: var(--text-muted); font-size: 14px; padding: 32px 0; text-align: center; }
/* Flex-раскладка (не grid): число колонок переменное — статус и действия опциональны,
   поэтому жёсткий grid-template разъезжается. Ширины фиксируются на самих ячейках,
   контекст тянется (flex:1). Заголовки и строки делят одни классы ширин. */
.wt-headers, .wt-row { display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.wt-headers { height: 36px; background: var(--bg-app); border-bottom: 1px solid var(--border-color); }
.wt-h { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.wt-row { min-height: 56px; border-bottom: 1px solid var(--border-color); cursor: pointer; }
.wt-row:hover { background: var(--bg-hover); }
.wt-cell { font-size: 13px; color: var(--text-secondary); }
/* Ширины колонок (общие для заголовка и строки) */
.wt-h-img, .wt-cell-img { width: 40px; flex-shrink: 0; }
.wt-h-status, .wt-cell-status { width: 72px; flex-shrink: 0; text-align: center; }
.wt-h-word, .wt-cell-word { width: 170px; flex-shrink: 0; }
.wt-h-translation, .wt-cell-translation { width: 160px; flex-shrink: 0; }
.wt-h-context, .wt-cell-context { flex: 1; min-width: 0; }
.wt-h-date, .wt-cell-date { width: 70px; flex-shrink: 0; text-align: right; justify-content: flex-end; }
.wt-h-actions, .wt-cell-actions { width: 64px; flex-shrink: 0; justify-content: flex-end; }
.wt-img { display: block; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--bg-app); }
.wt-img--empty { border: 1px solid var(--border-color); }
.wt-cell-word { display: flex; flex-direction: column; gap: 2px; }
.wt-word { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.wt-lemma { font-size: 11px; font-style: italic; color: var(--text-muted); }
.wt-cell-context { overflow: hidden; }
.wt-context { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: 12px; }
.wt-source-chip { display: inline-block; margin-top: 2px; padding: 2px 8px; border-radius: 4px; background: var(--bg-app); border: 1px solid var(--border-color); font-size: 11px; color: var(--text-muted); }
.wt-cell-date { font-size: 11px; color: var(--text-muted); }
.wt-status-pill { padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.wt-status-pill--not-studied { background: var(--bg-input); color: var(--text-muted); }
.wt-status-pill--learning { background: #FEF3C7; color: #92400E; }
.wt-status-pill--mastered { background: #DCFCE7; color: #166534; }
.wt-status-pill--difficult { background: #FEE2E2; color: #991B1B; }

/* Статус в строке таблицы — цветная точка с подсказкой по наведению. */
.wt-status-dot { position: relative; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--border-interactive); cursor: default; }
.wt-status-dot--not-studied { background: #CBD5E0; }
.wt-status-dot--learning { background: #F59E0B; }
.wt-status-dot--mastered { background: #34D399; }
.wt-status-dot--difficult { background: #EF4444; }
.wt-status-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--text-primary); color: var(--bg-card); padding: 5px 9px; border-radius: 8px; font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 20; box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
.wt-status-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--text-primary); }
.wt-status-dot:hover .wt-status-tip { opacity: 1; }

/* === Адаптив WordTable + модалки. Брейкпоинты по docs/architecture/frontend-layout.md:
   <768 мобайл, 768–1279 планшет, 1280+ десктоп. Один DOM (DictRow) на все — только CSS. === */

/* Планшет (768–1279): есть боковое меню → ширина контента меньше. Сужаем фикс-колонки,
   контекст (flex + ellipsis) поглощает остаток. */
@media (min-width: 768px) and (max-width: 1279px) {
    .wt-headers, .wt-row { gap: 8px; }
    .wt-h-img, .wt-cell-img { width: 36px; }
    .wt-h-status, .wt-cell-status { width: 60px; }
    .wt-h-word, .wt-cell-word { width: 130px; }
    .wt-h-translation, .wt-cell-translation { width: 110px; }
    .wt-h-date, .wt-cell-date { width: 58px; }
    .wt-h-actions, .wt-cell-actions { width: 56px; }
}

/* Мобайл (<768): таблица → компактная карточка-строка (CSS grid, тот же DOM).
   Скрыты образ, контекст, заголовки и действия (правка/удаление — в модалке по тапу). */
@media (max-width: 767px) {
    .wt-headers { display: none; }
    .wt-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "status word date"
            "status trans trans";
        gap: 2px 10px;
        padding: 12px 16px;
        align-items: center;
    }
    .wt-row .wt-cell-img, .wt-row .wt-cell-context, .wt-row .wt-cell-actions { display: none; }
    .wt-cell-status { grid-area: status; width: auto; }
    .wt-cell-word { grid-area: word; width: auto; }
    .wt-cell-translation { grid-area: trans; width: auto; }
    .wt-cell-date { grid-area: date; width: auto; text-align: right; }
}

.wt-cell-actions { display: flex; gap: 6px; }
.wt-action { background: none; border: none; cursor: pointer; font-size: 15px; color: var(--text-muted); padding: 4px; border-radius: 6px; line-height: 1; }
.wt-action:hover { background: var(--bg-app); color: var(--text-primary); }
.wt-action--remove:hover { color: #ef4444; }
.wt-action--source { display: inline-flex; align-items: center; }
.wt-action--source svg { width: 16px; height: 16px; }
/* Превью редакционного набора — футер с CTA «Добавить себе». */
.esp-footer { margin-top: 24px; display: flex; justify-content: center; }
.esp-add { min-width: 240px; justify-content: center; }

/* WordCardModal — карточка слова в модалке */
/* overflow: hidden auto — клиппинг скруглений по X + вертикальная прокрутка на низких
   экранах (модалка по центру, без bottom-sheet). */
.wcm { width: 560px; max-width: 100%; max-height: 88vh; background: var(--bg-card); border-radius: 16px; overflow: hidden auto; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.wcm-image { height: 200px; background: var(--bg-app); display: flex; align-items: center; justify-content: center; }
.wcm-image img { width: 100%; height: 100%; object-fit: cover; }
.wcm-image--empty { color: var(--text-muted); opacity: 0.4; }
.wcm-image--empty svg { width: 40px; height: 40px; }
.wcm-content { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.wcm-header { display: flex; justify-content: space-between; align-items: flex-start; }
.wcm-word-block { display: flex; flex-direction: column; gap: 2px; }
.wcm-word { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 20px; font-weight: 700; color: var(--text-primary); }
.wcm-lemma { font-size: 13px; font-style: italic; color: var(--text-muted); }
/* Секции модалки (ПЕРЕВОД / СТАТУС / КОНТЕКСТЫ / ПРОГРЕСС) — лейбл + контент. */
.wcm-section { display: flex; flex-direction: column; gap: 8px; }
.wcm-label { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-muted); text-transform: uppercase; }
.wcm-status-row { flex-direction: row; align-items: center; gap: 10px; }
.wcm-translation { font-size: 16px; font-weight: 500; color: var(--text-secondary); }
.wcm-ctx { font-size: 13px; color: var(--text-secondary); }
.wcm-ctx--extra { color: var(--text-muted); }
/* Горизонтальный ряд прогресса (CardStatsPanel) — плоско, без боксов (как в Pencil). */
.card-stats { display: flex; gap: 8px; }
.card-stat { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.card-stat-num { font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.card-stat-label { font-size: 12px; color: var(--text-muted); }
.card-stats-last { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; color: var(--text-secondary); }

/* WordTopBar — шапка списка слов (счётчик + добавить/тренировать), вместо круглых FAB. */
.wab { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.wab-count { display: flex; align-items: baseline; gap: 6px; }
.wab-count-num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 28px; font-weight: 700; color: var(--text-primary); }
.wab-count-label { font-size: 14px; color: var(--text-muted); }
.wab-actions { display: flex; gap: 10px; }
.wab-add, .wab-train { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent; font-family: 'Inter', system-ui, sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; }
.wab-ico { display: flex; }
.wab-ico svg { width: 18px; height: 18px; }
.wab-add { background: transparent; border-color: var(--border-color); color: var(--text-primary); }
.wab-add:hover { background: var(--bg-input); }
.wab-train { background: var(--brand-primary); color: #fff; }
.wab-train:hover { background: #2563EB; }
.wcm-actions { display: flex; gap: 10px; }
.wcm-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent; font-family: 'Inter', system-ui, sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; }
.wcm-btn__ico { display: flex; }
.wcm-btn__ico svg { width: 18px; height: 18px; }
.wcm-btn--edit { flex: 1; background: transparent; border-color: var(--border-color); color: var(--text-primary); }
.wcm-btn--edit:hover { background: var(--bg-input); }
.wcm-btn--del { background: transparent; border-color: var(--color-error); color: var(--color-error); }
.wcm-btn--del:hover { background: var(--color-error); color: #fff; }
.wcm-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.card-source { display: flex; flex-direction: column; gap: 8px; }
.card-source-label { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-muted); }
.card-source-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.card-source-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-input); color: var(--text-secondary); border-radius: 8px; padding: 4px 8px; font-size: 13px; }
.card-source-ico { display: flex; color: var(--text-muted); }
.card-source-ico svg { width: 14px; height: 14px; }
.card-source-name { line-height: 1; }
.card-source-x { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0; font-size: 14px; line-height: 1; }
.card-source-x:hover { color: var(--color-error); }
/* SourcePicker — поисковая модалка назначения источника. */
.sp-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1100; padding: 16px; }
.sp-panel { width: 420px; max-width: 100%; max-height: 80vh; background: var(--bg-card); border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); display: flex; flex-direction: column; overflow: hidden; }
.sp-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; }
.sp-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 17px; font-weight: 700; color: var(--text-primary); }
.sp-close { background: none; border: none; font-size: 22px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0; }
.sp-close:hover { color: var(--text-primary); }
.sp-search { margin: 0 16px 12px; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-input); font-size: 14px; color: var(--text-primary); }
.sp-list { overflow-y: auto; padding: 0 8px 12px; }
.sp-item { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 8px; cursor: pointer; }
.sp-item:hover { background: var(--bg-app); }
.sp-check { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--brand-primary); }
.sp-ico { display: flex; color: var(--text-muted); flex-shrink: 0; }
.sp-ico svg { width: 16px; height: 16px; }
.sp-name { font-size: 14px; color: var(--text-primary); }
.wcm-audio { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; border: none; background: rgba(59, 130, 246, 0.12); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.wcm-audio:hover { background: rgba(59, 130, 246, 0.2); }
.wcm-audio svg { width: 18px; height: 18px; }