/* Modern, Clean Styles for myList v2 - Updated 2025-10-13 */

/* ===========================================
   CSS VARIABLES (Design Tokens)
   =========================================== */
:root {
    /* Colors - Surfaces */
    --surface-solid: #ffffff;
    --surface-translucent: rgba(255, 255, 255, 0.95);
    --surface-glass: rgba(255, 255, 255, 0.85);

    /* Effects */
    --blur-glass: blur(10px);

    /* Tooltips */
    --tooltip-bg: rgba(30, 30, 30, 0.7);
    --tooltip-blur: blur(10px);
    --tooltip-color: #fff;
    --tooltip-font-size: var(--font-size-sm);
    --tooltip-padding: var(--space-sm) var(--space-lg);
    --tooltip-radius: 6px;
    --tooltip-shadow: 0 2px 8px rgba(0,0,0,0.15);

    /* Spacing - Navigation/Header padding (consistent across tabs) */
    --nav-padding-top: var(--space-md);

    /* Colors - Backgrounds */
    --bg-gradient-start: #667eea;
    --bg-gradient-end: #764ba2;
    --bg-mylist-start: #f8fafc;
    --bg-mylist-end: #e2e8f0;
    --bg-list-items: #f8f9fa;
    --bg-tab-bar: #ffffff;

    /* Unified App Background Options (uncomment one to use) */
    /* Option 1: Solid Light Gray - clean, minimal */
    /* --bg-app: #f8fafc; */
    /* Option 2: Apple-style Off-White - modern, popular */
    /* --bg-app: #f5f5f7; */
    /* Option 3: Warm Paper White - softer on eyes for reading */
    /* --bg-app: #faf9f7; */
    /* Option 4: Cool Blue-Gray - calming, great for learning apps */
    --bg-app: #f1f5f9;
    /* Option 5: Pure Minimal - Google/Material Design style */
    /* --bg-app: #fafafa; */

    /* Colors - Text */
    --text-primary: #333;
    --text-secondary: #6c757d;
    --text-accent: var(--brand-color);

    /* Colors - Brand (accent color for buttons, borders, active states) */
    --brand-color: #5a67d8;
    --brand-color-hover: #4c51bf;
    --brand-color-rgb: 90, 103, 216;  /* RGB channels for rgba() tints */

    /* Colors - FAB (Floating Action Buttons) */
    --fab-bg-neutral: rgba(80, 80, 80, 0.5);
    --fab-bg-neutral-hover: rgba(60, 60, 60, 0.8);
    --fab-bg-neutral-active: rgba(100, 100, 100, 0.7);
    --fab-bg-brand: rgba(var(--brand-color-rgb), 0.6);
    --fab-bg-brand-hover: rgba(var(--brand-color-rgb), 0.8);
    --fab-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --fab-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.3);

    /* Colors - Borders */
    --border-light: #e2e8f0;
    --border-medium: #ddd;
    --input-border: #d1d5db;      /* Standard border for form inputs, selects, umlaut buttons */
    --border-accent: var(--brand-color); /* Brand accent border for focus, active, selected states */
    --focus-ring: rgba(var(--brand-color-rgb), 0.15); /* Consistent focus shadow */
    --focus-outline-color: #ffbf47; /* High-contrast amber for keyboard focus */

    /* Colors - Semantic (status/feedback) */
    --color-success: #22c55e;
    --color-success-hover: #16a34a;
    --color-error: #dc3545;
    --color-error-hover: #c82333;
    --color-warning: #f59e0b;
    --color-info: #17a2b8;
    --color-info-hover: #138496;

    /* Colors - Content Display (minimalist: grays + brand accent only) */
    --color-grammar: var(--text-secondary);
    --color-english: var(--text-secondary);
    --color-ipa: var(--text-secondary);
    --color-example-num: var(--text-secondary);
    --color-highlight: var(--brand-color);

    /* Colors - Familiarity Ratings (brand opacity scale) */
    --rating-mastered: var(--brand-color);
    --rating-learning: rgba(var(--brand-color-rgb), 0.55);
    --rating-unsure: var(--text-muted);
    --rating-dot-mastered: var(--brand-color);
    --rating-dot-learning: rgba(var(--brand-color-rgb), 0.55);
    --rating-dot-new: var(--text-muted);

    /* Colors - UI State */
    --color-disabled: #ccc;
    --border-divider: #e9ecef;
    --hover-overlay: rgba(0, 0, 0, 0.05);
    --placeholder-color: #9ca3af;

    /* Colors - Secondary/neutral buttons */
    --btn-secondary-bg: #e2e8f0;
    --btn-secondary-bg-hover: #cbd5e0;
    --color-enrich: var(--brand-color);

    /* Button toggle borders */
    --btn-toggle-border: #6c757d;
    --btn-toggle-border-hover: #495057;

    /* Slider track */
    --slider-track: #e0e0e0;

    /* Keyboard-style button shadow */
    --shadow-key: 0 1px 0 rgba(0, 0, 0, 0.1);

    /* Disabled state */
    --disabled-opacity: 0.5;

    /* Colors - Status Messages */
    --status-info-bg: rgba(209, 236, 241, 0.95);
    --status-info-text: #0c5460;
    --status-info-border: #bee5eb;
    --status-success-bg: rgba(212, 237, 218, 0.95);
    --status-success-text: #155724;
    --status-success-border: #c3e6cb;
    --status-warning-bg: rgba(255, 243, 205, 0.95);
    --status-warning-text: #856404;
    --status-warning-border: #ffeaa7;
    --status-error-bg: rgba(248, 215, 218, 0.95);
    --status-error-text: #721c24;
    --status-error-border: #f5c6cb;

    /* Elevation - Box shadows for depth hierarchy */
    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);   /* Subtle: list items, small cards */
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);     /* Default: cards, sections */
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.1);    /* Elevated: floating panels, main sections */
    --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.3);   /* Modal: dialogs, overlays */

    /* Spacing
       Consistent spacing scale for padding, margin, and gap.
       Based on a 2px base with practical increments:
       - 2xs–xs (2–4px): Tight/compact spacing
       - sm–md (6–8px): Default component spacing
       - lg–xl (10–12px): Comfortable spacing
       - 2xl–3xl (16–20px): Section-level spacing
    */
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 6px;
    --space-md: 8px;
    --space-lg: 10px;
    --space-xl: 12px;
    --space-2xl: 16px;
    --space-3xl: 20px;

    --mylist-line-gap: var(--space-sm);

    /* Border Radius
       Consistent rounding scale:
       - sm (4px): Subtle rounding for small elements
       - md (6px): Default rounding
       - lg (8px): Cards, buttons
       - xl (12px): Modals, large cards
       - 2xl (16px): Pill shapes
       - full (50%): Circles
    */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 50%;

    /* Typography - Font Sizes
       Standard scale for consistent text sizing across the app:
       - 2xs (10px): Slider labels, dock labels, ultra-compact text
       - xs (11px): Index numbers, tiny labels, badges
       - sm (12px): Meta info, secondary labels, word type tags
       - md (13px): Body text, definitions, examples, most content
       - lg (14px): Prominent text, form inputs
       - xl (16px): Main headings, buttons, iOS inputs (prevents zoom)
       - 2xl (18px): Large headings, icons
       - 3xl (24px): Display text, large titles
    */
    --font-size-2xs: 10px;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-md: 13px;
    --font-size-lg: 14px;
    --font-size-xl: 16px;
    --font-size-2xl: 18px;
    --font-size-3xl: 24px;
    --font-size-base: 16px;  /* Alias for --font-size-xl, used by form elements & buttons */

    /* Font Weight Scale
       - normal (400): Body text, secondary content
       - medium (500): Slightly emphasized text, labels
       - semibold (600): Section headers, buttons, badges
       - bold (700): Page titles, strong emphasis
    */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line Height Scale
       - none (1): Badges, pills, single-line elements
       - tight (1.2): Headings, buttons, compact elements
       - snug (1.3): IPA, code blocks, dense content
       - normal (1.4): Body text, default reading
       - relaxed (1.5): Form inputs, comfortable reading
       - loose (1.6): Spacious text blocks, high readability
    */
    --line-height-none: 1;
    --line-height-tight: 1.2;
    --line-height-snug: 1.3;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.5;
    --line-height-loose: 1.6;

    /* Touch Targets & Buttons
       Apple HIG recommends 44px minimum touch target.
       These variables ensure consistent button sizing across the app.
    */
    --touch-target-min: 44px;

    /* Icon Sizes - Centralized by device type (not orientation) */
    --icon-size-desktop: 20px;
    --icon-size-mobile: 22px;

    /* Tab Bar Button Sizing */
    --tab-bar-clearance: 44px;   /* Desktop top tab bar (~32px) + breathing space (--space-xl 12px). Used by `body.tab-* .app-container` padding-top to keep content from sliding under the tab bar. */
    --tab-bar-btn-spacing: 4px;  /* Gap between tab buttons */
    --tab-btn-padding: 8px 24px;
    --tab-btn-padding-landscape: 6px 16px;
    --tab-btn-min-width: 80px;
    --tab-btn-min-width-landscape: 70px;
    --tab-btn-gap: var(--space-xs);
    --tab-btn-gap-landscape: 6px;
    --tab-icon-size: 20px;
    --tab-label-size: 11px;
    --tab-label-size-landscape: 13px;
    --tab-btn-color: var(--text-secondary);
    --tab-btn-color-active: var(--text-accent);

    /* ===========================================
       myList Header Block System
       Standardized row heights and gaps for the input/picker/controls block.
       All elements in a row should use the same height for alignment.
       =========================================== */

    /* Desktop Row Heights (pointer: fine)
       Controls row: buttons + info + dropdowns */
    --mylist-row-height-desktop: 28px;          /* Buttons, dropdowns all same height */
    --mylist-controls-row-height-desktop: 32px; /* Controls row min-height (row-height + 4px breathing room) */
    --mylist-row-gap-desktop: 4px;              /* Gap between rows */
    --mylist-header-tab-area: 36px;             /* Tab bar (32px) + 4px spacing */
    --mylist-row-gap-desktop-narrow: 6px;       /* Slightly more gap when rows split */
    --mylist-umlaut-btn-height-desktop: 22px;   /* Compact umlaut buttons */

    /* Mobile Portrait Row Heights (pointer: coarse)
       Larger touch targets for accessibility */
    --mylist-row-height-mobile: 44px;           /* Standard touch target */
    --mylist-row-gap-mobile: 2px;               /* Minimal gap */
    --mylist-umlaut-btn-height-mobile: 40px;    /* Touch-friendly umlaut buttons */

    /* Mobile Landscape Row Heights
       Compact but still touch-friendly */
    --mylist-row-height-mobile-landscape: 36px;
    --mylist-row-gap-mobile-landscape: 2px;
    --mylist-umlaut-btn-height-mobile-landscape: 32px;

    /* Umlaut Picker Positioning
       Picker is positioned at Row 2, then visual-balance adjusts up/down */
    --mylist-picker-visual-balance: 10px;       /* Fine-tune position relative to Row 2 */

    /* Semantic colors for elements that use hardcoded values */
    --bg-input: #ffffff;
    --bg-card: #f8f9fa;
    --bg-hover: #f0f0f0;
    --bg-badge: #e9ecef;
    --bg-modal: #ffffff;
    --text-muted: #aaa;
    --text-tertiary: #6b7280;
    --text-link: var(--brand-color);
    --shadow-soft: rgba(0, 0, 0, 0.1);
    --icon-color: #666;
    --bg-section: #f0f4f8;
}

/* ===========================================
   DARK MODE
   =========================================== */
[data-theme="dark"] {
    /* Surfaces */
    --surface-solid: #1a1a2e;
    --surface-translucent: rgba(26, 26, 46, 0.95);
    --surface-glass: rgba(26, 26, 46, 0.85);

    /* Backgrounds */
    --bg-app: #0f0f23;
    --bg-gradient-start: #4c51bf;
    --bg-gradient-end: #5a4da5;
    --bg-mylist-start: #0f0f23;
    --bg-mylist-end: #16213e;
    --bg-list-items: #16213e;
    --bg-tab-bar: #1a1a2e;
    --bg-input: #16213e;
    --bg-card: #1a1a2e;
    --bg-hover: #233554;
    --bg-badge: #233554;
    --bg-modal: #1a1a2e;
    --bg-section: #1e1e38;

    /* Text */
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0b0;
    --text-accent: var(--brand-color);
    --text-muted: #666;
    --text-tertiary: #8a8a9a;
    --text-link: var(--brand-color);

    /* Brand */
    --brand-color: #7c8cf8;
    --brand-color-hover: #6b7bf0;
    --brand-color-rgb: 124, 140, 248;

    /* Borders */
    --border-light: #2a2a4a;
    --border-medium: #3a3a5a;
    --input-border: #3a3a5a;
    --border-accent: var(--brand-color);
    --focus-ring: rgba(var(--brand-color-rgb), 0.2);

    /* Icons */
    --icon-color: #a0a0b0;

    /* FAB */
    --fab-bg-neutral: rgba(200, 200, 200, 0.3);
    --fab-bg-neutral-hover: rgba(220, 220, 220, 0.5);
    --fab-bg-neutral-active: rgba(180, 180, 180, 0.4);
    --fab-bg-brand: rgba(var(--brand-color-rgb), 0.5);
    --fab-bg-brand-hover: rgba(var(--brand-color-rgb), 0.7);

    /* Tooltips */
    --tooltip-bg: rgba(60, 60, 80, 0.9);

    /* Shadows */
    --shadow-soft: rgba(0, 0, 0, 0.3);
    --fab-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --fab-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.5);

    /* Semantic colors (brighter for dark bg) */
    --color-success: #4ade80;
    --color-success-hover: #22c55e;
    --color-error: #f87171;
    --color-error-hover: #ef4444;

    /* Content display colors inherit from text/brand variables — no overrides needed */
    --color-warning: #fbbf24;
    --color-info: #67e8f9;
    --color-info-hover: #22d3ee;

    /* Familiarity (brighter for dark bg) */
    --rating-mastered: var(--brand-color);
    --rating-learning: rgba(var(--brand-color-rgb), 0.55);
    --rating-unsure: var(--text-muted);
    --rating-dot-mastered: var(--brand-color);
    --rating-dot-learning: rgba(var(--brand-color-rgb), 0.55);
    --rating-dot-new: var(--text-muted);

    /* UI State */
    --color-disabled: #555;
    --border-divider: #2a2a4a;
    --hover-overlay: rgba(255, 255, 255, 0.05);
    --placeholder-color: #6b7280;

    /* Status Messages */
    --status-info-bg: rgba(30, 58, 78, 0.95);
    --status-info-text: #7dd3fc;
    --status-info-border: #1e3a5f;
    --status-success-bg: rgba(30, 70, 40, 0.95);
    --status-success-text: #86efac;
    --status-success-border: #1a5c2a;
    --status-warning-bg: rgba(78, 60, 20, 0.95);
    --status-warning-text: #fde68a;
    --status-warning-border: #6b5520;
    --status-error-bg: rgba(80, 30, 30, 0.95);
    --status-error-text: #fca5a5;
    --status-error-border: #7f1d1d;

    /* Focus outline (brighter for dark bg) */
    --focus-outline-color: #ffd166;

    /* Secondary/neutral buttons */
    --btn-secondary-bg: #2a2a4a;
    --btn-secondary-bg-hover: #3a3a5a;
    --color-enrich: var(--brand-color);
    --btn-toggle-border: #6b7280;
    --btn-toggle-border-hover: #9ca3af;
    --slider-track: #3a3a5a;
    --shadow-key: 0 1px 0 rgba(0, 0, 0, 0.3);

    /* Tab buttons */
    --tab-btn-color: #a0a0b0;
    --tab-btn-color-active: #7c8cf8;
}

/* Dark mode: global overrides for elements using hardcoded colors */
[data-theme="dark"] body {
    background: var(--bg-app);
    color: var(--text-primary);
}

[data-theme="dark"] .app-container {
    background: var(--bg-app);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .settings-group,
[data-theme="dark"] .settings-row {
    border-color: var(--border-light);
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .edit-modal-content,
[data-theme="dark"] .voice-modal-content,
[data-theme="dark"] .confirm-modal-content {
    background: var(--bg-modal);
    color: var(--text-primary);
}

[data-theme="dark"] .learning-item {
    background: var(--bg-card);
    border-color: var(--border-light);
}

[data-theme="dark"] .learning-item .item-meta {
    color: var(--text-muted);
}

[data-theme="dark"] .mylist-sticky-header,
[data-theme="dark"] .tips-sticky-header {
    background: var(--surface-translucent);
    border-color: var(--border-light);
}

[data-theme="dark"] .tab-bar {
    background: var(--bg-tab-bar);
    border-color: var(--border-light);
}

[data-theme="dark"] .learn-dock {
    background: var(--surface-translucent);
    border-color: var(--border-light);
}

[data-theme="dark"] .playback-header,
[data-theme="dark"] .playback-controls {
    border-color: var(--border-light);
}

[data-theme="dark"] .current-word {
    color: var(--text-primary);
}

[data-theme="dark"] .tips-section,
[data-theme="dark"] .tip-card {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-light);
}

[data-theme="dark"] .settings-section {
    background: var(--bg-app);
    color: var(--text-primary);
}

[data-theme="dark"] .settings-link-btn {
    background: var(--bg-card);
    color: var(--text-accent);
    border-color: var(--border-medium);
}

[data-theme="dark"] .settings-action-btn {
    background: var(--brand-color);
    color: white;
}

[data-theme="dark"] .list-empty-state {
    color: var(--text-muted);
}

[data-theme="dark"] .tab-drawer {
    background: var(--surface-translucent);
}

[data-theme="dark"] .playback-btn,
[data-theme="dark"] .list-toggle-btn,
[data-theme="dark"] .list-action-btn {
    color: var(--icon-color);
}

[data-theme="dark"] .fullscreen-overlay,
[data-theme="dark"] .blind-overlay {
    background: #000;
}

[data-theme="dark"] .screensaver-overlay {
    background: #000;
}

/* Text colors */
[data-theme="dark"] .audio-select,
[data-theme="dark"] .btn.toggle,
[data-theme="dark"] .pending-word-text,
[data-theme="dark"] .settings-row label,
[data-theme="dark"] .tip-of-the-day .tip-title,
[data-theme="dark"] .tip-browse-title,
[data-theme="dark"] .tip-de {
    color: var(--text-primary);
}

[data-theme="dark"] .progress-info,
[data-theme="dark"] .progress-stats,
[data-theme="dark"] .input-hint,
[data-theme="dark"] .hint-text,
[data-theme="dark"] .detection-text,
[data-theme="dark"] .word-type-label,
[data-theme="dark"] .item-content p,
[data-theme="dark"] .btn-close,
[data-theme="dark"] .voice-desc,
[data-theme="dark"] .or-divider,
[data-theme="dark"] .settings-label,
[data-theme="dark"] .settings-info,
[data-theme="dark"] .sync-info {
    color: var(--text-secondary);
}

[data-theme="dark"] .close-btn,
[data-theme="dark"] .playback-btn.navigation,
[data-theme="dark"] .playback-label,
[data-theme="dark"] .playback-btn.blind,
[data-theme="dark"] .playback-btn.toggle,
[data-theme="dark"] .pending-word-label,
[data-theme="dark"] .btn,
[data-theme="dark"] .screensaver-settings-btn,
[data-theme="dark"] .mini-playback-btn {
    color: var(--icon-color);
}

[data-theme="dark"] .slider-time-display,
[data-theme="dark"] .close-button-sm,
[data-theme="dark"] .hint-subtext,
[data-theme="dark"] .noun-checker-label,
[data-theme="dark"] .tip-en,
[data-theme="dark"] .tips-empty,
[data-theme="dark"] .settings-help-text {
    color: var(--text-muted);
}

/* Backgrounds */
[data-theme="dark"] .audio-select,
[data-theme="dark"] .btn.toggle,
[data-theme="dark"] .pending-word,
[data-theme="dark"] .pending-word-input,
[data-theme="dark"] .noun-checker-label,
[data-theme="dark"] .noun-checker-input,
[data-theme="dark"] .btn-google,
[data-theme="dark"] .modal-dialog-header,
[data-theme="dark"] .sync-modal .modal-input,
[data-theme="dark"] .gender-btn,
[data-theme="dark"] .settings-select,
[data-theme="dark"] .slider-current-pos,
[data-theme="dark"] .slider-thumb-label {
    background: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .edit-metadata,
[data-theme="dark"] .voice-selection-item,
[data-theme="dark"] .noun-checker-btn,
[data-theme="dark"] .tip-browse-example,
[data-theme="dark"] .drag-handle,
[data-theme="dark"] .learning-item-title {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-light);
}

[data-theme="dark"] .playback-btn:disabled,
[data-theme="dark"] .btn-add:disabled,
[data-theme="dark"] .btn-close:hover,
[data-theme="dark"] .settings-link-btn {
    background: var(--bg-badge);
}

/* Borders */
[data-theme="dark"] .or-divider::after {
    border-color: var(--border-light);
}

[data-theme="dark"] .input-bottom-sheet .input-content {
    background: var(--bg-modal);
    color: var(--text-primary);
}

[data-theme="dark"] .umlaut-btn {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

/* Dark status messages handled by --status-*-bg/text/border variables */

/* ===========================================
   Z-INDEX REFERENCE (mobile Learn tab)
   ===========================================
   Keep this updated when adding new overlays!

   z-index: 10     - Playback overlay (prev/next tap areas)
   z-index: 15     - Floating Add button (draggable)
   z-index: 99     - Mobile nav container
   z-index: 100    - Tab bar, Learn dock
   z-index: 101    - Tab drawer overlay
   z-index: 9999   - Fullscreen overlay
   z-index: 10000  - Modal backdrop
   z-index: 10001  - Toast notifications
   z-index: 10002  - Screensaver overlay
   z-index: 10003  - Screensaver text

   Note: Floating Add button (15) is intentionally below
   dock/drawer (100+) so it's protected when overlays open.
   =========================================== */

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

html, body {
    overflow-x: hidden;
}

/* Screen-reader-only: visually hidden but accessible to assistive tech */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--bg-app);
    min-height: 100vh;
    color: var(--text-primary);
}

/* Consistent checkbox brand color across all checkboxes */
input[type="checkbox"] {
    accent-color: var(--brand-color);
}

/* Hide scrollbars in fullscreen mode */
html:fullscreen,
html:-webkit-full-screen,
html:-moz-full-screen,
html:-ms-fullscreen {
    overflow: hidden !important;
}

html:fullscreen body,
html:-webkit-full-screen body,
html:-moz-full-screen body,
html:-ms-fullscreen body {
    overflow: hidden !important;
    width: 100% !important;
    height: 100vh !important;
}

/* Hide scrollbars when custom fullscreen overlay is active */
body:has(.fullscreen-overlay.active),
body:has(.screensaver-overlay.active) {
    overflow: hidden !important;
}

html:has(.fullscreen-overlay.active),
html:has(.screensaver-overlay.active) {
    overflow: hidden !important;
}

/* Hide app container in fullscreen to prevent scrolling content */
html:fullscreen .app-container,
html:-webkit-full-screen .app-container,
html:-moz-full-screen .app-container,
html:-ms-fullscreen .app-container {
    display: none !important;
}

.app-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--space-3xl);
    min-height: 100vh;
}

/* Header */
header {
    background: var(--surface-translucent);
    padding: var(--space-xl) var(--space-3xl);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-3xl);
    box-shadow: var(--shadow-lg);
}

.header-controls {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.audio-controls label {
    color: var(--text-accent);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.audio-select {
    padding: var(--space-xs) var(--space-md);
    height: 28px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    background: var(--surface-solid);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    cursor: pointer;
    min-width: 50px;
}

.audio-select:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

/* Playback Section */
.playback-section {
    background: var(--surface-translucent);
    padding: var(--space-3xl);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-3xl);
    box-shadow: var(--shadow-lg);
    /* Prevent iOS Safari from auto-scaling text on orientation change */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Two-layer playback layout */
.playback-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--space-md);
}

/* Top layer: Source, Meanings, Examples, Mode */
.playback-header-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.content-config-group,
.playback-config-group {
    display: contents; /* Flatten into parent */
}

/* Icon buttons for Meanings/Examples */
.playback-header-controls .playback-btn.toggle.icon-btn {
    width: 36px;
    height: 36px;
    padding: var(--space-sm);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: var(--radius-lg);
    touch-action: manipulation; /* Remove 300ms tap delay on mobile */
}

.playback-header-controls .playback-btn.toggle.icon-btn svg {
    width: var(--icon-size-desktop);
    height: var(--icon-size-desktop);
    flex-shrink: 0;
}

/* Icon toggle states: show off icon by default, on icon when active */
.playback-btn.toggle.icon-btn .icon-on {
    display: none;
}

.playback-btn.toggle.icon-btn .icon-off {
    display: block;
}

.playback-btn.toggle.icon-btn.active .icon-on {
    display: block;
}

.playback-btn.toggle.icon-btn.active .icon-off {
    display: none;
}

/* Red X overlay system for toggle buttons */
.playback-btn.toggle.icon-btn.has-x-overlay {
    position: relative;
}

.playback-btn.toggle.icon-btn.has-x-overlay .main-icon {
    display: block;
}

.playback-btn.toggle.icon-btn.has-x-overlay .x-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Hide X overlay when active (feature is ON) */
.playback-btn.toggle.icon-btn.has-x-overlay.active .x-overlay {
    display: none;
}

/* Inverted logic for mute: show X when active (muted), hide when not active (unmuted) */
.playback-btn.toggle.icon-btn.has-x-overlay.x-when-active .x-overlay {
    display: none;
}

.playback-btn.toggle.icon-btn.has-x-overlay.x-when-active.active .x-overlay {
    display: block;
}

/* Fallback for text toggle buttons */
.playback-header-controls .playback-btn.toggle:not(.icon-btn) {
    width: auto;
    padding: var(--space-2xs) var(--space-md);
    display: inline-flex;
    justify-content: center;
    box-sizing: border-box;
}

.mode-select {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--input-border);
    font-size: var(--font-size-lg);
    height: 32px;
    border-radius: var(--radius-lg);
    background: var(--surface-solid);
    color: var(--text-primary);
    cursor: pointer;
}

.mode-select:hover {
    border-color: var(--border-accent);
}

.mode-select:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.mode-select:disabled {
    opacity: var(--disabled-opacity);
    color: var(--color-disabled);
    cursor: not-allowed;
}

/* Filter dropdowns - same style, slightly smaller font for compact fit */
.filter-select {
    font-size: var(--font-size-md);
}

/* Bottom layer: Play, Back, Skip, Add, Mute, Zoom, Audio */
.playback-controls {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
    flex-wrap: wrap;
    align-items: center;
    overflow: visible; /* Allow tooltips to show */
}

.playback-primary-row {
    display: contents; /* Children flow into parent */
}

/* Mute button - text style, toggles Mute/Unmute */
.mute-btn {
    padding: var(--space-2xs) var(--space-md);
    font-size: var(--font-size-md);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    line-height: var(--line-height-normal);
    width: auto;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.mute-btn:hover {
    background: var(--hover-overlay);
}

.mute-btn.active {
    color: var(--color-error);
}

/* Mobile settings toggle - hidden on desktop */
.mobile-settings-toggle {
    display: none;
}

/* Control separator - hidden, using gap spacing instead */
.control-separator {
    display: none;
}

/* Mode buttons grouping - no longer used, merged into primary row */
.mode-buttons-group {
    display: none;
}

/* Match Mute button height to other controls */
.playback-controls .playback-btn.toggle {
    padding: var(--space-xs) var(--space-md);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: var(--font-size-md);
}

.playback-btn {
    padding: var(--space-xs) var(--space-lg);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    touch-action: manipulation; /* Remove 300ms tap delay on mobile */
}

/* Icon buttons in playback row - 1.2x larger for better touch targets */
.playback-btn.icon-btn {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    padding: var(--space-md);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: var(--radius-lg);
    background: transparent;
    border: none;
    touch-action: none; /* Prevent scroll gesture from canceling taps */
}

.playback-btn.icon-btn svg {
    width: var(--icon-size-mobile);
    height: var(--icon-size-mobile);
    fill: currentColor;
    flex-shrink: 0;
}

/* Primary action buttons */
.playback-btn.play {
    color: var(--brand-color);
}

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

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

.playback-btn.add {
    color: var(--text-link);
}

/* Icon button hover states */
.playback-btn.icon-btn:hover {
    background: var(--hover-overlay);
}

/* Icon button disabled states */
.playback-btn.icon-btn:disabled {
    color: var(--color-disabled);
    opacity: 0.5;
    cursor: not-allowed;
}

.playback-btn.navigation:disabled {
    background: transparent;
    color: var(--color-disabled);
    opacity: 0.5;
}

/* Loading indicator during hydration */
.loading-indicator {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    z-index: 9999;
}

.hydrating .loading-indicator {
    display: flex;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--slider-track);
    border-top-color: var(--border-accent);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

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

/* Hide UI during initial hydration to prevent visible state changes */
.hydrating .tab-bar,
.hydrating .app-container {
    opacity: 0;
    pointer-events: none;
}

/* Disable button transitions during hydration to prevent color flashes */
.hydrating .playback-btn,
.hydrating .list-toggle-btn {
    transition: none !important;
}

/* Smooth fade-in when hydration completes */
.tab-bar,
.app-container {
    transition: opacity 0.2s ease-in;
}


/* Play/Pause specific colors handled above in combined selector */

.playback-btn.add {
    background: transparent;
    color: var(--text-link);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2xs) var(--space-sm);
    line-height: var(--line-height-normal);
    border: none;
}

