/**
 * Jam Kham - Psychology-Driven Design System
 *
 * A research-backed design system for Thai language learning that:
 * - Minimizes cognitive load during learning sessions
 * - Supports active retrieval through clear visual hierarchies
 * - Creates calm confidence with warm, trustworthy colors
 * - Respects adult learners with sophisticated aesthetics
 * - Honors Thai cultural resonance without cliche imagery
 *
 * Design Philosophy:
 * - Deep Teal (primary): Trust, concentration, focus, sophisticated
 * - Gold (secondary): Achievement, wisdom, Thai temple gold
 * - Warm Coral (error): Informative, not punitive (NOT red)
 * - Jade Green (success): Growth, encouragement
 *
 * Typography:
 * - Sarabun: Thai script, excellent diacritics handling
 * - Source Serif 4: English headings, warm and distinguished
 * - Atkinson Hyperlegible: Body text, clarity and accessibility
 */

/* ============================================
   CSS CUSTOM PROPERTIES - JAM KHAM TOKENS
   ============================================ */

:root {
    /* ==========================================
       PRIMARY - Dark Teal (from logo #1a5362)
       Trust, concentration, focus, sophisticated
       Thai silk inspiration, culturally safe
       ========================================== */
    --jk-primary: #1a5362;
    --jk-primary-light: #2a7a8f;
    --jk-primary-dark: #134048;
    --jk-primary-50: #f0f7f9;
    --jk-primary-100: #d9eef2;
    --jk-primary-200: #b3dde5;
    --jk-primary-300: #80c5d2;
    --jk-primary-400: #4da8ba;
    --jk-primary-500: #2a8a9d;
    --jk-primary-600: #1a5362;
    --jk-primary-700: #164654;
    --jk-primary-800: #123945;
    --jk-primary-900: #0e2c36;

    /* ==========================================
       SECONDARY - Gold (from logo #daab2f)
       Achievement, warmth, wisdom, Thai temple gold
       ========================================== */
    --jk-secondary: #daab2f;
    --jk-secondary-light: #e4c05a;
    --jk-secondary-dark: #b08a24;
    --jk-secondary-50: #fefbf0;
    --jk-secondary-100: #fdf5d9;
    --jk-secondary-200: #faeab3;
    --jk-secondary-300: #f5da80;
    --jk-secondary-400: #efc54d;
    --jk-secondary-500: #daab2f;
    --jk-secondary-600: #b08a24;
    --jk-secondary-700: #8a6b1c;
    --jk-secondary-800: #6a5216;
    --jk-secondary-900: #4a3910;

    /* ==========================================
       ACCENT - Lotus Pink
       Cultural celebration, achievement moments
       ========================================== */
    --jk-accent: #E05A7C;
    --jk-accent-light: #ED849F;
    --jk-accent-dark: #CC3A5F;

    /* ==========================================
       BACKGROUNDS & SURFACES
       Warm cream foundation - reduces eye strain
       ========================================== */
    --jk-background: #FDF6E3;
    --jk-background-alt: #FAF8F5;
    --jk-surface: #FFFFFF;
    --jk-surface-elevated: #FFFFFF;
    --jk-surface-sunken: #F4F0E8;

    /* ==========================================
       TEXT COLORS
       Deep charcoal - readable, professional
       ========================================== */
    --jk-text: #2D3436;
    --jk-text-secondary: #52647E;
    --jk-text-muted: #677D98;
    --jk-text-inverse: #FAFAFA;

    /* ==========================================
       SEMANTIC COLORS
       Psychology-informed choices
       ========================================== */
    --jk-success: #22A06B;
    --jk-success-light: #36B37E;
    --jk-success-dark: #1B8356;
    --jk-success-bg: rgba(34, 160, 107, 0.15);

    --jk-warning: #E9A83B;
    --jk-warning-light: #F0C05E;
    --jk-warning-dark: #D4872A;
    --jk-warning-bg: rgba(233, 168, 59, 0.18);

    /* Error - Warm coral (NOT harsh red)
       Red triggers shame response, impairs learning */
    --jk-error: #C25D39;
    --jk-error-light: #E07A5F;
    --jk-error-dark: #A04B2E;
    --jk-error-bg: rgba(194, 93, 57, 0.15);

    --jk-info: #0D7377;
    --jk-info-light: #14B3AA;
    --jk-info-dark: #0F736F;
    --jk-info-bg: rgba(13, 115, 119, 0.15);

    /* ==========================================
       RATING BUTTON COLORS
       Again uses amber (not red) per psychology research
       ========================================== */
    --jk-rating-again: #C25D39;
    --jk-rating-again-hover: #D4704C;
    --jk-rating-hard: #E9A83B;
    --jk-rating-hard-hover: #F0C05E;
    --jk-rating-good: #0D7377;
    --jk-rating-good-hover: #14B3AA;
    --jk-rating-easy: #22A06B;
    --jk-rating-easy-hover: #36B37E;

    /* ==========================================
       TONE INDICATOR COLORS
       Visual system for Thai's 5 tones
       ========================================== */
    --jk-tone-mid: #677D98;
    --jk-tone-low: #3B5998;
    --jk-tone-falling: #8B4B6B;
    --jk-tone-high: #E9A83B;
    --jk-tone-rising: #22A06B;

    /* ==========================================
       BORDERS & DIVIDERS
       ========================================== */
    --jk-border: rgba(45, 52, 54, 0.12);
    --jk-border-light: rgba(45, 52, 54, 0.08);
    --jk-border-focus: var(--jk-primary);
    --jk-divider: rgba(45, 52, 54, 0.1);

    /* ==========================================
       SHADOWS
       ========================================== */
    --jk-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --jk-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --jk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --jk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --jk-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

    /* ==========================================
       SPACING SYSTEM
       ========================================== */
    --jk-space-0: 0;
    --jk-space-1: 0.25rem;
    --jk-space-2: 0.5rem;
    --jk-space-3: 0.75rem;
    --jk-space-4: 1rem;
    --jk-space-5: 1.25rem;
    --jk-space-6: 1.5rem;
    --jk-space-8: 2rem;
    --jk-space-10: 2.5rem;
    --jk-space-12: 3rem;
    --jk-space-16: 4rem;

    /* ==========================================
       TYPOGRAPHY
       ========================================== */
    --jk-font-thai: 'Sarabun', 'Noto Sans Thai', sans-serif;
    --jk-font-heading: 'Source Serif 4', Georgia, serif;
    --jk-font-body: 'Atkinson Hyperlegible', system-ui, sans-serif;
    --jk-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Type Scale */
    --jk-text-xs: 0.75rem;
    --jk-text-sm: 0.875rem;
    --jk-text-base: 1rem;
    --jk-text-md: 1.125rem;
    --jk-text-lg: 1.25rem;
    --jk-text-xl: 1.5rem;
    --jk-text-2xl: 1.875rem;
    --jk-text-3xl: 2.25rem;
    --jk-text-4xl: 3rem;

    /* Thai Script Sizes (larger for complexity) */
    --jk-thai-sm: 0.9375rem;
    --jk-thai-base: 1.125rem;
    --jk-thai-md: 1.25rem;
    --jk-thai-lg: 1.5rem;
    --jk-thai-xl: 2rem;
    --jk-thai-2xl: 2.5rem;
    --jk-thai-3xl: 3rem;
    --jk-thai-display: clamp(2.5rem, 8vw, 4rem);

    /* Line Heights */
    --jk-leading-tight: 1.25;
    --jk-leading-normal: 1.5;
    --jk-leading-relaxed: 1.625;
    --jk-leading-thai: 1.8;
    --jk-leading-thai-display: 1.5;

    /* Letter Spacing */
    --jk-tracking-tight: -0.025em;
    --jk-tracking-normal: 0;
    --jk-tracking-wide: 0.025em;
    --jk-tracking-thai: 0.02em;

    /* Font Weights */
    --jk-font-normal: 400;
    --jk-font-medium: 500;
    --jk-font-semibold: 600;
    --jk-font-bold: 700;

    /* ==========================================
       ANIMATION
       ========================================== */
    --jk-duration-fast: 150ms;
    --jk-duration-normal: 300ms;
    --jk-duration-slow: 500ms;
    --jk-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --jk-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --jk-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --jk-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --jk-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ==========================================
       COMPONENT TOKENS
       ========================================== */
    --jk-card-radius-sm: 0.75rem;
    --jk-card-radius-md: 1rem;
    --jk-card-radius-lg: 1.25rem;
    --jk-btn-radius-sm: 0.375rem;
    --jk-btn-radius-md: 0.625rem;
    --jk-btn-radius-lg: 0.75rem;
    --jk-input-radius: 0.5rem;

    /* Pattern colors for light theme */
    --jk-pattern-color: rgba(13, 115, 119, 0.03);
    --jk-pattern-accent: rgba(212, 169, 58, 0.02);
}