.playback-btn.add:hover {
    background: var(--hover-overlay);
    transform: none;
}

.playback-btn.add:disabled {
    background: transparent;
    color: var(--color-disabled);
    opacity: 0.5;
}

/* Text buttons - link style, no background */
.playback-btn.fullscreen,
.playback-btn.blind {
    background: transparent;
    color: var(--text-secondary);
    padding: var(--space-2xs) var(--space-sm);
    font-size: var(--font-size-md);
    border: none;
}

.playback-btn.fullscreen:hover,
.playback-btn.blind:hover {
    color: var(--text-primary);
    background: var(--hover-overlay);
}

.playback-btn.fullscreen:disabled,
.playback-btn.blind:disabled {
    color: var(--color-disabled);
    background: transparent;
}

/* Navigation button color - inherits from base selector above */

/* Semantic Color System - Settings Controls (already styled via screensaver-settings-btn) */
.playback-btn.settings {
    background: var(--color-info);
    color: white;
}

.playback-btn.settings:hover {
    background: var(--color-info-hover);
}

/* Toggle buttons - grey, same in active and inactive state (X-overlay shows state) */
.playback-btn.toggle {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: var(--space-2xs) var(--space-sm);
    font-size: var(--font-size-md);
}

.playback-btn.toggle:hover {
    color: var(--text-primary);
    background: var(--hover-overlay);
}

.playback-btn.toggle.active {
    background: transparent;
    color: var(--text-secondary);
}

.playback-btn.toggle.active:hover {
    color: var(--text-primary);
    background: var(--hover-overlay);
}

/* Semantic Color System - Settings Buttons (for .btn class) */
.btn.settings {
    background: var(--color-info);
    color: white;
}

.btn.settings:hover {
    background: var(--color-info-hover);
}

/* Semantic Color System - Toggle Buttons (for .btn class) */
.btn.toggle {
    background: var(--surface-solid);
    border: 2px solid var(--btn-toggle-border);
    color: var(--text-primary);
}

.btn.toggle:hover {
    border-color: var(--btn-toggle-border-hover);
    background: var(--bg-card);
}

.btn.toggle.active {
    background: var(--brand-color);
    border-color: var(--border-accent);
    color: white;
}

.btn.toggle.active:hover {
    background: var(--brand-color-hover);
    border-color: var(--brand-color-hover);
}

/* Checkbox styling inside toggle buttons */
.playback-btn.toggle input[type="checkbox"],
.btn.toggle input[type="checkbox"] {
    vertical-align: middle;
    cursor: pointer;
    width: 14px;
    height: 14px;
    margin: 0 var(--space-xs) 0 0;
}

/* Default for uncategorized buttons */
.playback-btn:not(.play):not(.pause):not(.add):not(.fullscreen):not(.blind):not(.navigation):not(.settings):not(.toggle):not(.screensaver-settings-btn) {
    background: var(--btn-toggle-border);
    color: white;
}

/* Only apply hover effects on devices with real hover (not touch) */
/* Note: Removed translateY(-2px) which caused flicker at button edges */
@media (hover: hover) {
    .playback-btn:hover {
        box-shadow: var(--shadow-md);
    }
}

.playback-btn:disabled {
    background: var(--bg-badge);
    color: var(--text-secondary);
    cursor: not-allowed;
    transform: none;
}

/* All buttons use uniform disabled styling for consistency */

.playback-btn.debounced {
    background: var(--status-warning-bg);
    color: var(--text-primary);
    cursor: wait;
    transform: none;
    opacity: 0.7;
}

/* Position Slider */
.position-slider-container {
    position: relative;
    padding: var(--space-sm) var(--space-3xl) var(--space-2xs) var(--space-3xl); /* Top padding for labels row, sides match text alignment */
    margin: var(--space-2xs) 0;
    --slider-progress: 0%; /* Default for CSS label positioning before JS runs */
}

.slider-track-wrapper {
    position: relative;
    padding: var(--space-2xs) 0; /* Small gap between labels and track */
}

/* Mobile position slider - same custom styling as desktop, just scaled */
@media (max-width: 768px) {
    .position-slider-container {
        padding: var(--space-sm) var(--space-2xl) var(--space-2xs) var(--space-2xl);
        margin: 0;
    }

    .slider-min,
    .slider-max,
    .slider-current-pos {
        font-size: var(--font-size-2xs);
    }

    /* Fixed labels - positioned by JS using same calculation as moving label */
    .slider-min,
    .slider-max {
        /* JS will set left and transform */
    }

    .slider-track-wrapper {
        padding: 0;
    }

    /* Mobile slider with larger touch target */
    .position-slider {
        --thumb-width: 16px; /* Used by JS for label positioning */
        height: 20px;
    }

    /* Larger thumb for touch */
    .position-slider::-webkit-slider-thumb,
    .position-slider::slider-thumb {
        width: 16px;
        height: 16px;
        margin-top: -7px;
    }
}

/* All three labels share same styling so they merge perfectly */
.slider-min,
.slider-max,
.slider-current-pos {
    position: absolute;
    top: -4px; /* Raised higher from track */
    font-size: var(--font-size-2xs);
    pointer-events: none; /* Allow touch to pass through to slider */
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
}

/* Fixed labels - positioned by JS */
.slider-min,
.slider-max {
    /* Match current-pos padding for perfect alignment when overlapping */
    padding: 0 1px;
    /* left and transform set by JS */
}


/* Current position indicator - positioned by JS */
.slider-current-pos {
    color: var(--text-link);
    background: var(--bg-app);
    padding: 0 1px;
    z-index: 1;
    /* left and transform set by JS */
}

.slider-current-pos.dragging {
    position: fixed;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    color: var(--brand-color-hover);
    z-index: 10001;
    background: var(--bg-app);
    padding: 0 var(--space-2xs);
}

/* Range slider styling */
.position-slider {
    --thumb-width: 8px; /* Used by JS for label positioning */
    width: 100%;
    height: 12px; /* Larger click target area */
    -webkit-appearance: none;
    appearance: none;
    /* Track gradient on element itself — cross-browser compatible */
    background: linear-gradient(to right, var(--text-link) 0%, var(--text-link) var(--slider-progress, 0%), var(--slider-track) var(--slider-progress, 0%), var(--slider-track) 100%);
    background-size: 100% 2px;
    background-position: center;
    background-repeat: no-repeat;
    /* 1px radius is proportional to the 2px track height — --radius-sm (4px) would exceed the bar */
    border-radius: 1px;
    cursor: pointer;
    touch-action: pan-y pinch-zoom; /* Allow vertical scroll, but enable horizontal slider interaction */
}

/* Track pseudo-elements: transparent — gradient lives on element itself for cross-browser compat */
.position-slider::-webkit-slider-runnable-track {
    background: transparent;
}

.position-slider::slider-track {
    background: transparent;
}

.position-slider::-moz-range-track {
    height: 2px;
    background: transparent; /* Gradient lives on element itself */
    border: none;
}

.position-slider::-moz-range-progress {
    background: transparent;
    height: 2px;
}

/* Thumb - small circle */
.position-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 8px;
    background: var(--text-link);
    border-radius: var(--radius-full);
    cursor: grab;
    margin-top: -3px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Standard pseudo-element (Chrome 133+, Edge 133+) */
.position-slider::slider-thumb {
    width: 8px;
    height: 8px;
    background: var(--text-link);
    border-radius: var(--radius-full);
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.position-slider::-webkit-slider-thumb:hover,
.position-slider::slider-thumb:hover {
    box-shadow: 0 1px 4px var(--focus-ring);
}

.position-slider::-webkit-slider-thumb:active,
.position-slider::slider-thumb:active {
    cursor: grabbing;
}

.position-slider::-moz-range-thumb {
    width: 8px;
    height: 8px;
    background: var(--text-link);
    border-radius: var(--radius-full);
    cursor: grab;
    border: none;
}

.position-slider::-moz-range-thumb:active {
    cursor: grabbing;
}

/* Focus state */
.position-slider:focus {
    outline: none;
}

.position-slider:focus::-webkit-slider-thumb,
.position-slider:focus::slider-thumb {
    box-shadow: 0 0 0 2px var(--focus-ring);
}

/* Disabled state */
.position-slider:disabled {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
}

.position-slider:disabled::-webkit-slider-thumb,
.position-slider:disabled::slider-thumb {
    cursor: not-allowed;
    background: var(--placeholder-color);
}

.position-slider-container.disabled {
    opacity: var(--disabled-opacity);
}

/* Slider scrub preview - floating word that follows thumb during drag */
.slider-scrub-preview {
    position: fixed;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    z-index: 1000;
    white-space: nowrap;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--brand-color-hover);
    text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff,
        0 0 6px rgba(255, 255, 255, 0.9);
    max-width: calc(100vw - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.slider-scrub-preview.visible {
    opacity: 1;
}

.playback-status {
    text-align: center;
    padding: var(--space-2xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    transition: background 0.25s ease-out, opacity 0.15s ease-out;
    min-height: 80px; /* Minimum height to prevent upward shifting */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center content vertically (consistent with mobile) */
    position: relative; /* For absolute positioning of familiarity bar */
    /* Prevent iOS Safari from auto-scaling text on orientation change */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* "Audio is playing" indicator for browser SpeechSynthesis voices. Piper TTS
   does per-word highlighting; these rules give non-Piper voices equivalent
   visual feedback. audio_core.js wireSentenceHighlight(utterance, mode)
   toggles either body.tts-speaking-word or body.tts-speaking-example so the
   highlight matches what's actually playing — headword during word audio,
   active dialogue line during example/dialogue audio. */

/* A6/A7: "audio is playing" indicator for ALL TTS voices (Piper and browser).
   Same visual language as Piper's per-word .tts-word-active — bg tint +
   border-radius, no text recolor. Shown at "block" scale: A6 highlights the
   whole headword while word audio plays; A7 highlights the whole active
   dialogue line while example audio plays. For Piper, this block-level tint
   is the *baseline* — Piper's per-word .tts-word-active marker rides on top
   for moving word-level emphasis. For browser TTS (no per-word timing),
   block-level tint is the only highlight.

   Three playback contexts: dock (.playback-status), fullscreen
   (.fullscreen-overlay → .fullscreen-word + .fullscreen-dual-form), and
   screensaver (.screensaver-overlay → .screensaver-text + .screensaver-dual-form).
   Fullscreen/screensaver have dark overlay backgrounds, so they get a higher
   alpha (0.20) for visibility — same scale-relative pattern Piper uses
   (its per-word goes 0.25 → 0.4 in those modes). */

/* Dock (light/dark theme on white/dark page background) */
body.tts-speaking-word .playback-status .current-word > strong,
body.tts-speaking-example .playback-status .dialogue-line.is-speaking {
    background-color: rgba(var(--brand-color-rgb), 0.10);
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease;
}
[data-theme="dark"] body.tts-speaking-word .playback-status .current-word > strong,
[data-theme="dark"] body.tts-speaking-example .playback-status .dialogue-line.is-speaking {
    background-color: rgba(var(--brand-color-rgb), 0.15);
}

/* Fullscreen + screensaver overlays (always dark — need stronger tint).
   Headword tints the wrapper div (.fullscreen-word, .screensaver-text)
   instead of `> strong` because (a) screensaver-text is position:absolute
   and the inline strong's bg-color was unreliable, (b) the wrapper only
   contains <strong>headword</strong>+wordType so tinting the whole thing
   is clean. Dialogue lines tint the .dialogue-line span as before. */
body.tts-speaking-word .fullscreen-overlay .fullscreen-word,
body.tts-speaking-example .fullscreen-overlay .fullscreen-dual-form .dialogue-line.is-speaking,
body.tts-speaking-word .screensaver-overlay .screensaver-text,
body.tts-speaking-example .screensaver-overlay .screensaver-dual-form .dialogue-line.is-speaking {
    background-color: rgba(var(--brand-color-rgb), 0.20);
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease;
}

.playback-status.browse-mode,
body.tab-learn .playback-status.browse-mode {
    text-align: left;
    align-items: flex-start;
}

/* Crossfade animation for entry transitions */
.playback-status.crossfade-out {
    opacity: 0;
}

/* Slide transition for finger-following swipe gestures */
.playback-status.sliding {
    transition: none; /* Disable transitions during drag for immediate response */
}

.playback-status.slide-complete {
    transition: transform 0.2s ease-out;
}

/* Incoming slide container (clone for next/prev entry) */
.playback-status-incoming {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 80px;
    text-align: center;
    z-index: 1;
    /* Prevent iOS Safari from auto-scaling text on orientation change */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Wrapper to enable absolute positioning of incoming slide */
.playback-slide-wrapper {
    position: relative;
    overflow: hidden;
}

.current-word {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium); /* Medium weight for prominence over hints */
    color: var(--text-secondary); /* Base color for details; word itself overridden below */
    margin-bottom: var(--space-sm);
    white-space: pre-line; /* Preserve line breaks from \n characters */
    line-height: var(--line-height-normal); /* Compact line spacing to match MyList */
    width: 100%; /* Take full width in flex container */
}

.current-word > strong {
    color: var(--text-primary);
}

/* Related words panel (browse mode only — compounds, families, synonyms, antonyms) */
.related-words {
    margin-top: var(--space-md);
}

.related-row {
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-2xs);
}

.related-label {
    color: var(--text-muted);
    font-weight: var(--font-weight-medium);
}

.related-tag {
    display: inline;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.related-level {
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
    font-weight: var(--font-weight-semibold);
    margin-left: var(--space-2xs);
    opacity: 0.7;
}

/* Dictionary auth prompt (shown when not signed in and no static fallback) */
.dict-auth-prompt {
    text-align: center;
    padding: var(--space-3xl) var(--space-2xl);
    color: var(--text-secondary);
    line-height: var(--line-height-loose);
}
.dict-auth-signin-btn {
    margin-top: var(--space-lg);
    padding: var(--space-lg) var(--space-3xl);
    background: var(--brand-color);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    min-height: var(--touch-target-min);
    touch-action: manipulation;
}

/* Auth modal inline error */
.auth-error {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    padding: var(--space-sm) 0;
}
.auth-forgot-link {
    display: block;
    margin-top: var(--space-md);
    background: none;
    border: none;
    color: var(--text-accent);
    font-size: var(--font-size-sm);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

/* Account sync badge in Settings */
.account-sync-badge {
    display: inline-block;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-sm);
    line-height: var(--line-height-none);
    vertical-align: middle;
    margin-left: var(--space-xs);
}
.sync-ok,
.sync-pending {
    background: var(--bg-badge);
    color: var(--text-secondary);
}
[data-theme="dark"] .auth-error { color: #f87171; }

/* Wrapper for playback-status and rating bar */
.playback-status-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Familiarity Rating Bar - vertical thermometer on right side */
.familiarity-rating-bar {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    z-index: 15;
    padding: var(--space-xs);
}

.familiarity-btn {
    padding: var(--space-md);
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    opacity: 0.5;
    transition: transform 0.15s ease, opacity 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.familiarity-btn svg {
    width: var(--icon-size-mobile);
    height: var(--icon-size-mobile);
}

/* Mobile: 44px touch targets for Learn tab familiarity buttons */
@media (hover: none), (pointer: coarse) {
    .familiarity-btn {
        width: var(--touch-target-min);
        height: var(--touch-target-min);
        padding: 0;
        position: relative;
    }

    .familiarity-btn svg {
        /* iOS Safari fix: flexbox centering can shift during nearby layout changes */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.familiarity-btn:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.familiarity-btn.active {
    opacity: 1;
}

/* Color coding for active states */
.familiarity-btn[data-rating="2"].active {
    color: var(--rating-mastered); /* Green - mastered, totally got it */
}

.familiarity-btn[data-rating="1"].active {
    color: var(--rating-learning); /* Blue - peaceful, steady progress */
}

.familiarity-btn[data-rating="0"].active {
    color: var(--rating-unsure); /* Orange - unsure, needs work */
}

/* Hide rating bar when no word is displayed */
.familiarity-rating-bar.hidden {
    display: none;
}

/* Example sentence styling */
.example-german {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    color: var(--text-secondary);
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);

    line-height: var(--line-height-normal);
    width: 100%;
}

.example-english {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
    line-height: var(--line-height-snug);
    width: 100%;
}

/* IPA pronunciation styling across all modes */
.ipa-pronunciation,
.ipa-inline {
    color: var(--color-ipa);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    display: inline-block; /* Needed for padding to work on inline element */
    padding-top: 0.3em; /* Push IPA down to create space above tie bars */
    /* Font stack with IPA support - Noto Sans has excellent Unicode/IPA coverage on Android */
    font-family: "Noto Sans", "DejaVu Sans", "Gentium Plus", "Charis SIL", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.topic-level-badge {
    display: inline-block;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-sm);
    background: var(--bg-badge);
    color: var(--text-secondary);
    vertical-align: middle;
    line-height: var(--line-height-none);
    margin-left: var(--space-2xs);
}

/* Register tags — formality badges next to word type */
.register-tag {
    display: inline-block;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-sm);
    vertical-align: middle;
    line-height: var(--line-height-none);
    margin-left: var(--space-2xs);
    text-transform: capitalize;
}
/* All register badges use neutral styling — the label text differentiates */
.register-formal,
.register-informal,
.register-colloquial,
.register-literary,
.register-technical,
.register-dated,
.register-vulgar {
    background: var(--bg-badge);
    color: var(--text-secondary);
}

/* Phrase badges — CEFR level + frequency for Phrases & Idioms dictionary */
.phrase-badge {
    display: inline-block;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-sm);
    vertical-align: middle;
    line-height: var(--line-height-none);
    margin-left: var(--space-2xs);
}
/* All phrase badges use neutral styling */
.phrase-level,
.phrase-freq-very_common,
.phrase-freq-common,
.phrase-freq-less_common {
    background: var(--bg-badge);
    color: var(--text-secondary);
}

/* Trending badges — source, freshness, cross-reference for Trending Words dictionary */
.trending-badge {
    display: inline-block;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-sm);
    vertical-align: middle;
    line-height: var(--line-height-none);
    margin-left: var(--space-2xs);
}
/* All trending badges use neutral styling */
.trending-source-news,
.trending-source-trends,
.trending-source-seasonal,
.trending-new,
.trending-xref,
.trending-xref-new {
    background: var(--bg-badge);
    color: var(--text-secondary);
}

/* Entry meta badges — role-based pair for the inline metadata after the
   word + IPA + word-type. The "home" badge identifies which deck the
   user is currently in (e.g. BASICS in the BASICS deck, DV in the DV
   deck) and gets primary emphasis. Other memberships render after a
   " · " separator at secondary emphasis.
   The separator " · " is emitted as real text by JS, not a CSS pseudo,
   so copy-paste captures it. */
.entry-meta-primary {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.entry-meta-secondary {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--text-secondary);
}

/* Taboo badges — offensive level (color-coded 1-5) + category */
.taboo-badge {
    display: inline-block;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-sm);
    vertical-align: middle;
    line-height: var(--line-height-none);
    margin-left: var(--space-2xs);
}
/* All taboo badges use neutral styling — level number differentiates */
.taboo-level-1,
.taboo-level-2,
.taboo-level-3,
.taboo-level-4,
.taboo-level-5,
.taboo-category,
.taboo-cefr {
    background: var(--bg-badge);
    color: var(--text-secondary);
}

/* Taboo extras: never-use warning (Tier B), multi-sense, usage snippets, advisories */
.taboo-warning {
    display: block;
    margin-top: var(--space-md);
    padding: var(--space-md);
    border-left: 3px solid var(--color-warning);
    background: var(--bg-badge);
    border-radius: var(--radius-sm);
}
.taboo-warning-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-warning);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2xs);
}
.taboo-warning-text {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}
.taboo-extras-section {
    display: block;
    margin-top: var(--space-md);
}
.taboo-extras-label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
}
.taboo-extras-body {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}
.taboo-sense {
    display: flex;
    margin-top: var(--space-xs);
}
.taboo-sense-num {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-right: var(--space-sm);
    min-width: 1.5em;
}
.taboo-sense-body { flex: 1; }
.taboo-sense-de {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}
.taboo-sense-en {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: var(--line-height-relaxed);
}
.taboo-sense-meta {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--space-2xs);
}
.taboo-snippet {
    display: block;
    margin-top: var(--space-sm);
    padding-left: var(--space-md);
    border-left: 2px solid var(--border-divider);
}
.taboo-snippet-context {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-2xs);
}
.taboo-snippet-text {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}
.taboo-snippet-en {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: var(--line-height-relaxed);
}
.taboo-snippet-reaction {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--space-2xs);
}

/* Shared Lists — view modal word list + management rows */
.shared-list-words {
    max-height: 40vh;
    overflow-y: auto;
    border: 1px solid var(--border-divider);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
}
.shared-list-word-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
}
.shared-list-word-row:last-child { border-bottom: none; }
.shared-list-word { font-weight: var(--font-weight-medium); }
.shared-list-translation {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-left: var(--space-md);
    text-align: right;
    flex-shrink: 0;
}
.share-copy-btn {
    background: var(--brand-color);
    color: white;
    border: none;
    padding: var(--space-md) var(--space-2xl);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}
.share-copy-btn:active { opacity: 0.8; }
.shared-list-manage-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-subtle);
}
.shared-list-manage-row:last-child { border-bottom: none; }
.shared-list-url {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    word-break: break-all;
    margin-top: var(--space-2xs);
}
.shared-list-delete-btn {
    background: none;
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
    padding: var(--space-xs) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    flex-shrink: 0;
}
.shared-list-delete-btn:active { opacity: 0.7; }

/* Combined Picker — entry rows with checkboxes */
.picker-entry {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    border: 1px solid var(--border-divider);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
    background: var(--bg-card);
    cursor: pointer;
}
.picker-entry:active {
    background: var(--bg-hover);
}
.picker-entry input[type="checkbox"] {
    margin-top: var(--space-2xs);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--brand-color);
}
.picker-section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: var(--space-lg) 0 var(--space-md) 0;
}
.picker-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-2xl);
    gap: var(--space-md);
}
.picker-toggle-link {
    font-size: var(--font-size-sm);
    color: var(--text-accent);
    cursor: pointer;
    background: none;
    border: none;
    text-decoration: underline;
    padding: 0;
}
.picker-ai-pending {
    font-size: var(--font-size-md);
    color: var(--text-muted);
    padding: var(--space-md) var(--space-2xs);
    margin: var(--space-lg) 0 var(--space-md) 0;
}

/* AI Tutor panel — inline below word details */
.ai-tutor-trigger {
    margin-top: var(--space-md);
}


.ai-tutor-btn {
    background: none;
    border: 1px solid var(--brand-color);
    color: var(--brand-color);
    padding: var(--space-xs) var(--space-xl);
    border-radius: var(--radius-2xl);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background 0.2s ease;
}

.ai-tutor-btn:hover {
    background: var(--brand-color);
    color: white;
}

/* Error Report (browse mode) */
.error-report-trigger {
    margin-top: var(--space-md);
}

.error-report-link {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    cursor: pointer;
    text-decoration: underline;
    padding: var(--space-xs);
}

.error-report-link:hover {
    color: var(--text-secondary);
}

.error-report-form {
    margin-top: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    text-align: left;
    font-size: var(--font-size-sm);
}

.error-report-form fieldset {
    border: none;
    padding: 0;
    margin: 0 0 var(--space-md) 0;
}

.error-report-form legend {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-xs);
    color: var(--text-primary);
}

.error-report-form label {
    display: block;
    padding: var(--space-2xs) 0;
    cursor: pointer;
}

.error-report-form textarea {
    width: 100%;
    min-height: 60px;
    padding: var(--space-sm);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    background: var(--surface-solid);
    color: var(--text-primary);
}

.error-report-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: flex-end;
    margin-top: var(--space-md);
}

.error-report-cancel {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.error-report-submit {
    background: var(--brand-color);
    color: white;
    border: none;
    padding: var(--space-xs) var(--space-xl);
    border-radius: var(--radius-2xl);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.error-report-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-tutor-panel {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-light);
}

.ai-tutor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.ai-tutor-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
}

.ai-tutor-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-size-2xl);
    padding: var(--space-xs);
    line-height: var(--line-height-none);
}

.ai-tutor-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.ai-tutor-chip {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    padding: var(--space-xs) var(--space-lg);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease;
}

.ai-tutor-chip:hover {
    background: var(--border-light);
}

.ai-tutor-custom {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.ai-tutor-input {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    background: var(--surface-solid);
    color: var(--text-primary);
}

.ai-tutor-input:focus {
    outline: none;
    border-color: var(--brand-color);
}

.ai-tutor-send {
    background: var(--brand-color);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-sm);
    cursor: pointer;
    white-space: nowrap;
}

.ai-tutor-thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    padding: var(--space-xs);
}

.ai-tutor-msg {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-loose);
    padding: var(--space-md);
    border-radius: var(--radius-xl);
    max-width: 85%;
    word-wrap: break-word;
}

.ai-tutor-msg.user {
    align-self: flex-end;
    background: var(--brand-color);
    color: white;
    border-bottom-right-radius: var(--radius-sm);
}

.ai-tutor-msg.tutor {
    align-self: flex-start;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom-left-radius: var(--radius-sm);
}

.ai-tutor-msg ul {
    margin: var(--space-xs) 0;
    padding-left: var(--space-2xl);
}

.ai-tutor-msg li {
    margin-bottom: var(--space-2xs);
}

.ai-tutor-thinking {
    align-self: flex-start;
    color: var(--text-muted);

    font-size: var(--font-size-sm);
    padding: var(--space-xs) var(--space-md);
}

.ai-tutor-error {
    color: var(--color-error);
}

.ai-tutor-limit {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    padding: var(--space-md);

}

/* Context-specific pronunciation sizing and layout */
.current-word .ipa-pronunciation {
    font-size: var(--font-size-md); /* Normal playback: slightly smaller than 14px definitions */
    display: block; /* Force new line (override inline-block from base) */
    width: 100%; /* Take full width to prevent inline wrapping */
}

.item-content .ipa-pronunciation {
    font-size: var(--font-size-md); /* Match main playback for consistency */
    display: block; /* Force new line in myList (override inline-block from base) */
    width: 100%; /* Take full width to prevent inline wrapping */
}

.progress-info {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-style: normal;
}

.progress-stats {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);

}

/* ============================================
   Quiz Mode — Active Recall flashcard overlay
   ============================================ */

/* Split Play Button — Quiz popup above Play */
.split-play-container {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.split-quiz-btn {
    width: 36px;
    height: 36px;
    padding: var(--space-sm);
    border-radius: var(--radius-lg);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.split-quiz-btn:hover {
    background: var(--hover-overlay);
}

.split-quiz-btn svg {
    width: var(--icon-size-desktop);
    height: var(--icon-size-desktop);
    flex-shrink: 0;
}

.quiz-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    /* Above floating-add-btn (15), familiarity-rating-bar (15), and other
       elements in the Learn-tab playback area. Without this, layout shifts
       at narrow widths can put those elements in front of the .quiz-x-close
       close button, making it appear unresponsive. */
    z-index: 50;
}

/* Start screen */
.quiz-start,
.quiz-results {
    position: relative;
    text-align: center;
    padding: var(--space-2xl);
    max-width: 600px;
    width: 100%;
}

.quiz-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-md) 0;
}

.quiz-subtitle {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    margin: 0 0 var(--space-2xl) 0;
}

.quiz-config-group {
    margin-bottom: var(--space-2xl);
}

.quiz-config-label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
    font-weight: var(--font-weight-semibold);
}

.quiz-pills {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.quiz-pill {
    padding: var(--space-md) var(--space-xl);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: all 0.15s;
}

.quiz-pill.active {
    background: var(--brand-color);
    color: white;
    border-color: var(--brand-color);
}

.quiz-start-btn {
    display: block;
    width: 100%;
    padding: var(--space-xl) var(--space-2xl);
    background: var(--brand-color);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    margin-bottom: var(--space-lg);
}

.quiz-cancel-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    cursor: pointer;
    padding: var(--space-md);
}

/* Flashcard */
.quiz-card-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 600px;
    padding: var(--space-2xl);
}

.quiz-progress {
    width: 100%;
    margin-bottom: var(--space-2xl);
}

.quiz-progress-text {
    display: block;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.quiz-progress-bar {
    width: 100%;
    height: 4px;
    background: var(--border-light);
    /* 2px radius is proportional to the 4px bar height */
    border-radius: 2px;
    overflow: hidden;
}

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

.quiz-card {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-3xl) var(--space-2xl);
    text-align: center;
    cursor: pointer;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quiz-question {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

/* Quiz flashcard uses display sizes intentionally outside the type scale
   (--font-size-3xl maxes at 24px; flashcards need larger visual weight). */
.quiz-word {
    font-size: 26px;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: var(--line-height-snug);
    text-align: center; /* center multi-line phrases (single words already centered by parent flex) */
    word-break: break-word;
}

.quiz-ipa {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
}

.quiz-word-type {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);

}

.quiz-direction-hint {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    margin-top: var(--space-sm);
}

/* Answer */
.quiz-answer {
    margin-top: var(--space-xl);
}

.quiz-answer-divider {
    width: 60px;
    height: 1px;
    background: var(--border-light);
    margin: 0 auto var(--space-xl) auto;
}

.quiz-answer-text {
    display: block;
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-success-hover);
    margin-bottom: var(--space-sm);
}

.quiz-answer-german {
    color: var(--text-primary);
}

.quiz-example {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--space-lg);
    line-height: var(--line-height-relaxed);

}

/* Buttons */
.quiz-reveal-btn {
    margin-top: var(--space-2xl);
    padding: var(--space-lg) var(--space-3xl);
    background: var(--brand-color);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.quiz-rating-btns {
    margin-top: var(--space-2xl);
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.quiz-rate-btn {
    padding: var(--space-lg) var(--space-xl);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    color: white;
    min-width: 100px;
}

.quiz-rate-knew { background: var(--color-success-hover); }
.quiz-rate-almost { background: var(--color-warning); }
.quiz-rate-didnt { background: var(--color-error); }

/* Results screen */
.quiz-score {
    font-size: 36px;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: var(--space-xl) 0;
}

.quiz-score-pct {
    font-size: 20px;
    font-weight: var(--font-weight-normal);
    color: var(--text-secondary);
}

.quiz-score-breakdown {
    margin: var(--space-2xl) auto;
    max-width: 200px;
    text-align: left;
}

.quiz-score-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    font-size: var(--font-size-md);
    color: var(--text-primary);
}

.quiz-score-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.quiz-score-knew .quiz-score-dot { background: var(--color-success-hover); }
.quiz-score-almost .quiz-score-dot { background: var(--color-warning); }
.quiz-score-didnt .quiz-score-dot { background: var(--color-error); }

.quiz-retry-btn {
    display: block;
    width: 100%;
    padding: var(--space-xl) var(--space-2xl);
    background: var(--brand-color);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    margin-bottom: var(--space-lg);
}

/* X close button (top-right corner of start/card screens).
   Uses --text-secondary (matches the input-sheet-close button) so it doesn't
   look disabled. Size is --touch-target-min (44px) to meet the CLAUDE.md
   touch target rule and prevent iOS Safari from missing taps on a small
   target. touch-action: manipulation tells iOS to skip its 300ms tap-detection
   delay and fire click immediately. z-index is defensive — .quiz-container
   already sits at z-index 50. */
.quiz-x-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: var(--touch-target-min, 44px);
    height: var(--touch-target-min, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-none);
    cursor: pointer;
    z-index: 1;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.quiz-x-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* "Done" button on results screen */
.quiz-close-btn {
    display: block;
    width: 100%;
    padding: var(--space-xl) var(--space-2xl);
    background: none;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: var(--font-size-xl);
    cursor: pointer;
}

/* --- Cloze Quiz --- */

.quiz-cloze-card {
    text-align: left;
}

.quiz-cloze-sentence {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-loose);
    color: var(--text-primary);
    padding: var(--space-2xl) 0;
}

.quiz-cloze-blank {
    display: inline-block;
    min-width: 80px;
    border-bottom: 2px solid var(--brand-color);
    color: var(--brand-color);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    margin: 0 var(--space-xs);
}

.quiz-cloze-hint-btn {
    background: none;
    border: none;
    color: var(--brand-color);
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: 0;
    margin-bottom: var(--space-lg);
}

.quiz-cloze-hint {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);

    margin-bottom: var(--space-lg);
}

.quiz-cloze-word-hint {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    margin-bottom: var(--space-md);
}

.quiz-cloze-input-area {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.quiz-cloze-input {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xl);
    color: var(--text-primary);
    background: var(--bg-card);
}

.quiz-cloze-input:focus {
    outline: none;
    border-color: var(--brand-color);
}

.quiz-cloze-feedback {
    margin-top: var(--space-2xl);
}

.quiz-cloze-correct-msg {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-success-hover);
    margin-bottom: var(--space-md);
}

.quiz-cloze-incorrect-msg {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-error);
    margin-bottom: var(--space-md);
}

.quiz-cloze-your-answer {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.quiz-cloze-answer-wrong {
    text-decoration: line-through;
    color: var(--color-error);
}

.quiz-cloze-answer-correct {
    font-weight: var(--font-weight-semibold);
    color: var(--color-success-hover);
}

.quiz-cloze-full-sentence {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-relaxed);
    color: var(--text-primary);
    margin-top: var(--space-md);
}

.quiz-cloze-next {
    margin-top: var(--space-2xl);
}

.quiz-cloze-add-btn {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-xl);
    background: var(--brand-color);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.quiz-cloze-add-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Pronunciation quiz */
.quiz-pron-instruction {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-top: var(--space-md);
}
.quiz-pron-listen-btn {
    margin-top: var(--space-lg);
    padding: var(--space-sm) var(--space-xl);
    background: transparent;
    color: var(--brand-color);
    border: 1px solid var(--brand-color);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.quiz-pron-record-btn {
    display: block;
    margin: var(--space-lg) auto 0;
    padding: var(--space-lg) var(--space-3xl);
    background: var(--brand-color);
    color: #fff;
    border: none;
    border-radius: var(--radius-2xl);
    font-size: var(--font-size-md);
    cursor: pointer;
    min-width: 120px;
}
.quiz-pron-record-btn.recording {
    background: var(--color-error);
    animation: pulse-recording 1s ease-in-out infinite;
}
@keyframes pulse-recording {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.quiz-pron-record-btn:disabled {
    opacity: 0.5;
    cursor: default;
}
.quiz-pron-feedback {
    margin-top: var(--space-xl);
    text-align: center;
}
.quiz-pron-heard, .quiz-pron-target {
    font-size: var(--font-size-sm);
    margin-top: var(--space-sm);
    color: var(--text-secondary);
}
.quiz-pron-retry-btn {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-xl);
    background: transparent;
    color: var(--brand-color);
    border: 1px solid var(--brand-color);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.quiz-pron-compare {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}
.quiz-pron-play-btn {
    padding: var(--space-sm) var(--space-lg);
    background: transparent;
    color: var(--brand-color);
    border: 1px solid var(--brand-color);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.quiz-pron-attempts {
    margin-top: var(--space-lg);
}
.quiz-pron-attempt-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
    justify-content: center;
}
.quiz-pron-attempt-correct {
    color: var(--color-success);
    font-size: var(--font-size-sm);
}
.quiz-pron-attempt-wrong {
    color: var(--color-error);
    font-size: var(--font-size-sm);
}
.quiz-pron-checking {
    color: var(--text-secondary);

}

[data-theme="dark"] .quiz-cloze-input {
    background: var(--bg-list-items);
    border-color: var(--border-light);
}

/* --- MCQ Quiz --- */

.quiz-mcq-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
    margin-top: var(--space-2xl);
}

.quiz-mcq-option {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-lg) var(--space-xl);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: var(--font-size-md);
    text-align: left;
    cursor: pointer;
    min-height: var(--touch-target-min, 44px);
    transition: background 0.15s, border-color 0.15s;
}

.quiz-mcq-option:hover {
    background: var(--bg-hover);
    border-color: var(--border-medium);
}

.quiz-mcq-number {
    font-weight: var(--font-weight-bold);
    color: var(--text-tertiary);
    min-width: 1.2em;
}

.quiz-mcq-option.correct {
    background: var(--color-success-hover);
    color: #fff;
    border-color: var(--color-success-hover);
}

.quiz-mcq-option.wrong {
    background: var(--color-error);
    color: #fff;
    border-color: var(--color-error);
}

.quiz-mcq-option.dimmed {
    opacity: 0.4;
}

.quiz-mcq-option.correct .quiz-mcq-number,
.quiz-mcq-option.wrong .quiz-mcq-number {
    color: rgba(255, 255, 255, 0.7);
}

.quiz-source-badge {
    display: inline-block;
    margin-top: var(--space-sm);
    padding: var(--space-2xs) var(--space-md);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    background: var(--bg-hover);
    border-radius: var(--radius-md);
}

/* Exams tab — close button at the top of Speaking/Writing panels */
.exams-panel-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-md);
}
.exams-panel-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--radius-full);
    color: var(--text-muted);
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-none);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.exams-panel-close:hover,
.exams-panel-close:focus-visible {
    background: var(--bg-badge);
    color: var(--text-primary);
    outline: none;
}

/* Exams tab — 2-section layout (Speaking & Writing / Goethe-format practice) */
.exams-section {
    padding: var(--space-2xl) var(--space-2xl) var(--space-3xl);
    text-align: center;
}
.exams-section + .exams-section {
    border-top: 1px solid var(--border-light);
}
.exams-section-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
}
.exams-section-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0 0 var(--space-2xl) 0;
}

/* Wide launch cards (Quiz / Speak / Write) — title + descriptive hint */
.exams-launch-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    max-width: 480px;
    margin: 0 auto;
}
.exams-launch-card {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xl) var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    min-height: var(--touch-target-min, 44px);
    transition: background 0.15s, border-color 0.15s;
}
.exams-launch-card:hover,
.exams-launch-card:focus-visible {
    border-color: var(--brand-color);
    outline: none;
}
.exams-launch-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.exams-launch-card-hint {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Level grid (A1–C2) for Exam preparation section */
.exams-level-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: 360px;
    margin: 0 auto;
}
.exam-level-card {
    padding: var(--space-2xl) var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    min-height: var(--touch-target-min, 44px);
    transition: background 0.15s, border-color 0.15s;
}
.exam-level-card:hover,
.exam-level-card:focus-visible {
    border-color: var(--brand-color);
    color: var(--brand-color);
    outline: none;
}

/* ═══ Exam Deck UI (Effort C) ═══ */

/* Deck level page */
.deck-level-page {
    padding: var(--space-xl);
    text-align: center;
}
.deck-back-btn {
    display: inline-block;
    background: none;
    border: none;
    color: var(--brand-color);
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: var(--space-xs) 0;
    margin-bottom: var(--space-lg);
}
.deck-level-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2xl);
}
.deck-skill-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    max-width: 320px;
    margin: 0 auto;
}
.deck-skill-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xl) var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    min-height: var(--touch-target-min, 44px);
    transition: border-color 0.15s;
}
.deck-skill-card:hover,
.deck-skill-card:focus-visible {
    border-color: var(--brand-color);
    outline: none;
}
.deck-skill-card[disabled] {
    opacity: 0.4;
    cursor: default;
}
.deck-skill-label {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.deck-skill-label-en {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.deck-skill-progress {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.deck-skill-complete {
    font-size: var(--font-size-2xs);
    color: var(--color-success);
    font-weight: var(--font-weight-medium);
}

/* Card view */
.deck-card-view {
    padding: var(--space-xl);
    max-width: 600px;
    margin: 0 auto;
}
.deck-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xl);
}
.deck-card-counter {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}
.deck-card-label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2xl);
    text-align: center;
}

/* Prompt + Reveal content */
.deck-card-prompt,
.deck-card-reveal {
    text-align: left;
    line-height: var(--line-height-relaxed);
}
.deck-task-context {
    font-size: var(--font-size-md);
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    line-height: var(--line-height-relaxed);
}
.deck-task-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
    margin: var(--space-lg) 0 var(--space-sm);
}
.deck-task-text {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-lg);
}
.deck-task-translation {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-lg);
}
.deck-task-points {
    list-style: disc;
    padding-left: var(--space-2xl);
    margin-bottom: var(--space-lg);
    font-size: var(--font-size-md);
    color: var(--text-secondary);
}
.deck-task-points li {
    margin-bottom: var(--space-xs);
}
.deck-task-questions {
    list-style: decimal;
    padding-left: var(--space-2xl);
    margin-bottom: var(--space-lg);
    font-size: var(--font-size-md);
    color: var(--text-secondary);
}
.deck-task-questions li {
    margin-bottom: var(--space-md);
    line-height: var(--line-height-relaxed);
}
.deck-task-questions li.deck-correct {
    color: var(--color-success);
    font-weight: var(--font-weight-semibold);
}
.deck-task-quote {
    border-left: 3px solid var(--border-light);
    padding-left: var(--space-xl);
    margin: var(--space-lg) 0;
    font-size: var(--font-size-md);
    color: var(--text-secondary);
}
.deck-task-quote cite {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: var(--space-sm);
}
.deck-reading-text {
    font-size: var(--font-size-md);
    color: var(--text-primary);
    line-height: var(--line-height-loose);
    padding: var(--space-xl);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    margin-bottom: var(--space-xl);
}
.deck-form-fields {
    margin-bottom: var(--space-lg);
}
.deck-form-field {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
    padding: var(--space-xs) 0;
}
.deck-dialogue {
    margin-bottom: var(--space-lg);
}
.deck-dialogue-turn {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
    padding: var(--space-xs) 0;
    line-height: var(--line-height-relaxed);
}
.deck-vocab-list {
    margin-bottom: var(--space-lg);
}
.deck-vocab-item {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    padding: var(--space-2xs) 0;
}
.deck-vocab-word {
    font-weight: var(--font-weight-semibold);
}
.deck-vocab-sep {
    color: var(--text-muted);
}
.deck-vocab-meaning {
    color: var(--text-muted);
}

/* Reveal label */
.deck-reveal-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--brand-color);
    margin-bottom: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-light);
}

/* Buttons */
.deck-reveal-btn {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: var(--space-2xl) auto;
    padding: var(--space-lg) var(--space-2xl);
    background: var(--brand-color);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    min-height: var(--touch-target-min, 44px);
}
.deck-listen-btn {
    display: inline-block;
    margin: var(--space-lg) 0;
    padding: var(--space-md) var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-md);
    cursor: pointer;
    min-height: var(--touch-target-min, 44px);
}
.deck-card-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}
.deck-next-btn {
    padding: var(--space-md) var(--space-2xl);
    background: var(--brand-color);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    min-height: var(--touch-target-min, 44px);
}
.deck-back-to-deck-btn {
    padding: var(--space-md) var(--space-2xl);
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-md);
    cursor: pointer;
    min-height: var(--touch-target-min, 44px);
}

/* Transcribe sub-tab toggle */
.transcribe-subtab-toggle {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-md) 0;
}
.transcribe-subtab-btn {
    padding: var(--space-sm) var(--space-2xl);
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-2xl);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.transcribe-subtab-btn.active {
    background: var(--brand-color);
    color: #fff;
    border-color: var(--brand-color);
}

/* Writing Practice */
.writing-input-area {
    margin-top: var(--space-lg);
}
.writing-textarea {
    width: 100%;
    padding: var(--space-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
    box-sizing: border-box;
}
.writing-textarea:focus {
    outline: none;
    border-color: var(--brand-color);
}
.writing-char-count {
    text-align: right;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: var(--space-2xs);
}
.writing-submit-btn {
    display: block;
    width: 100%;
    margin-top: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    background: var(--brand-color);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-md);
    cursor: pointer;
}
.writing-status {
    text-align: center;
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
    font-weight: var(--font-weight-semibold);
}
.writing-status-correct {
    background: var(--bg-list-items);
    color: var(--color-success);
}
.writing-status-errors {
    background: var(--bg-list-items);
    color: var(--color-error);
}
.writing-comparison {
    margin-bottom: var(--space-lg);
}
.writing-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xs);
}
.writing-original, .writing-corrected {
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    background: var(--bg-list-items);
}
.writing-text {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    white-space: pre-wrap;
}
.writing-corrections {
    margin-bottom: var(--space-lg);
}
.writing-correction-item {
    padding: var(--space-md);
    border-left: 3px solid var(--brand-color);
    margin-bottom: var(--space-md);
    background: var(--bg-list-items);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.writing-correction-change {
    margin-bottom: var(--space-xs);
}
.writing-correction-original {
    color: var(--color-error);
    text-decoration: line-through;
}
.writing-correction-fixed {
    color: var(--color-success);
    font-weight: var(--font-weight-semibold);
}
.writing-correction-explanation {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.writing-feedback {
    padding: var(--space-md);
    background: var(--bg-list-items);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    font-size: var(--font-size-sm);
}
.writing-tip {
    padding: var(--space-md);
    background: var(--bg-list-items);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-lg);
}

/* Speaking Practice */
.speaking-mode-selector {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}
.speaking-mode-pill {
    padding: var(--space-sm) var(--space-xl);
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-2xl);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.speaking-mode-pill.active {
    background: var(--brand-color);
    color: #fff;
    border-color: var(--brand-color);
}
/* Practice source selector (shared by Speaking & Writing practice) */
.practice-source-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.practice-source-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    white-space: nowrap;
}
.practice-source-select {
    font-size: var(--font-size-sm);
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-width: 120px;
    cursor: pointer;
}

/* Target words display (shared by Speaking & Writing) */
.target-words-display {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
}
.target-word-card {
    line-height: var(--line-height-normal);
}
.target-word-card .target-word-de {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.target-word-card .target-word-sep {
    color: var(--text-muted);
    margin: 0 var(--space-xs);
}
.target-word-card .target-word-en {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* Word usage checklist (shared by Speaking & Writing) */
.word-checklist {
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
}
.word-checklist-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}
.word-check-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xs) 0;
    font-size: var(--font-size-sm);
}
.word-check-icon {
    font-size: var(--font-size-md);
    width: 20px;
    text-align: center;
}
.word-check-used .word-check-icon {
    color: var(--color-success);
}
.word-check-missed .word-check-icon {
    color: var(--text-muted);
}
.word-check-missed .word-check-label {
    color: var(--text-muted);
}
.word-checklist-summary {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--space-md);
    text-align: center;
}

/* Inline umlaut picker (reusable — writing practice, cloze quiz) */
.inline-umlaut-picker {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}
.inline-umlaut-picker .umlaut-btn {
    min-width: 36px;
    height: var(--touch-target-min);
    padding: 0 var(--space-md);
    font-size: var(--font-size-2xl);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    background: var(--surface-solid, var(--bg-card));
}

.speaking-hint-btn {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    padding: var(--space-sm) var(--space-xl);
    border-radius: var(--radius-lg);
    cursor: pointer;
    margin-top: var(--space-sm);
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.speaking-hint-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);

    margin-top: var(--space-sm);
}
.speaking-rp-hint-btn {
    display: inline;
    margin-left: var(--space-md);
}
.speaking-shadow-listen-btn {
    display: block;
    margin: var(--space-md) auto var(--space-xs);
    padding: var(--space-sm) var(--space-xl);
    background: var(--brand-color);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    cursor: pointer;
}
.speaking-shadow-sentence {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-sm);
}
.speaking-scenario-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-xs);
}
.speaking-scenario-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}
.speaking-scenario-context {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);

    margin-bottom: var(--space-md);
}
.speaking-scenario-dialogue {
    text-align: left;
}
.speaking-rp-partner {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-section);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-sm);
}
.speaking-rp-you {
    padding: var(--space-sm) var(--space-md);
    background: rgba(var(--brand-color-rgb), 0.1);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xs);
    font-size: var(--font-size-sm);
}
.speaking-rp-done {
    opacity: 0.5;
}
.speaking-rp-replay-btn,
.speaking-rp-start-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2xs) var(--space-xs);
    margin-left: var(--space-xs);
    vertical-align: middle;
    color: var(--brand-color);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}
.speaking-rp-replay-btn {
    opacity: 0.6;
}
.speaking-rp-replay-btn:hover,
.speaking-rp-start-btn:hover {
    opacity: 1;
}
.speaking-rp-cue {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: var(--space-sm);
    font-weight: var(--font-weight-medium);
}
.speaking-rp-phase {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin: var(--space-lg) 0 var(--space-xs);
    padding-bottom: var(--space-2xs);
    border-bottom: 1px solid var(--border-color);
}
.speaking-rp-phase:first-child {
    margin-top: 0;
}
.speaking-deep-mode-toggle {
    display: flex;
    gap: var(--space-2xs);
    flex-shrink: 0;
}
.speaking-deep-mode-btn {
    padding: var(--space-2xs) var(--space-md);
    border: 1.5px solid var(--text-primary);
    border-radius: var(--radius-2xl);
    background: transparent;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    color: var(--text-primary);
}
.speaking-deep-mode-btn.active {
    background: var(--text-primary);
    color: var(--surface-solid);
    border-color: var(--text-primary);
}
.speaking-prompt-card {
    padding: var(--space-2xl);
    background: var(--bg-list-items);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-lg);
    text-align: center;
}
.speaking-prompt-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-sm);
}
.speaking-prompt-en {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-sm);
}
.speaking-prompt-hint {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);

}
.speaking-new-prompt-btn {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-xl);
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.speaking-prompt-reminder {
    padding: var(--space-md);
    background: var(--bg-list-items);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
    text-align: center;
}
.speaking-transcription {
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}
.speaking-actions {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}
.speaking-retry-btn {
    flex: 1;
    padding: var(--space-md);
    background: transparent;
    color: var(--brand-color);
    border: 1px solid var(--brand-color);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    cursor: pointer;
}

[data-theme="dark"] .speaking-prompt-card,
[data-theme="dark"] .speaking-prompt-reminder {
    background: var(--bg-list-items);
}
[data-theme="dark"] .speaking-mode-pill {
    border-color: var(--border-light);
    color: var(--text-secondary);
}
[data-theme="dark"] .speaking-rp-partner {
    background: var(--bg-section);
}
[data-theme="dark"] .speaking-rp-you {
    background: rgba(var(--brand-color-rgb), 0.15);
}

/* Grammar Drills */
.grammar-drill-selector {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-2xl);
    flex-wrap: wrap;
}
.grammar-drill-pill {
    padding: var(--space-sm) var(--space-xl);
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-2xl);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.grammar-drill-pill.active {
    background: var(--brand-color);
    color: #fff;
    border-color: var(--brand-color);
}
.grammar-drill-card {
    text-align: center;
    padding: var(--space-2xl);
}
.grammar-drill-progress {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-lg);
}
.grammar-drill-prompt {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}
.grammar-drill-word {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}
.grammar-drill-hint {
    font-size: var(--font-size-sm);
    color: var(--text-muted);

    margin-bottom: var(--space-2xl);
}
.grammar-drill-choices {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.grammar-drill-choice {
    padding: var(--space-md) var(--space-2xl);
    border: 1px solid var(--border-light);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-md);
    cursor: pointer;
    min-width: 80px;
    transition: background 0.15s ease;
}
.grammar-drill-choice:hover {
    background: var(--border-light);
}
.grammar-drill-choice.correct {
    background: var(--color-success);
    color: #fff;
    border-color: var(--color-success);
}
.grammar-drill-choice.dimmed {
    opacity: 0.4;
}
.grammar-drill-input-row {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.grammar-drill-input {
    padding: var(--space-md) var(--space-xl);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-md);
    background: var(--surface-solid);
    color: var(--text-primary);
    width: 200px;
    text-align: center;
}
.grammar-drill-input:focus {
    outline: none;
    border-color: var(--brand-color);
}
.grammar-drill-input.correct {
    border-color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 10%, var(--surface-solid));
}
.grammar-drill-input.wrong {
    border-color: var(--color-error);
    background: color-mix(in srgb, var(--color-error) 10%, var(--surface-solid));
}
.grammar-drill-submit {
    padding: var(--space-md) var(--space-xl);
    background: var(--brand-color);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-md);
    cursor: pointer;
}
.grammar-drill-feedback {
    margin-top: var(--space-2xl);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}
.grammar-drill-feedback.correct {
    color: var(--color-success);
}
.grammar-drill-feedback.wrong {
    color: var(--color-error);
}
.grammar-drill-results {
    text-align: center;
    padding: var(--space-3xl) var(--space-2xl);
}
.grammar-drill-results-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-lg);
}
.grammar-drill-score {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-2xl);
}
.grammar-drill-score-pct {
    font-size: var(--font-size-md);
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
}
.grammar-drill-again {
    padding: var(--space-md) var(--space-2xl);
    background: var(--brand-color);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-md);
    cursor: pointer;
}
.grammar-drill-next {
    display: block;
    margin: var(--space-2xl) auto 0;
    padding: var(--space-md) var(--space-2xl);
    background: var(--brand-color);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-md);
    cursor: pointer;
}
.grammar-drill-empty {
    text-align: center;
    color: var(--text-muted);
    padding: var(--space-3xl);

}
[data-theme="dark"] .grammar-drill-pill {
    border-color: var(--border-light);
    color: var(--text-secondary);
}
[data-theme="dark"] .grammar-drill-choice {
    background: var(--bg-list-items);
    border-color: var(--border-light);
}
[data-theme="dark"] .grammar-drill-input {
    background: var(--bg-list-items);
    border-color: var(--border-light);
}

/* Dark mode */
[data-theme="dark"] .writing-textarea {
    background: var(--bg-list-items);
    border-color: var(--border-light);
    color: var(--text-primary);
}
[data-theme="dark"] .writing-original,
[data-theme="dark"] .writing-corrected,
[data-theme="dark"] .writing-correction-item {
    background: var(--bg-list-items);
}
[data-theme="dark"] .transcribe-subtab-btn {
    border-color: var(--border-light);
    color: var(--text-secondary);
}

/* Fullscreen Focus Mode */
.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
    overflow: hidden; /* Prevent scrollbars from appearing */
}

/* Blind mode overlay - completely dark */
.blind-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    z-index: 9998;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
}

/* Combined fullscreen + blind mode */
.fullscreen-overlay.blind-mode {
    background: #000000;
}

.blind-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.fullscreen-overlay.blind-mode.active {
    display: flex;
}

/* Blind mode content - minimal progress indicator */
.blind-content {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    max-width: 80%;
}

.blind-listening-text {
    font-size: var(--font-size-3xl);
    margin-bottom: 2rem;
    opacity: 0.6;
    animation: blindPulse 3.5s ease-in-out infinite;
}

/* Blind mode top info container - centered at very top */
.blind-top-info {
    position: absolute;
    top: var(--space-lg);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.blind-progress {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.85);
    animation: blindPulse 3.5s ease-in-out infinite;
    order: 2; /* Progress bar on line 2 */
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

.blind-exit-hint {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-lg);
    animation: blindPulse 3.5s ease-in-out infinite;
    order: 1; /* Hint on line 1 */
}

@keyframes blindPulse {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.25; }
}

.fullscreen-overlay.active {
    display: flex;
}

.fullscreen-content {
    text-align: center;
    color: white;
    max-width: 80%;
    animation: fadeInScale 0.5s ease-out;
}

.fullscreen-word {
    font-size: 4rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-2xl);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    line-height: var(--line-height-tight);
    word-break: break-word;
}

/* Length-aware sizing: long phrases (e.g. idioms, sentence-length entries)
   need smaller font so they don't overflow the fullscreen viewport. JS adds
   the .is-long / .is-xlong class based on raw text length. */
.fullscreen-word.is-long {
    font-size: 2.5rem;
}
.fullscreen-word.is-xlong {
    font-size: 1.8rem;
}

.fullscreen-dual-form {
    font-size: 2.5rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    white-space: pre-line; /* Preserve line breaks for definition/IPA separation */
    line-height: var(--line-height-normal); /* Relaxed spacing to prevent IPA tie bars from overlapping with text above */
}

.fullscreen-dual-form a {
    line-height: var(--line-height-tight); /* Match parent ratio but calculated from button's own font-size */
    display: inline-block; /* Needed for line-height to apply to inline element */
    vertical-align: middle; /* Center the small button vertically in the line */
}

.fullscreen-dual-form .ipa-pronunciation {
    color: rgba(255, 255, 255, 0.5); /* Muted white — IPA is secondary to the word */
    display: inline-block; /* Needed for padding to work on inline element */
    padding-top: 0.3em; /* Push IPA down to create space above tie bars */
}

/* Fullscreen mode top info container - centered at very top */
.fullscreen-top-info {
    position: absolute;
    top: var(--space-lg);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.fullscreen-indicator {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.7);
    animation: screensaverPulse 2s ease-in-out infinite;
    order: 2; /* Progress bar on line 2 */
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

.fullscreen-exit-hint {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-size-lg);
    animation: screensaverPulse 2s ease-in-out infinite;
    order: 1; /* Hint on line 1 */
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive fullscreen and blind mode */
@media (max-width: 768px) {
    .fullscreen-word {
        font-size: 2.5rem;
    }
    .fullscreen-word.is-long {
        font-size: 1.8rem;
    }
    .fullscreen-word.is-xlong {
        font-size: 1.3rem;
    }

    .fullscreen-dual-form {
        font-size: 1.8rem;
    }

    .fullscreen-indicator,
    .fullscreen-exit-hint,
    .blind-progress,
    .blind-exit-hint {
        font-size: var(--font-size-sm);
    }

    /* On mobile: hide desktop hints, show mobile hints */
    .fullscreen-exit-hint.desktop-hint,
    .blind-exit-hint.desktop-hint {
        display: none !important;
    }

    .fullscreen-exit-hint.mobile-hint,
    .blind-exit-hint.mobile-hint {
        display: block !important;
    }
}

/* On desktop (default): hide mobile hints */
.fullscreen-exit-hint.mobile-hint,
.blind-exit-hint.mobile-hint {
    display: none;
}

/* Buttons - minimized link style */
.btn {
    padding: var(--space-2xs) var(--space-sm);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    color: var(--text-secondary);
}

.btn:hover {
    background: var(--hover-overlay);
    color: var(--text-primary);
}

.btn-add {
    background: var(--text-link);
    color: white;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
}

.btn-add:hover {
    background: var(--brand-color-hover);
}

.btn-add:disabled {
    background: var(--bg-badge);
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* Smart Input Section */
.input-section {
    background: var(--surface-translucent);
    padding: var(--space-3xl);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-3xl);
    box-shadow: var(--shadow-lg);
    text-align: left;
}

/* Offline Pending Queue */
.offline-pending-queue {
    margin-top: var(--space-xl);
    padding: var(--space-xl);
    background: var(--status-warning-bg);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-lg);
    animation: fadeIn 0.2s ease;
}

.offline-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
    font-size: var(--font-size-md);
}

.offline-indicator {
    font-weight: var(--font-weight-semibold);
    color: var(--color-error);
}