/* Dark Mode Tokens */
[data-theme="jamkham-dark"] {
    --jk-background: #141B24;
    --jk-background-alt: #1E2836;
    --jk-surface: #1E2836;
    --jk-surface-elevated: #2A3544;
    --jk-surface-sunken: #0F141C;

    --jk-text: #ECF0F3;
    --jk-text-secondary: #B1BDCD;
    --jk-text-muted: #8799B1;
    --jk-text-inverse: #1E2836;

    --jk-primary: #2DD3C8;
    --jk-primary-light: #5FE8DF;
    --jk-primary-dark: #14B3AA;

    --jk-secondary: #F0C05E;
    --jk-secondary-light: #F6D88F;
    --jk-secondary-dark: #E9A83B;

    --jk-accent: #ED849F;
    --jk-accent-light: #F5B3C4;
    --jk-accent-dark: #E05A7C;

    --jk-success: #36B37E;
    --jk-success-light: #57D9A3;
    --jk-success-bg: rgba(54, 179, 126, 0.15);

    --jk-warning: #F0C05E;
    --jk-warning-light: #F6D88F;
    --jk-warning-bg: rgba(240, 192, 94, 0.15);

    --jk-error: #E07A5F;
    --jk-error-light: #F5A690;
    --jk-error-bg: rgba(224, 122, 95, 0.15);

    --jk-info: #2DD3C8;
    --jk-info-light: #5FE8DF;
    --jk-info-bg: rgba(45, 211, 200, 0.15);

    --jk-border: rgba(236, 240, 243, 0.15);
    --jk-border-light: rgba(236, 240, 243, 0.1);
    --jk-divider: rgba(236, 240, 243, 0.1);

    --jk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --jk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.25);
    --jk-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);

    --jk-pattern-color: rgba(45, 211, 200, 0.02);
    --jk-pattern-accent: rgba(240, 192, 94, 0.015);
}

/* ============================================
   LIGHT THEME - DaisyUI Variables
   Define base colors for proper component rendering
   ============================================ */

[data-theme="jamkham-light"] {
    /* DaisyUI base backgrounds */
    --b1: 100% 0 0;           /* base-100: pure white #FFFFFF */
    --b2: 98% 0.005 85;       /* base-200: off-white #FAF8F5 */
    --b3: 95% 0.015 80;       /* base-300: warm cream #F4F0E8 */
    --bc: 25% 0.02 240;       /* base-content: dark text #2D3436 */
    color-scheme: light;
}

/* ============================================
   DARK THEME EXPLICIT OVERRIDES
   Force DaisyUI components to use dark colors
   ============================================ */

[data-theme="jamkham-dark"] {
    /* Override DaisyUI base backgrounds */
    --b1: 215 30% 12%;
    --b2: 215 28% 15%;
    --b3: 215 25% 20%;
    --bc: 38 15% 92%;
    color-scheme: dark;
}

/* Explicit background overrides for dark mode */
[data-theme="jamkham-dark"] .bg-base-100,
[data-theme="jamkham-dark"] .card {
    background-color: oklch(215 30% 12% / 1) !important;
}

[data-theme="jamkham-dark"] .bg-base-200 {
    background-color: oklch(215 28% 15% / 1) !important;
}

[data-theme="jamkham-dark"] .bg-base-300 {
    background-color: oklch(215 25% 20% / 1) !important;
}

/* Dark mode text colors - COMPREHENSIVE */
[data-theme="jamkham-dark"] {
    color: #ECF0F3 !important;
}

[data-theme="jamkham-dark"] body,
[data-theme="jamkham-dark"] .card-body,
[data-theme="jamkham-dark"] p,
[data-theme="jamkham-dark"] span,
[data-theme="jamkham-dark"] div,
[data-theme="jamkham-dark"] li,
[data-theme="jamkham-dark"] td,
[data-theme="jamkham-dark"] th,
[data-theme="jamkham-dark"] label {
    color: #ECF0F3;
}

[data-theme="jamkham-dark"] h1,
[data-theme="jamkham-dark"] h2,
[data-theme="jamkham-dark"] h3,
[data-theme="jamkham-dark"] h4,
[data-theme="jamkham-dark"] h5,
[data-theme="jamkham-dark"] h6,
[data-theme="jamkham-dark"] .font-bold,
[data-theme="jamkham-dark"] .font-semibold,
[data-theme="jamkham-dark"] .font-medium {
    color: #F8FAFC;
}

[data-theme="jamkham-dark"] .text-base-content {
    color: #ECF0F3 !important;
}

[data-theme="jamkham-dark"] .text-base-content\/40 {
    color: rgba(236, 240, 243, 0.4) !important;
}

[data-theme="jamkham-dark"] .text-base-content\/50 {
    color: rgba(236, 240, 243, 0.5) !important;
}

[data-theme="jamkham-dark"] .text-base-content\/60 {
    color: rgba(236, 240, 243, 0.6) !important;
}

[data-theme="jamkham-dark"] .text-base-content\/70 {
    color: rgba(236, 240, 243, 0.7) !important;
}

[data-theme="jamkham-dark"] .text-base-content\/80 {
    color: rgba(236, 240, 243, 0.8) !important;
}

/* Dark mode links */
[data-theme="jamkham-dark"] a {
    color: #5FE8DF;
}

[data-theme="jamkham-dark"] a:hover {
    color: #9AF5ED;
}

[data-theme="jamkham-dark"] .link {
    color: #5FE8DF !important;
}

[data-theme="jamkham-dark"] .link-hover:hover {
    color: #9AF5ED !important;
}

/* Keep primary/secondary/accent text colors bright */
[data-theme="jamkham-dark"] .text-primary {
    color: #2DD3C8 !important;
}

[data-theme="jamkham-dark"] .text-secondary {
    color: #F0C05E !important;
}

[data-theme="jamkham-dark"] .text-accent {
    color: #ED849F !important;
}

[data-theme="jamkham-dark"] .text-success {
    color: #36B37E !important;
}

[data-theme="jamkham-dark"] .text-warning {
    color: #F0C05E !important;
}

[data-theme="jamkham-dark"] .text-error {
    color: #E07A5F !important;
}

[data-theme="jamkham-dark"] .text-info {
    color: #2DD3C8 !important;
}

/* Dark mode button text */
[data-theme="jamkham-dark"] .btn {
    color: #ECF0F3;
}

[data-theme="jamkham-dark"] .btn-primary {
    color: #0F141C !important;
}

[data-theme="jamkham-dark"] .btn-secondary {
    color: #0F141C !important;
}

[data-theme="jamkham-dark"] .btn-ghost {
    color: #ECF0F3 !important;
}

[data-theme="jamkham-dark"] .btn-outline {
    color: #ECF0F3 !important;
}

/* Dark mode menu items */
[data-theme="jamkham-dark"] .menu li a,
[data-theme="jamkham-dark"] .menu li button {
    color: #ECF0F3 !important;
}

[data-theme="jamkham-dark"] .menu li a:hover,
[data-theme="jamkham-dark"] .menu li button:hover {
    color: #2DD3C8 !important;
}

/* Dark mode form labels and placeholders */
[data-theme="jamkham-dark"] .label-text {
    color: #B1BDCD !important;
}

[data-theme="jamkham-dark"] ::placeholder {
    color: #677D98 !important;
}

/* Dark mode table headers */
[data-theme="jamkham-dark"] .table th {
    color: #B1BDCD !important;
}

/* Dark mode breadcrumbs */
[data-theme="jamkham-dark"] .breadcrumbs li a {
    color: #8799B1 !important;
}

[data-theme="jamkham-dark"] .breadcrumbs li a:hover {
    color: #2DD3C8 !important;
}

/* Dark mode Thai script - keep it visible */
[data-theme="jamkham-dark"] .font-thai,
[data-theme="jamkham-dark"] .thai-display,
[data-theme="jamkham-dark"] .thai-display-medium,
[data-theme="jamkham-dark"] .thai-display-small {
    color: #2DD3C8 !important;
}

/* Dark mode opacity text utilities */
[data-theme="jamkham-dark"] .opacity-50,
[data-theme="jamkham-dark"] .opacity-60,
[data-theme="jamkham-dark"] .opacity-70 {
    color: #B1BDCD;
}

/* Dark mode borders */
[data-theme="jamkham-dark"] .border-base-300,
[data-theme="jamkham-dark"] .border-base-300\/30,
[data-theme="jamkham-dark"] .border-base-300\/50 {
    border-color: oklch(215 20% 30% / 0.5) !important;
}

/* Dark mode footer */
[data-theme="jamkham-dark"] .footer {
    background-color: oklch(215 28% 15% / 0.9) !important;
}

/* Dark mode drawer/sidebar */
[data-theme="jamkham-dark"] .drawer-side .menu {
    background-color: oklch(215 30% 12% / 1) !important;
}

/* Dark mode inputs */
[data-theme="jamkham-dark"] .input,
[data-theme="jamkham-dark"] .textarea,
[data-theme="jamkham-dark"] .select {
    background-color: oklch(215 25% 20% / 1) !important;
    border-color: oklch(215 20% 30% / 0.5) !important;
    color: oklch(38 15% 92% / 1) !important;
}

/* Dark mode buttons - ghost and outline variants */
[data-theme="jamkham-dark"] .btn-ghost:hover {
    background-color: oklch(215 25% 25% / 0.5) !important;
}

[data-theme="jamkham-dark"] .btn-outline {
    border-color: oklch(38 15% 70% / 0.3) !important;
}

/* Dark mode flashcard faces */
[data-theme="jamkham-dark"] .flashcard-front,
[data-theme="jamkham-dark"] .flashcard-back {
    background: var(--jk-surface) !important;
}

/* Dark mode collapse/accordion */
[data-theme="jamkham-dark"] .collapse {
    background-color: oklch(215 28% 15% / 1) !important;
}