.offline-indicator.online {
    color: var(--color-success);
}

.pending-count {
    color: var(--status-warning-text);

}

.pending-words-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.pending-word-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: var(--surface-solid);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    font-size: var(--font-size-md);
}

.pending-word-text {
    color: var(--text-primary);
}

.pending-remove-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-size-sm);
    padding: 0 var(--space-2xs);
    line-height: var(--line-height-none);
}

.pending-remove-btn:hover {
    color: var(--color-error);
}

.offline-actions {
    text-align: center;
}

.offline-actions .btn {
    font-size: var(--font-size-md);
    padding: var(--space-md) var(--space-2xl);
}

.smart-input-container {
    margin: 0;
    padding: 0;
}

.smart-input-container h3 {
    color: var(--text-accent);
    margin: 0 0 var(--space-md) 0;
}

.playback-header h3 {
    color: var(--text-accent);
    margin: 0;
}

.input-hint {
    color: var(--text-secondary);
    margin-bottom: var(--space-3xl);
    font-size: var(--font-size-md); /* md - hint text */
}

.input-wrapper {
    max-width: 100%;
    margin: 0 auto var(--space-md);
}

/* On larger screens, limit input width for readability */
@media (min-width: 1024px) {
    .input-wrapper {
        max-width: 800px;
    }
}

#smartInput {
    width: 100%;
    padding: var(--space-lg) var(--space-xl);  /* Increased for visual balance with 44px buttons */
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xl);
    transition: border-color 0.2s ease;
    background: var(--surface-solid);
    box-sizing: border-box;
}

#smartInput:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.detection-info {
    margin-top: var(--space-lg);
}

/* Umlaut Character Picker */
.umlaut-picker {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin: var(--space-md) auto 0;
    max-width: 600px;
    flex-wrap: wrap;
}

.umlaut-btn {
    min-width: var(--touch-target-min);  /* iOS minimum touch target */
    height: var(--touch-target-min);     /* iOS minimum touch target */
    padding: 0;
    font-size: var(--font-size-2xl);  /* Slightly larger for bigger button */
    font-weight: var(--font-weight-medium);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

/* Visual grouping: ä Ä | ö Ö | ü Ü | ß (only 7-button pickers with pairs) */
.umlaut-picker > .umlaut-btn:nth-child(2),
.umlaut-picker > .umlaut-btn:nth-child(4),
.umlaut-picker > .umlaut-btn:nth-child(6) {
    margin-right: var(--space-md);
}

.umlaut-btn:hover {
    background: var(--btn-secondary-bg);
    border-color: var(--placeholder-color);
}

.umlaut-btn:active {
    background: var(--btn-secondary-bg-hover);
    transform: scale(0.95);
}

/* Touch devices: larger umlaut buttons for touch targets */
@media (hover: none), (pointer: coarse) {
    .umlaut-picker {
        gap: var(--space-xs);
    }

    .umlaut-btn {
        min-width: 34px;
        height: 40px;
        font-size: var(--font-size-2xl);
        border-radius: var(--radius-md);
    }
}

/* Consistent hint/helper text styling */
.hint-text {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);

    display: block;
    margin-top: var(--space-xs);
}

.detection-text {
    color: var(--text-secondary);

}

/* Feedback Section - Floating Toast Notification */
.feedback-section {
    /* Remove margin - no longer takes up space in the layout */
}

.status-message {
    /* Floating toast notification - positioned fixed */
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    min-width: 300px;
    max-width: 600px;
    padding: var(--space-2xl) var(--space-3xl);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    display: none;
    animation: slideDown 0.3s ease-out;
    text-align: center;
    font-weight: var(--font-weight-medium);
    backdrop-filter: blur(10px);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}

.status-message.hiding {
    animation: slideUp 0.3s ease-in forwards;
}

.status-message.info {
    background: var(--status-info-bg);
    color: var(--status-info-text);
    border: 2px solid var(--status-info-border);
    display: block;
}

.status-message.success {
    background: var(--status-success-bg);
    color: var(--status-success-text);
    border: 2px solid var(--status-success-border);
    display: block;
}

.status-message.warning {
    background: var(--status-warning-bg);
    color: var(--status-warning-text);
    border: 2px solid var(--status-warning-border);
    display: block;
}

.status-message.error {
    background: var(--status-error-bg);
    color: var(--status-error-text);
    border: 2px solid var(--status-error-border);
    display: block;
}

/* Learning List Section */
.list-section {
    background: var(--surface-translucent);
    padding: var(--space-3xl);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.list-header {
    margin-bottom: var(--space-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
}

/* Mobile: two-row layout */
@media (hover: none), (pointer: coarse) {
    .list-header {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        gap: var(--space-sm) var(--space-md);
        align-items: center;
    }

    /* Row 1: count, filters, (empty) */
    .list-count {
        grid-row: 1;
        grid-column: 1;
        font-size: var(--font-size-xs);
    }

    .list-filters {
        grid-row: 1;
        grid-column: 2;
        justify-self: start;
    }

    /* Row 2: toggles on left, actions on right */
    .list-toggles {
        grid-row: 2;
        grid-column: 1 / 2;
    }

    .list-actions {
        grid-row: 2;
        grid-column: 3;
        justify-self: end;
        margin-left: 0;
    }

    .list-filter-select {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-size-sm);
        height: 36px;  /* Match desktop for visual balance */
    }

    /* Touch targets kept at 44px for fat finger accessibility */
    .list-toggle-btn,
    .list-action-btn {
        height: var(--touch-target-min);
        width: var(--touch-target-min);
        font-size: var(--font-size-2xl);
    }
}

/* Desktop: single row */
@media (hover: hover) and (pointer: fine) {
    .list-header {
        flex-wrap: nowrap;
    }
}

.list-count {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-muted);
    white-space: nowrap;
}

.list-filters {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.list-filter-select {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-lg);
    height: 32px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    background: var(--surface-solid);
    color: var(--text-primary);
    cursor: pointer;
}

.list-filter-select:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

/* Normal controls container */
.list-controls-normal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
}

/* Expanded search bar - full width when visible */
.list-search-expanded {
    display: none;
    width: 100%;
    align-items: center;
    gap: var(--space-md);
}

.list-search-expanded.active {
    display: flex;
}

.list-search-input {
    flex: 1;
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-lg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    background: var(--surface-solid);
    color: var(--text-primary);
    min-width: 0;
}

.list-search-input:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.list-search-input::placeholder {
    color: var(--placeholder-color);
}

/* Hide normal controls when search is expanded */
.list-controls-row.search-active .list-controls-normal {
    display: none;
}

.list-controls-row.search-active .list-search-expanded {
    display: flex;
}

/* Search umlaut picker - hidden by default, shown when search is active */
.search-umlaut-picker {
    display: none;
    justify-content: space-evenly;
    margin: 0;
    padding: var(--space-xs) 0;
}

.mylist-sticky-header:has(.list-controls-row.search-active) .search-umlaut-picker {
    display: flex;
}

.search-umlaut-picker .umlaut-btn {
    min-width: 36px;
    width: auto;
    padding: 0 var(--space-md);
    height: var(--touch-target-min);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    background: var(--surface-solid);
    font-size: var(--font-size-2xl);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    box-shadow: var(--shadow-key);
    margin-right: 0; /* Override base grouping margins */
}

/* Status dot for list items */
.familiarity-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    margin-right: var(--space-md);
}

.familiarity-dot.mastered {
    background: var(--rating-dot-mastered);
}

.familiarity-dot.learning {
    background: var(--rating-dot-learning);
}

.familiarity-dot.new {
    background: var(--rating-dot-new);
}

/* Empty state for list */
.list-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--space-3xl) * 2) var(--space-3xl);
    text-align: center;
    color: var(--text-secondary);
}

.list-empty-state .empty-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.list-empty-state .empty-message {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    max-width: 280px;
}

/* Expanded panel - hidden by default, vertical stack when shown */
.item-familiarity-expanded {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
}

/* Show expanded panel when item is swiped open (auto-expand) */
.learning-item.swiped .item-familiarity-expanded {
    display: flex;
}

/* Utility buttons (audio, edit) stay horizontal */
.item-utility-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.item-familiarity-btn {
    padding: var(--space-md);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.15s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.item-familiarity-btn svg {
    width: var(--icon-size-mobile);
    height: var(--icon-size-mobile);
}

.item-familiarity-btn:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

.item-familiarity-btn.active {
    opacity: 1;
}

/* Color coding for active states */
.item-familiarity-btn[data-rating="2"].active {
    color: var(--rating-mastered); /* Green - mastered */
}

.item-familiarity-btn[data-rating="1"].active {
    color: var(--rating-learning); /* Blue - learning */
}

.item-familiarity-btn[data-rating="0"].active {
    color: var(--rating-unsure); /* Orange - unsure */
}

/* Mobile: 44px touch targets for list item familiarity buttons */
@media (hover: none), (pointer: coarse) {
    .item-familiarity-btn {
        width: var(--touch-target-min);
        height: var(--touch-target-min);
        padding: 0;
    }

    .item-familiarity-btn svg {
        width: var(--icon-size-mobile);
        height: var(--icon-size-mobile);
    }
}

.list-toggles {
    display: flex;
    align-items: center;
    gap: var(--space-md); /* Fat finger spacing - minimum 8px between touch targets */
}

.list-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md); /* Fat finger spacing - minimum 8px between touch targets */
    margin-left: auto;
}

.list-action-btn {
    background: transparent;
    border: none;
    padding: 0;
    font-size: var(--font-size-2xl); /* Slightly larger icon */
    line-height: var(--line-height-none);
    cursor: pointer;
    border-radius: var(--radius-lg);
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--touch-target-min); /* iOS minimum touch target */
    width: var(--touch-target-min);  /* iOS minimum touch target */
    vertical-align: middle;
    color: var(--text-secondary);
}

.list-action-btn svg {
    stroke: currentColor;
    width: var(--icon-size-desktop);
    height: var(--icon-size-desktop);
}

.list-action-btn:hover {
    background: var(--hover-overlay);
    color: var(--text-primary);
}

/* Desktop: compact buttons, color-only hover (no background box) */
@media (hover: hover) and (pointer: fine) {
    .list-action-btn,
    .list-toggle-btn {
        height: var(--mylist-controls-row-height-desktop);
        width: var(--mylist-controls-row-height-desktop);
    }

    .list-action-btn:hover,
    .list-toggle-btn:hover {
        background: transparent;
        color: var(--text-primary);
    }
}

/* Sync button states */
.list-action-btn.synced {
    color: var(--brand-color);
}

.list-action-btn.synced:hover {
    color: var(--brand-color-hover);
}

.list-action-btn.sync-pending {
    animation: sync-pulse 1s ease-in-out infinite;
}

@keyframes sync-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Save button dirty indicator (was injected via JS in file_manager.js) */
@keyframes mylist-save-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.mylist-save-dirty {
    animation: mylist-save-blink 1.5s ease-in-out infinite;
}

/* Sync pending indicator (was injected via JS in auth_manager.js) */
@keyframes sync-pending-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
#syncBtn.sync-pending {
    animation: sync-pending-blink 1.5s ease-in-out infinite;
    background-color: var(--color-warning) !important;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.list-toggle-btn {
    background: transparent;
    border: none;
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    cursor: pointer;
    color: var(--text-secondary); /* Match action buttons and dock buttons for consistency */
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--touch-target-min); /* iOS minimum touch target */
    width: var(--touch-target-min);  /* iOS minimum touch target */
    transition: color 0.2s ease, background 0.2s ease;
    touch-action: none; /* Prevent scroll gesture from canceling taps */
}

.list-toggle-btn:hover {
    background: var(--hover-overlay);
    color: var(--text-secondary);
}

.list-toggle-btn.active {
    /* No color change - X-overlay indicates state (matches learn dock style) */
}

.list-toggle-btn.active:hover {
    background: var(--hover-overlay);
}

.list-toggle-btn svg {
    display: block;
    fill: currentColor;
    width: var(--icon-size-desktop);
    height: var(--icon-size-desktop);
}

/* X overlay for list toggle buttons */
.list-toggle-btn.has-x-overlay {
    position: relative;
}

.list-toggle-btn.has-x-overlay .x-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Hide X overlay when active (feature is ON) */
.list-toggle-btn.has-x-overlay.active .x-overlay {
    display: none;
}

.learning-list {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: var(--space-3xl);
    min-height: 400px;
    max-height: 400px;
    overflow-y: auto;
    /* Consistent background - matches app background */
    background: var(--bg-app);
    /* iOS Safari: enable momentum scrolling */
    -webkit-overflow-scrolling: touch;
    /* Prevent font scaling during scroll (iOS landscape bug) */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.learning-item {
    background: var(--bg-card);
    padding: var(--space-sm) var(--space-2xl) var(--space-md) var(--space-2xl); /* Less top, more bottom to center content between dividers */
    margin-bottom: 0;
    border-radius: 0;
    border-left: 4px solid transparent; /* Reserve space to prevent shift when newly-added turns it green */
    border-bottom: 1px solid var(--border-light); /* Subtle divider between entries */
    position: relative;
    overflow: hidden;
    transition: background 0.2s ease;
    /* Prevent font scaling during scroll (iOS landscape bug) */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Hardware acceleration for smooth scrolling */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Hover effect - desktop only */
@media (hover: hover) and (pointer: fine) {
    .learning-item:hover {
        background: var(--bg-mylist-end);
    }
}

/* Touch devices: use custom highlight instead of native (which shifts during scroll) */
@media (hover: none), (pointer: coarse) {
    /* Custom touch highlight - stays on originally touched item */
    .learning-item.touch-active {
        background: var(--bg-mylist-end);
    }
}

.learning-item.focused {
    background: rgba(var(--brand-color-rgb), 0.08); /* Light purple tint */
}

/* Allow vertical buttons to overflow when expanded */
.learning-item.swiped {
    overflow: visible;
    z-index: 10; /* Bring above siblings so buttons aren't covered */
}

.learning-item.newly-added {
    background: rgba(var(--brand-color-rgb), 0.1);
    border-left: 4px solid var(--brand-color);
    animation: highlightNew 2s ease;
}

@keyframes highlightNew {
    0% {
        background: rgba(var(--brand-color-rgb), 0.1);
    }
    100% {
        background: var(--bg-card);
    }
}

/* Show More pagination button */
.show-more-item {
    list-style: none;
    padding: var(--space-xl) var(--space-2xl);
    text-align: center;
    border-bottom: 1px solid var(--border-light);
}

.show-more-btn {
    background: var(--bg-card);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) 24px;
    font-size: var(--font-size-lg);
    color: var(--text-link);
    cursor: pointer;
    width: 100%;
    max-width: 300px;
    transition: background 0.15s;
}

.show-more-btn:hover {
    background: var(--bg-hover, var(--border-divider));
}

[data-theme="dark"] .show-more-btn {
    color: var(--text-link);
}

.item-content {
    display: block;
    padding-right: 50px; /* Space for action buttons when revealed */
    transition: transform 0.2s ease-out;
}

/* Content shifts slightly left when swiped */
.learning-item.swiped .item-content {
    transform: translateX(-8px);
}

.item-text {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: 0;
    line-height: var(--line-height-snug);
    white-space: pre-line;
    word-wrap: break-word;
}

.item-index {
    display: inline-block; /* Prevents layout shift when anchor-pulse is added */
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--placeholder-color);
    margin-right: var(--space-sm);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace;
}

/* Pulsing animation for anchor entry indicator */
.item-index.anchor-pulse {
    animation: anchorPulse 1.5s ease-in-out infinite;
}

@keyframes anchorPulse {
    0%, 100% {
        color: var(--placeholder-color);
        transform: scale(1);
    }
    50% {
        color: var(--color-warning);
        transform: scale(1.15);
    }
}

.word-type-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
}

/* Inline content display classes — used by JS template literals */
.inline-grammar {
    display: block;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    color: var(--color-grammar);
    margin-top: var(--space-md);
    white-space: pre-line;
}

.inline-english {
    color: var(--color-english);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    display: block;
    margin-top: var(--space-md);
}

.inline-example-num {
    color: var(--color-example-num);
    font-weight: var(--font-weight-normal);
    flex-shrink: 0;
    margin-right: var(--space-xs);
}

.inline-highlight {
    color: var(--color-highlight);
}

.inline-note {
    display: block;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    color: var(--text-muted);
    margin-top: var(--space-md);
}

.item-text .separator {
    color: var(--text-accent);
    font-weight: var(--font-weight-bold);
    margin: 0 var(--space-xs);
}

.item-meta {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: 0;
    line-height: var(--line-height-snug);
}

.source-link {
    color: inherit;
    text-decoration: underline;
}

.ai-disclosure {
    display: inline-block;
    margin-top: var(--space-2xs);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-style: normal;
}

/* About & AI Disclosure modal */
.about-modal-content {
    max-width: 640px;
    max-height: 85vh;
    overflow-y: auto;
    padding: var(--space-3xl);
}
.about-modal-body {
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
}
.about-title {
    margin: 0 0 var(--space-2xs) 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
}
.about-version {
    margin: 0 0 var(--space-2xl) 0;
    color: var(--text-muted);
    font-size: var(--font-size-md);
}
.about-section {
    margin-bottom: var(--space-2xl);
}
.about-section h3 {
    margin: 0 0 var(--space-md) 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.about-section p {
    margin: 0 0 var(--space-md) 0;
    font-size: var(--font-size-md);
    color: var(--text-secondary);
}
.about-feature-list {
    margin: 0 0 var(--space-md) 0;
    padding-left: var(--space-2xl);
    font-size: var(--font-size-md);
    color: var(--text-secondary);
}
.about-feature-list li {
    margin-bottom: var(--space-xs);
}
.about-feature-list li strong {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}
.about-feature-list a {
    color: var(--brand-color);
    text-decoration: underline;
}
.about-warning {
    padding: var(--space-md);
    background: var(--bg-badge);
    border-radius: var(--radius-md);
    color: var(--text-primary) !important;
    font-size: var(--font-size-sm) !important;
}
.about-close-row {
    display: flex;
    justify-content: center;
    margin-top: var(--space-2xl);
}

/* First-launch AI disclosure modal */
.ai-disclosure-content {
    max-width: 480px;
    padding: var(--space-3xl);
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
}
.ai-disclosure-title {
    margin: 0 0 var(--space-lg) 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}
.ai-disclosure-lead {
    margin: 0 0 var(--space-lg) 0;
    font-size: var(--font-size-md);
    color: var(--text-secondary);
}
.ai-disclosure-warning {
    margin: 0 0 var(--space-lg) 0;
    padding: var(--space-md);
    background: var(--bg-badge);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    color: var(--text-primary);
}
.ai-disclosure-more {
    margin: 0 0 var(--space-2xl) 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}
.ai-disclosure-actions {
    display: flex;
    justify-content: center;
}

.phrase-word-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2xs);
    background: var(--bg-badge);
}
.phrase-word-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    flex: 1;
    min-width: 0;
}
.phrase-word-de {
    font-size: var(--font-size-md);
    color: var(--text-primary);
}
.phrase-word-en {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.phrase-word-add {
    width: var(--touch-target-min, 44px);
    height: var(--touch-target-min, 44px);
    min-width: var(--touch-target-min, 44px);
    border-radius: var(--radius-md);
    border: 1px solid var(--text-muted);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}
.phrase-word-add:hover {
    background: var(--brand-color);
    color: white;
    border-color: var(--brand-color);
}
.phrase-word-add.added {
    background: transparent;
    color: var(--color-success);
    border-color: var(--color-success);
    cursor: default;
}

/* German Definitions and Pronunciation */
.item-definitions-wrapper {
    display: block;
    width: 100%;
    margin: 0;
}

.item-definition {
    display: block !important;
    width: 100%;
    font-size: var(--font-size-md);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    line-height: var(--line-height-snug);
    clear: both;
}

.item-pronunciation {
    display: block !important;
    width: 100%;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
    padding: 0;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-style: normal;
    line-height: var(--line-height-snug);
    clear: both;
}

.item-actions {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(100px);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    transition: transform 0.2s ease-out;
    touch-action: pan-y pinch-zoom; /* Allow vertical scroll when touching buttons */
}

/* Buttons slide in when swiped (mobile) */
.learning-item.swiped .item-actions {
    transform: translateY(-50%) translateX(0);
}

/* Edge cases (near top/bottom of viewport): use horizontal expansion instead of vertical */
.learning-item.swiped.expand-horizontal .item-familiarity-expanded {
    flex-direction: row;
}

/* Desktop: same .swiped logic as mobile, just no animation */
@media (hover: hover) and (pointer: fine) {
    .item-actions {
        transition: none; /* Instant, no slide animation */
    }
}

.item-btn {
    padding: var(--space-md);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    background: transparent;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-y manipulation; /* Allow vertical scroll, remove tap delay */
}

.item-btn svg {
    display: block;
    width: var(--icon-size-mobile);
    height: var(--icon-size-mobile);
}

.item-btn:hover {
    background: var(--hover-overlay);
}

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

.item-btn.audio:hover {
    background: var(--hover-overlay);
}

.item-btn.edit {
    color: var(--text-link);
}

.item-btn.edit:hover {
    background: rgba(var(--brand-color-rgb), 0.1);
}

/* Edit & enrich buttons: x-overlay hidden by default, shown when search is active */
.item-btn.edit,
.item-btn.enrich {
    position: relative;
}

.item-btn.edit .x-overlay,
.item-btn.enrich .x-overlay {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Disable edit & enrich buttons while funnel search is open */
.app-container:has(.list-controls-row.search-active) .item-btn.edit,
.app-container:has(.list-controls-row.search-active) .item-btn.enrich {
    pointer-events: none;
}

.app-container:has(.list-controls-row.search-active) .item-btn.edit .x-overlay,
.app-container:has(.list-controls-row.search-active) .item-btn.enrich .x-overlay {
    display: block;
}


.item-btn.enrich {
    color: var(--color-enrich);
}

.item-btn.enrich:hover {
    background: rgba(var(--brand-color-rgb), 0.1);
}

/* Enhanced visual states */
.input-wrapper.detecting {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .app-container {
        padding: var(--space-lg);
    }

    header {
        flex-direction: column;
        gap: var(--space-2xl);
        text-align: center;
    }

    .input-wrapper {
        flex-direction: column;
    }

    #smartInput {
        margin-bottom: var(--space-lg);
    }

    /* Swipe works same on mobile - no layout change needed */

    /* Show mobile settings toggle */
    .mobile-settings-toggle {
        display: block;
        padding: var(--space-md) var(--space-2xl);
        background: var(--bg-hover);
        border: 1px solid var(--input-border);
        border-radius: var(--radius-2xl);
        font-size: var(--font-size-md);
        cursor: pointer;
        margin-bottom: var(--space-md);
    }

    .mobile-settings-toggle[aria-expanded="true"] {
        background: rgba(var(--brand-color-rgb), 0.08);
        border-color: var(--text-link);
    }

    /* Playback header controls - always visible on mobile, compact */
    .playback-header-controls {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: var(--space-xs);
    }

    .content-config-group,
    .playback-config-group {
        display: contents;
    }

    /* Compact controls on mobile */
    .playback-header-controls .mode-select {
        padding: var(--space-2xs) var(--space-sm);
        font-size: var(--font-size-sm);
        height: 28px;
    }

    /* Icon buttons on mobile - compact size */
    .playback-header-controls .playback-btn.toggle.icon-btn {
        width: 32px;
        height: 32px;
        padding: var(--space-sm);
    }

    .playback-header-controls .playback-btn.toggle.icon-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Text toggle buttons on mobile (fallback) */
    .playback-header-controls .playback-btn.toggle:not(.icon-btn) {
        padding: var(--space-2xs) var(--space-sm);
        font-size: var(--font-size-sm);
        width: auto;
        display: inline-flex;
        justify-content: center;
        box-sizing: border-box;
    }

    /* Playback controls stack vertically on mobile */
    .playback-controls {
        flex-direction: column;
        gap: var(--space-lg);
    }

    /* Primary row as actual row on mobile */
    .playback-primary-row {
        display: flex;
        justify-content: center;
        gap: var(--space-sm);
        align-items: center;
        flex-wrap: nowrap;
        width: 100%;
    }

    /* Icon buttons on mobile - 1.2x size for better touch targets */
    .playback-primary-row .playback-btn.icon-btn {
        width: 38px;
        height: 38px;
        padding: var(--space-sm);
    }

    .playback-primary-row .playback-btn.icon-btn svg {
        width: var(--icon-size-desktop);
        height: var(--icon-size-desktop);
    }

    /* Mute button - hide checkbox on mobile (icon shows state) */
    .mute-btn input[type="checkbox"] {
        display: none;
    }

    /* Mode buttons group - secondary row on mobile */
    .mode-buttons-group {
        width: auto;
        justify-content: center;
        margin-left: 0;
        padding: var(--space-sm) var(--space-xl);
        background: rgba(0, 0, 0, 0.03);
        border-radius: var(--radius-lg);
    }

    /* Keep buttons compact on mobile */
    .playback-btn {
        padding: var(--space-xs) var(--space-md);
    }

    .btn {
        padding: var(--space-sm) var(--space-xl);
    }

    /* List item buttons: 44px touch targets on mobile */
    .item-btn {
        width: var(--touch-target-min);
        height: var(--touch-target-min);
        padding: 0;
    }

    /* Floating toast adjustments for mobile */
    .status-message {
        top: var(--space-lg);
        left: var(--space-lg);
        right: var(--space-lg);
        min-width: unset;
        max-width: unset;
        transform: none;
        animation: slideDownMobile 0.3s ease-out;
    }

    @keyframes slideDownMobile {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .status-message.hiding {
        animation: slideUpMobile 0.3s ease-in forwards;
    }

    @keyframes slideUpMobile {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(-20px);
        }
    }
}

/* Extra narrow screens (small Android phones) */
@media (max-width: 400px) {
    .playback-primary-row {
        gap: var(--space-xs);
    }

    /* Icon buttons on narrow screens - 1.2x size */
    .playback-primary-row .playback-btn.icon-btn {
        width: 34px;
        height: 34px;
        padding: var(--space-sm);
    }

    .playback-primary-row .playback-btn.icon-btn svg {
        width: 17px;
        height: 17px;
    }
}

/* Edit Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align to top so modal can scroll into view */
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
    overflow-y: auto; /* Allow scrolling if modal is taller than viewport */
    backdrop-filter: blur(5px);
    animation: fadeIn 0.2s ease-out;
}

/* SAFARI-SPECIFIC MODAL FIXES */
@supports (-webkit-touch-callout: none) {
    .modal-overlay {
        /* Safari-specific fixes to prevent viewport corruption */
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* Prevent Safari from adjusting viewport during modal operations */
        position: fixed !important;
        contain: layout style paint; /* CSS containment for better performance */
    }
}

/* ALTERNATIVE MODAL APPROACH - Transform-based positioning */
.safari-safe-modal-overlay {
    position: absolute; /* Use absolute instead of fixed to avoid Safari viewport issues */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
    overflow-y: auto;
    backdrop-filter: blur(5px);
    animation: fadeIn 0.2s ease-out;
    /* Force Safari to use transform-based positioning */
    transform: translateZ(0);
    will-change: transform;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content {
    background: var(--surface-solid);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: slideInModal 0.3s ease-out;
}

/* Keyboard Shortcuts Modal */
.shortcuts-modal-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

.shortcuts-modal {
    padding: var(--space-3xl);
    max-width: 400px;
}

.shortcuts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2xl);
}

.shortcuts-title {
    margin: 0;
    font-size: var(--font-size-2xl);
    color: var(--text-primary);
}

.shortcuts-close {
    background: none;
    border: none;
    font-size: var(--font-size-3xl);
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    line-height: var(--line-height-none);
}

.shortcuts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-lg);
}

.shortcuts-table tr {
    border-bottom: 1px solid var(--border-light);
}

.shortcuts-table tr:last-child {
    border-bottom: none;
}

.shortcuts-table td {
    padding: var(--space-lg) var(--space-md);
    color: var(--text-secondary);
}

.shortcuts-table td:last-child {
    text-align: right;
}

.shortcuts-table kbd {
    background: var(--bg-badge);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    font-family: monospace;
    border: 1px solid var(--border-light);
    color: var(--text-primary);
}

.shortcuts-footer {
    margin: var(--space-2xl) 0 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    text-align: center;
}