/* Dark mode alerts */
[data-theme="jamkham-dark"] .alert {
    background-color: oklch(215 25% 20% / 1) !important;
}

/* Dark mode badges */
[data-theme="jamkham-dark"] .badge-ghost {
    background-color: oklch(215 25% 25% / 0.5) !important;
    color: oklch(38 15% 85% / 1) !important;
}

/* Dark mode tables */
[data-theme="jamkham-dark"] .table tr:hover,
[data-theme="jamkham-dark"] .hover\:bg-base-200\/20:hover {
    background-color: oklch(215 25% 18% / 0.5) !important;
}

[data-theme="jamkham-dark"] .divide-base-200\/50 > :not([hidden]) ~ :not([hidden]) {
    border-color: oklch(215 20% 25% / 0.3) !important;
}

/* Dark mode kbd (keyboard shortcuts) */
[data-theme="jamkham-dark"] .kbd {
    background-color: oklch(215 25% 20% / 1) !important;
    border-color: oklch(215 20% 30% / 0.5) !important;
    color: oklch(38 15% 85% / 1) !important;
}

/* Dark mode dividers */
[data-theme="jamkham-dark"] .divider::before,
[data-theme="jamkham-dark"] .divider::after {
    background-color: oklch(215 20% 30% / 0.3) !important;
}

/* Dark mode stat boxes */
[data-theme="jamkham-dark"] .stat {
    background: oklch(215 28% 15% / 1) !important;
    border-color: oklch(215 20% 30% / 0.5) !important;
}

/* ============================================
   ATMOSPHERIC BACKGROUND PATTERN
   Simplified: Single subtle gradient, no crosshatch
   Hand-crafted feel through restraint
   ============================================ */

.jamkham-bg-pattern {
    position: absolute;
    inset: 0;
    background-color: oklch(var(--b1));
    /* Single subtle gradient - elegant restraint */
    background-image:
        radial-gradient(
            ellipse 120% 80% at 80% 20%,
            rgba(13, 115, 119, 0.025) 0%,
            transparent 60%
        );
}

[data-theme="jamkham-dark"] .jamkham-bg-pattern {
    background-image:
        radial-gradient(
            ellipse 120% 80% at 80% 20%,
            rgba(45, 211, 200, 0.03) 0%,
            transparent 60%
        );
}

/* ============================================
   LOADING BAR
   Simplified: Single color, subtle animation
   ============================================ */

.jamkham-loading-bar {
    background: var(--jk-primary);
    animation: jk-loading-pulse 1.5s ease-in-out infinite;
}

@keyframes jk-loading-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ============================================
   LOGO ICON
   ============================================ */

.jamkham-logo-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url("/static/brand/logo/jamkham-logo-icon.71fd282941db.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Smaller logo variant for tight spaces */
.jamkham-logo-icon-sm {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("/static/brand/logo/jamkham-logo-icon.71fd282941db.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Larger logo variant for hero sections */
.jamkham-logo-icon-lg {
    display: inline-block;
    width: 48px;
    height: 48px;
    background-image: url("/static/brand/logo/jamkham-logo-icon.71fd282941db.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ============================================
   THAI TYPOGRAPHY
   ============================================ */

.jk-thai-text,
.thai-text,
.font-thai {
    font-family: var(--jk-font-thai);
    line-height: var(--jk-leading-thai);
    letter-spacing: var(--jk-tracking-thai);
    font-feature-settings: "kern" 1;
}

.jk-thai-sm { font-size: var(--jk-thai-sm); }
.jk-thai-base { font-size: var(--jk-thai-base); }
.jk-thai-md { font-size: var(--jk-thai-md); }
.jk-thai-lg { font-size: var(--jk-thai-lg); }
.jk-thai-xl { font-size: var(--jk-thai-xl); }
.jk-thai-2xl { font-size: var(--jk-thai-2xl); }
.jk-thai-3xl { font-size: var(--jk-thai-3xl); }

/* Legacy class names for backwards compatibility */
.thai-text-sm {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-sm);
    line-height: 1.7;
}

.thai-text-md {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-base);
    line-height: var(--jk-leading-thai);
}

.thai-text-lg {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-lg);
    line-height: var(--jk-leading-thai);
}

.thai-text-xl {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-xl);
    line-height: var(--jk-leading-thai);
}

.thai-text-2xl {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-2xl);
    line-height: 1.6;
}

.thai-text-3xl {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-3xl);
    line-height: var(--jk-leading-thai-display);
}

/* Thai display for flashcards */
.jk-thai-display,
.thai-display {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-display);
    font-weight: var(--jk-font-semibold);
    line-height: 1.4;
    letter-spacing: 0.03em;
    color: var(--jk-primary);
}

.thai-display-small {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-md);
    font-weight: var(--jk-font-medium);
    line-height: var(--jk-leading-thai);
}

/* ============================================
   ENGLISH TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6,
.font-heading {
    font-family: var(--jk-font-heading);
    font-weight: var(--jk-font-semibold);
    letter-spacing: -0.01em;
}

.heading-display {
    font-family: var(--jk-font-heading);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--jk-font-bold);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.heading-section {
    font-family: var(--jk-font-heading);
    font-size: var(--jk-text-xl);
    font-weight: var(--jk-font-semibold);
    line-height: 1.3;
}

/* ============================================
   CARD REVEAL LAYOUT
   ============================================ */

.card-reveal-container {
    display: grid;
    grid-template-areas: "content";
    min-height: 320px;
}

@media (min-width: 640px) {
    .card-reveal-container {
        min-height: 380px;
    }
}

.card-reveal-container > .card-reveal-panel {
    grid-area: content;
}

.card-reveal-panel {
    transition: opacity 200ms ease-out, visibility 200ms ease-out;
}

.card-reveal-panel[data-visible="false"] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.card-reveal-panel[data-visible="true"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

[x-cloak] {
    display: none !important;
}

/* Audio button icons: show default icons before Alpine initializes
   This prevents gray empty circles on mobile with slow connections */
.audio-icon-default {
    display: block;
}
.audio-icon-hidden {
    display: none !important;
}

/* ============================================
   FLASHCARD STYLES
   ============================================ */

.jk-flashcard-container,
.flashcard-container {
    perspective: 1200px;
    perspective-origin: center;
}

.jk-card-flashcard,
.flashcard {
    position: relative;
    width: 100%;
    min-height: min(280px, 45vh);
    transition: transform var(--jk-duration-slow) var(--jk-ease-default);
    transform-style: preserve-3d;
}

.flashcard.flipped {
    transform: rotateY(180deg);
}

.flashcard-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--jk-space-8);
    border-radius: var(--jk-card-radius-lg);
    border: 1px solid var(--jk-border);
    box-shadow: var(--jk-shadow-md);
    transition: box-shadow var(--jk-duration-normal) var(--jk-ease-default);
}

/* Flashcard faces: Clean, flat backgrounds
   Let the content (Thai script) be the visual focus */

.flashcard-front {
    background: var(--jk-surface);
}

.flashcard-back {
    background: var(--jk-surface);
    transform: rotateY(180deg);
}

.flashcard-face:hover {
    box-shadow: var(--jk-shadow-lg);
}

.jk-flashcard-word,
.flashcard-word {
    font-family: var(--jk-font-thai);
    font-size: clamp(2.5rem, 10vw, 4rem);
    font-weight: var(--jk-font-semibold);
    line-height: 1.4;
    text-align: center;
    margin-bottom: var(--jk-space-4);
    color: var(--jk-primary);
}

.jk-flashcard-romanization,
.flashcard-romanization {
    font-family: var(--jk-font-body);
    font-size: var(--jk-text-md);
    color: var(--jk-text-muted);
    font-style: italic;
    margin-bottom: var(--jk-space-2);
    letter-spacing: 0.01em;
}

.jk-flashcard-meaning,
.flashcard-meaning {
    font-family: var(--jk-font-heading);
    font-size: var(--jk-text-xl);
    font-weight: var(--jk-font-medium);
    text-align: center;
    color: var(--jk-text);
}

.flashcard-context {
    font-family: var(--jk-font-body);
    font-size: var(--jk-text-sm);
    opacity: 0.7;
    margin-top: var(--jk-space-4);
    text-align: center;
    max-width: 85%;
    line-height: 1.6;
}

/* ============================================
   CARD COMPONENT
   ============================================ */

.jk-card {
    background: var(--jk-surface);
    border-radius: var(--jk-card-radius-md);
    border: 1px solid var(--jk-border);
    box-shadow: var(--jk-shadow-md);
    transition:
        box-shadow var(--jk-duration-normal) var(--jk-ease-default),
        transform var(--jk-duration-fast) var(--jk-ease-default),
        border-color var(--jk-duration-normal) var(--jk-ease-default);
}

.jk-card:hover {
    box-shadow: var(--jk-shadow-lg);
    border-color: var(--jk-border);
}

.jk-card-interactive {
    cursor: pointer;
}

.jk-card-interactive:hover {
    transform: translateY(-2px);
}

.jk-card-interactive:active {
    transform: translateY(0);
    box-shadow: var(--jk-shadow-sm);
}

.jk-card-accent {
    border-left: 4px solid var(--jk-primary);
}

.jk-card-accent-secondary {
    border-left: 4px solid var(--jk-secondary);
}

/* ============================================
   BUTTON STYLES
   ============================================ */

/* Button styles: Solid colors, subtle hover
   Hand-crafted principle: Restraint creates sophistication */

.jk-btn-primary,
.btn-primary {
    background: var(--jk-primary);
    color: var(--jk-text-inverse);
    border: none;
    box-shadow: var(--jk-shadow-sm);
    transition:
        transform var(--jk-duration-fast) var(--jk-ease-default),
        box-shadow var(--jk-duration-fast) var(--jk-ease-default),
        background-color var(--jk-duration-fast) var(--jk-ease-default);
}

.jk-btn-primary:hover,
.btn-primary:hover {
    background: var(--jk-primary-dark);
    box-shadow: var(--jk-shadow-md);
    transform: translateY(-1px);
}

.jk-btn-primary:active,
.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--jk-shadow-xs);
}

.jk-btn-secondary,
.btn-secondary {
    background: var(--jk-secondary);
    color: var(--jk-text);
    border: none;
    box-shadow: var(--jk-shadow-sm);
}

.jk-btn-secondary:hover,
.btn-secondary:hover {
    background: var(--jk-secondary-dark);
    box-shadow: var(--jk-shadow-md);
    transform: translateY(-1px);
}

.jk-btn-ghost,
.btn-ghost {
    transition:
        background-color var(--jk-duration-fast) var(--jk-ease-default),
        transform var(--jk-duration-fast) var(--jk-ease-default);
}

.jk-btn-ghost:hover,
.btn-ghost:hover {
    background-color: var(--jk-surface-sunken);
}

.btn-outline {
    border-width: 1.5px;
    transition:
        background-color var(--jk-duration-fast) var(--jk-ease-default),
        border-color var(--jk-duration-fast) var(--jk-ease-default),
        transform var(--jk-duration-fast) var(--jk-ease-default);
}

/* ============================================
   RATING BUTTONS - Psychology-Optimized
   Using amber instead of red for "Again" to
   reduce shame response and support learning
   ============================================ */

/* Rating Buttons: Solid colors, clear hierarchy
   Psychology-optimized: Warm coral for "Again" (not red) to reduce shame
   Hand-crafted: No gradients, no pseudo-element overlays */

.jk-rating-btn,
.quality-btn {
    position: relative;
    transition:
        transform var(--jk-duration-fast) var(--jk-ease-default),
        box-shadow var(--jk-duration-fast) var(--jk-ease-default),
        background-color var(--jk-duration-fast) var(--jk-ease-default);
    min-height: 60px;
    min-width: 70px;
    padding: var(--jk-space-3) var(--jk-space-4);
    border-radius: var(--jk-btn-radius-md);
    font-weight: var(--jk-font-semibold);
    border: none;
}

.jk-rating-btn:hover,
.quality-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--jk-shadow-md);
}

.jk-rating-btn:active,
.quality-btn:active {
    transform: translateY(0);
}

.jk-rating-btn:focus-visible,
.quality-btn:focus-visible {
    outline: 2px solid var(--jk-primary);
    outline-offset: 2px;
}

/* Again button - Warm coral (NOT red) */
.jk-rating-again,
.quality-btn[data-quality="1"] {
    background: var(--jk-rating-again);
    color: white;
}

.jk-rating-again:hover,
.quality-btn[data-quality="1"]:hover {
    background: var(--jk-rating-again-hover);
}

/* Hard button - Golden amber */
.jk-rating-hard,
.quality-btn[data-quality="2"] {
    background: var(--jk-rating-hard);
    color: var(--jk-text);
}

.jk-rating-hard:hover,
.quality-btn[data-quality="2"]:hover {
    background: var(--jk-rating-hard-hover);
}

/* Good button - Primary teal (default choice) */
.jk-rating-good,
.quality-btn[data-quality="4"] {
    background: var(--jk-rating-good);
    color: white;
    /* Subtle emphasis as the "recommended" choice */
    box-shadow: 0 0 0 2px rgba(13, 115, 119, 0.2);
}

.jk-rating-good:hover,
.quality-btn[data-quality="4"]:hover {
    background: var(--jk-rating-good-hover);
}

/* Easy button - Success green */
.jk-rating-easy,
.quality-btn[data-quality="5"] {
    background: var(--jk-rating-easy);
    color: white;
}

.jk-rating-easy:hover,
.quality-btn[data-quality="5"]:hover {
    background: var(--jk-rating-easy-hover);
}

/* Rating interval text */
.quality-btn .text-xs.opacity-80 {
    opacity: 1;
    font-size: 0.8125rem;
    font-weight: var(--jk-font-medium);
}

.quality-consequence {
    font-size: 0.6875rem;
    opacity: 0.85;
    margin-top: 0.125rem;
    font-family: var(--jk-font-body);
}

/* ============================================
   TONE INDICATORS
   ============================================ */

.jk-tone-indicator,
.tone-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    font-weight: var(--jk-font-bold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.jk-tone-mid,
.tone-mid {
    background: var(--jk-tone-mid);
    color: white;
}

.jk-tone-low,
.tone-low {
    background: var(--jk-tone-low);
    color: white;
}

.jk-tone-falling,
.tone-falling {
    background: var(--jk-tone-falling);
    color: white;
}

.jk-tone-high,
.tone-high {
    background: var(--jk-tone-high);
    color: var(--jk-text);
}

.jk-tone-rising,
.tone-rising {
    background: var(--jk-tone-rising);
    color: white;
}

.tone-badge {
    padding: 0.375rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: var(--jk-font-semibold);
    text-transform: capitalize;
    letter-spacing: 0.01em;
}

/* ============================================
   PROGRESS INDICATORS
   ============================================ */

/* Progress Indicators: Clean, static by default
   Animation only when value changes, not perpetually */

.jk-progress,
.session-progress {
    height: 0.5rem;
    background: var(--jk-surface-sunken);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
}

.jk-progress-bar,
.session-progress-bar {
    height: 100%;
    background: var(--jk-primary);
    transition: width var(--jk-duration-slow) var(--jk-ease-default);
    /* No perpetual animation - clean and professional */
}

/* Streak indicator: Warm, subtle, earned feeling
   No gradient background - solid with subtle border */

.jk-streak,
.streak-fire {
    display: inline-flex;
    align-items: center;
    gap: var(--jk-space-2);
    padding: var(--jk-space-2) var(--jk-space-4);
    background: rgba(233, 168, 59, 0.1);
    border-radius: 9999px;
    border: 1px solid rgba(233, 168, 59, 0.25);
    font-weight: var(--jk-font-semibold);
}

/* Subtle pulse only - not distracting */
.streak-fire-icon {
    animation: jk-streak-pulse 3s ease-in-out infinite;
}

@keyframes jk-streak-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

.interval-badge {
    font-size: 0.75rem;
    font-weight: var(--jk-font-semibold);
    font-family: var(--jk-font-body);
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    background: var(--jk-surface-sunken);
    border: 1px solid var(--jk-border);
}

/* ============================================
   HTMX LOADING STATES
   ============================================ */

.htmx-indicator {
    opacity: 0;
    transition: opacity var(--jk-duration-normal) var(--jk-ease-default);
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

.htmx-loading {
    position: relative;
}

.htmx-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(253, 246, 227, 0.8);
    backdrop-filter: blur(2px);
    border-radius: inherit;
    animation: jk-fade-in var(--jk-duration-fast) var(--jk-ease-default);
}

.skeleton-loading {
    background: linear-gradient(90deg, var(--jk-surface-sunken) 25%, var(--jk-border) 50%, var(--jk-surface-sunken) 75%);
    background-size: 200% 100%;
    animation: jk-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 0.5rem;
}

@keyframes jk-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   INPUT STYLES
   ============================================ */

.jk-input,
.answer-input {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-text-xl);
    text-align: center;
    padding: var(--jk-space-4) var(--jk-space-6);
    border-radius: var(--jk-input-radius);
    border: 2px solid var(--jk-border);
    background: var(--jk-surface);
    transition:
        border-color var(--jk-duration-fast) var(--jk-ease-default),
        box-shadow var(--jk-duration-fast) var(--jk-ease-default);
}

.jk-input:focus,
.answer-input:focus {
    outline: none;
    border-color: var(--jk-primary);
    box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.15);
}

.jk-input::placeholder,
.answer-input::placeholder {
    font-family: var(--jk-font-thai);
    color: var(--jk-text-muted);
}

.jk-input-error {
    border-color: var(--jk-error);
}

.jk-input-error:focus {
    border-color: var(--jk-error);
    box-shadow: 0 0 0 3px rgba(194, 93, 57, 0.15);
}

.jk-input-thai {
    font-family: var(--jk-font-thai);
    font-size: var(--jk-thai-base);
    line-height: var(--jk-leading-thai);
}

/* ============================================
   FEEDBACK ANIMATIONS
   ============================================ */

/* Correct feedback - satisfying pulse */
.jk-feedback-correct,
.feedback-correct {
    animation: jk-feedback-correct 0.6s var(--jk-ease-bounce);
}

@keyframes jk-feedback-correct {
    0% {
        background-color: transparent;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 160, 107, 0.3);
    }
    30% {
        background-color: var(--jk-success-bg);
        transform: scale(1.02);
        box-shadow: 0 0 0 8px rgba(34, 160, 107, 0);
    }
    100% {
        background-color: rgba(34, 160, 107, 0.05);
        transform: scale(1);
    }
}