/* Modal utility classes — used by JS-generated confirmation dialogs */
.modal-btn-confirm {
    padding: var(--space-xl) var(--space-3xl);
    background: var(--color-success);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-xl);
    min-height: var(--touch-target-min);
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.modal-btn-cancel {
    padding: var(--space-xl) var(--space-3xl);
    background: var(--text-secondary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-xl);
    min-height: var(--touch-target-min);
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

.modal-info-box {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: var(--space-2xl);
    background: var(--bg-card);
}

.modal-caption {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    margin-bottom: var(--space-2xl);
}

.modal-field-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

@keyframes slideInModal {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    padding: var(--space-2xl) var(--space-3xl);
    border-bottom: 1px solid var(--border-divider);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.modal-header h3 {
    margin: 0;
    color: var(--text-accent);
    font-size: var(--font-size-2xl);
}

.modal-header-actions {
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

/* Compact modal action buttons (Save, Apply, Delete) — match .btn-close height */
.modal-header-actions .btn,
.modal-body .btn-compact {
    padding: var(--space-sm) var(--space-xl);
    font-size: var(--font-size-md);
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-close {
    background: none;
    border: none;
    font-size: var(--font-size-3xl);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.btn-close:hover {
    background: var(--bg-badge);
    color: var(--text-primary);
}

/* High-visibility focus for close buttons */
.btn-close:focus-visible {
    outline: 3px solid var(--focus-outline-color);
    outline-offset: 2px;
    background: var(--status-warning-bg);
    border-radius: var(--radius-md);
}

.modal-body {
    padding: var(--space-3xl);
}

.modal-label {
    display: block;
    margin-bottom: var(--space-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
}


.edit-metadata {
    margin-top: var(--space-2xl);
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--border-accent);
}

.edit-metadata small {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    line-height: var(--line-height-loose);
}

/* Enhanced Edit Modal */
.edit-modal-content {
    max-width: 500px;
    max-height: 85vh;
    max-height: 85dvh; /* Dynamic viewport height - accounts for mobile browser UI */
    overflow-y: auto;
}

/* Mobile: ensure delete button is accessible above browser UI */
@media (hover: none), (pointer: coarse) {
    .edit-modal-content {
        max-height: none; /* Allow full height, overlay handles scrolling */
        margin-bottom: 60px; /* Space for browser UI */
    }

    .edit-modal-content .modal-body {
        padding-bottom: 30px;
    }
}

.edit-field {
    margin-bottom: var(--space-md);
}

.edit-label {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2xs);
}

.edit-input,
.edit-textarea {
    width: 100%;
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-lg);
    font-family: inherit;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.edit-textarea {
    overflow: hidden;
    resize: none;
}

.edit-input:focus,
.edit-textarea:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.edit-select {
    width: 100%;
    padding: var(--space-sm) var(--space-lg);
    height: 32px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-lg);
    font-family: inherit;
    background: var(--surface-solid);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.edit-select:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.edit-readonly {
    padding: var(--space-sm) var(--space-lg);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    font-family: monospace;
}

.edit-umlaut-picker {
    position: sticky;
    top: 0;
    background: var(--surface-solid);
    padding: var(--space-sm) 0;
    margin: 0 0 var(--space-md) 0;
    z-index: 10;
    border-bottom: 1px solid var(--border-light);
    justify-content: center;
    gap: var(--space-sm); /* Override mobile gap reduction — match bottom sheet picker */
    flex-wrap: nowrap;    /* Match bottom sheet picker */
}

.edit-umlaut-picker .umlaut-btn {
    min-width: 36px;
    padding: 0 var(--space-md);
    height: var(--touch-target-min);
    font-size: var(--font-size-2xl);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    background: var(--surface-solid);
    box-shadow: var(--shadow-key);
    margin-right: 0; /* Override base grouping margins */
}

.modal-footer {
    padding: var(--space-2xl) var(--space-3xl);
    border-top: 1px solid var(--border-divider);
    display: flex;
    gap: var(--space-lg);
    justify-content: flex-end;
    background: var(--bg-card);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.btn-danger {
    background: var(--color-error);
    color: white;
}

.btn-danger:hover {
    background: var(--color-error-hover);
}

/* Modal responsive adjustments */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-height: 90vh;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: var(--space-2xl);
    }

    .modal-footer {
        flex-wrap: wrap;
    }

    .modal-footer .btn {
        flex: 1;
        min-width: 100px;
    }
}

/* Sync Modal Styles */
.sync-modal {
    max-width: 400px;
}

.sync-modal .modal-close {
    background: none;
    border: none;
    font-size: var(--font-size-3xl);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    line-height: var(--line-height-none);
}

.sync-modal .modal-close:hover {
    color: var(--text-primary);
}

.sync-status {
    background: var(--status-success-bg);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-2xl);
    text-align: center;
}

.sync-status p {
    margin: 0;
    color: var(--status-success-text);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

.sync-status .sync-info {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--space-md);
}

.sync-actions {
    display: flex;
    gap: var(--space-xl);
    justify-content: center;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.auth-input {
    width: 100%;
    padding: var(--space-xl);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xl);
    transition: border-color 0.2s ease;
}

.auth-input:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.auth-buttons {
    display: flex;
    gap: var(--space-xl);
}

.auth-buttons .btn {
    flex: 1;
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: var(--space-2xl) 0;
    color: var(--text-secondary);
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-light);
}

.auth-divider span {
    padding: 0 var(--space-xl);
    font-size: var(--font-size-lg);
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    width: 100%;
    padding: var(--space-xl);
    background: var(--surface-solid);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xl);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-google:hover {
    background: var(--bg-card);
    border-color: var(--border-accent);
}

.btn-primary {
    background: var(--brand-color);
    color: white;
    border: none;
    padding: var(--space-lg) var(--space-3xl);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xl);
    cursor: pointer;
    transition: background 0.2s ease;
}

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

.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--text-primary);
    border: none;
    padding: var(--space-lg) var(--space-3xl);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xl);
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-secondary:hover {
    background: var(--btn-secondary-bg-hover);
}

/* Sync button states */
#syncBtn.synced {
    background: var(--brand-color);
    color: white;
}

#syncBtn.synced:hover {
    background: var(--brand-color-hover);
}

/* Accessible focus outlines (visible for keyboard users, variable defined in main :root) */
button:focus-visible,
.btn:focus-visible,
.playback-btn:focus-visible,
.btn-close:focus-visible,
select:focus-visible,
input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 3px solid var(--focus-outline-color);
    outline-offset: 2px;
}

/* Confirmation Modal */
.confirm-modal {
    max-width: 450px;
}

#confirmMessage {
    margin: 0;
    line-height: var(--line-height-loose);
}

.modal-delete-row {
    margin-top: var(--space-2xl);
    text-align: right;
}

/* Voice Selection Modal */
.voice-modal {
    max-width: 500px;
}

.voice-warning {
    background: var(--status-warning-bg);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    margin-bottom: var(--space-2xl);
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    color: var(--status-warning-text);
}

.voice-warning > span {
    font-size: var(--font-size-2xl);
    margin-right: var(--space-md);
}

.voice-warning p {
    margin: var(--space-xs) 0 0 0;
    font-size: var(--font-size-md);
    opacity: 0.9;
}

.voice-mode-selection {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.voice-mode-option {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.voice-mode-option input[type="radio"] {
    cursor: pointer;
    flex-shrink: 0;
}

.voice-mode-option input[type="radio"]:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.voice-mode-option input[type="radio"]:disabled + label {
    cursor: not-allowed;
    opacity: 0.5;
    color: #a0aec0;
}

.voice-mode-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.voice-mode-option label {
    cursor: pointer;
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.voice-mode-option label strong {
    font-size: var(--font-size-lg);
}

.voice-desc {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
}

.voice-fixed-controls,
.voice-gender-controls {
    margin-left: var(--space-3xl);
    padding: var(--space-md);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    display: flex;
    gap: 0;
    align-items: center;
}

/* Calculated: centered between checkbox and X */
.voice-fixed-controls .btn {
    padding: 0 var(--space-2xl);
    font-size: var(--font-size-md);
    height: 32px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}

.voice-select {
    width: 100%;
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-lg);
    height: 32px;
    background: var(--surface-solid);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.voice-select:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.gender-buttons {
    display: flex;
    gap: var(--space-sm);
}

.gender-btn {
    padding: var(--space-sm) var(--space-xl);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    background: var(--surface-solid);
    font-size: var(--font-size-lg);
    height: 32px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: var(--font-weight-medium);
}

.gender-btn:hover {
    border-color: var(--border-accent);
    background: rgba(var(--brand-color-rgb), 0.05);
}

.gender-btn.active {
    border-color: var(--border-accent);
    background: var(--brand-color);
    color: white;
}


/* Voice modal responsive */
@media (max-width: 768px) {
    .voice-fixed-controls,
    .voice-gender-controls {
        flex-direction: column;
        margin-left: var(--space-3xl);
    }

    .gender-buttons {
        width: 100%;
    }

    .gender-btn {
        flex: 1;
    }
}

/* Screen Saver Mode */
.screensaver-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    display: none;
    z-index: 10002;
    cursor: none; /* Hide mouse cursor in screen saver mode */
    overflow: hidden; /* Prevent scrollbars from appearing */
    transition: opacity 0.15s ease-out;
}

/* Hide cursor in fullscreen focus when idle */
.fullscreen-overlay.hide-cursor {
    cursor: none;
}

/* Hide cursor in blind (Audio-only) when idle */
.blind-overlay.hide-cursor {
    cursor: none;
}

.screensaver-overlay.active {
    display: block;
}

.screensaver-text {
    position: absolute;
    font-size: 4rem;
    font-weight: var(--font-weight-bold);
    color: rgba(255, 255, 255, 0.85); /* Match fullscreen white but dimmed */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); /* Match fullscreen shadow but dimmed */
    user-select: none;
    line-height: var(--line-height-tight);
    white-space: normal; /* Allow wrapping for long text like Redemittel */
    text-align: center; /* Center the word text */
    max-width: 80vw; /* Force wrapping to prevent text wider than viewport (matches fullscreen 80%) */
    word-wrap: break-word; /* Break very long words if needed */
    /* GPU acceleration and anti-flickering */
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.screensaver-dual-form {
    position: absolute;
    font-size: 2.5rem;
    font-weight: var(--font-weight-normal);
    color: rgba(255, 255, 255, 0.75); /* Match fullscreen white but dimmed more */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); /* Match fullscreen shadow but dimmed */
    white-space: pre-line; /* Match fullscreen mode for consistent inline element spacing */
    user-select: none;
    line-height: var(--line-height-normal); /* Relaxed spacing to prevent IPA tie bars from overlapping with text above */
    text-align: center; /* Center align all text like fullscreen mode */
    max-width: 80vw; /* Match fullscreen and primary text width */
    /* GPU acceleration and anti-flickering */
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.screensaver-dual-form a {
    line-height: var(--line-height-tight); /* Match parent ratio but calculated from button's own font-size */
    display: inline-block; /* Needed for line-height to apply to inline element */
    vertical-align: middle; /* Center the small button vertically in the line */
}

.screensaver-dual-form .ipa-pronunciation {
    color: rgba(255, 223, 186, 0.8); /* Match fullscreen gold-like color but dimmed from 0.95 to 0.8 */
    display: inline-block; /* Needed for padding to work on inline element */
    padding-top: 0.3em; /* Push IPA down to create space above tie bars */
}

/* Screensaver top info container - centered at very top */
.screensaver-top-info {
    position: fixed;
    top: var(--space-lg);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    z-index: 10003;
}

.screensaver-progress-bar {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--font-size-lg);
    user-select: none;
    white-space: nowrap;
    animation: screensaverPulse 2s ease-in-out infinite;
    order: 2; /* Progress bar on line 2 */
    width: 100%;
    text-align: center;
}

.screensaver-progress-bar span {
    display: inline;
    white-space: nowrap;
}

.screensaver-exit-hint {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    animation: screensaverPulse 2s ease-in-out infinite;
    order: 1; /* Hint on line 1 */
}

@keyframes screensaverPulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.4; }
}

.screensaver-settings-btn {
    background: transparent;
    color: var(--text-secondary);
    padding: var(--space-2xs) var(--space-sm);
    font-size: var(--font-size-md);
    border: none;
}

.screensaver-settings-btn:hover {
    color: var(--text-primary);
    background: var(--hover-overlay);
}

/* Screen Saver Settings Modal */
.screensaver-modal {
    max-width: 450px;
}

.screensaver-settings-group {
    margin-bottom: var(--space-2xl);
}

.screensaver-settings-group label {
    display: block;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
}

.screensaver-settings-group input[type="number"],
.screensaver-settings-group select {
    width: 100%;
    padding: var(--space-md) var(--space-xl);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-lg);
    transition: border-color 0.2s ease;
}

/* Match select height to Apply button height */
.screensaver-settings-group select {
    height: 32px;
    font-size: var(--font-size-lg);
    padding: var(--space-sm) var(--space-xl);
    text-align: center;
    text-align-last: center; /* For consistent centering in select */
    background: var(--surface-solid);
}

/* Custom number stepper with horizontal arrows */
.number-stepper {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    height: 32px;
}

.stepper-btn {
    background: var(--brand-color);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    width: 32px;
    height: 32px;
    font-size: var(--font-size-xl);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stepper-btn:hover {
    background: var(--brand-color-hover);
    transform: scale(1.05);
}

.stepper-btn:active {
    transform: scale(0.95);
}

.number-stepper input[type="number"] {
    width: 100%;
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-sm);
    height: 32px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    background: var(--surface-solid);
}

/* Hide spinner arrows since we have custom buttons */
.number-stepper input[type="number"]::-webkit-inner-spin-button,
.number-stepper input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.screensaver-settings-group input[type="number"]:focus,
.screensaver-settings-group select:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.screensaver-settings-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--brand-color);
}

/* Enable/Select checkbox label — flex row instead of block */
.screensaver-settings-group .checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    cursor: pointer;
    height: 32px;
    font-weight: var(--font-weight-medium);
}

/* Fullscreen option row */
.screensaver-fullscreen-row {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-md);
}

.screensaver-fullscreen-row > span {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-right: var(--space-xl);
    font-size: var(--font-size-lg);
}

.screensaver-fullscreen-row input[type="checkbox"] {
    margin: 0 var(--space-sm) 0 0;
}

.screensaver-fullscreen-row label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    margin: 0 var(--space-xl) 0 0;
}

/* Fullscreen enter button */
#startFullscreenBtn {
    padding: var(--space-sm) var(--space-2xl);
    background: var(--brand-color);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: var(--font-size-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
}

/* Responsive screen saver text */
@media (max-width: 768px) {
    .screensaver-text {
        font-size: 3rem;
    }

    .screensaver-dual-form {
        font-size: 1.8rem;
    }

    .screensaver-exit-hint,
    .screensaver-progress-bar {
        font-size: var(--font-size-sm);
    }
}

/* ===========================================
   German Learning Tips Section
   =========================================== */

.tips-section {
    padding: 0 var(--space-2xl) var(--space-2xl);
}

/* Tip of the Day card */
.tip-of-the-day {
    background: var(--surface-translucent);
    padding: var(--space-xl) var(--space-2xl);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--border-accent);
}

.tip-of-the-day .tip-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.tip-of-the-day .tip-card-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tip-of-the-day .tip-card-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    line-height: var(--line-height-snug);
}

.tip-of-the-day .tip-card-content {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-md);
}

.tip-of-the-day .tip-card-example {
    background: rgba(var(--brand-color-rgb), 0.06);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
}

.tip-of-the-day .tip-card-example .tip-de {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.tip-of-the-day .tip-card-example .tip-en {
    color: var(--text-muted);

}

/* Tips sticky header - matches mylist-sticky-header pattern */
.tips-sticky-header {
    background: var(--bg-app);
    padding: var(--space-md) var(--space-2xl);
    position: sticky;
    top: 42px; /* Below the More sub-tab toggle */
    z-index: 100;
}

/* Hide tips header when not on More tab */
body:not(.tab-me) .tips-sticky-header {
    visibility: hidden;
    position: absolute;
    pointer-events: none;
}

/* Filter row */
.tips-filter-row {
    display: flex;
    gap: var(--space-md);
}

.tips-filter-select {
    flex: 1;
    padding: var(--space-sm) var(--space-lg);
    height: 36px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    background: var(--surface-solid);
    cursor: pointer;
}

.tips-filter-select:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

/* Desktop: compact tips dropdowns to match other tabs */
@media (hover: hover) and (pointer: fine) {
    .tips-filter-select {
        height: 28px;
        font-size: var(--font-size-sm);
    }
}

/* Tip badges */
.tip-badge {
    display: inline-block;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tip-badge-level {
    background: var(--bg-badge);
    color: var(--text-secondary);
    margin-right: var(--space-xs);
}

.tip-badge-category {
    color: var(--text-accent);
    background: rgba(var(--brand-color-rgb), 0.1);
}

/* Browse list */
.tips-browse-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.tip-browse-card {
    background: var(--surface-translucent);
    padding: var(--space-xl) var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease;
}

.tip-browse-card:hover {
    box-shadow: var(--shadow-md);
}

.tip-browse-badges {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.tip-browse-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
    line-height: var(--line-height-snug);
}

.tip-browse-content {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-sm);
}

.tip-browse-example {
    background: rgba(var(--brand-color-rgb), 0.05);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

.tip-browse-example .tip-de {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.tip-browse-example .tip-en {
    color: var(--text-muted);

}

.tips-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-lg);
    padding: var(--space-3xl) 0;
}

.tips-count-header {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-align: right;
    padding: 0 var(--space-2xs) var(--space-sm);
}

.tips-show-more {
    display: block;
    width: 100%;
    padding: var(--space-xl);
    margin-top: var(--space-xs);
    background: rgba(var(--brand-color-rgb), 0.08);
    color: var(--text-accent);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background 0.15s ease;
}

.tips-show-more:hover {
    background: rgba(var(--brand-color-rgb), 0.15);
}

/* Responsive */
@media (max-width: 600px) {
    .tips-section {
        padding: 0 var(--space-xl) var(--space-xl);
    }

    .tip-of-the-day {
        padding: var(--space-xl) var(--space-xl);
    }

    .tip-browse-card {
        padding: var(--space-lg) var(--space-xl);
    }
}

/* ===========================================
   Settings Modal
   =========================================== */
.settings-modal {
    max-width: 320px;
}

.settings-group {
    margin-bottom: var(--space-3xl);
    padding-bottom: var(--space-2xl);
    border-bottom: 1px solid var(--border-divider);
}

.settings-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.settings-group-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xl);
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.settings-row.settings-row--actions {
    justify-content: flex-end;
    gap: var(--space-md);
}

.settings-row:last-child {
    margin-bottom: 0;
}

.settings-row label {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
}

.settings-select {
    padding: var(--space-sm) var(--space-lg);
    height: 32px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-lg);
    background: var(--surface-solid);
    min-width: 100px;
}

.settings-select:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.settings-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.settings-link-btn {
    background: transparent;
    border: none;
    color: var(--text-accent);
    font-size: var(--font-size-md);
    cursor: pointer;
    padding: var(--space-xs) 0;
}

.settings-link-btn:hover {
    text-decoration: underline;
}

/* ===========================================
   Tab Navigation System
   =========================================== */

/* Tab Bar - Bottom on mobile, Top on desktop */
.tab-bar {
    display: flex;
    justify-content: space-evenly;
    background: var(--bg-app);
    border-top: none;
    box-shadow: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200; /* Higher than header (100) so tab bar covers header when it slides up */
    padding: var(--space-md) env(safe-area-inset-left, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-right, 0px);
    /* Prevent horizontal swipes from moving viewport */
    touch-action: pan-y pinch-zoom;
    /* X-style auto-hide transition */
    transition: transform 0.2s ease-out;
}

/* X-style auto-hide: tab bar hides on myList */
/* Mobile (bottom tab bar): slide down */
@media (hover: none), (pointer: coarse) {
    body.tab-mylist .tab-bar.nav-hidden {
        transform: translateY(100%);
    }
}
/* Desktop (top tab bar): slide up */
@media (hover: hover) and (pointer: fine) {
    body.tab-mylist .tab-bar.nav-hidden {
        transform: translateY(-100%);
    }
}

.tab-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--tab-btn-gap);
    padding: var(--space-md) var(--space-xs);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--tab-btn-color);
    transition: color 0.2s ease;
    flex: 1;
    min-width: 0;
    position: relative;
}


.tab-btn:hover {
    color: var(--tab-btn-color-active);
    background: rgba(var(--brand-color-rgb), 0.04);
}

.tab-btn.active {
    color: var(--tab-btn-color-active);
    background: rgba(var(--brand-color-rgb), 0.08);
}

.tab-icon {
    font-size: var(--tab-icon-size);
    line-height: var(--line-height-none);
}

.tab-label {
    font-size: var(--tab-label-size);
    font-weight: var(--font-weight-medium);
}

/* Desktop: Tab bar at top for all tabs */
/* Height is determined by content (icon + label) + padding, not fixed */
@media (hover: hover) and (pointer: fine) {
    /* Reserve scrollbar space so fixed tab bar doesn't shift when
       switching between scrollable and non-scrollable tabs */
    html {
        scrollbar-gutter: stable;
    }

    .tab-bar {
        position: fixed;
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
        z-index: 200;
        margin: 0;
        max-width: none;
        border-radius: 0;
        padding: var(--space-xs) 0; /* Vertical padding creates height with content */
        border: none;
        box-shadow: none;
        background: var(--bg-app);
        align-items: center;
    }

    .tab-btn {
        flex: 1;
        flex-direction: row;
        gap: var(--space-sm);
        padding: var(--space-xs) var(--space-md);
    }

    /* Desktop tab bar is at top — show tooltips below */
    .tab-btn[data-tooltip]::after,
    .more-subtab-btn[data-tooltip]::after {
        bottom: auto;
        top: calc(100% + 6px);
    }

    .tab-icon {
        font-size: var(--font-size-xl);
    }

    .tab-label {
        font-size: var(--font-size-md);
    }

    /* Note: .more-subtab-btn desktop overrides are after base rules (line ~11076)
       to avoid cascade override — base rules at ~11049 come later in file */
}

/* Tab Content Visibility */
/* Hide content based on active tab, but never hide the tab buttons themselves */

/* When Learn tab is active, hide other tab content */
body.tab-learn [data-tab="mylist"]:not(.tab-btn),
body.tab-learn [data-tab="tips"]:not(.tab-btn),
body.tab-learn [data-tab="stats"]:not(.tab-btn),
body.tab-learn [data-tab="practice"]:not(.tab-btn),
body.tab-learn [data-tab="settings"]:not(.tab-btn) {
    display: none !important;
}

/* Tab visibility — 5 tabs: mylist, learn, explore, exams, more */
body.tab-mylist [data-tab="learn"]:not(.tab-btn),
body.tab-mylist [data-tab="explore"]:not(.tab-btn),
body.tab-mylist [data-tab="practice"]:not(.tab-btn),
body.tab-mylist [data-tab="more"]:not(.tab-btn) {
    display: none !important;
}
body.tab-learn [data-tab="mylist"]:not(.tab-btn),
body.tab-learn [data-tab="explore"]:not(.tab-btn),
body.tab-learn [data-tab="practice"]:not(.tab-btn),
body.tab-learn [data-tab="more"]:not(.tab-btn) {
    display: none !important;
}
body.tab-explore [data-tab="mylist"]:not(.tab-btn),
body.tab-explore [data-tab="learn"]:not(.tab-btn),
body.tab-explore [data-tab="practice"]:not(.tab-btn),
body.tab-explore [data-tab="more"]:not(.tab-btn) {
    display: none !important;
}
body.tab-practice [data-tab="mylist"]:not(.tab-btn),
body.tab-practice [data-tab="learn"]:not(.tab-btn),
body.tab-practice [data-tab="explore"]:not(.tab-btn),
body.tab-practice [data-tab="more"]:not(.tab-btn) {
    display: none !important;
}
body.tab-me [data-tab="mylist"]:not(.tab-btn),
body.tab-me [data-tab="learn"]:not(.tab-btn),
body.tab-me [data-tab="explore"]:not(.tab-btn),
body.tab-me [data-tab="practice"]:not(.tab-btn) {
    display: none !important;
}

/* ===========================================
   All Tabs: Consistent html/body base styles
   =========================================== */
html.tab-learn,
html.tab-mylist,
html.tab-explore,
html.tab-practice,
html.tab-me,
body.tab-learn,
body.tab-mylist,
body.tab-explore,
body.tab-practice,
body.tab-me {
    margin: 0;
    padding: 0;
    background: var(--bg-app);
}


/* ===========================================
   Learn Tab: Full-Viewport Layout (All Screen Sizes)
   Makes Learn tab immersive on desktop too, like mobile
   =========================================== */

body.tab-learn .app-container {
    max-width: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body.tab-learn .playback-section {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Match app background for consistency with myList */
    background: var(--bg-app);
    /* Prevent iOS Safari back/forward swipe gesture */
    touch-action: pan-y pinch-zoom;
    overscroll-behavior-x: none;
}

body.tab-learn .playback-status-wrapper {
    justify-content: center;
}

body.tab-learn .playback-status {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    text-align: center;
    overflow-y: auto;
    padding: 0 var(--space-2xl);
    width: 100%;
    /* Match app background for consistency */
    background: var(--bg-app);
    border-radius: 0;
}
/* Center content when short, top-align when overflowing.
   Spacers grow to split free space (centering), collapse to 0 on overflow. */
body.tab-learn .playback-status::before,
body.tab-learn .playback-status::after {
    content: '';
    flex: 1 0 0px;
}

/* Desktop: Learn tab specific layout */
@media (hover: hover) and (pointer: fine) {
    /* Offset playback section to account for tab bar */
    body.tab-learn .playback-section {
        top: 32px; /* Height of tab bar */
    }

    /* Combined controls row: single row layout */
    body.tab-learn .playback-controls-row {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        background: var(--bg-app);
        padding: var(--space-xs) var(--space-lg);
        gap: var(--space-xs);
        overflow: visible; /* Allow tooltips to show */
    }

    /* Flatten hierarchy so all items flow in single row */
    body.tab-learn .playback-header,
    body.tab-learn .playback-controls {
        display: contents;
    }

    body.tab-learn .playback-header-controls,
    body.tab-learn .playback-primary-row,
    body.tab-learn .content-config-group,
    body.tab-learn .playback-config-group {
        display: contents;
    }

    /* Dropdowns first, buttons after */
    body.tab-learn .playback-controls-row select {
        order: 1;
        height: 28px;
        font-size: var(--font-size-sm);
        background: var(--surface-solid);
        transition: opacity 0.15s ease-out;
    }

    body.tab-learn .playback-controls-row button {
        order: 2;
        transition: opacity 0.15s ease-out;
    }

    /* Split play container stays atomic (not flattened), groups with buttons */
    body.tab-learn .playback-controls-row .split-play-container {
        order: 2;
    }

    /* Consistent button sizes for desktop - override width-based media queries */
    body.tab-learn .playback-btn.icon-btn,
    body.tab-learn .playback-header-controls .playback-btn.toggle.icon-btn {
        width: 36px;
        height: 36px;
        padding: var(--space-sm);
    }

    body.tab-learn .playback-btn.icon-btn svg,
    body.tab-learn .playback-header-controls .playback-btn.toggle.icon-btn svg {
        width: var(--icon-size-desktop);
        height: var(--icon-size-desktop);
    }

    /* Position slider - own row below controls, edge to edge, matching background */
    body.tab-learn .position-slider-container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: var(--space-sm) var(--space-lg) var(--space-2xs) var(--space-lg); /* Top padding for labels */
        box-sizing: border-box;
        background: var(--bg-app);
    }

    /* Explicit label position for desktop */
    body.tab-learn .slider-min,
    body.tab-learn .slider-max,
    body.tab-learn .slider-current-pos {
        top: 0;
    }

    /* Override 768px mobile rules to keep consistent track position on desktop */
    body.tab-learn .slider-track-wrapper {
        padding: var(--space-2xs) 0;
    }

    body.tab-learn .position-slider {
        --thumb-width: 8px;
        height: 12px;
    }

    body.tab-learn .position-slider::-webkit-slider-thumb,
    body.tab-learn .position-slider::slider-thumb {
        width: 8px;
        height: 8px;
        margin-top: -3px;
    }

    body.tab-learn .playback-status {
        padding: 0 var(--space-3xl);
    }
}

/* Desktop narrow: switch to 2-row layout like mobile portrait dock */
@media (hover: hover) and (pointer: fine) and (max-width: 900px) {
    body.tab-learn .playback-controls-row {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: var(--space-2xs) var(--space-sm); /* Reduced row gap for compact spacing */
        padding: var(--space-xs) var(--space-lg) var(--space-2xs) var(--space-lg); /* Reduced padding, less at bottom for even gap to slider */
        overflow: visible; /* Allow tooltips to show */
    }

    /* Flatten all containers */
    body.tab-learn .playback-header,
    body.tab-learn .playback-controls,
    body.tab-learn .playback-header-controls,
    body.tab-learn .playback-primary-row,
    body.tab-learn .content-config-group,
    body.tab-learn .playback-config-group {
        display: contents;
    }

    /* Row 1: All dropdowns */
    body.tab-learn .playback-controls-row select {
        order: 1;
    }

    /* Line break after dropdowns */
    body.tab-learn .playback-controls-row::before {
        content: '';
        order: 2;
        flex-basis: 100%;
        height: 0;
    }

    /* Row 2: All buttons - space-evenly like dock-controls-row */
    body.tab-learn .playback-controls-row button {
        order: 3;
    }

    body.tab-learn .playback-controls-row .split-play-container {
        order: 3;
    }

    /* Line break after buttons */
    body.tab-learn .playback-controls-row::after {
        content: '';
        order: 4;
        flex-basis: 100%;
        height: 0;
    }

    /* Slider - edge to edge, matching background */
    body.tab-learn .position-slider-container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: var(--space-sm) var(--space-lg) var(--space-2xs) var(--space-lg); /* Full padding to override 768px rule */
        background: var(--bg-app);
    }

    /* Adjust label position for three-row layout */
    body.tab-learn .slider-min,
    body.tab-learn .slider-max,
    body.tab-learn .slider-current-pos {
        top: 0;
    }
}

/* ===========================================
   Settings Tab Styles
   =========================================== */

.settings-section {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-3xl);
    background: var(--surface-solid);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.settings-section .settings-group {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    margin-bottom: var(--space-2xl);
    border: 1px solid var(--border-divider);
}

.settings-section .settings-group:last-child {
    margin-bottom: 0;
}

.settings-section .settings-group-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xl);
}

.settings-section .settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xl);
    padding: var(--space-md) 0;
}