/* Incorrect feedback - GENTLE, not punitive */
.jk-feedback-incorrect,
.feedback-incorrect {
    animation: jk-feedback-incorrect 0.4s var(--jk-ease-default);
}

@keyframes jk-feedback-incorrect {
    0%, 100% {
        transform: translateX(0);
        background-color: transparent;
    }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
    50% {
        /* Warm amber instead of red - less shame-inducing */
        background-color: rgba(194, 93, 57, 0.15);
    }
}

/* Alternative: no shake, just color pulse */
.feedback-incorrect-soft {
    animation: jk-feedback-incorrect-soft 0.5s var(--jk-ease-default);
}

@keyframes jk-feedback-incorrect-soft {
    0% { background-color: transparent; }
    40% { background-color: rgba(194, 93, 57, 0.2); }
    100% { background-color: rgba(194, 93, 57, 0.05); }
}

/* ============================================
   ANSWER REVEAL STYLES
   ============================================ */

.answer-thai-display {
    font-family: var(--jk-font-thai);
    font-size: clamp(2.75rem, 9vw, 4.5rem);
    font-weight: var(--jk-font-semibold);
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: var(--jk-primary);
    text-shadow: 0 2px 4px rgba(13, 115, 119, 0.1);
}

.answer-english-display {
    font-family: var(--jk-font-heading);
    font-size: 1.375rem;
    font-weight: var(--jk-font-medium);
    color: var(--jk-text-secondary);
    margin-top: 0.75rem;
}

.answer-romanization {
    font-family: var(--jk-font-body);
    font-size: var(--jk-text-md);
    color: var(--jk-text-muted);
    font-style: italic;
    letter-spacing: 0.01em;
}

.card-answer-section {
    padding-top: var(--jk-space-6);
    margin-top: var(--jk-space-6);
    border-top: 1px solid var(--jk-border-light);
}

/* Answer area: Simple highlight, no gradient */
.answer-area-highlight {
    background: rgba(13, 115, 119, 0.02);
    border-radius: var(--jk-card-radius-sm);
    padding: var(--jk-space-6);
    margin: calc(var(--jk-space-2) * -1);
}

/* ============================================
   SYLLABLE BREAKDOWN
   ============================================ */

.syllable-display {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: center;
}

.syllable {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--jk-surface-sunken);
    border-radius: var(--jk-btn-radius-md);
    border: 1px solid var(--jk-border);
    transition: transform var(--jk-duration-fast) var(--jk-ease-default);
}

.syllable:hover {
    transform: translateY(-2px);
}

.syllable-thai {
    font-family: var(--jk-font-thai);
    font-size: 1.625rem;
    font-weight: var(--jk-font-semibold);
    color: var(--jk-primary);
}

.syllable-romanization {
    font-size: 0.75rem;
    opacity: 0.65;
    font-family: var(--jk-font-body);
}

.syllable-tone {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
    font-weight: var(--jk-font-semibold);
    opacity: 0.8;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes jk-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes jk-scale-up {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes jk-success-pop {
    0% { transform: scale(1); }
    30% { transform: scale(1.05); }
    60% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

@keyframes jk-success-glow {
    0% { box-shadow: 0 0 0 0 rgba(34, 160, 107, 0.4); }
    50% { box-shadow: 0 0 0 12px rgba(34, 160, 107, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 160, 107, 0); }
}

/* Animation utilities */
.jk-animate-fade-in,
.animate-fade-in {
    animation: jk-fade-in var(--jk-duration-normal) var(--jk-ease-default);
}

.jk-animate-scale-up,
.animate-scale-up {
    animation: jk-scale-up var(--jk-duration-normal) var(--jk-ease-bounce);
}

.jk-animate-success,
.animate-success {
    animation: jk-success-pop 0.6s var(--jk-ease-bounce);
}

.jk-animate-success-glow,
.animate-success-glow {
    animation: jk-success-glow 0.8s var(--jk-ease-default);
}

/* Staggered animations */
.jk-animate-stagger > *,
.animate-stagger > * {
    animation: jk-fade-in var(--jk-duration-normal) var(--jk-ease-default) backwards;
}

.jk-animate-stagger > *:nth-child(1),
.animate-stagger > *:nth-child(1) { animation-delay: 0ms; }
.jk-animate-stagger > *:nth-child(2),
.animate-stagger > *:nth-child(2) { animation-delay: 50ms; }
.jk-animate-stagger > *:nth-child(3),
.animate-stagger > *:nth-child(3) { animation-delay: 100ms; }
.jk-animate-stagger > *:nth-child(4),
.animate-stagger > *:nth-child(4) { animation-delay: 150ms; }
.jk-animate-stagger > *:nth-child(5),
.animate-stagger > *:nth-child(5) { animation-delay: 200ms; }
.jk-animate-stagger > *:nth-child(6),
.animate-stagger > *:nth-child(6) { animation-delay: 250ms; }

/* Slide in from right */
.animate-slide-in-right {
    animation: jk-slide-in-right var(--jk-duration-normal) var(--jk-ease-default);
}

@keyframes jk-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Streak pulse */
.animate-streak-pulse {
    animation: jk-streak-pulse 2s ease-in-out infinite;
}

/* ============================================
   AUDIO PLAYER
   ============================================ */

.audio-btn {
    position: relative;
    transition:
        transform var(--jk-duration-fast) var(--jk-ease-default),
        background-color var(--jk-duration-fast) var(--jk-ease-default);
}

.audio-btn:hover {
    transform: scale(1.1);
}

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

.audio-btn.playing {
    animation: audio-ripple 1s ease-out infinite;
}

.audio-btn.playing::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px solid rgba(13, 115, 119, 0.5);
    border-radius: inherit;
    animation: audio-ring 1s ease-out infinite;
}

@keyframes audio-ripple {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes audio-ring {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

.animate-audio-wave-1 {
    animation: audio-wave 0.6s ease-in-out infinite;
    animation-delay: 0s;
}

.animate-audio-wave-2 {
    animation: audio-wave 0.6s ease-in-out infinite;
    animation-delay: 0.15s;
}

.animate-audio-wave-3 {
    animation: audio-wave 0.6s ease-in-out infinite;
    animation-delay: 0.3s;
}

@keyframes audio-wave {
    0%, 100% { transform: scaleY(0.5); opacity: 0.6; }
    50% { transform: scaleY(1); opacity: 1; }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.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;
}

:focus-visible {
    outline: 2px solid var(--jk-primary);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

@media (max-width: 639px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 640px) {
    .hide-desktop {
        display: none !important;
    }
}

.table-scroll-wrapper {
    position: relative;
}

.table-scroll-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2rem;
    background: linear-gradient(to left, var(--jk-background), transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--jk-duration-normal) var(--jk-ease-default);
}

@media (max-width: 767px) {
    .table-scroll-wrapper::after {
        opacity: 0.8;
    }
}

/* ============================================
   MOBILE OPTIMIZATION
   ============================================ */

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

@media (max-width: 640px) {
    .btn-sm {
        min-height: 44px;
        min-width: 44px;
    }

    .jk-rating-btn,
    .quality-btn {
        min-height: 48px;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Mobile-optimized cards - cap height to leave room for buttons */
    .jk-card-flashcard,
    .flashcard {
        min-height: 180px;
        max-height: min(240px, 35vh);
    }

    .flashcard-face {
        padding: var(--jk-space-3) var(--jk-space-4);  /* 0.75rem 1rem */
    }

    /* Smaller flashcard word on mobile */
    .jk-flashcard-word,
    .flashcard-word {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    /* Tighter container padding on mobile */
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Prevent zoom on input focus (iOS Safari) */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.safe-area-top {
    padding-top: env(safe-area-inset-top, 0);
}

@media (max-width: 1023px) {
    .drawer-side .menu a,
    .drawer-side .menu button {
        min-height: 52px;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .no-print {
        display: none !important;
    }

    .flashcard {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .jamkham-bg-pattern {
        display: none;
    }
}

/* ============================================
   COMPONENT ENHANCEMENTS
   ============================================ */

.stat {
    background: var(--jk-surface);
    border: 1px solid var(--jk-border-light);
    transition: transform var(--jk-duration-fast) var(--jk-ease-default);
}

.stat:hover {
    transform: translateY(-2px);
}

.stat-value {
    font-family: var(--jk-font-heading);
    font-weight: var(--jk-font-bold);
}

.stat-title {
    font-family: var(--jk-font-body);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.6875rem;
    opacity: 0.7;
}

.stat-desc {
    font-family: var(--jk-font-body);
    opacity: 0.6;
}

/* Hero section: Clean, let content speak
   No complex layered gradients */

.hero-gradient {
    background: var(--jk-background);
}

/* Navbar: White background for clear contrast with warm page
   Hand-crafted: Intentional contrast, not blending */

.navbar {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[data-theme="jamkham-dark"] .navbar {
    background: rgba(30, 40, 54, 0.97);
}

.navbar-brand {
    font-family: var(--jk-font-heading);
    font-weight: var(--jk-font-bold);
    letter-spacing: -0.02em;
}

/* Dropdown menus: Solid background, proper stacking */
.dropdown-content {
    background-color: var(--jk-surface) !important;
    z-index: 100 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

/* Modal z-index fix: Ensure modal-box appears above backdrop */
.modal {
    z-index: 9999 !important;
    isolation: isolate;
}

.modal .modal-box {
    z-index: 10 !important;
    position: relative;
    background-color: var(--jk-surface, oklch(var(--b1)));
}

.modal .modal-backdrop,
.modal > label.modal-backdrop {
    z-index: 1 !important;
    position: absolute;
    inset: 0;
}

/* Alternative: Use the ~ selector in case structure is different */
.modal-toggle:checked ~ .modal .modal-box,
.modal:has(.modal-toggle:checked) .modal-box {
    z-index: 10 !important;
}

/* Ensure modal toggle checkbox works correctly */
.modal-toggle:checked + .modal,
.modal:target,
.modal[open] {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}

/* Force modal-box to be above everything when modal is visible */
.modal-toggle:checked + .modal .modal-box {
    position: relative;
    z-index: 10 !important;
}

[data-theme="jamkham-dark"] .dropdown-content {
    background-color: oklch(var(--b2)) !important;
}

/* Feature cards */
.feature-card {
    background: var(--jk-surface);
    border: 1px solid var(--jk-border-light);
    border-radius: var(--jk-card-radius-md);
    padding: var(--jk-space-8);
    text-align: center;
    transition:
        transform var(--jk-duration-normal) var(--jk-ease-default),
        box-shadow var(--jk-duration-normal) var(--jk-ease-default),
        border-color var(--jk-duration-normal) var(--jk-ease-default);
}

/* Feature card hover: Subtle, professional */
.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--jk-shadow-md);
}

/* Feature icon: Simple tinted background, no gradient */
.feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: var(--jk-card-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--jk-space-6);
    background: rgba(13, 115, 119, 0.08);
}

/* Alerts/Toast */
.alert {
    border-radius: var(--jk-card-radius-sm);
    border-width: 1px;
}

.alert-success {
    background: var(--jk-success-bg);
    border-color: rgba(34, 160, 107, 0.4);
    color: var(--jk-success-dark);
}

.alert-success svg {
    color: var(--jk-success);
}

.alert-warning {
    background: var(--jk-warning-bg);
    border-color: rgba(233, 168, 59, 0.4);
    color: var(--jk-warning-dark);
}

.alert-warning svg {
    color: var(--jk-warning);
}

.alert-error {
    background: var(--jk-error-bg);
    border-color: rgba(194, 93, 57, 0.4);
    color: var(--jk-error-dark);
}

.alert-error svg {
    color: var(--jk-error);
}

.alert-info {
    background: var(--jk-info-bg);
    border-color: rgba(13, 115, 119, 0.4);
    color: var(--jk-info-dark);
}

.alert-info svg {
    color: var(--jk-info);
}

/* Dark mode alert overrides for better visibility */
[data-theme="jamkham-dark"] .alert-success,
[data-theme="jamkham-dark"] .alert-warning,
[data-theme="jamkham-dark"] .alert-error,
[data-theme="jamkham-dark"] .alert-info {
    color: var(--jk-text);
}

[data-theme="jamkham-dark"] .alert-success {
    background: rgba(34, 160, 107, 0.2);
}

[data-theme="jamkham-dark"] .alert-warning {
    background: rgba(233, 168, 59, 0.2);
}

[data-theme="jamkham-dark"] .alert-error {
    background: rgba(194, 93, 57, 0.2);
}

[data-theme="jamkham-dark"] .alert-info {
    background: rgba(13, 115, 119, 0.2);
}

/* Badges: Solid colors, no gradients */
.badge-primary {
    background: var(--jk-primary);
    color: var(--jk-text-inverse);
}

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

.badge-accent {
    background: var(--jk-accent);
    color: var(--jk-text-inverse);
}

/* Divider */
.divider {
    font-family: var(--jk-font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.6;
}

.divider::before,
.divider::after {
    background: linear-gradient(90deg, transparent, var(--jk-border), transparent);
    height: 1px;
}

/* Tooltip */
.tooltip::before {
    font-family: var(--jk-font-body);
    font-size: 0.8125rem;
}

/* ============================================
   AUTH PAGES
   ============================================ */

.auth-input {
    transition:
        border-color var(--jk-duration-fast) var(--jk-ease-default),
        box-shadow var(--jk-duration-fast) var(--jk-ease-default);
}

.auth-input:focus {
    outline: none;
    border-color: var(--jk-primary);
    box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.15);
}

.auth-input:focus-visible {
    outline: none;
}

.auth-input.input-error:focus {
    border-color: var(--jk-error);
    box-shadow: 0 0 0 3px rgba(194, 93, 57, 0.15);
}

.social-provider-btn {
    transition:
        transform var(--jk-duration-fast) var(--jk-ease-default),
        box-shadow var(--jk-duration-fast) var(--jk-ease-default),
        background-color var(--jk-duration-fast) var(--jk-ease-default);
}

.social-provider-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--jk-border);
}

.social-provider-btn:active {
    transform: translateY(0);
}

/* Auth card: Clean with single color accent
   Hand-crafted: Intentional simplicity */

.auth-card {
    position: relative;
    overflow: hidden;
}

.auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--jk-primary);
    border-radius: var(--jk-card-radius-md) var(--jk-card-radius-md) 0 0;
}

/* Auth page background: Simple, clean, focused
   Let users concentrate on the task at hand */

.auth-page-bg {
    background: var(--jk-background);
    min-height: 100vh;
}

.password-strength {
    height: 4px;
    border-radius: 2px;
    background: var(--jk-surface-sunken);
    overflow: hidden;
    margin-top: var(--jk-space-2);
}

.password-strength-bar {
    height: 100%;
    transition: width var(--jk-duration-normal) var(--jk-ease-default),
                background-color var(--jk-duration-normal) var(--jk-ease-default);
}

.password-strength-bar.weak { width: 25%; background: var(--jk-error); }
.password-strength-bar.fair { width: 50%; background: var(--jk-warning); }
.password-strength-bar.good { width: 75%; background: var(--jk-info); }
.password-strength-bar.strong { width: 100%; background: var(--jk-success); }

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

.auth-card-animate {
    animation: auth-fade-in var(--jk-duration-slow) var(--jk-ease-default);
}

/* Removed floating animation - too distracting
   Static decorations are more professional */

.auth-decoration {
    /* No animation - static is more professional */
}

/* ============================================
   DEMO MODE STYLES
   Clean, professional preview
   ============================================ */

/* Demo feature preview: Simple, no shimmer animation */
.demo-feature-preview {
    position: relative;
}

.demo-audio-btn {
    position: relative;
}

.demo-audio-btn::after {
    content: 'Demo';
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.5;
}

.demo-badge-pulse {
    animation: demo-badge-pulse 2s ease-in-out infinite;
}

@keyframes demo-badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.demo-progress-header {
    background: var(--jk-surface-sunken);
}

.demo-rating-btn {
    transition: all var(--jk-duration-fast) var(--jk-ease-default);
}

.demo-rating-btn:hover {
    transform: translateY(-2px);
}

.demo-rating-btn:active {
    transform: translateY(0);
}

/* ============================================
   REVIEW SESSION - ZONE-BASED LAYOUT

   The viewport is divided into 4 fixed zones:
   1. STATUS BAR (40px) - card count, progress dots, timer
   2. PROMPT ZONE (40-45%) - Thai/English display + audio
   3. INPUT/INFO ZONE (flex) - The ONLY dynamic zone
   4. RATING ZONE (80px mobile) - Always at bottom

   This guarantees rating buttons are ALWAYS visible.
   ============================================ */

/* Main container - anchored between navbar and bottom nav
   Uses 100svh (small viewport height) which does NOT change when keyboard appears.
   This keeps the layout stable - keyboard slides over the content instead of resizing it. */
.review-session-container {
    display: flex;
    flex-direction: column;
    max-width: 32rem;
    margin: 0 auto;
    overflow: hidden;
    background: oklch(var(--b1));
    /* Default: full viewport */
    height: 100svh;
    height: 100vh; /* fallback for browsers without svh support */
}

/* Mobile: anchor between navbar (3rem) and bottom nav (4rem) */
@media (max-width: 1023px) {
    .review-session-container {
        /* 100svh = small viewport height (stable, ignores keyboard)
           Subtract navbar (3rem/48px) + bottom nav (4rem/64px) */
        height: calc(100svh - 3rem - 4rem);
        height: calc(100vh - 3rem - 4rem); /* fallback */
    }
}

/* Desktop: no bottom nav, just subtract navbar (4rem) */
@media (min-width: 1024px) {
    .review-session-container {
        height: calc(100svh - 4rem);
        height: calc(100vh - 4rem); /* fallback */
        max-width: 36rem;
        padding: 1rem;
    }
}

/* ============================================
   ZONE 1: STATUS BAR - Fixed 40px
   ============================================ */

.review-status-bar {
    flex-shrink: 0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.75rem;
    background: var(--jk-surface-sunken, oklch(var(--b2)));
    border-bottom: 1px solid var(--jk-border-light, oklch(var(--b3)));
    font-size: 0.8125rem;
    gap: 0.75rem;
}

.status-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.status-progress .card-count {
    color: oklch(var(--bc));
}

.status-progress .card-total {
    color: oklch(var(--bc) / 0.5);
}

.status-dots {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.status-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: oklch(var(--b3));
}

.status-dots .dot-correct {
    background: var(--jk-success, oklch(var(--su)));
}

.status-dots .dot-incorrect {
    background: var(--jk-warning, oklch(var(--wa)));
}

.status-timer {
    font-family: var(--jk-font-mono, ui-monospace, monospace);
    color: var(--jk-warning, oklch(var(--wa)));
    font-size: 0.75rem;
}

.status-end-btn {
    padding: 0.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: oklch(var(--bc) / 0.5);
    border-radius: 0.25rem;
}

.status-end-btn:hover {
    color: oklch(var(--bc));
    background: oklch(var(--b3));
}

@media (min-width: 640px) {
    .review-status-bar {
        height: 44px;
        padding: 0 1rem;
        font-size: 0.875rem;
    }
}

/* ============================================
   ZONE 2: PROMPT DISPLAY - Flex-based sizing
   Shows Thai script OR English prompt + audio
   Note: Using flex instead of percentage height (percentages don't resolve in flex containers)
   ============================================ */

.review-prompt-zone {
    /* flex-grow: 2 means this zone takes 2 parts of available space */
    flex: 2 0 auto;
    min-height: 120px;
    max-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    border-bottom: 1px solid var(--jk-border-light, oklch(var(--b3)));
}

.prompt-thai-display {
    font-family: var(--jk-font-thai, 'Sarabun', sans-serif);
    font-size: clamp(2.25rem, 10vw, 4rem);
    font-weight: 600;
    color: var(--jk-primary, oklch(var(--p)));
    line-height: 1.2;
    word-break: keep-all;
}

.prompt-english-display {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    font-weight: 500;
    color: oklch(var(--bc));
    line-height: 1.3;
}

.prompt-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.prompt-audio-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.25rem;
}

.prompt-audio-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--jk-surface-sunken, oklch(var(--b2)));
    border: 1px solid var(--jk-border, oklch(var(--b3)));
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.15s ease;
    color: oklch(var(--bc) / 0.7);
}

.prompt-audio-btn:hover {
    background: var(--jk-primary-50, oklch(var(--p) / 0.1));
    color: var(--jk-primary, oklch(var(--p)));
}

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

.prompt-context {
    font-size: 0.8125rem;
    color: oklch(var(--bc) / 0.6);
    font-style: italic;
    max-width: 280px;
}

@media (min-width: 640px) {
    .review-prompt-zone {
        min-height: 140px;
        max-height: 300px;
        padding: 1rem 1.5rem;
        gap: 0.75rem;
    }
}

/* ============================================
   ZONE 3: INPUT/INFO DISPLAY - The only dynamic zone
   Shows: Show Answer btn, text input, or answer/feedback
   ============================================ */

.review-input-zone {
    /* flex-grow: 3 means this zone takes 3 parts of available space (larger than prompt zone) */
    flex: 3 1 0%;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.review-input-zone::-webkit-scrollbar {
    width: 4px;
}

.review-input-zone::-webkit-scrollbar-thumb {
    background: var(--jk-border, oklch(var(--b3)));
    border-radius: 2px;
}

/* Show Answer button */
.show-answer-btn {
    width: 100%;
    max-width: 280px;
    min-height: 52px;
    font-size: 1rem;
    font-weight: 600;
}

/* Hint toggle link */
.hint-toggle-btn {
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: oklch(var(--bc) / 0.5);
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
}

.hint-toggle-btn:hover {
    color: oklch(var(--bc) / 0.7);
}

.hint-content {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: oklch(var(--bc) / 0.6);
    font-style: italic;
}

/* Answer display (after reveal) */
.answer-display {
    text-align: center;
    width: 100%;
    max-width: 320px;
}

.answer-thai {
    font-family: var(--jk-font-thai, 'Sarabun', sans-serif);
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    font-weight: 600;
    color: var(--jk-primary, oklch(var(--p)));
    margin-bottom: 0.375rem;
    line-height: 1.2;
}

.answer-romanization {
    font-size: 0.9375rem;
    color: oklch(var(--bc) / 0.6);
    font-style: italic;
    margin-bottom: 0.25rem;
}

.answer-english {
    font-size: 1.125rem;
    font-weight: 500;
    color: oklch(var(--bc));
    margin-bottom: 0.5rem;
}

.answer-badges {
    display: flex;
    gap: 0.375rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.375rem;
}

/* Feedback badges */
.feedback-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.feedback-correct {
    background: rgba(34, 160, 107, 0.15);
    border: 1px solid rgba(34, 160, 107, 0.3);
    color: #166534;
}

[data-theme="dark"] .feedback-correct {
    color: #86efac;
}

.feedback-incorrect {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #92400e;
}

[data-theme="dark"] .feedback-incorrect {
    color: #fcd34d;
}

/* Thai input field */
.thai-input-wrapper {
    width: 100%;
    max-width: 280px;
    margin-bottom: 0.75rem;
}

.thai-input-label {
    display: block;
    font-size: 0.8125rem;
    color: oklch(var(--bc) / 0.6);
    margin-bottom: 0.5rem;
    text-align: center;
}

.thai-input-field {
    width: 100%;
    height: 48px;
    font-family: var(--jk-font-thai, 'Sarabun', sans-serif);
    font-size: 1.25rem;
    text-align: center;
    border: 2px solid var(--jk-border, oklch(var(--b3)));
    border-radius: 0.5rem;
    background: oklch(var(--b1));
    padding: 0 1rem;
    color: oklch(var(--bc));
}

.thai-input-field:focus {
    outline: none;
    border-color: var(--jk-primary, oklch(var(--p)));
    box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.15);
}

.thai-input-hint {
    font-size: 0.6875rem;
    color: oklch(var(--bc) / 0.4);
    margin-top: 0.25rem;
    text-align: center;
}

.check-answer-btn {
    width: 100%;
    max-width: 280px;
    min-height: 48px;
}

.skip-btn {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: oklch(var(--bc) / 0.5);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.skip-btn:hover {
    color: oklch(var(--bc) / 0.7);
    text-decoration: underline;
}

/* Example sentence toggle */
.example-toggle-btn {
    font-size: 0.75rem;
    color: oklch(var(--bc) / 0.5);
    text-decoration: underline;
    margin-top: 0.75rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
}

.example-content {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--jk-surface-sunken, oklch(var(--b2)));
    border-radius: 0.5rem;
    text-align: left;
    font-size: 0.875rem;
    width: 100%;
    max-width: 320px;
}

.example-thai {
    font-family: var(--jk-font-thai, 'Sarabun', sans-serif);
    font-size: 1rem;
    color: oklch(var(--bc));
    margin-bottom: 0.25rem;
}

.example-romanization {
    font-size: 0.8125rem;
    color: oklch(var(--bc) / 0.6);
    font-style: italic;
    margin-bottom: 0.25rem;
}

.example-english {
    font-size: 0.8125rem;
    color: oklch(var(--bc) / 0.7);
}

@media (min-width: 640px) {
    .review-input-zone {
        padding: 1rem;
    }
}

/* ============================================
   ZONE 4: RATING BUTTONS - Fixed at bottom
   Hidden until answer revealed, then appears
   ============================================ */

.review-rating-zone {
    flex-shrink: 0;
    padding: 0.5rem;
    background: oklch(var(--b1));
    border-top: 1px solid var(--jk-border-light, oklch(var(--b3)));
}

/* Hidden state */
.review-rating-zone[data-state="hidden"] {
    display: none;
}

.rating-button-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.375rem;
}