.settings-section .settings-row:last-child {
    margin-bottom: 0;
}

.settings-section .settings-row label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.settings-help-text {
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

.settings-help-text-credit {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-xs);
}

.settings-section .settings-select {
    padding: var(--space-md) var(--space-xl);
    height: 32px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-lg);
    background: var(--surface-solid);
    color: var(--text-primary);
    min-width: 110px;
    cursor: pointer;
}

.settings-section .settings-select:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.settings-page-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-3xl) 0;
    color: var(--text-primary);
}

.settings-action-btn {
    background: var(--brand-color);
    color: white;
    border: none;
    padding: var(--space-sm) var(--space-xl);
    height: 32px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    transition: background 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.settings-action-btn:hover {
    background: var(--brand-color-hover);
}

.settings-section .settings-link-btn,
.settings-group .settings-link-btn {
    background: var(--bg-badge);
    border: 1px solid var(--border-divider);
    color: var(--text-primary);
    padding: var(--space-sm) var(--space-xl);
    height: 32px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.settings-section .settings-link-btn:hover,
.settings-group .settings-link-btn:hover {
    background: var(--border-divider);
    color: var(--text-primary);
    text-decoration: none;
}

.settings-info {
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
}

#accountStatusRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#accountStatus {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}

/* Mobile: Add padding to app container to account for fixed bottom tab bar */
@media (hover: none), (pointer: coarse) {
    .app-container {
        padding-bottom: 80px;
    }
}

/* Desktop: Remove bottom padding since tab bar is at top */
@media (hover: hover) and (pointer: fine) {
    .app-container {
        padding-bottom: var(--space-3xl);
    }
}


/* ===========================================
   Stats/Progress Tab Styles
   =========================================== */

.stats-section {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-3xl);
    background: var(--surface-solid);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.stats-page-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-2xl) 0;
    color: var(--text-primary);
}

.stats-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    margin-bottom: var(--space-2xl);
    border: 1px solid var(--border-divider);
}

.stats-card:last-child {
    margin-bottom: 0;
}

.stats-card-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-xl);
}

/* Stacked progress bar */
.stats-progress-bar {
    height: 12px;
    background: var(--border-divider);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    margin-bottom: var(--space-xl);
}

.stats-progress-segment {
    height: 100%;
    transition: width 0.3s ease;
}

.stats-progress-known { background: var(--rating-mastered); }
.stats-progress-learning { background: var(--rating-learning); }
.stats-progress-new { background: var(--rating-unsure); }

/* Legend */
.stats-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
}

.stats-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-md);
    color: var(--text-primary);
}

.stats-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.stats-legend-dot.known { background: var(--rating-mastered); }
.stats-legend-dot.learning { background: var(--rating-learning); }
.stats-legend-dot.new { background: var(--rating-unsure); }
.stats-legend-dot.unrated { background: var(--border-divider); }

/* Big number display */
.stats-big-number {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: var(--line-height-none);
}

.stats-big-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--space-xs);
}

/* CEFR level rows */
.stats-cefr-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.stats-cefr-row {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.stats-cefr-label {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    color: #fff;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-sm);
    min-width: 28px;
    text-align: center;
}

.stats-cefr-bar {
    flex: 1;
    height: 8px;
    background: var(--border-divider);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
}

.stats-cefr-count {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    min-width: 70px;
    text-align: right;
    white-space: nowrap;
}

/* Coverage heatmap */
.stats-coverage-row {
    display: flex;
    gap: var(--space-2xs);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-sm);
    padding-left: 46px;
}

.stats-coverage-block {
    flex: 1;
    height: 8px;
    /* 2px radius keeps the block rectangular; --radius-sm (4px) would equal half-height and look bubbly */
    border-radius: 2px;
    min-width: 4px;
}

/* Empty state */
.stats-empty {
    text-align: center;
    padding: var(--space-3xl);
    color: var(--text-muted);
    font-size: var(--font-size-md);
}

/* Practice Activity stats */
.stats-streak {
    text-align: center;
    margin-bottom: var(--space-lg);
}
.stats-practice-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.stats-practice-row {
    padding: var(--space-md);
    background: var(--bg-list-items);
    border-radius: var(--radius-lg);
}
.stats-practice-label {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    margin-bottom: var(--space-2xs);
}
.stats-practice-detail {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}
.stats-practice-sub {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}
.stats-practice-tag {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    background: var(--bg-section);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-md);
}
[data-theme="dark"] .stats-practice-row {
    background: var(--bg-list-items);
}
[data-theme="dark"] .stats-practice-tag {
    background: var(--bg-section);
}
.stats-insight-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-section);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-sm);
}
.stats-insight-row:last-child {
    margin-bottom: 0;
}
.stats-insight-text {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
}
[data-theme="dark"] .stats-insight-row {
    background: var(--bg-list-items);
}

/* Mobile adjustments */
@media (hover: none), (pointer: coarse) {
    .stats-section {
        border-radius: 0;
        box-shadow: none;
        padding: var(--space-2xl) var(--space-xl);
    }
}


/* ===========================================
   myList Tab: Full-Viewport Layout (Consistent with Learn Tab)
   =========================================== */

/* Match background to eliminate visible edges */
/* myList specific: prevent body scroll */
/* overflow: clip for elastic bounce prevention is in the mobile media query below */

body.tab-mylist .app-container {
    max-width: none;
    width: 100%;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height - accounts for iOS Safari address bar */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Make this the scrolling container for sticky to work */
    overscroll-behavior: none; /* Prevent iOS elastic scroll from causing sticky header miscalculation */
}

body.tab-me .app-container {
    height: 100vh;
    height: 100dvh;
    padding-top: 0; /* Header clearance handled by JS (mobile) or sticky flow (desktop) */
    overflow-y: auto; /* Make this the scrolling container on desktop */
}

body.tab-explore .app-container {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}

body.tab-practice .app-container {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}

/* ===========================================
   myList Sticky Header - Single container for all controls
   Uses flexbox with consistent gap for uniform line spacing
   =========================================== */

/* The header container - scrolls with content on mobile (X-style) */
.mylist-sticky-header {
    background: var(--bg-app);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: var(--space-md) var(--space-2xl);
    position: sticky;
    top: 0;
    z-index: 100;
    overflow: visible;
}

/* Mobile: Option B - JS controls both header and list with transforms */
@media (hover: none), (pointer: coarse) {
    /* Prevent elastic bounce on mobile — clip is better than hidden for Safari */
    html.tab-mylist,
    body.tab-mylist,
    html.tab-learn,
    body.tab-learn,
    html.tab-me,
    body.tab-me,
    html.tab-explore,
    body.tab-explore {
        overflow: clip;
    }

    /* Prevent iOS Safari back/forward swipe gesture on all tabs */
    body.tab-learn .app-container,
    body.tab-me .app-container,
    body.tab-explore .app-container {
        overflow-x: hidden !important;
        overscroll-behavior-x: none !important;
    }

    /* Container: disable native scroll, we control everything */
    body.tab-mylist .app-container {
        overflow: hidden !important;
        padding-top: calc(132px + env(safe-area-inset-top, 0px));
    }

    /* Header: fixed, transformed by JS */
    body.tab-mylist .mylist-sticky-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding-top: calc(var(--space-md) + env(safe-area-inset-top, 0px));
        z-index: 100;
        background: var(--bg-app);
        will-change: transform;
    }

    /* List section: transformed by JS for scrolling */
    body.tab-mylist .list-section[data-tab="mylist"] {
        will-change: transform;
    }

    /* Learning list: disable native scroll - Option B controls scrolling via transforms */
    body.tab-mylist .learning-list {
        overflow: hidden !important;
        -webkit-overflow-scrolling: auto !important;
    }

    /* X-style: header hides with transform */
    body.tab-mylist .mylist-sticky-header.nav-hidden {
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
    }

    /* Practice tab: sub-tab toggle fixed at top on mobile */
    body.tab-practice .practice-subtab-toggle {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding-top: calc(var(--space-md) + env(safe-area-inset-top, 0px));
        z-index: 110;
        background: var(--bg-app);
    }

    /* Practice tab: pad content below fixed toggle */
    body.tab-practice .practice-content {
        padding-top: calc(50px + env(safe-area-inset-top, 0px));
    }

    /* Explore tab: sub-tab toggle fixed at top on mobile */
    body.tab-explore .explore-subtab-toggle {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding-top: calc(var(--space-md) + env(safe-area-inset-top, 0px));
        z-index: 110;
        background: var(--bg-app);
    }

    /* Explore tab: pad content below fixed toggle */
    body.tab-explore .explore-content {
        padding-top: calc(50px + env(safe-area-inset-top, 0px));
    }

    /* Me tab: simple scrollable page, no sub-tabs, no AutoHideNav */

    /* Learn tab: X-style navigation (same pattern as myList and Tips) */
    body.tab-learn .app-container {
        overflow: hidden !important;
        padding-bottom: 0; /* Tab bar is fixed, no padding needed */
    }

    /* Keep position: fixed from base rule. JS sets top/bottom to dock/tab bar heights
       so section fills exactly the visible area between them. */
    body.tab-learn .playback-section {
        height: auto; /* Override base height:100% — let top+bottom determine height */
        min-height: 0; /* No 100dvh needed — section sized by top+bottom */
        will-change: transform;
        justify-content: safe center; /* Center short content, start-align long */
        overflow: visible; /* Long content spills, scrolled by transform */
    }

    /* Wrapper and status are content-sized (not flex-grow) */
    body.tab-learn .playback-status-wrapper {
        flex: 0 0 auto;
    }

    body.tab-learn .playback-status {
        overflow: visible;
        flex: 0 0 auto;
    }
}

/* Hide sticky header when not on myList tab */
body:not(.tab-mylist) .mylist-sticky-header {
    visibility: hidden;
    position: absolute;
    pointer-events: none;
}

/* Input wrapper */
.mylist-sticky-header .input-wrapper {
    margin-bottom: var(--space-md);
}

/* Umlaut picker - overlays center info column when visible */
.mylist-sticky-header .umlaut-picker {
    margin: 0;
    justify-content: center;
}

/* Umlaut picker - absolutely positioned to overlay list-info without moving line 3 */
.mylist-sticky-header .umlaut-picker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

/* Mobile: position over line 2 (list-info row) */
@media (hover: none), (pointer: coarse) {
    .mylist-sticky-header .input-wrapper {
        margin-bottom: var(--space-2xs); /* Minimal spacing to line 2 */
    }

    .mylist-sticky-header .umlaut-picker {
        /* Full width, centered over list-info row */
        left: 0;
        right: 0;
        transform: none;
        top: auto;
        /* Position at Row 2: above Row 3 (buttons) + visual adjustment */
        bottom: calc(var(--mylist-row-height-mobile) + var(--mylist-picker-visual-balance));
    }
}

/* Desktop: position in Row 2 (controls row at bottom) */
@media (hover: hover) and (pointer: fine) {
    .mylist-sticky-header .umlaut-picker {
        /* Row 2 is at bottom, just use visual-balance */
        bottom: var(--mylist-picker-visual-balance);
    }
}

/* Controls row - toggles left, actions right */
.mylist-sticky-header .list-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* Toggles stay left */
.mylist-sticky-header .list-toggles {
    display: flex;
    align-items: center;
    gap: var(--space-md); /* Fat finger spacing */
}

/* ===========================================
   iOS SAFARI FIXES - Complete header rewrite
   ===========================================
   iOS Safari has fundamental bugs with sticky positioning that cause
   viewport corruption after modal operations. This provides a complete
   alternative implementation using fixed positioning.
   */