@media (min-width: 640px) {
    .review-rating-zone {
        padding: 0.5rem 0.75rem;
    }

    .rating-button-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }
}

/* Rating buttons */
.rating-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.375rem 0.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.rating-btn:hover {
    transform: translateY(-1px);
}

.rating-btn:active {
    transform: translateY(0);
}

.rating-btn-label {
    font-size: 0.8125rem;
    line-height: 1;
}

.rating-btn-interval {
    font-size: 0.6875rem;
    font-family: var(--jk-font-mono, ui-monospace, monospace);
    opacity: 0.85;
    margin-top: 0.125rem;
}

/* Rating button colors */
.rating-btn-again {
    background: var(--jk-rating-again, #f59e0b);
    color: white;
}

.rating-btn-hard {
    background: var(--jk-rating-hard, #fcd34d);
    color: #78350f;
}

.rating-btn-good {
    background: var(--jk-rating-good, #0d7377);
    color: white;
    box-shadow: 0 0 0 2px rgba(13, 115, 119, 0.2);
}

.rating-btn-easy {
    background: var(--jk-rating-easy, #10b981);
    color: white;
}

/* ============================================
   MOBILE-SPECIFIC ADJUSTMENTS
   ============================================ */

@media (max-width: 639px) {
    .review-prompt-zone {
        /* Use flex-based sizing, not percentage height */
        min-height: 100px;
        max-height: 200px;
        padding: 0.5rem 0.75rem;
    }

    .prompt-thai-display {
        font-size: clamp(2rem, 9vw, 3rem);
    }

    .prompt-audio-btn {
        width: 36px;
        height: 36px;
    }

    .answer-thai {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .rating-btn {
        min-height: 40px;
    }

    .rating-btn-label {
        font-size: 0.75rem;
    }

    .rating-btn-interval {
        font-size: 0.625rem;
    }
}

/* Landscape orientation on mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .review-status-bar {
        height: 32px;
        padding: 0 0.5rem;
        font-size: 0.75rem;
    }

    .review-prompt-zone {
        /* Use flex-based sizing, not percentage height */
        min-height: 60px;
        max-height: 100px;
        padding: 0.25rem 0.5rem;
    }

    .prompt-thai-display {
        font-size: 1.5rem;
    }

    .prompt-audio-btn {
        width: 28px;
        height: 28px;
    }

    .review-input-zone {
        padding: 0.5rem;
    }

    .review-rating-zone {
        padding: 0.25rem 0.5rem;
    }

    .rating-btn {
        min-height: 32px;
    }
}

/* ============================================
   UNDO TOAST - Subtle, non-blocking notification
   ============================================ */

.undo-toast {
    position: fixed;
    bottom: 5rem; /* Above bottom nav (4rem) + small gap */
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    animation: undo-fade-in 0.2s ease-out;
}

@media (min-width: 1024px) {
    .undo-toast {
        bottom: 1.5rem; /* No bottom nav on desktop */
    }
}

.undo-toast-content {
    display: flex;
}

.undo-toast-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: oklch(var(--bc) / 0.7);
    background: oklch(var(--b2));
    border: 1px solid oklch(var(--b3));
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.undo-toast-btn:hover {
    color: oklch(var(--wa));
    border-color: oklch(var(--wa) / 0.5);
    background: oklch(var(--wa) / 0.1);
}

.undo-countdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    background: oklch(var(--b3));
    border-radius: 50%;
    color: oklch(var(--bc) / 0.6);
}

.undo-toast-hide {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
    transition: all 0.2s ease-out;
}

@keyframes undo-fade-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ============================================
   LEGACY SUPPORT - Map old classes
   ============================================ */

.review-viewport-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.review-card-area {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Keep these for backwards compatibility during transition */
.review-card-fixed-footer,
.review-card-viewport {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ============================================
   QUICK MODE SELECTOR - Bottom Sheet
   Mobile-first design for contextual mode selection
   ============================================ */

.mode-selector-page {
    position: fixed;
    inset: 0;
    z-index: 50;
}

.quick-mode-selector {
    position: relative;
    z-index: 50;
}

/* Backdrop */
.quick-mode-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Bottom Sheet Container */
.quick-mode-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--jk-surface);
    border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: var(--jk-shadow-xl);
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

[data-theme="jamkham-dark"] .quick-mode-sheet {
    background: var(--jk-surface-elevated);
}

/* Drag Handle */
.quick-mode-handle {
    display: flex;
    justify-content: center;
    padding: 0.75rem 0 0.5rem;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 1;
}

.quick-mode-handle-bar {
    width: 2.5rem;
    height: 0.25rem;
    background: var(--jk-border);
    border-radius: 9999px;
}

/* Header */
.quick-mode-header {
    padding: 0 1.25rem 1rem;
    text-align: center;
}

.quick-mode-title {
    font-family: var(--jk-font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--jk-text);
    margin: 0 0 0.25rem;
    letter-spacing: -0.01em;
}

.quick-mode-subtitle {
    font-size: 0.875rem;
    color: var(--jk-text-muted);
    margin: 0;
}

/* Mode Options Container */
.quick-mode-options {
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Individual Mode Option */
.quick-mode-option {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--jk-surface-sunken);
    border: 2px solid transparent;
    border-radius: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    width: 100%;
}

.quick-mode-option:hover {
    background: var(--jk-primary-50);
    border-color: var(--jk-primary-200);
}

.quick-mode-option:focus-visible {
    outline: 2px solid var(--jk-primary);
    outline-offset: 2px;
}

.quick-mode-option--selected {
    background: var(--jk-primary-50);
    border-color: var(--jk-primary);
}

[data-theme="jamkham-dark"] .quick-mode-option {
    background: var(--jk-surface-sunken);
}

[data-theme="jamkham-dark"] .quick-mode-option:hover {
    background: rgba(45, 211, 200, 0.1);
    border-color: rgba(45, 211, 200, 0.3);
}

[data-theme="jamkham-dark"] .quick-mode-option--selected {
    background: rgba(45, 211, 200, 0.15);
    border-color: var(--jk-primary);
}

/* Mode Option Icon */
.quick-mode-option-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
}

.quick-mode-option-icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

/* Icon color variants */
.quick-mode-option-icon--primary {
    background: var(--jk-primary-100);
    color: var(--jk-primary);
}

.quick-mode-option-icon--warning {
    background: var(--jk-warning-bg);
    color: var(--jk-warning-dark);
}

.quick-mode-option-icon--info {
    background: var(--jk-info-bg);
    color: var(--jk-info);
}

.quick-mode-option-icon--success {
    background: var(--jk-success-bg);
    color: var(--jk-success);
}

.quick-mode-option-icon--secondary {
    background: var(--jk-secondary-100);
    color: var(--jk-secondary-dark);
}

[data-theme="jamkham-dark"] .quick-mode-option-icon--primary {
    background: rgba(45, 211, 200, 0.15);
    color: var(--jk-primary);
}

[data-theme="jamkham-dark"] .quick-mode-option-icon--warning {
    background: rgba(240, 192, 94, 0.15);
    color: var(--jk-warning);
}

[data-theme="jamkham-dark"] .quick-mode-option-icon--info {
    background: rgba(45, 211, 200, 0.15);
    color: var(--jk-info);
}

[data-theme="jamkham-dark"] .quick-mode-option-icon--success {
    background: rgba(54, 179, 126, 0.15);
    color: var(--jk-success);
}

[data-theme="jamkham-dark"] .quick-mode-option-icon--secondary {
    background: rgba(240, 192, 94, 0.15);
    color: var(--jk-secondary);
}

/* Mode Option Content */
.quick-mode-option-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.quick-mode-option-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--jk-text);
}

.quick-mode-option-desc {
    font-size: 0.8125rem;
    color: var(--jk-text-muted);
}

/* Mode Option Badge/Check */
.quick-mode-option-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
}

.quick-mode-check {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--jk-primary);
}

/* Footer */
.quick-mode-footer {
    padding: 1rem 1.25rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.quick-mode-remember {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--jk-text-secondary);
    cursor: pointer;
}

.quick-mode-footer-hint {
    font-size: 0.75rem;
    color: var(--jk-text-muted);
    margin: 0;
}

/* ============================================
   MODE BADGE - Status Bar Indicator
   Compact badge showing current quick mode
   ============================================ */

.mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem 0.125rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 500;
    text-decoration: none;
    background: var(--jk-surface-sunken);
    border: 1px solid var(--jk-border-light);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--jk-text-secondary);
}

.mode-badge:hover {
    background: var(--jk-primary-50);
    border-color: var(--jk-primary-200);
    color: var(--jk-primary);
}

.mode-badge:focus-visible {
    outline: 2px solid var(--jk-primary);
    outline-offset: 1px;
}

[data-theme="jamkham-dark"] .mode-badge {
    background: var(--jk-surface-sunken);
    border-color: var(--jk-border);
    color: var(--jk-text-secondary);
}

[data-theme="jamkham-dark"] .mode-badge:hover {
    background: rgba(45, 211, 200, 0.1);
    border-color: rgba(45, 211, 200, 0.3);
    color: var(--jk-primary);
}

.mode-badge-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.mode-badge-label {
    white-space: nowrap;
}

/* Mode-specific badge colors */
.mode-badge--one_hand {
    background: var(--jk-warning-bg);
    border-color: rgba(233, 168, 59, 0.3);
    color: var(--jk-warning-dark);
}

.mode-badge--one_hand:hover {
    background: var(--jk-warning-bg);
    border-color: var(--jk-warning);
}

.mode-badge--silent {
    background: var(--jk-info-bg);
    border-color: rgba(13, 115, 119, 0.3);
    color: var(--jk-info);
}

.mode-badge--silent:hover {
    background: var(--jk-info-bg);
    border-color: var(--jk-info);
}

.mode-badge--quick {
    background: var(--jk-success-bg);
    border-color: rgba(34, 160, 107, 0.3);
    color: var(--jk-success);
}

.mode-badge--quick:hover {
    background: var(--jk-success-bg);
    border-color: var(--jk-success);
}

.mode-badge--full {
    background: var(--jk-secondary-100);
    border-color: rgba(218, 171, 47, 0.3);
    color: var(--jk-secondary-dark);
}

.mode-badge--full:hover {
    background: var(--jk-secondary-100);
    border-color: var(--jk-secondary);
}

[data-theme="jamkham-dark"] .mode-badge--one_hand {
    background: rgba(240, 192, 94, 0.12);
    border-color: rgba(240, 192, 94, 0.25);
    color: var(--jk-warning);
}

[data-theme="jamkham-dark"] .mode-badge--silent {
    background: rgba(45, 211, 200, 0.12);
    border-color: rgba(45, 211, 200, 0.25);
    color: var(--jk-info);
}

[data-theme="jamkham-dark"] .mode-badge--quick {
    background: rgba(54, 179, 126, 0.12);
    border-color: rgba(54, 179, 126, 0.25);
    color: var(--jk-success);
}

[data-theme="jamkham-dark"] .mode-badge--full {
    background: rgba(240, 192, 94, 0.12);
    border-color: rgba(240, 192, 94, 0.25);
    color: var(--jk-secondary);
}

/* Hide mode badge label on very small screens */
@media (max-width: 359px) {
    .mode-badge-label {
        display: none;
    }

    .mode-badge {
        padding: 0.25rem;
    }

    .mode-badge-icon {
        width: 1rem;
        height: 1rem;
    }
}