@supports (-webkit-touch-callout: none) {
    /* iOS Safari: Fixed header for X-style transform control */
    body.tab-mylist .mylist-sticky-header {
        position: fixed !important; /* Fixed so transforms can control visibility */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important; /* Base padding + safe area for notch */
        z-index: 100 !important;
        background: var(--bg-app) !important; /* Match app background */
        border-bottom: none !important;
        /* Transition controlled by JS - set to none during drag, ease-out during snap */
    }

    /* iOS Safari: header hides with swipe */
    body.tab-mylist .mylist-sticky-header.nav-hidden {
        transform: translateY(-100%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Hide the header when not on myList tab - iOS version */
    body:not(.tab-mylist) .mylist-sticky-header {
        display: none !important;
    }

    /* iOS Safari: Keep app-container with proper height - Option B uses overflow:hidden */
    body.tab-mylist .app-container {
        height: 100vh !important;
        height: 100dvh !important;
        /* Option B: overflow:hidden set by mobile media query - don't override here */
        padding-top: 132px; /* Fallback - JS overrides with measured value */
    }
}

/* Info (count + filters) - truly centered with absolute positioning */
.mylist-sticky-header .list-info {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: var(--mylist-controls-row-height-desktop); /* Consistent centering across modes */
}

/* Action buttons stay right */
.sticky-action-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* Mobile: info on separate line above (not absolute) */
@media (hover: none), (pointer: coarse) {
    .mylist-sticky-header .list-controls-row {
        flex-wrap: wrap;
    }

    .mylist-sticky-header .list-info {
        position: static;
        transform: none;
        width: 100%;
        order: -1;
        justify-content: center;
        margin-bottom: var(--space-2xs); /* Minimal spacing to toggles row */
    }

    /* Tighter spacing on mobile - no gap between header and list */
    .mylist-sticky-header {
        padding-bottom: var(--space-2xs);
    }

    body.tab-mylist .learning-list {
        padding-top: 0;
    }

    /* Mobile: larger search input */
    .list-search-input {
        min-height: 40px;
        font-size: var(--font-size-xl); /* Prevents iOS zoom on focus */
    }
}

/* Narrow window: switch to multi-row layout to prevent overlap */
/* This rule applies to mobile/touch - handled by existing rules above (lines 4716-4728) */

/* Narrow DESKTOP window: override the nowrap and use two-row layout */
@media (hover: hover) and (pointer: fine) and (max-width: 700px) {
    /* Allow the controls-normal container to wrap, buttons spread left/right like mobile */
    body.tab-mylist .mylist-sticky-header .list-controls-normal {
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        padding-top: 0 !important; /* No extra padding - info row now has consistent height */
    }

    /* Make list-info take full width and go to its own row */
    /* Use same min-height as wide mode for consistent vertical centering */
    body.tab-mylist .mylist-sticky-header .list-info {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        order: -1 !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: var(--mylist-controls-row-height-desktop) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Toggle buttons on left, action buttons on right (like mobile) */
    body.tab-mylist .mylist-sticky-header .list-toggles {
        order: 0 !important;
    }

    body.tab-mylist .mylist-sticky-header .sticky-action-buttons {
        order: 1 !important;
    }

    /* CSS fallback for 2-row header: tab-area + info row + buttons row + padding */
    /* JS dynamic measurement overrides this on load and resize */
    body.tab-mylist .app-container {
        padding-top: calc(var(--mylist-header-tab-area) + var(--mylist-controls-row-height-desktop) * 2 + var(--space-xs));
    }

    /* Umlaut picker: position at Row 2 (info), above Row 3 (buttons) */
    body.tab-mylist .mylist-sticky-header .umlaut-picker {
        /* Row 3 height + same visual-balance as wide mode (info row now has same height) */
        bottom: calc(var(--mylist-row-height-desktop) + var(--mylist-picker-visual-balance)) !important;
    }
}

/* Very narrow DESKTOP window (<550px): even more compact */
@media (hover: hover) and (pointer: fine) and (max-width: 550px) {
    /* Smaller dropdowns */
    body.tab-mylist .mylist-sticky-header .list-filter-select {
        min-width: 55px !important;
        padding: 0 var(--space-xs) !important;
        font-size: var(--font-size-xs) !important;
    }

    /* Tighter spacing */
    body.tab-mylist .mylist-sticky-header .list-info {
        gap: var(--space-xs) !important;
    }

    body.tab-mylist .mylist-sticky-header .list-filters {
        gap: var(--space-xs) !important;
    }

    /* Smaller count */
    body.tab-mylist .mylist-sticky-header .list-count {
        font-size: var(--font-size-2xs) !important;
    }
}


/* Remove card styling from list section */
body.tab-mylist .list-section {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Mobile adjustments - smaller padding and font sizes */
@media (hover: none), (pointer: coarse) {
    .mylist-sticky-header {
        padding: var(--space-sm) var(--space-lg); /* Reduced horizontal padding for wider input */
    }

    .mylist-sticky-header .list-count {
        font-size: var(--font-size-xs);
    }

    .mylist-sticky-header .list-filter-select {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-size-sm);
        height: 36px;  /* Match row balance with 44px buttons */
        width: auto;
        min-width: 80px;
    }

    /* Touch targets kept at 44px for fat finger accessibility */
    .mylist-sticky-header .list-toggle-btn,
    .mylist-sticky-header .list-action-btn {
        height: var(--touch-target-min);
        width: var(--touch-target-min);
        font-size: var(--font-size-2xl);
    }
}

/* Learning list - fill remaining space */
body.tab-mylist .learning-list {
    flex: 1;
    max-height: none;
    min-height: 0;
    margin: 0 -15px; /* Extend into parent padding */
    padding: 0; /* No gap - header measurement handles spacing */
    background: var(--bg-app); /* Match app background for consistent look */
}

/* Mobile: Account for bottom tab bar on tabs where it's visible */
@media (hover: none), (pointer: coarse) {
    body.tab-mylist .app-container,
    body.tab-me .app-container,
    body.tab-explore .app-container {
        padding-bottom: 70px; /* Space for fixed bottom tab bar */
    }
}

/* Desktop: Account for top tab bar */
@media (hover: hover) and (pointer: fine) {
    /* Explore, Practice, Me: sub-tab/jump row is fixed under tab bar (see overrides
       in their own sections below). Padding-top must clear tab bar + the entire
       sub-tab row (top pad + buttons ~32px + bottom pad). */
    body.tab-explore .app-container,
    body.tab-practice .app-container,
    body.tab-me .app-container {
        padding-top: calc(var(--mylist-header-tab-area) + var(--space-md) + 32px + var(--space-md));
    }
}

/* Desktop myList: specific adjustments */
@media (hover: hover) and (pointer: fine) {
    /* Offset content below fixed header: tab-area + controls row + bottom padding */
    body.tab-mylist .app-container {
        padding-top: calc(var(--mylist-header-tab-area) + var(--mylist-controls-row-height-desktop) + var(--space-xs));
        /* scrollbar-gutter set globally in desktop media query */
    }

    /* X-style: header is fixed on desktop so transform isn't clipped by overflow */
    /* Header starts at top:0 but has padding-top to push content below tab bar */
    /* This allows translateY(-headerHeight) to fully hide behind the tab bar */
    body.tab-mylist .mylist-sticky-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        max-width: none; /* Full width to match tab bar */
        margin: 0;
        padding-top: var(--mylist-header-tab-area);
        padding-bottom: var(--space-xs);
        padding-left: var(--space-3xl);
        padding-right: var(--space-3xl);
        z-index: 150; /* Below tab bar (200) so it hides behind it */
    }

    /* Desktop: controls row with consistent alignment */
    body.tab-mylist .mylist-sticky-header .list-controls-row {
        min-height: var(--mylist-controls-row-height-desktop) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    /* Desktop: horizontal buttons (shorter height, wider) */
    body.tab-mylist .mylist-sticky-header .list-toggle-btn,
    body.tab-mylist .mylist-sticky-header .list-action-btn {
        height: 28px !important;
        width: auto !important;
        min-width: 36px;
        padding: 0 var(--space-md) !important;
        border-radius: var(--radius-md);
    }

    /* Toggle buttons (definitions, examples): use mobile icon size */
    body.tab-mylist .mylist-sticky-header .list-toggle-btn svg {
        width: var(--icon-size-mobile) !important;
        height: var(--icon-size-mobile) !important;
    }

    /* Toggle buttons x-overlay: match icon size, centered */
    body.tab-mylist .mylist-sticky-header .list-toggle-btn.has-x-overlay .x-overlay {
        width: var(--icon-size-mobile) !important;
        height: var(--icon-size-mobile) !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Action buttons (speak, shuffle, clear): smaller 16px icons, subtle */
    body.tab-mylist .mylist-sticky-header .list-action-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Desktop: compact dropdowns with subtle outline */
    body.tab-mylist .mylist-sticky-header .list-filter-select {
        height: 28px !important;
        padding: 0 var(--space-md) !important;
        font-size: var(--font-size-sm) !important;
        line-height: 28px !important; /* Match height for consistent text centering */
        background: var(--surface-solid);
        border: 1px solid var(--input-border);
        border-radius: var(--radius-lg);
        color: var(--text-secondary);
        cursor: pointer;
    }

    body.tab-mylist .mylist-sticky-header .list-filter-select:hover {
        border-color: var(--border-accent);
        color: var(--text-primary);
    }

    body.tab-mylist .mylist-sticky-header .list-filter-select:focus {
        outline: none;
        border-color: var(--border-accent);
    }

    body.tab-mylist .mylist-sticky-header .list-count {
        font-size: var(--font-size-2xs);
    }

    body.tab-mylist .mylist-sticky-header .list-info {
        gap: var(--space-sm);
    }

    body.tab-mylist .mylist-sticky-header .list-toggles,
    body.tab-mylist .mylist-sticky-header .list-actions {
        gap: var(--space-xs);
        padding-top: 0 !important;
        border-top: none !important;
    }

    /* Desktop: compact umlaut buttons */
    body.tab-mylist .mylist-sticky-header .umlaut-picker {
        gap: var(--space-2xs);
    }

    body.tab-mylist .mylist-sticky-header .umlaut-btn {
        min-width: 20px;
        height: var(--icon-size-mobile);
        font-size: var(--font-size-sm);
        border-radius: var(--radius-sm);
        padding: 0 var(--space-xs);
    }

    /* X-style: header hides on scroll (desktop) */
    body.tab-mylist .mylist-sticky-header.nav-hidden {
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
    }
}


/* ===========================================
   ORIENTATION-BASED LAYOUT (Phase 1: myList Header)
   See docs/ORIENTATION_BASED_LAYOUT.md for design rationale

   Strategy:
   - ORIENTATION controls LAYOUT (tab bar position, flex direction)
   - DEVICE TYPE controls SIZES (button heights, spacing, font sizes)
   =========================================== */

/* ---- LANDSCAPE LAYOUT (width > height AND wide enough for single row) ---- */
@media (orientation: landscape) and (min-width: 701px) {
    /* Tab bar at top for landscape (touch devices won't get desktop hover styles) */
    .tab-bar {
        position: fixed !important;
        top: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        border-radius: 0 !important;
        z-index: 200 !important;
        height: 32px !important;
        background: var(--bg-app) !important;
    }

    /* Tab buttons: horizontal arrangement */
    .tab-btn {
        flex-direction: row !important;
        gap: var(--space-sm) !important;
        padding: 0 var(--space-2xl) !important;
        height: 32px !important;
    }

    /* X-style nav: tab bar at top slides up to hide */
    body.tab-mylist .tab-bar.nav-hidden {
        transform: translateY(-100%) !important;
    }

    /* Header: fixed below tab bar */
    body.tab-mylist .mylist-sticky-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 150 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* Controls row: single row, centered alignment */
    body.tab-mylist .mylist-sticky-header .list-controls-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    /* List info: absolutely centered (both horizontally and vertically) */
    body.tab-mylist .mylist-sticky-header .list-info {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: auto !important;
        order: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Button groups: no wrapping */
    body.tab-mylist .mylist-sticky-header .list-toggles,
    body.tab-mylist .mylist-sticky-header .list-actions {
        padding-top: 0 !important;
        border-top: none !important;
    }
}

/* ---- PORTRAIT LAYOUT (mobile/touch only) ---- */
@media (orientation: portrait) and (hover: none), (orientation: portrait) and (pointer: coarse) {
    /* Tab bar at bottom */
    .tab-bar {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 200 !important;
    }

    /* X-style nav: tab bar at bottom slides down to hide */
    body.tab-mylist .tab-bar.nav-hidden {
        transform: translateY(100%) !important;
    }

    /* Tab buttons: vertical arrangement */
    .tab-btn {
        flex-direction: column !important;
        gap: var(--space-xs) !important;
    }

    /* Header: fixed at top */
    body.tab-mylist .mylist-sticky-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        /* GPU acceleration for smooth X-style transforms */
        will-change: transform !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }

    /* Controls row: wraps to multiple rows */
    body.tab-mylist .mylist-sticky-header .list-controls-row {
        flex-wrap: wrap !important;
    }

    /* List info: full width row above buttons */
    body.tab-mylist .mylist-sticky-header .list-info {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        order: -1 !important;
        justify-content: center !important;
    }
}

/* ---- DESKTOP SIZES (mouse/trackpad) ---- */
@media (hover: hover) and (pointer: fine) {
    /* Tab bar and buttons use unified desktop styles from line ~4052 */

    /* Header padding */
    body.tab-mylist .mylist-sticky-header {
        padding-left: var(--space-3xl) !important;
        padding-right: var(--space-3xl) !important;
        padding-bottom: var(--space-xs) !important;
    }

    /* Input wrapper */
    body.tab-mylist .mylist-sticky-header .input-wrapper {
        margin-bottom: var(--space-xs) !important;
        flex-direction: row !important;
    }

    /* Input field: compact */
    body.tab-mylist .mylist-sticky-header #smartInput {
        height: 28px !important;
        padding: var(--space-xs) var(--space-lg) !important;
        font-size: var(--font-size-md) !important;
        margin-bottom: 0 !important;
    }

    /* Controls row height */
    body.tab-mylist .mylist-sticky-header .list-controls-row {
        min-height: var(--mylist-controls-row-height-desktop) !important;
    }

    /* List info gap */
    body.tab-mylist .mylist-sticky-header .list-info {
        gap: var(--space-sm) !important;
        margin-bottom: 0 !important;
    }

    /* Buttons: compact horizontal pill shape */
    body.tab-mylist .mylist-sticky-header .list-toggle-btn,
    body.tab-mylist .mylist-sticky-header .list-action-btn {
        height: 28px !important;
        width: auto !important;
        min-width: 36px !important;
        padding: 0 var(--space-md) !important;
        border-radius: var(--radius-md) !important;
    }

    /* Toggle icons: use mobile icon size */
    body.tab-mylist .mylist-sticky-header .list-toggle-btn svg {
        width: var(--icon-size-mobile) !important;
        height: var(--icon-size-mobile) !important;
    }

    /* Action icons: 16px */
    body.tab-mylist .mylist-sticky-header .list-action-btn svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Dropdowns: compact with outline */
    body.tab-mylist .mylist-sticky-header .list-filter-select {
        height: 28px !important;
        padding: 0 var(--space-md) !important;
        font-size: var(--font-size-sm) !important;
        line-height: 28px !important; /* Match height for consistent text centering */
        background: var(--surface-solid) !important;
        border: 1px solid var(--input-border) !important;
        border-radius: var(--radius-lg) !important;
    }

    /* Button groups: tight spacing */
    body.tab-mylist .mylist-sticky-header .list-toggles,
    body.tab-mylist .mylist-sticky-header .list-actions {
        gap: var(--space-xs) !important;
    }

    /* Dropdowns gap: consistent across orientations */
    body.tab-mylist .mylist-sticky-header .list-filters {
        gap: var(--space-sm) !important;
    }

    /* Umlaut picker: compact */
    body.tab-mylist .mylist-sticky-header .umlaut-picker {
        gap: var(--space-2xs) !important;
    }

    body.tab-mylist .mylist-sticky-header .umlaut-btn {
        min-width: 20px !important;
        height: var(--icon-size-mobile) !important;
        font-size: var(--font-size-sm) !important;
        border-radius: var(--radius-sm) !important;
        padding: 0 var(--space-xs) !important;
    }

    /* Item count: small */
    body.tab-mylist .mylist-sticky-header .list-count {
        font-size: var(--font-size-2xs) !important;
    }

    /* X-overlay: match icon size */
    body.tab-mylist .mylist-sticky-header .list-toggle-btn.has-x-overlay .x-overlay {
        width: var(--icon-size-mobile) !important;
        height: var(--icon-size-mobile) !important;
    }
}

/* ---- DESKTOP + LANDSCAPE: header offset for top tab bar ---- */
@media (hover: hover) and (pointer: fine) and (orientation: landscape) {
    body.tab-mylist .mylist-sticky-header {
        padding-top: var(--mylist-header-tab-area) !important;
    }

    body.tab-mylist .app-container {
        padding-top: calc(var(--mylist-header-tab-area) + var(--mylist-controls-row-height-desktop) + var(--space-xs));
    }
}

/* ---- DESKTOP + PORTRAIT: header adjustments ---- */
/* On desktop, tab bar is always at top regardless of orientation */
@media (hover: hover) and (pointer: fine) and (orientation: portrait) {
    body.tab-mylist .mylist-sticky-header {
        padding-top: var(--mylist-header-tab-area) !important;
    }

    body.tab-mylist .app-container {
        padding-top: calc(var(--mylist-header-tab-area) + var(--mylist-controls-row-height-desktop) + var(--space-xs));
    }
}

/* ---- TOUCH SIZES (mobile/tablet) ---- */
@media (hover: none), (pointer: coarse) {
    /* Tab bar styling */
    .tab-bar {
        padding: var(--space-md) env(safe-area-inset-left, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-right, 0px) !important;
    }

    /* Tab buttons: touch targets */
    .tab-btn {
        padding: var(--space-md) var(--space-xs) !important;
    }

    /* Header padding */
    body.tab-mylist .mylist-sticky-header {
        padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: var(--space-xs) !important;
        padding-left: var(--space-lg) !important;
        padding-right: var(--space-lg) !important;
        z-index: 100 !important;
    }

    /* Content offset - JS will override with measured values */
    body.tab-mylist .app-container {
        padding-top: calc(142px + env(safe-area-inset-top, 0px)); /* Fallback, JS overrides */
        padding-bottom: 80px; /* Fallback, JS overrides */
    }

    /* Input wrapper */
    body.tab-mylist .mylist-sticky-header .input-wrapper {
        margin-bottom: var(--space-2xs) !important;
    }

    /* List info margin */
    body.tab-mylist .mylist-sticky-header .list-info {
        margin-bottom: var(--space-2xs) !important;
    }

    /* Buttons: 44px touch targets */
    body.tab-mylist .mylist-sticky-header .list-toggle-btn,
    body.tab-mylist .mylist-sticky-header .list-action-btn {
        height: var(--touch-target-min) !important;
        width: var(--touch-target-min) !important;
        padding: 0 !important;
        border-radius: var(--radius-lg) !important;
    }

    /* Toggle icons: use landscape icon size */
    body.tab-mylist .mylist-sticky-header .list-toggle-btn svg {
        width: var(--icon-size-mobile) !important;
        height: var(--icon-size-mobile) !important;
    }

    /* Action icons: same size as toggle icons */
    body.tab-mylist .mylist-sticky-header .list-action-btn svg {
        width: var(--icon-size-mobile) !important;
        height: var(--icon-size-mobile) !important;
    }

    /* Dropdowns: larger touch targets */
    body.tab-mylist .mylist-sticky-header .list-filter-select {
        height: 36px !important;
        padding: var(--space-sm) var(--space-md) !important;
        font-size: var(--font-size-sm) !important;
    }

    /* Button groups: more spacing */
    body.tab-mylist .mylist-sticky-header .list-toggles,
    body.tab-mylist .mylist-sticky-header .list-actions {
        gap: var(--space-md) !important;
    }

    /* Umlaut picker: larger touch targets */
    body.tab-mylist .mylist-sticky-header .umlaut-btn {
        min-width: 34px !important;
        height: 40px !important;
        font-size: var(--font-size-2xl) !important;
    }

    /* Item count */
    body.tab-mylist .mylist-sticky-header .list-count {
        font-size: var(--font-size-xs) !important;
    }

    /* X-overlay: match icon size */
    body.tab-mylist .mylist-sticky-header .list-toggle-btn.has-x-overlay .x-overlay {
        width: var(--icon-size-mobile) !important;
        height: var(--icon-size-mobile) !important;
    }
}

/* ---- NARROW SCREENS (360px and below): compact dropdowns ---- */
@media (max-width: 380px) {
    /* Smaller dropdowns to fit narrow screens */
    body.tab-mylist .mylist-sticky-header .list-filter-select {
        min-width: 60px !important;
        padding: var(--space-xs) var(--space-sm) !important;
        font-size: var(--font-size-xs) !important;
    }

    /* Tighter gaps in info row */
    body.tab-mylist .mylist-sticky-header .list-info {
        gap: var(--space-xs) !important;
    }

    /* Smaller count text */
    body.tab-mylist .mylist-sticky-header .list-count {
        font-size: var(--font-size-2xs) !important;
    }
}

/* ---- TOUCH + LANDSCAPE: notch handling, tab bar at bottom (same as portrait) ---- */
@media (pointer: coarse) and (orientation: landscape) {
    /* Tab bar stays at bottom in landscape (consistent with portrait) */
    .tab-bar {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        /* Safe area for notch on sides, bottom padding for home indicator */
        padding: var(--space-md) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) !important;
        height: auto !important;
        border: none !important;
        box-shadow: none !important;
        z-index: 200 !important;
    }

    /* X-style nav: tab bar at bottom slides down to hide */
    body.tab-mylist .tab-bar.nav-hidden {
        transform: translateY(100%) !important;
    }

    /* Tab buttons: horizontal layout, compact for limited vertical space */
    .tab-btn {
        flex-direction: row !important;
        gap: var(--tab-btn-gap-landscape) !important;
        padding: var(--tab-btn-padding-landscape) !important;
    }

    /* Header: no extra top padding (tab bar is at bottom) */
    body.tab-mylist .mylist-sticky-header {
        padding-top: env(safe-area-inset-top, 6px) !important;
        padding-left: env(safe-area-inset-left, 6px) !important;
        padding-right: env(safe-area-inset-right, 6px) !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Content: full safe-area padding */
    body.tab-mylist .app-container {
        padding-top: 140px; /* Fallback - JS overrides with measured value */
        padding-bottom: var(--space-lg); /* Fallback - JS overrides */
        padding-left: env(safe-area-inset-left, 6px) !important;
        padding-right: env(safe-area-inset-right, 6px) !important;
    }

    /* Smaller buttons for limited vertical space */
    body.tab-mylist .mylist-sticky-header .list-toggle-btn,
    body.tab-mylist .mylist-sticky-header .list-action-btn {
        height: 36px !important;
        width: 36px !important;
    }

    /* Keep same icon sizes as landscape even with smaller buttons */
    body.tab-mylist .mylist-sticky-header .list-toggle-btn svg {
        width: var(--icon-size-mobile) !important;
        height: var(--icon-size-mobile) !important;
    }

    body.tab-mylist .mylist-sticky-header .list-action-btn svg {
        width: var(--icon-size-mobile) !important;
        height: var(--icon-size-mobile) !important;
    }

    /* Smaller dropdowns */
    body.tab-mylist .mylist-sticky-header .list-filter-select {
        height: 30px !important;
    }

    /* Controls row: tighter */
    body.tab-mylist .mylist-sticky-header .list-controls-row {
        min-height: 36px !important;
    }

    /* Umlaut picker: position at Row 2 (below input) using top positioning */
    body.tab-mylist .mylist-sticky-header .umlaut-picker {
        position: absolute !important;
        bottom: auto !important;
        /* safe-area + Row 1 height + gap + visual adjustment */
        top: calc(
            env(safe-area-inset-top, 6px) +
            var(--mylist-row-height-mobile-landscape) +
            var(--mylist-row-gap-mobile-landscape) +
            var(--mylist-picker-visual-balance)
        ) !important;
        /* Center horizontally: span full width, let flexbox center the buttons */
        left: env(safe-area-inset-left, 6px) !important;
        right: env(safe-area-inset-right, 6px) !important;
        transform: none !important;
        width: auto !important;
        /* Override base styles that interfere with absolute positioning */
        max-width: none !important;
        margin: 0 !important;
    }

    /* Smaller umlaut buttons */
    body.tab-mylist .mylist-sticky-header .umlaut-btn {
        min-width: 28px !important;
        height: 32px !important;
        font-size: var(--font-size-lg) !important;
    }

    /* X-overlay: match icon size */
    body.tab-mylist .mylist-sticky-header .list-toggle-btn.has-x-overlay .x-overlay {
        width: var(--icon-size-mobile) !important;
        height: var(--icon-size-mobile) !important;
    }

    /* Learning list: proper sizing in landscape - Option B controls scrolling via transforms */
    body.tab-mylist .learning-list {
        /* Prevent any max-height constraints in landscape */
        max-height: none !important;
        /* Prevent font scaling */
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    /* App container: Option B uses overflow:hidden - don't override here */
    body.tab-mylist .app-container {
        /* Option B: overflow:hidden set by mobile media query - scrolling controlled by JS transforms */
        /* Prevent font scaling during scroll */
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
}

/* ---- TOUCH + PORTRAIT: safe area padding for bottom tab bar ---- */
@media (pointer: coarse) and (orientation: portrait) {
    .tab-bar {
        padding: var(--space-md) 0 env(safe-area-inset-bottom, 0px) !important;
    }
}


/* ===========================================
   Learn Tab Dock (Context-Aware Bottom Bar)
   =========================================== */

.learn-dock {
    display: none; /* Hidden by default, shown only on mobile Learn tab */
}

/* Tab overlay removed — X-style navigation uses the regular tab bar */

/* Mobile/touch devices: use dock instead of header controls */
@media (hover: none), (pointer: coarse) {
    /* Hide playback header controls on mobile Learn tab for content-first experience */
    body.tab-learn .playback-header {
        display: none;
    }

    /* Hide playback controls row on mobile (dock replaces it) */
    body.tab-learn .playback-controls {
        display: none;
    }

    /* Hide the combined controls row wrapper on mobile */
    body.tab-learn .playback-controls-row {
        display: none;
    }

    /* Hide position slider on mobile for cleaner look */
    body.tab-learn .position-slider-container {
        display: none;
    }

    /* Learn dock - always visible at top for X-style navigation */
    body.tab-learn .learn-dock {
        --dock-gap: var(--space-xs);
        --dock-margin: var(--space-2xl);
        --dock-padding-top: var(--nav-padding-top); /* Use global nav padding */
        --dock-padding-bottom: var(--space-md);
        display: flex; /* Always visible */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--dock-gap);
        position: fixed;
        left: 0;
        right: 0;
        top: 0; /* Always at top */
        bottom: auto;
        width: 100%;
        background: var(--bg-app);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-radius: 0;
        /* Top position: includes safe-area-inset-top */
        padding: calc(var(--dock-padding-top) + env(safe-area-inset-top, 0px)) var(--dock-margin) var(--dock-padding-bottom) var(--dock-margin);
        z-index: 100;
        box-sizing: border-box;
        /* Prevent horizontal swipes from moving viewport */
        touch-action: pan-y pinch-zoom;
        /* No will-change:transform here — it creates a containing block that breaks
           position:fixed children (slider drag indicator). X-style applies transforms
           directly when scrolling, which provides GPU acceleration on demand. */
    }

    /* Dock rows - fill available width, center content */
    .dock-row {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: var(--space-md); /* Fat finger spacing */
    }

    .dock-config-row {
        order: 1;
        gap: var(--space-lg);
    }

    .dock-controls-row {
        order: 2;
        gap: var(--space-xs);
        justify-content: space-evenly;
    }

    /* Dock select dropdowns */
    .dock-select {
        height: 36px;
        padding: 0 var(--space-md);
        border: 1px solid var(--input-border);
        border-radius: var(--radius-lg);
        background: var(--surface-solid);
        font-size: var(--font-size-sm);
        color: var(--text-primary);
        cursor: pointer;
        flex: 1;
        max-width: 45%;
    }

    .dock-select:hover {
        border-color: var(--border-accent);
    }

    .dock-select:focus {
        outline: none;
        border-color: var(--border-accent);
    }

    .dock-select:disabled {
        opacity: var(--disabled-opacity);
        cursor: not-allowed;
        color: var(--color-disabled);
    }

    /* 4x1 single row for all dropdowns on mobile */
    .dock-config-row {
        flex-wrap: nowrap;
        gap: var(--space-xs);
    }

    .dock-config-row .dock-select {
        flex: 1 1 0;
        min-width: 0; /* Allow shrinking below content */
        max-width: none;
        box-sizing: border-box;
        padding: 0 var(--space-xs);
        font-size: var(--font-size-2xs);
        height: 36px;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    /* Filter dropdowns - same size */
    .dock-filter-select {
        font-size: var(--font-size-2xs);
    }

    /* Dock slider row - fill available width */
    .dock-slider-row {
        width: 100%;
        padding: 0;
        order: -1; /* Bottom dock: slider at top (away from browser controls) */
        position: relative;
        display: block; /* Override flex from .dock-row */
        margin-bottom: var(--space-md); /* Bottom dock: add spacing to match top dock */
    }

    /* Top dock: slider at bottom (away from top browser UI) */
    .learn-dock.position-top .dock-slider-row {
        order: 10;
        margin-bottom: 0; /* Reset bottom dock margin */
        margin-top: calc(var(--space-md) * -1); /* Pull closer to controls row for equal visual spacing */
    }

    .dock-slider-track-wrapper {
        position: relative;
        padding-top: var(--space-lg); /* Space for labels above trackbar (reduced for even row spacing) */
        width: 100%;
        display: block;
        z-index: 2; /* Ensure slider is above labels */
    }

    /* Top dock only: pull slider row bottom up to align with thumb bottom */
    .learn-dock.position-top .dock-slider-track-wrapper {
        /*
         * Pull slider row bottom up to align with thumb bottom
         * - Track at 10px padding + ~12px into input = ~22px from wrapper top
         * - Thumb: 20px tall, margin-top: -9px → extends 11px below track top
         * - Input height varies by browser, creates extra space below thumb
         * - Negative margin compensates for this internal space
         */
        margin-bottom: calc(var(--space-md) * -1);
    }

    /* All three labels share same styling so they merge perfectly */
    .dock-slider-min,
    .dock-slider-max,
    .dock-slider-current {
        position: absolute;
        top: -2px; /* Raised slightly for better visual separation from track */
        font-size: var(--font-size-2xs);
        pointer-events: none;
        font-weight: var(--font-weight-medium);
        color: var(--text-muted);
    }

    /* Current position indicator - positioned by JS */
    .dock-slider-current {
        color: var(--text-accent);
        background: transparent;
        padding: 0 1px;
        z-index: 1;
        transition: transform 0.15s ease-out, font-size 0.15s ease-out, font-weight 0.15s ease-out;
    }

    /* Magnified state during active dragging */
    /* Note: vertical position now set by JS to place below preview */
    .dock-slider-current.dragging {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--brand-color-hover);
        transform: translateX(-50%); /* Only horizontal centering, JS sets vertical */
    }

    /* Slider scrub preview base styles are in main CSS section */
    /* Mobile-specific overrides would go here if needed */

    /* Dock slider - small visual thumb but larger touch target */
    .dock-position-slider {
        --thumb-width: 20px; /* Actual touch target size for label positioning */
        --dock-slider-progress: 0;
        width: 100%;
        height: 24px; /* Touch target area */
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        cursor: pointer;
        touch-action: none; /* Allow full slider control without interference */
    }

    /* Track - very thin and subtle, with transparent edges for thumb radius */
    .dock-position-slider::-webkit-slider-runnable-track {
        width: 100%;
        height: 2px;
        background: linear-gradient(to right,
            transparent 0%,
            transparent 10px,
            var(--brand-color) 10px,
            var(--brand-color) calc(10px + (100% - 20px) * var(--dock-slider-progress, 0) / 100),
            var(--slider-track) calc(10px + (100% - 20px) * var(--dock-slider-progress, 0) / 100),
            var(--slider-track) calc(100% - 10px),
            transparent calc(100% - 10px),
            transparent 100%);
        border-radius: 1px;
    }

    .dock-position-slider::-moz-range-track {
        width: 100%;
        height: 2px;
        background: var(--slider-track);
        border-radius: 1px;
    }

    .dock-position-slider::-moz-range-progress {
        background: var(--brand-color);
        height: 2px;
        border-radius: 1px;
    }

    /* Thumb - touch target with visual dot */
    .dock-position-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: radial-gradient(circle, var(--brand-color) 4px, transparent 4px);
        border-radius: var(--radius-full);
        cursor: grab;
        margin-top: -9px;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .dock-position-slider::-webkit-slider-thumb:hover {
        background: radial-gradient(circle, var(--brand-color) 4px, rgba(var(--brand-color-rgb), 0.15) 4px);
    }

    .dock-position-slider::-webkit-slider-thumb:active {
        cursor: grabbing;
        background: radial-gradient(circle, var(--brand-color-hover) 4px, rgba(var(--brand-color-rgb), 0.2) 4px);
    }

    .dock-position-slider::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: radial-gradient(circle, var(--brand-color) 4px, transparent 4px);
        border-radius: var(--radius-full);
        cursor: grab;
        border: none;
    }

    .dock-position-slider::-moz-range-thumb:active {
        cursor: grabbing;
    }

    /* Focus state */
    .dock-position-slider:focus {
        outline: none;
    }

    .dock-position-slider:focus::-webkit-slider-thumb {
        box-shadow: 0 0 0 2px var(--focus-ring);
    }

    /* Disabled state */
    .dock-position-slider:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

    .dock-position-slider:disabled::-webkit-slider-thumb {
        cursor: not-allowed;
        background: radial-gradient(circle, var(--color-disabled) 4px, transparent 4px);
    }

    /* Mobile-specific Learn tab: Dock button styles */
    /* Note: Fullscreen layout is now global (see "Learn Tab: Full-Viewport Layout" section) */

    .dock-btn {
        width: var(--touch-target-min);  /* iOS minimum touch target */
        height: var(--touch-target-min); /* iOS minimum touch target */
        border: none;
        border-radius: var(--radius-lg);
        background: transparent;
        color: var(--text-secondary); /* Match header buttons for consistency */
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
        touch-action: manipulation;
        position: relative;
        flex-shrink: 0;
    }

    .dock-btn svg {
        fill: currentColor;
        stroke: currentColor;
        width: var(--icon-size-mobile);
        height: var(--icon-size-mobile);
        /* iOS Safari fix: flexbox centering can shift during layout changes */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .dock-btn:active {
        background: rgba(0, 0, 0, 0.08);
    }

    .dock-btn:disabled {
        opacity: var(--disabled-opacity);
        cursor: not-allowed;
        color: var(--color-disabled);
    }

    .dock-btn.play {
        color: var(--brand-color);
    }

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

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

    /* Toggle buttons with x-overlay (definitions, examples, loop, mute) */
    .dock-btn.has-x-overlay {
        position: relative;
    }

    .dock-btn.has-x-overlay .x-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        pointer-events: none;
        width: var(--icon-size-mobile);
        height: var(--icon-size-mobile);
    }

    /* Hide X overlay when active (feature is ON) */
    .dock-btn.has-x-overlay.active .x-overlay {
        display: none;
    }

    /* Mute button has inverted logic: show X when muted (active) */
    .dock-btn.mute.has-x-overlay .x-overlay {
        display: none;
    }

    .dock-btn.mute.has-x-overlay.active .x-overlay {
        display: block;
    }

    /* Active toggle states - no background highlight needed since X-overlay indicates state */
    .dock-btn.toggle.active,
    .dock-btn.mute.active {
        /* X-overlay system provides visual feedback, no extra highlight needed */
    }

    /* Hide mobile floating nav on Learn tab (dock replaces it) */
    body.tab-learn .mobile-nav-container {
        display: none;
    }

}

/* ===========================================
   TOUCH + LANDSCAPE: Learn Tab Compact Dock
   Two-row layout: Row 1 = dropdowns + buttons, Row 2 = slider
   =========================================== */
@media (pointer: coarse) and (orientation: landscape) {
    /* Two-row dock layout: Row 1 = all controls edge-to-edge, Row 2 = slider */
    body.tab-learn .learn-dock {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between; /* Edge-to-edge alignment with slider */
        gap: var(--space-xs) 0; /* Row gap only */
        min-height: auto;
        padding: var(--space-xs) env(safe-area-inset-right, 8px) var(--space-xs) env(safe-area-inset-left, 8px);
    }

    body.tab-learn .learn-dock.position-top {
        padding: var(--space-xs) env(safe-area-inset-right, 8px) var(--space-xs) env(safe-area-inset-left, 8px);
    }

    /* Flatten row containers so all items distribute evenly */
    body.tab-learn .learn-dock .dock-config-row,
    body.tab-learn .learn-dock .dock-controls-row {
        display: contents; /* Children become direct flex items of .learn-dock */
    }

    /* Slider row - 100% width on its own row */
    body.tab-learn .learn-dock .dock-slider-row {
        flex: 0 0 100%;
        width: 100%;
        max-width: none;
        display: block;
        position: relative;
        order: -1; /* Bottom dock: slider at top (away from browser controls) */
        margin-bottom: calc(var(--space-md) * -1); /* Bottom dock: pull controls closer to match top dock spacing */
    }

    /* Top dock: slider at bottom (away from top browser UI) */
    body.tab-learn .learn-dock.position-top .dock-slider-row {
        order: 10;
        margin-bottom: 0; /* Reset bottom dock margin */
        margin-top: calc(var(--space-md) * -1); /* Pull closer to controls row for equal visual spacing */
    }

    /* Ensure slider track wrapper maintains consistent padding */
    body.tab-learn .learn-dock .dock-slider-track-wrapper {
        padding-top: var(--space-lg); /* Matches portrait for even row spacing */
        position: relative;
        width: 100%; /* Full width edge-to-edge */
    }

    /* Top dock only: pull slider row bottom up */
    body.tab-learn .learn-dock.position-top .dock-slider-track-wrapper {
        margin-bottom: calc(var(--space-md) * -1); /* Align slider row bottom with thumb bottom */
    }

    /* Ensure labels stay positioned correctly */
    body.tab-learn .learn-dock .dock-slider-min,
    body.tab-learn .learn-dock .dock-slider-max,
    body.tab-learn .learn-dock .dock-slider-current {
        position: absolute;
        top: -2px; /* Matches portrait for consistent appearance */
    }

    /* Dropdowns - proportional sizing with viewport width */
    body.tab-learn .learn-dock .dock-select {
        flex: 0 0 auto; /* Fixed size, no grow/shrink */
        width: clamp(50px, 10vw, 80px); /* Proportional width */
        min-width: unset;
        max-width: unset;
        height: clamp(24px, 4vw, 28px); /* Proportional height */
        font-size: clamp(var(--font-size-2xs), 1.5vw, var(--font-size-xs)); /* Proportional font */
        padding: 0 clamp(4px, 0.8vw, 6px);
    }

    /* Compact buttons - proportional sizing */
    /* Buttons same size as portrait (44px touch target) */
    body.tab-learn .learn-dock .dock-btn {
        width: var(--touch-target-min);
        height: var(--touch-target-min);
        flex-shrink: 0;
    }

    body.tab-learn .learn-dock .dock-btn svg {
        width: var(--icon-size-mobile);
        height: var(--icon-size-mobile);
    }

    /* X-overlay: match icon size */
    body.tab-learn .learn-dock .dock-btn.has-x-overlay .x-overlay {
        width: var(--icon-size-mobile);
        height: var(--icon-size-mobile);
    }

    /* Safe area padding for content in landscape (notch/rounded corners) */
    body.tab-learn .playback-status {
        padding-left: calc(var(--space-2xl) + env(safe-area-inset-left, 0px));
        padding-right: calc(var(--space-2xl) + env(safe-area-inset-right, 0px));
    }

    /* Familiarity bar needs safe area offset from right edge */
    body.tab-learn .familiarity-rating-bar {
        right: env(safe-area-inset-right, 0px);
    }
}

/* TOUCH + PORTRAIT: Learn Tab Compact Dock */
@media (pointer: coarse) and (orientation: portrait) {
    /* Reduce spacing for more compact portrait dock */
    body.tab-learn .learn-dock {
        --dock-gap: var(--space-2xs);
        --dock-margin: var(--space-lg);
        --dock-padding-bottom: var(--space-xs);
    }

    /* Dropdowns visually balanced with button icons */
    body.tab-learn .learn-dock .dock-select {
        height: 36px;
        font-size: var(--font-size-xs);
    }

    /* Tighter controls row */
    body.tab-learn .learn-dock .dock-controls-row {
        gap: var(--space-2xs);
    }
}

/* ===========================================
   Mobile Floating Navigation for Learn Tab
   (Fallback for non-dock mode, kept for compatibility)
   =========================================== */

.mobile-nav-container {
    display: none; /* Hidden by default, shown only on mobile */
}

@media (hover: none), (pointer: coarse) {
    .mobile-nav-container {
        display: flex;
        justify-content: space-between;
        position: fixed;
        bottom: 70px; /* Above the tab bar */
        left: 0;
        right: 0;
        padding: 0 var(--space-2xl);
        pointer-events: none; /* Allow clicks to pass through container */
        z-index: 99;
    }

    .mobile-nav-btn {
        pointer-events: auto; /* Buttons are clickable */
        width: 56px;
        height: 56px;
        border-radius: var(--radius-full);
        border: none;
        background: var(--surface-translucent);
        box-shadow: var(--shadow-md);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
        touch-action: manipulation;
        position: relative; /* For absolute positioned SVG (iOS Safari fix) */
    }

    .mobile-nav-btn svg {
        width: 24px;
        height: 24px;
        fill: currentColor;
        /* iOS Safari fix: flexbox centering can shift during layout changes */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .mobile-nav-btn.back {
        color: var(--text-secondary);
    }

    .mobile-nav-btn.skip {
        color: var(--text-secondary);
    }

    .mobile-nav-btn:active {
        transform: scale(0.95);
        background: var(--btn-secondary-bg);
    }

    .mobile-nav-btn:disabled {
        color: var(--color-disabled);
        opacity: 0.5;
        cursor: not-allowed;
        box-shadow: var(--shadow-sm);
    }

    .mobile-nav-btn:disabled:active {
        transform: none;
    }

    /* Mobile nav buttons are now replaced by dock - no bottom margin needed */
}

/* Extra narrow screens - slightly smaller buttons */
@media (max-width: 400px) {
    .mobile-nav-btn {
        width: 48px;
        height: 48px;
    }

    .mobile-nav-btn svg {
        width: var(--icon-size-desktop);
        height: var(--icon-size-desktop);
    }
}

/* ===========================================
   Playback Overlay (YouTube-style controls)
   =========================================== */

.playback-overlay {
    display: none; /* Hidden by default, shown only on mobile */
}

.floating-add-btn {
    display: none; /* Hidden by default, shown when on Learn tab */
}

/* Desktop: Show floating Add button */
@media (hover: hover) and (pointer: fine) {
    body.tab-learn .floating-add-btn {
        display: flex;
        position: fixed;
        right: 24px;
        bottom: 24px;
        width: 48px;
        height: 48px;
        border: none;
        border-radius: var(--radius-full);
        background: var(--fab-bg-neutral);
        color: white;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        box-shadow: var(--fab-shadow);
        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
        z-index: 50;
    }

    body.tab-learn .floating-add-btn svg {
        fill: currentColor;
        pointer-events: none;
    }

    body.tab-learn .floating-add-btn:hover:not(:disabled) {
        background: var(--fab-bg-neutral-hover);
        box-shadow: var(--fab-shadow-hover);
    }

    body.tab-learn .floating-add-btn:active:not(:disabled) {
        transform: scale(0.95);
    }

    body.tab-learn .floating-add-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    /* Hide when source is myList */
    body.tab-learn .floating-add-btn.source-mylist {
        display: none !important;
    }
}

@media (hover: none), (pointer: coarse) {
    .playback-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        /* 48px gap is an intentional layout choice for YouTube-style back/play/forward spacing */
        gap: 48px;
        background: transparent;
        border-radius: var(--radius-lg);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
        z-index: 10;
        pointer-events: none;
    }

    .playback-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .playback-overlay.hiding {
        opacity: 0;
        pointer-events: none;
    }

    /* Make playback-status container position relative for overlay positioning */
    body.tab-learn .playback-status {
        position: relative;
    }

    /* Overlay buttons */
    .overlay-btn {
        width: 64px;
        height: 64px;
        border: none;
        border-radius: var(--radius-full);
        background: rgba(80, 80, 80, 0.5);
        color: rgba(255, 255, 255, 0.9);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.15s ease, background 0.15s ease;
        touch-action: manipulation;
        position: relative; /* For absolute positioned SVG (iOS Safari fix) */
    }

    .overlay-btn svg {
        fill: currentColor;
        /* iOS Safari fix: flexbox centering can shift during layout changes */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .overlay-btn:active {
        transform: scale(0.92);
        background: rgba(128, 128, 128, 0.3);
    }

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

    .overlay-btn:disabled:active {
        transform: none;
    }

    /* Back/Skip buttons - smaller */
    .overlay-back,
    .overlay-skip {
        width: 46px;
        height: 46px;
        color: rgba(255, 255, 255, 0.85);
    }

    /* Vertical group for quiz + play/pause in overlay */
    .overlay-play-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-lg);
    }

    /* Quiz button in overlay — smaller than play, above it */
    .overlay-quiz {
        width: 46px;
        height: 46px;
        color: rgba(255, 255, 255, 0.9);
    }

    .overlay-quiz svg {
        fill: none;
        stroke: currentColor;
    }

    /* Play/Pause buttons - larger, centered */
    .overlay-play,
    .overlay-pause {
        width: 62px;
        height: 62px;
        color: rgba(255, 255, 255, 0.95);
    }

    /* Fade-in animation */
    @keyframes overlayFadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    /* Fade-out animation */
    @keyframes overlayFadeOut {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }

    /* Floating Add Button (always visible on mobile, draggable) */
    .floating-add-btn {
        display: flex;
        position: absolute;
        right: 0;
        top: 35%;
        width: var(--touch-target-min);
        height: var(--touch-target-min);
        border: none;
        border-radius: var(--radius-full);
        background: var(--fab-bg-neutral);
        color: rgba(255, 255, 255, 0.9);
        cursor: grab;
        align-items: center;
        justify-content: center;
        transition: background 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
        touch-action: none; /* Prevent scroll while dragging */
        z-index: 15;
        user-select: none;
        -webkit-user-select: none;
    }

    .floating-add-btn svg {
        fill: currentColor;
        pointer-events: none; /* Ensure drag works on whole button */
        /* iOS Safari fix: flexbox centering causes icon to shift during sibling
           layout changes (e.g., dock animation). Absolute positioning is stable. */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .floating-add-btn:active {
        cursor: grabbing;
        background: var(--fab-bg-neutral-active);
        box-shadow: var(--fab-shadow-hover);
    }

    .floating-add-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .floating-add-btn:disabled:active {
        background: var(--fab-bg-neutral);
        box-shadow: none;
    }

    /* Hide floating Add button when source is myList */
    .floating-add-btn.source-mylist {
        display: none !important;
    }
}

/* ==================== myList Input FAB ==================== */
.mylist-input-fab {
    display: none; /* Hidden by default on desktop - will show via media query or explicitly */
}

/* Show FAB on mobile */
@media (hover: none), (pointer: coarse) {
    body.tab-mylist .mylist-input-fab {
        display: flex;
        position: fixed;
        right: 16px;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px)); /* Above tab bar */
        width: 56px;
        height: 56px;
        border: none;
        border-radius: var(--radius-full);
        background: var(--fab-bg-brand);
        color: white;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        box-shadow: var(--fab-shadow);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        touch-action: none; /* Prevent the underlying list from scrolling while dragging the FAB */
        z-index: 50; /* Above list but below modals */
    }

    body.tab-mylist .mylist-input-fab svg {
        fill: currentColor;
        pointer-events: none;
    }

    body.tab-mylist .mylist-input-fab:active {
        transform: scale(0.92);
        background: var(--fab-bg-brand-hover);
        box-shadow: var(--fab-shadow-hover);
    }
}

/* Desktop: show FAB but smaller and less prominent */
@media (hover: hover) and (pointer: fine) {
    body.tab-mylist .mylist-input-fab {
        display: flex;
        position: fixed;
        right: 24px;
        bottom: 24px;
        width: 48px;
        height: 48px;
        border: none;
        border-radius: var(--radius-full);
        background: var(--fab-bg-brand);
        color: white;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        box-shadow: var(--fab-shadow);
        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
        z-index: 50;
    }

    body.tab-mylist .mylist-input-fab svg {
        fill: currentColor;
        pointer-events: none;
    }

    body.tab-mylist .mylist-input-fab:hover {
        background: var(--fab-bg-brand-hover);
        box-shadow: var(--fab-shadow-hover);
    }

    body.tab-mylist .mylist-input-fab:active {
        transform: scale(0.95);
    }
}

/* ==================== FAM (Floating Action Menu) chips ==================== */
/* Position is set dynamically by JS in openFAM() from the FAB's bounding rect.
   Uses visibility + opacity (not display:none) so the expand/collapse animation
   actually fires. The global prefers-reduced-motion rule reduces transitions to
   near-zero automatically. */
.mylist-fam-chips {
    display: none; /* fully removed from layout on non-myList tabs */
}
body.tab-mylist .mylist-fam-chips {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    position: fixed;
    z-index: 51; /* Above FAB (50) */
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    /* visibility delays so the element stays in the DOM during fade-out */
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
body.tab-mylist .mylist-fam-chips.expanded {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}

/* First-launch hint above the chips (one-time). Visible only when FAM is open
   AND localStorage.mylistFamSeen has not yet been set. */
.mylist-fam-hint {
    display: none;
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    background: var(--bg-card);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--fab-shadow);
    margin-bottom: var(--space-xs);
    white-space: nowrap;
}
.mylist-fam-chips.show-hint .mylist-fam-hint {
    display: block;
}
.mylist-fam-chip {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    box-shadow: var(--fab-shadow);
    min-height: var(--touch-target-min, 44px);
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.mylist-fam-chip:hover,
.mylist-fam-chip:focus-visible {
    border-color: var(--brand-color);
    color: var(--brand-color);
    outline: none;
}
.mylist-fam-chip:active {
    transform: scale(0.96);
}
.mylist-fam-chip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.mylist-fam-chip-icon svg {
    pointer-events: none;
}

/* ==================== Input Bottom Sheet ==================== */
.input-bottom-sheet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: block;
    pointer-events: none;
    visibility: hidden;
}

.input-bottom-sheet.active {
    pointer-events: auto;
    visibility: visible;
}

.input-sheet-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.input-bottom-sheet.active .input-sheet-backdrop {
    opacity: 1;
}

.input-sheet-content {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface-solid);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    padding: var(--space-2xl);
    padding-bottom: calc(var(--space-2xl) + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.25s ease-out;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    max-height: 90vh;
    overflow-y: auto;
}

.input-bottom-sheet.active .input-sheet-content {
    transform: translateY(0);
}

.input-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2xl);
}

.input-sheet-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.input-sheet-close {
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-3xl);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
}

.input-sheet-close:hover {
    background: var(--bg-badge);
    color: var(--text-primary);
}

/* Input styling within bottom sheet */
.input-bottom-sheet .input-wrapper {
    margin-bottom: var(--space-xl);
}

.input-bottom-sheet #sheetSmartInput {
    width: 100%;
    padding: var(--space-xl) var(--space-2xl);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xl);
    background: var(--surface-solid);
    box-sizing: border-box;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.input-bottom-sheet #sheetSmartInput:focus {
    outline: none;
    border-color: var(--border-accent);
    background: var(--surface-solid);
}

/* Umlaut picker within bottom sheet */
.input-bottom-sheet .umlaut-picker {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: nowrap; /* Prevent wrapping - all 7 buttons on one line */
}

.input-bottom-sheet .umlaut-btn {
    min-width: 36px;
    width: auto;
    padding: 0 var(--space-md);
    height: var(--touch-target-min);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    background: var(--surface-solid);
    font-size: var(--font-size-2xl);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    box-shadow: var(--shadow-key); /* Keyboard-like subtle depth */
}

.input-bottom-sheet .umlaut-btn:hover {
    background: var(--bg-card);
    border-color: var(--input-border);
}

.input-bottom-sheet .umlaut-btn:active {
    background: var(--btn-secondary-bg);
}

/* ==================== Custom Tooltips ==================== */
/* Fast tooltips with 200ms delay (vs browser default ~500-1000ms) */
[data-tooltip] {
    position: relative;
    overflow: visible !important; /* Ensure tooltips can show */
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    /* Use CSS variables for consistent styling */
    padding: var(--tooltip-padding) !important;
    background: var(--tooltip-bg) !important;
    backdrop-filter: var(--tooltip-blur);
    -webkit-backdrop-filter: var(--tooltip-blur);
    color: var(--tooltip-color) !important;
    font-size: var(--tooltip-font-size) !important;
    border-radius: var(--tooltip-radius);
    box-shadow: var(--tooltip-shadow);
    /* Fixed properties */
    height: auto !important;
    line-height: var(--line-height-snug) !important;
    font-weight: var(--font-weight-normal) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    pointer-events: none;
    z-index: 10000;
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.2s; /* 200ms delay */
}

/* Tooltip positioning variants for edge buttons (prevents clipping) */
/* Align to viewport edges with small padding */
[data-tooltip].tooltip-left::after {
    left: 0;
    transform: none;
    /* Pull tooltip left to align closer to viewport edge */
    margin-left: -8px;
}

[data-tooltip].tooltip-right::after {
    left: auto;
    right: 0;
    transform: none;
    /* Keep tooltip inside viewport - no extension past right edge */
}

[data-tooltip].tooltip-below::after {
    bottom: auto;
    top: calc(100% + 6px);
}

/* Auto-clamp: use CSS clamp to keep tooltip within viewport */
[data-tooltip]::after {
    /* Clamp horizontal position to stay within viewport */
    max-width: calc(100vw - 20px);
}

/* Desktop: tooltips below buttons (clipped above by sticky headers / overflow containers) */
@media (hover: hover) and (pointer: fine) {
    body.tab-learn .playback-controls-row [data-tooltip]::after,
    .mylist-sticky-header [data-tooltip]::after {
        bottom: auto;
        top: calc(100% + var(--space-sm));
    }

}

/* Mobile: remove tooltip pseudo-elements entirely (no hover on touch devices)
   Prevents ::after from breaking iOS hit testing inside transformed containers */
@media (hover: none) {
    [data-tooltip]::after {
        display: none;
    }
}

/* Floating tooltip flash for mobile taps (real DOM element, not pseudo) */
.mobile-tooltip-flash {
    position: fixed;
    z-index: 10000;
    background: var(--tooltip-bg);
    backdrop-filter: var(--tooltip-blur);
    -webkit-backdrop-filter: var(--tooltip-blur);
    color: var(--tooltip-color);
    font-size: var(--tooltip-font-size);
    padding: var(--tooltip-padding);
    border-radius: var(--tooltip-radius);
    box-shadow: var(--tooltip-shadow);
    white-space: nowrap;
    pointer-events: none;
    animation: mobileTooltipFade 1.2s ease-out forwards;
}

@keyframes mobileTooltipFade {
    0%, 50% { opacity: 1; }
    100% { opacity: 0; }
}


/* ===========================================
   TTS WORD-BY-WORD HIGHLIGHTING
   Visual feedback showing which word Piper TTS
   is currently speaking
   =========================================== */

.tts-word {
    transition: background-color 100ms ease;
    border-radius: var(--radius-sm);
}

.tts-word-active {
    background-color: rgba(var(--brand-color-rgb), 0.25);
    border-radius: var(--radius-sm);
}

[data-theme="dark"] .tts-word-active {
    background-color: rgba(var(--brand-color-rgb), 0.35);
    border-radius: var(--radius-sm);
}

/* Fullscreen/screensaver have dark backgrounds regardless of theme — need stronger highlight */
.fullscreen-overlay .tts-word-active,
.screensaver-overlay .tts-word-active {
    background-color: rgba(var(--brand-color-rgb), 0.4);
}

/* Parenthetical annotations — not spoken by TTS */
.tts-annotation {
    opacity: 0.5;

}

/* ================================
   AUDIO TRANSCRIPTION MODAL
   ================================ */

/* Exams tab wrapper (was .transcribe-section before Effort D Phase D1) */
.exams-tab {
    padding: var(--space-2xl);
    max-width: 600px;
    margin: 0 auto;
}

.panel-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-md) 0;
}

.panel-content {
    width: 100%;
}

.panel-instructions {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    margin-bottom: var(--space-2xl);
    line-height: var(--line-height-normal);
}

.transcribe-mode-toggle {
    display: flex;
    gap: 0;
    margin-bottom: var(--space-2xl);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    overflow: hidden;
    width: fit-content;
}

.transcribe-mode-btn {
    padding: var(--space-sm) var(--space-2xl);
    border: none;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    transition: background 0.15s, color 0.15s;
}

.transcribe-mode-btn.active {
    background: var(--brand-color);
    color: #fff;
}

[data-theme="dark"] .transcribe-mode-toggle {
    border-color: var(--border-light);
}

[data-theme="dark"] .transcribe-mode-btn {
    background: var(--bg-list-items);
}

[data-theme="dark"] .transcribe-mode-btn.active {
    background: var(--brand-color);
    color: #fff;
}

/* Record button */
.transcribe-record-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.transcribe-record-btn {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    border: 3px solid var(--brand-color);
    background: none;
    color: var(--brand-color);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.2s ease;
}

.transcribe-record-btn:hover {
    background: var(--brand-color);
    color: white;
}

.transcribe-record-btn.recording {
    border-color: var(--color-error);
    background: var(--color-error);
    color: white;
    animation: transcribe-pulse 1.5s infinite;
}

@keyframes transcribe-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.panel-timer {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Upload area */
.panel-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding-top: var(--space-2xl);
    border-top: 1px solid var(--border-divider);
}

.panel-upload-btn {
    background: none;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: var(--space-md) var(--space-2xl);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-md);
    cursor: pointer;
}

.panel-upload-btn:hover {
    border-color: var(--brand-color);
    color: var(--brand-color);
}

.panel-upload-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Loading */
.panel-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-3xl) 0;
}

.panel-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-subtle);
    border-top-color: var(--brand-color);
    border-radius: var(--radius-full);
    animation: transcribe-spin 0.8s linear infinite;
}

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

/* Audio player */
.transcribe-audio-player {
    width: 100%;
    margin-bottom: var(--space-2xl);
    border-radius: var(--radius-lg);
}

/* Loop detection notice */
.transcribe-loop-notice {
    background: rgba(var(--brand-color-rgb), 0.1);
    border-left: 3px solid var(--brand-color);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    margin-bottom: var(--space-2xl);
    font-weight: var(--font-weight-medium);
}

.transcribe-full-text-toggle {
    background: none;
    border: none;
    color: var(--brand-color);
    font-size: var(--font-size-xs);
    cursor: pointer;
    padding: var(--space-xs) 0;
    text-decoration: underline;
    margin-top: var(--space-xs);
}

.transcribe-full-text-block {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-list-items);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

.transcribe-full-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-loose);
    white-space: pre-line;
}

[data-theme="dark"] .transcribe-loop-notice {
    background: rgba(var(--brand-color-rgb), 0.15);
}

.transcribe-rotate-controls {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.transcribe-rotate-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-medium);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.transcribe-rotate-btn:active {
    background: var(--bg-hover);
}

.transcribe-rotate-counter {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    min-width: 40px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.transcribe-rotate-hint {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    margin-left: var(--space-xs);
}

[data-theme="dark"] .transcribe-rotate-btn {
    border-color: var(--border-light);
    background: var(--bg-list-items);
}

[data-theme="dark"] .transcribe-rotate-btn:active {
    background: var(--bg-hover);
}

[data-theme="dark"] .transcribe-full-text-block {
    background: var(--bg-list-items);
    border-color: var(--border-light);
}

/* Results */
.transcribe-result-block {
    margin-bottom: var(--space-2xl);
}

.transcribe-result-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.transcribe-german-text {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
}

.transcribe-english-text {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);

}

.transcribe-colloquial-notes {
    background: var(--bg-list-items);
    border-left: 3px solid var(--color-warning);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    margin-bottom: var(--space-2xl);
}

/* Word list */
.transcribe-word-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.transcribe-word-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
}

.transcribe-word-item.in-dictionary {
    border-left: 3px solid var(--brand-color);
}

.transcribe-word-item.is-colloquial {
    border-left: 3px solid var(--color-warning);
}

.transcribe-word-info {
    flex: 1;
    min-width: 0;
}

.transcribe-word-german {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.transcribe-word-english {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.transcribe-word-type {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-left: var(--space-xs);
}

.transcribe-word-note {
    font-size: var(--font-size-xs);
    color: var(--color-warning);

}

.transcribe-word-badge {
    font-size: var(--font-size-2xs);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-sm);
    background: var(--bg-badge);
    color: var(--text-secondary);
    margin-left: var(--space-xs);
}

.transcribe-known-badge {
    font-size: var(--font-size-xs);
    color: var(--brand-color);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: var(--space-md);
}

.transcribe-add-btn {
    background: none;
    border: 1px solid var(--brand-color);
    color: var(--brand-color);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: var(--space-md);
}

.transcribe-add-btn:hover {
    background: var(--brand-color);
    color: white;
}

.transcribe-add-btn.added {
    border-color: var(--color-success);
    color: var(--color-success);
    cursor: default;
}

.panel-action-btn,
.panel-retry-btn {
    display: block;
    width: 100%;
    padding: var(--space-md);
    background: none;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    cursor: pointer;
    margin-top: var(--space-lg);
}

.panel-action-btn:hover,
.panel-retry-btn:hover {
    border-color: var(--brand-color);
    color: var(--brand-color);
}

.panel-error {
    color: var(--color-error);
    text-align: center;
    padding: var(--space-2xl) 0;
    font-size: var(--font-size-md);
}

.transcribe-no-record {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-align: center;
    padding: var(--space-md) 0;
    margin: 0;
}

.transcribe-no-words {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    text-align: center;
    padding: var(--space-lg);
}

.transcribe-word-grammar {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: var(--space-2xs);

}

.transcribe-word-relations {
    margin-top: var(--space-xs);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-loose);
}

.transcribe-rel-label {
    color: var(--text-muted);
    font-weight: var(--font-weight-semibold);
    margin-right: var(--space-2xs);
}

.transcribe-rel-tag {
    display: inline-block;
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-sm);
    background: var(--bg-badge);
    color: var(--text-secondary);
    margin-right: var(--space-2xs);
    margin-bottom: var(--space-2xs);
}

/* Image Vocabulary */
.image-vocab-capture-area {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    margin: var(--space-xl) 0;
}

.image-vocab-preview-img {
    display: block;
    max-width: 100%;
    max-height: 200px;
    margin: var(--space-md) auto;
    border-radius: var(--radius-lg);
    object-fit: contain;
}

.image-vocab-hint-area {
    margin: var(--space-md) 0;
}

.image-vocab-hint-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-solid);
    color: var(--text-primary);
    font-size: var(--font-size-md);
}

.image-vocab-hint-input:focus {
    outline: none;
    border-color: var(--brand-color);
}

.image-vocab-analyze-btn {
    width: 100%;
    margin-top: var(--space-md);
    background: var(--brand-color) !important;
    color: #fff !important;
    border: none !important;
    font-weight: var(--font-weight-semibold);
}

.image-vocab-scene-summary {
    padding: var(--space-xl);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
}

.image-vocab-scene-german {
    font-size: var(--font-size-md);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-xs);
}

.image-vocab-scene-english {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.image-vocab-word-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.image-vocab-word-card {
    padding: var(--space-xl);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-solid);
}

.image-vocab-word-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.image-vocab-german {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.image-vocab-ipa {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.image-vocab-type {
    font-size: var(--font-size-xs);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-sm);
    background: var(--bg-badge);
    color: var(--text-secondary);
}

.image-vocab-english {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.image-vocab-grammar {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);

    margin-bottom: var(--space-xs);
}

.image-vocab-note {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
}

.image-vocab-rels {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-loose);
    margin-bottom: var(--space-sm);
}

.image-vocab-known-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-sm);
}

.image-vocab-actions {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.image-vocab-actions .panel-action-btn {
    flex: 1;
    margin-top: 0;
}

/* ===========================================
   Scenes (Picture Book) Tab
   =========================================== */

.scenes-section {
    padding: var(--space-2xl);
    padding-bottom: calc(var(--space-3xl) + 70px);
}

/* --- Scene Index (Grid) --- */

.scenes-index-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.scenes-index-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.scenes-index-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

.scenes-category {
    margin-bottom: var(--space-2xl);
}

.scenes-category-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.scenes-category-icon {
    font-size: var(--font-size-xl);
}

.scenes-category-name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.scenes-category-name-en {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: var(--font-weight-normal);
}

.scenes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.scenes-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    cursor: pointer;
    transition: background 0.15s;
    min-height: var(--touch-target-min);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.scenes-card:active {
    background: var(--bg-hover);
}

.scenes-card-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-2xs) 0;
}

.scenes-card-name-en {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0;
}

.scenes-card-count {
    font-size: var(--font-size-2xs);
    color: var(--text-tertiary);
    margin-top: var(--space-xs);
}

/* --- Scene Detail --- */

.scenes-detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
    position: sticky;
    top: 0;
    background: var(--bg-app);
    padding: var(--space-md) 0;
    z-index: 5;
}

.scenes-back-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    cursor: pointer;
    padding: var(--space-sm);
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scenes-detail-title {
    flex: 1;
}

.scenes-detail-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.scenes-detail-name-en {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin: 0;
}

.scenes-nav-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    cursor: pointer;
    padding: var(--space-sm);
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
}

.scenes-nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* --- Word Cards --- */

.scenes-word-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.scenes-word-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.scenes-word-summary {
    display: flex;
    align-items: center;
    padding: var(--space-lg) var(--space-xl);
    cursor: pointer;
    min-height: var(--touch-target-min);
    gap: var(--space-md);
}

.scenes-word-summary:active {
    background: var(--bg-hover);
}

.scenes-word-german {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    flex: 1;
}

.scenes-word-english {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-align: right;
}

.scenes-word-expand {
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    transition: transform 0.2s;
}

.scenes-word-card.expanded .scenes-word-expand {
    transform: rotate(180deg);
}

.scenes-word-details {
    display: none;
    padding: 0 var(--space-xl) var(--space-xl);
    border-top: 1px solid var(--border-color);
}

.scenes-word-card.expanded .scenes-word-details {
    display: block;
}

.scenes-word-ipa {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-family: 'Noto Sans', sans-serif;
    margin-bottom: var(--space-sm);
}

.scenes-word-def {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-sm);
}

.scenes-word-example {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);

    margin-bottom: var(--space-sm);
}

.scenes-word-grammar {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    white-space: pre-line;
    margin-bottom: var(--space-md);
    background: var(--bg-hover);
    padding: var(--space-md);
    border-radius: var(--radius-md);
}

.scenes-word-actions {
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

.scenes-add-btn {
    background: var(--brand-color);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-xl);
    font-size: var(--font-size-sm);
    cursor: pointer;
    min-height: var(--touch-target-min);
}

.scenes-add-btn.added {
    background: var(--bg-hover);
    color: var(--text-secondary);
    cursor: default;
}

.scenes-known-badge {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    background: var(--bg-hover);
    padding: var(--space-2xs) var(--space-md);
    border-radius: var(--radius-md);
}

.scenes-speak-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-sm);
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Desktop --- */

@media (min-width: 769px) {
    .scenes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .scenes-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===================================================================
   Grammar Book
   =================================================================== */

.grammar-section {
    padding: var(--space-2xl) var(--space-2xl) 120px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Grammar sub-tab toggle (Reference / Drills) */
.grammar-subtab-toggle {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-2xl);
}
.grammar-subtab-btn {
    padding: var(--space-sm) var(--space-2xl);
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-2xl);
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.grammar-subtab-btn.active {
    background: var(--brand-color);
    color: #fff;
    border-color: var(--brand-color);
}

.grammar-index-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.grammar-index-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.grammar-index-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: var(--space-xs) 0 0;
}

.grammar-category {
    margin-bottom: var(--space-2xl);
}

.grammar-category-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.grammar-category-icon {
    font-size: var(--font-size-xl);
}

.grammar-category-name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
}

.grammar-category-name-en {
    font-weight: var(--font-weight-normal);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-left: var(--space-xs);
}

/* Grid of page cards */
.grammar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.grammar-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    cursor: pointer;
    transition: background 0.15s;
    min-height: var(--touch-target-min, 44px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.grammar-card:active {
    background: var(--bg-hover);
}

.grammar-card-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.grammar-card-title-en {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-top: var(--space-2xs);
}

.grammar-card-meta {
    margin-top: var(--space-sm);
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

/* Level badges */
.grammar-level-badge {
    font-size: var(--font-size-2xs);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    background: var(--bg-hover);
    color: var(--text-secondary);
}

/* All grammar level badges use neutral styling */
.grammar-level-a1,
.grammar-level-a2,
.grammar-level-b1,
.grammar-level-b2,
.grammar-level-c1,
.grammar-level-c2 {
    background: var(--bg-badge);
    color: var(--text-secondary);
}

/* Grammar level dark mode — inherits from base neutral styling via --bg-badge */

/* Detail view */
.grammar-detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    position: sticky;
    top: 0;
    background: var(--surface-solid);
    padding: var(--space-md) 0;
    z-index: 5;
}

.grammar-back-btn {
    background: none;
    border: none;
    font-size: var(--font-size-xl);
    cursor: pointer;
    color: var(--brand-color);
    padding: var(--space-sm);
    min-width: var(--touch-target-min, 44px);
    min-height: var(--touch-target-min, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.grammar-detail-title {
    flex: 1;
    min-width: 0;
}

.grammar-detail-name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.grammar-detail-name-en {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.grammar-nav-btn {
    background: none;
    border: none;
    font-size: var(--font-size-md);
    cursor: pointer;
    color: var(--brand-color);
    padding: var(--space-sm);
    min-width: var(--touch-target-min, 44px);
    min-height: var(--touch-target-min, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.grammar-nav-btn:disabled {
    color: var(--text-tertiary);
    cursor: default;
}

.grammar-detail-meta {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
}

/* Tables */
.grammar-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--space-lg);
}

.grammar-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.grammar-table th,
.grammar-table td {
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--border-light);
    text-align: left;
}

.grammar-table thead th {
    background: var(--bg-hover);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.grammar-table tbody th {
    font-weight: var(--font-weight-semibold);
    background: var(--bg-hover);
    color: var(--text-primary);
}

.grammar-table tbody td {
    color: var(--text-primary);
}

.grammar-table tbody tr:nth-child(even) td {
    background: var(--bg-card);
}

.grammar-table-sm {
    font-size: var(--font-size-xs);
}

.grammar-footer-table {
    margin-top: var(--space-lg);
}

.grammar-footer-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

/* Rules */
.grammar-rule-block {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-md);
}

.grammar-rule-heading {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.grammar-rule-examples {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.grammar-example-pair {
    padding-left: var(--space-xl);
}

.grammar-example-de {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.grammar-example-en {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* List */
.grammar-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.grammar-list-item {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

.grammar-list-term {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.grammar-list-word {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--brand-color);
}

.grammar-list-meaning {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.grammar-list-example {
    padding-left: var(--space-xl);
    margin-top: var(--space-xs);
}

/* Notes */
.grammar-notes {
    margin-top: var(--space-lg);
    padding: var(--space-xl);
    background: var(--bg-hover);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

/* Page counter */
.grammar-page-counter {
    text-align: center;
    margin-top: var(--space-2xl);
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* Desktop */
@media (min-width: 769px) {
    .grammar-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .grammar-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===================================================================
   "Explore" Tab — Sub-tab toggle for Scenes / Grammar / Tips
   =================================================================== */

.explore-subtab-toggle {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-app);
    position: sticky;
    top: 0;
    z-index: 110;
}

/* Desktop: fix to viewport under tab bar (no gap, X-style auto-hide) */
@media (hover: hover) and (pointer: fine) {
    .explore-subtab-toggle {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding-top: calc(var(--mylist-header-tab-area) + var(--space-md));
        z-index: 150; /* below tab bar (200) so it hides cleanly behind it */
        will-change: transform;
    }
}

.explore-subtab-btn {
    padding: var(--space-sm) var(--space-2xl);
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.explore-subtab-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-medium);
}

.explore-subtab-btn.active {
    color: var(--brand-color);
    background: rgba(var(--brand-color-rgb), 0.08);
    border-color: var(--brand-color);
}

/* Explore content wrapper */
.explore-content {
    padding: 0;
}

/* Tips filter row inside Explore (not a fixed header — scrolls with content) */
.explore-tips-content .tips-filter-row {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-2xl);
}

/* ===================================================================
   "Practice" Tab — Sub-tab toggle for Speak / Write / Exam Deck
   =================================================================== */

.practice-subtab-toggle {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-app);
    position: sticky;
    top: 0;
    z-index: 110;
}

/* Desktop: fix to viewport under tab bar (no gap, matches Explore) */
@media (hover: hover) and (pointer: fine) {
    .practice-subtab-toggle {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding-top: calc(var(--mylist-header-tab-area) + var(--space-md));
        z-index: 150;
    }
}

.practice-subtab-btn {
    padding: var(--space-sm) var(--space-2xl);
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.practice-subtab-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-medium);
}

.practice-subtab-btn.active {
    color: var(--brand-color);
    background: rgba(var(--brand-color-rgb), 0.08);
    border-color: var(--brand-color);
}

.practice-content {
    padding: 0;
}

/* Inside Practice sub-tabs, panel-content is always visible (not drill-down) */
.practice-content .panel-content {
    display: block;
}

/* ===================================================================
   "Me" Tab — Single scrollable page (Account, Settings, Stats)
   + in-page jump row (second row, mirrors Explore/Practice pattern)
   =================================================================== */

.me-section {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-2xl);
}

/* Jump row — horizontally scrollable list of section shortcuts */
.me-jump-row {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-app);
    position: sticky;
    top: 0;
    z-index: 110;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.me-jump-row::-webkit-scrollbar {
    display: none; /* WebKit */
}

.me-jump-btn {
    flex: 0 0 auto;
    padding: var(--space-sm) var(--space-2xl);
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-2xl);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.me-jump-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-medium);
}

.me-jump-btn.active {
    color: var(--brand-color);
    background: rgba(var(--brand-color-rgb), 0.08);
    border-color: var(--brand-color);
}

/* On mobile, add top safe-area padding to the content (not the jump row) */
@media (hover: none), (pointer: coarse) {
    .me-section {
        padding-top: var(--space-2xl);
    }
    .me-jump-row {
        padding-top: calc(var(--space-md) + env(safe-area-inset-top, 0px));
    }
}

/* Desktop: fix jump row under tab bar (no gap, matches Explore/Practice) */
@media (hover: hover) and (pointer: fine) {
    .me-jump-row {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding-top: calc(var(--mylist-header-tab-area) + var(--space-md));
        z-index: 150;
        justify-content: center;
        will-change: transform;
    }
}

/* ===================================================================
   "More" Tab (legacy) — Sub-tab toggle styles kept for reference
   =================================================================== */

.more-subtab-toggle {
    display: flex;
    justify-content: center;
    padding: var(--space-xs) 0;
    background: var(--bg-app);
    position: sticky;
    top: 0;
    z-index: 110;
}

.more-subtab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md) var(--space-3xl);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--tab-btn-color);
    transition: color 0.2s ease;
}

.more-subtab-btn svg {
    font-size: var(--tab-icon-size);
    line-height: var(--line-height-none);
}

.more-subtab-btn:hover {
    color: var(--tab-btn-color-active);
}

.more-subtab-btn.active {
    color: var(--tab-btn-color-active);
    background: rgba(var(--brand-color-rgb), 0.08);
}

/* Desktop: compact subtab buttons to match main tab bar proportions */
@media (hover: hover) and (pointer: fine) {
    .more-subtab-btn {
        padding: var(--space-xs) var(--space-3xl);
    }

    .more-subtab-btn svg {
        font-size: var(--font-size-xl);
    }
}

.more-tab-content {
    /* sub-tab content panels inherit their existing styles */
}

/* ===========================================
   REDUCED MOTION
   Respects OS-level "Reduce Motion" setting.
   Disables non-essential animations for users
   with vestibular disorders or motion sensitivity.
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}