/**
 * ScriptureNotes Premium Design System
 * Cinematic animations, glassmorphism, and premium micro-interactions
 */

/* ============================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================ */
:root {
    /* ===== PRIMARY COLORS ===== */
    /* ===== PRIMARY COLORS ===== */
    --primary: #D4A373;
    --primary-light: #E8C8A5;
    --primary-dark: #A87F55;
    --primary-glow: rgba(212, 163, 115, 0.3);

    /* ===== SECONDARY / ACCENT ===== */
    --premium-gold: var(--color-primary);
    --premium-gold-light: var(--color-primary-light);
    --premium-gold-dark: var(--color-primary-dark);
    --premium-cream: var(--color-background);
    --premium-cream-light: var(--color-surface);
    --premium-cream-dark: var(--color-background);
    --premium-text: var(--color-text-primary);
    --premium-text-light: var(--color-text-body);
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* ===== TEXT COLORS ===== */
    --text-main: #2C2418;
    --text-body: #5C5040;
    --text-muted: #6B7280;  /* gray-500 for better contrast on cream */

    /* ===== SEMANTIC COLORS ===== */
    --success: #10B981;
    --success-light: #D1FAE5;
    --warning: #F59E0B;
    --warning-light: #FEF3C7;
    --error: #EF4444;
    --error-light: #FEE2E2;
    --info: #3B82F6;
    --info-light: #DBEAFE;

    /* Gradients */
    --gradient-gold: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%);
    --gradient-gold-hover: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-card: linear-gradient(180deg, var(--color-surface) 0%, var(--color-background) 100%);

    /* Shadows */
    --shadow-premium: 0 10px 30px -10px rgba(168, 127, 85, 0.2);
    --shadow-glow: 0 0 20px rgba(212, 163, 115, 0.3);

    /* ===== ANIMATION TIMING ===== */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ===== ANIMATION DURATIONS ===== */
    --duration-instant: 0.1s;
    --duration-fast: 0.15s;
    --duration-normal: 0.3s;
    --duration-slow: 0.5s;
    --duration-cinematic: 0.8s;
    --duration-loading: 1.5s;

    /* ===== SPACING (for consistency) ===== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* ===== BORDER RADIUS ===== */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
}

/* ============================================
   GLOBAL MOBILE OVERFLOW FIX
   ============================================ */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ============================================
   LIGHT MODE BASE STYLES (Default)
   Phase 3 — Bible-inspired warm parchment
   ============================================ */
body {
    background-color: var(--bg-primary, #FDF8EF);
    background-image:
        linear-gradient(rgba(253, 248, 239, 0.35), rgba(245, 230, 200, 0.25)),
        var(--texture-paper);
    background-size: cover, cover;
    background-attachment: fixed, fixed;
    background-position: center, center;
    color: var(--text-primary, #3B2314);
    font-family: var(--font-body);
    line-height: var(--line-height);
    min-height: 100vh;
}

.bg-cream,
.bg-background-light,
.premium-bg {
    background-color: var(--bg-primary, #FDF8EF) !important;
    background-image:
        linear-gradient(rgba(253, 248, 239, 0.35), rgba(245, 230, 200, 0.25)),
        var(--texture-paper) !important;
    background-size: cover, cover !important;
    background-attachment: fixed, fixed !important;
    background-position: center, center !important;
}

.bg-white {
    background-color: var(--bg-secondary, #F5E6C8) !important;
}

/* ============================================
   PHASE 3 — HEADER / NAV WITH LEATHER TEXTURE
   ============================================ */
header,
.site-header {
    background-color: #6B4A32;
    background-image: url('/assets/phase2/textures/leather-header.png');
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Light mode: header text must be legible on leather texture */
:not(.dark-mode) header .text-text-body,
:not(.dark-mode) .site-header .text-text-body {
    color: #F5E6D3 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

:not(.dark-mode) header .text-text-body:hover,
:not(.dark-mode) .site-header .text-text-body:hover {
    color: #FFF8F0 !important;
}

:not(.dark-mode) header .text-text-main,
:not(.dark-mode) .site-header .text-text-main {
    color: #FFF8F0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

:not(.dark-mode) header .text-primary,
:not(.dark-mode) .site-header .text-primary {
    color: #F0D8A0 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

:not(.dark-mode) header .nav-link {
    color: #F5E6D3 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

:not(.dark-mode) header .nav-link:hover,
:not(.dark-mode) header .nav-link.active {
    color: #FFF8F0 !important;
}

:not(.dark-mode) header .border-text-body\/20 {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Dark mode toggle button — visible on leather texture */
:not(.dark-mode) header #dark-mode-toggle {
    background: rgba(255, 255, 255, 0.2) !important;
}

:not(.dark-mode) header #dark-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

:not(.dark-mode) header #dark-mode-toggle .material-symbols-outlined {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Header action buttons — warm theme (replaces purple) */
header .btn-insights,
header [data-btn="insights"] {
    background: linear-gradient(135deg, #C5A55A 0%, #A87F55 100%) !important;
    box-shadow: 0 4px 12px rgba(197, 165, 90, 0.3) !important;
}

header .btn-insights:hover,
header [data-btn="insights"]:hover {
    box-shadow: 0 6px 16px rgba(197, 165, 90, 0.4) !important;
}

header .btn-end-analyze,
header [data-btn="end-analyze"] {
    background: linear-gradient(to right, #7B3F2E, #5C2D1E) !important;
    box-shadow: 0 4px 12px rgba(123, 63, 46, 0.3) !important;
}

header .btn-end-analyze:hover,
header [data-btn="end-analyze"]:hover {
    box-shadow: 0 6px 16px rgba(123, 63, 46, 0.4) !important;
}

/* Gold-leaf edge strip — load-bearing brand element */
header::after,
.site-header::after {
    content: '';
    display: block;
    height: 12px;
    background-color: var(--accent-gold, #C5A55A);
    background-image:
        linear-gradient(to bottom, rgba(255,248,240,0.25) 0%, transparent 40%, rgba(92,74,53,0.15) 100%),
        var(--texture-gold-edge);
    background-size: cover, auto 100%;
    background-repeat: no-repeat, repeat-x;
    background-position: center, center;
    box-shadow: 0 2px 6px rgba(59, 35, 20, 0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}

/* ============================================
   PHASE 3 — TEXT ON TEXTURED BACKGROUNDS
   mix-blend-mode for organic ink-on-paper look
   ============================================ */
:not(.dark-mode) .blend-text,
:not(.dark-mode) h1,
:not(.dark-mode) h2,
:not(.dark-mode) h3 {
    mix-blend-mode: multiply;
}

.dark-mode .blend-text,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3 {
    mix-blend-mode: screen;
}

/* Phase 3 — Header logo wordmark */
.header-logo-wordmark {
    mix-blend-mode: multiply;
    height: 36px;
    width: auto;
}

.dark-mode .header-logo-wordmark {
    mix-blend-mode: screen;
}

/* Phase 3 — Typography application */
.font-display,
h1, h2, h3 {
    font-family: var(--font-heading);
}

.font-accent {
    font-family: var(--font-accent);
}

/* ============================================
   LIGHT MODE PREMIUM ACCENTS
   Burgundy (Communion Wine) for scripture/links
   Sage Green for growth/completion elements
   ============================================ */

/* Burgundy accents for Bible references and scripture links */
:not(.dark-mode) a[href*="bible.html"]:not(.mobile-nav-link):not(.premium-btn),
:not(.dark-mode) .scripture-ref-link,
:not(.dark-mode) .bible-link {
    color: var(--color-burgundy);
    transition: color 0.2s ease;
}

:not(.dark-mode) a[href*="bible.html"]:not(.mobile-nav-link):not(.premium-btn):hover,
:not(.dark-mode) .scripture-ref-link:hover {
    color: var(--color-burgundy-dark);
}

/* Scripture references in note cards - burgundy accent */
:not(.dark-mode) .note-card-item p.text-primary {
    color: var(--color-burgundy) !important;
}

:not(.dark-mode) .note-card-item p.text-primary .material-symbols-outlined {
    color: var(--color-burgundy) !important;
}

/* Burgundy accent for AI insights and deep dive sections */
:not(.dark-mode) .ai-insight-card,
:not(.dark-mode) .deep-dive-section {
    border-left: 3px solid var(--color-burgundy);
}

/* Burgundy subtle backgrounds for scripture callouts */
:not(.dark-mode) .scripture-callout,
:not(.dark-mode) .verse-highlight {
    background: var(--color-burgundy-subtle);
    border-left: 3px solid var(--color-burgundy);
}

/* Sage Green accents for streaks, completion, success */
:not(.dark-mode) .streak-card,
:not(.dark-mode) .journey-complete,
:not(.dark-mode) [class*="devotional-complete"] {
    border-color: var(--color-sage-light);
    box-shadow: 0 4px 12px rgba(125, 139, 94, 0.1);
}

:not(.dark-mode) .progress-complete,
:not(.dark-mode) .streak-active {
    background: linear-gradient(135deg, var(--color-sage-light), var(--color-sage));
}

/* Active navigation with burgundy accent */
:not(.dark-mode) .nav-link.active::after {
    background: var(--color-burgundy);
}

/* Section dividers with burgundy hint */
:not(.dark-mode) .section-divider::after {
    background: linear-gradient(90deg, transparent, rgba(114, 47, 55, 0.3), transparent);
}

/* Premium card hover with burgundy tint */
:not(.dark-mode) .note-card-item:hover,
:not(.dark-mode) .journey-card:hover {
    border-color: rgba(114, 47, 55, 0.2);
    box-shadow: 0 4px 16px rgba(114, 47, 55, 0.08);
}

:not(.dark-mode) .insight-card:hover {
    border-color: var(--color-burgundy-light);
}

/* Decorative page accents */
:not(.dark-mode) .page-header-decorator {
    background: linear-gradient(135deg,
            rgba(114, 47, 55, 0.05) 0%,
            rgba(212, 163, 115, 0.1) 100%);
}

/* Toast and notifications */
:not(.dark-mode) .toast-success {
    background: var(--color-sage);
}

:not(.dark-mode) .toast-info {
    background: var(--color-burgundy);
}

/* Mobile nav active indicator - top bar (replaces clipped dot) */
:not(.dark-mode) .mobile-nav-link.active {
    position: relative;
}

/* Desktop nav active indicator */
:not(.dark-mode) .nav-link.active {
    position: relative;
}

:not(.dark-mode) .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-burgundy);
    border-radius: 1px;
}

/* ============================================
   ENHANCED BURGUNDY ACCENTS FOR MORE POP
   ============================================ */

/* Page title decorative underline */
:not(.dark-mode) h1.font-display::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-burgundy), var(--color-burgundy-light));
    margin: 8px auto 0;
    border-radius: 2px;
}

/* Note type badges with burgundy accent */
:not(.dark-mode) .note-card-item .uppercase.tracking-wide {
    color: var(--color-burgundy) !important;
}

/* Burgundy accent on secondary buttons hover */
:not(.dark-mode) .premium-btn-secondary:hover,
:not(.dark-mode) button.bg-white:hover {
    border-color: var(--color-burgundy) !important;
    color: var(--color-burgundy) !important;
}

/* Section labels with burgundy */
:not(.dark-mode) .text-xs.uppercase.tracking-wider,
:not(.dark-mode) .text-xs.font-semibold.uppercase {
    color: var(--color-burgundy) !important;
}

/* Burgundy focus ring for accessibility */
:not(.dark-mode) .premium-input:focus,
:not(.dark-mode) input:focus,
:not(.dark-mode) select:focus,
:not(.dark-mode) textarea:focus {
    outline: none;
    border-color: var(--color-burgundy) !important;
    box-shadow: 0 0 0 3px rgba(114, 47, 55, 0.15) !important;
}

/* Card icons with burgundy tint on hover */
:not(.dark-mode) .note-card-item:hover .material-symbols-outlined {
    color: var(--color-burgundy) !important;
}

/* Decorative top border on main content area */
:not(.dark-mode) main {
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, transparent 0%, var(--color-burgundy) 20%, var(--color-burgundy) 80%, transparent 100%) 1;
}

/* Quote/verse blocks with burgundy styling */
:not(.dark-mode) blockquote,
:not(.dark-mode) .verse-block {
    border-left: 4px solid var(--color-burgundy);
    background: var(--color-burgundy-subtle);
    padding: 1rem 1.5rem;
    border-radius: 0 8px 8px 0;
}

/* Progress bars with burgundy */
:not(.dark-mode) .progress-bar,
:not(.dark-mode) [role="progressbar"] {
    background: linear-gradient(90deg, var(--color-burgundy), var(--color-burgundy-light)) !important;
}

/* ============================================
   LIGHT MODE CONTRAST FIXES
   Fix opacity classes for WCAG AA compliance
   ============================================ */

/* Fix critical low-contrast opacity classes */
:not(.dark-mode) .text-text-body\/30 {
    color: #6B7280 !important;  /* Override 30% opacity - was nearly invisible */
}

:not(.dark-mode) .text-text-body\/40 {
    color: #6B7280 !important;  /* Override 40% opacity - was very faint */
}

:not(.dark-mode) .text-text-body\/50 {
    color: #5C5040 !important;  /* Override 50% opacity - use solid text-body */
}

:not(.dark-mode) .text-text-body\/60 {
    color: #5C5040 !important;  /* Override 60% opacity - use solid text-body */
}

:not(.dark-mode) .text-text-body\/70 {
    color: #4B5563 !important;  /* Override 70% opacity - slightly muted but readable */
}

:not(.dark-mode) .text-text-body\/80 {
    color: #374151 !important;  /* Override 80% opacity - near full contrast */
}

/* Fix gray-400 contrast issues */
:not(.dark-mode) .text-gray-400 {
    color: #6B7280 !important;  /* Upgrade to gray-500 for contrast */
}

:not(.dark-mode) .text-gray-500 {
    color: #4B5563 !important;  /* Upgrade to gray-600 for contrast */
}

/* Fix placeholder contrast in light mode */
:not(.dark-mode) input::placeholder,
:not(.dark-mode) textarea::placeholder,
:not(.dark-mode) [contenteditable]:empty::before {
    color: #6B7280 !important;  /* gray-500 for readable placeholders */
    opacity: 1 !important;
}

/* Fix nav inactive link contrast — cream on leather with shadow for legibility */
:not(.dark-mode) .mobile-nav-link:not(.active) {
    color: #F5E6D3 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

:not(.dark-mode) .mobile-nav-link:not(.active) .material-symbols-outlined {
    color: #F5E6D3 !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
}

:not(.dark-mode) .mobile-nav-link.active {
    color: #FFF8F0 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

/* Dark Mode Header Overrides */
.dark-mode header,
.dark-mode nav.sticky {
    background-color: var(--bg-secondary);
    background-image: linear-gradient(rgba(30, 22, 16, 0.45), rgba(30, 22, 16, 0.45)), var(--texture-leather);
    background-size: cover;
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode header,
.dark-mode .site-header {
    background-color: var(--bg-nav, #1E1610);
    background-image: var(--texture-leather);
    background-size: cover;
}

.dark-mode header>div {
    background: transparent !important;
}

/* ============================================
   DARK MODE CSS VARIABLES (CONSOLIDATED)
   Phase 3 — Warm dark leather tones
   ============================================ */
.dark-mode {
    /* Backgrounds — warm dark (from variables.css Phase 3 palette) */
    --bg-primary: #2C2118;
    --bg-secondary: #1E1610;
    --bg-tertiary: #3B2F22;
    --surface: #2C2118;

    /* Text — warm light */
    --text-primary: #E8D5B0;
    --text-secondary: #C5A55A;
    --text-muted: #9A8B6F;

    /* Borders — warm */
    --border: #3B2F22;
    --border-light: #4A3D2F;

    /* Primary colors (tan accent) — lightened for contrast */
    --primary-dm: #F0D8B8;
    --primary-light-dm: #F5E6D0;
    --primary-glow-dm: rgba(240, 216, 184, 0.3);

    /* Override root primary variables so ALL var(--color-primary) refs lighten */
    --color-primary: #F0D8B8;
    --color-primary-dark: #E8C8A5;
    --color-primary-light: #F5E6D0;
    --color-action: #F0D8B8;
    --color-action-hover: #E8C8A5;
    --primary: #F0D8B8;
    --primary-light: #F5E6D0;
    --primary-dark: #E8C8A5;
    --primary-glow: rgba(240, 216, 184, 0.3);

    /* Semantic colors */
    --success-dm: #86efac;
    --warning-dm: #fcd34d;
    --error-dm: #fca5a5;
    --info-dm: #93c5fd;
}

/* Dark mode base styles */
.dark-mode body {
    background-color: var(--bg-primary);
    background-image:
        linear-gradient(rgba(44, 33, 24, 0.6), rgba(30, 22, 16, 0.5)),
        var(--texture-paper);
    background-size: cover, cover;
    background-attachment: fixed, fixed;
    background-position: center, center;
    color: var(--text-primary);
}

.dark-mode .bg-cream,
.dark-mode .bg-background-light,
.dark-mode .premium-bg {
    background-color: var(--bg-primary) !important;
    background-image:
        linear-gradient(rgba(44, 33, 24, 0.6), rgba(30, 22, 16, 0.5)),
        var(--texture-paper) !important;
    background-size: cover, cover !important;
    background-attachment: fixed, fixed !important;
    background-position: center, center !important;
}

.dark-mode .bg-cream-dark,
.dark-mode .bg-cream-dark\/50 {
    background: var(--bg-tertiary) !important;
}

.dark-mode .bg-white { background: rgba(44, 33, 24, 0.92) !important; border-color: var(--border) !important; }
.dark-mode .bg-white\/80 { background: rgba(44, 33, 24, 0.82) !important; border-color: var(--border) !important; }
.dark-mode .bg-white\/90 { background: rgba(44, 33, 24, 0.88) !important; border-color: var(--border) !important; }
.dark-mode .bg-white\/95 { background: rgba(44, 33, 24, 0.92) !important; border-color: var(--border) !important; }

/* Dark mode text colors */
.dark-mode .text-text-main {
    color: var(--text-primary) !important;
}

.dark-mode .text-text-body {
    color: var(--text-secondary) !important;
}

.dark-mode .text-text-body\/50,
.dark-mode .text-text-body\/40,
.dark-mode .text-text-body\/60,
.dark-mode .text-text-body\/70 {
    color: var(--text-muted) !important;
}

.dark-mode .uppercase,
.dark-mode .text-xs.uppercase {
    color: var(--text-secondary) !important;
}

/* ============================================
   DARK MODE: Tailwind color contrast fixes
   Lighten all *-600/700/800 text colors so
   they're legible on dark backgrounds (#0d0d0d)
   ============================================ */

/* Gray text — map dark shades to light equivalents */
.dark-mode .text-gray-900 { color: #f3f4f6 !important; }
.dark-mode .text-gray-800 { color: #e5e7eb !important; }
.dark-mode .text-gray-700 { color: #d1d5db !important; }
.dark-mode .text-gray-600 { color: #9ca3af !important; }
.dark-mode .text-gray-500 { color: #9ca3af !important; }

/* Amber / Gold text */
.dark-mode .text-amber-800 { color: #fcd34d !important; }
.dark-mode .text-amber-700 { color: #fcd34d !important; }
.dark-mode .text-amber-600 { color: #fbbf24 !important; }
.dark-mode .text-amber-500 { color: #fcd34d !important; }

/* Orange text */
.dark-mode .text-orange-800 { color: #fdba74 !important; }
.dark-mode .text-orange-700 { color: #fdba74 !important; }
.dark-mode .text-orange-600 { color: #fb923c !important; }
.dark-mode .text-orange-500 { color: #fdba74 !important; }

/* Indigo text */
.dark-mode .text-indigo-600,
.dark-mode .text-indigo-600\/70 { color: #a5b4fc !important; }
.dark-mode .text-indigo-500 { color: #a5b4fc !important; }
.dark-mode .text-indigo-400 { color: #c7d2fe !important; }

/* Green text */
.dark-mode .text-green-800 { color: #86efac !important; }
.dark-mode .text-green-700 { color: #4ade80 !important; }
.dark-mode .text-green-600 { color: #4ade80 !important; }
.dark-mode .text-green-500 { color: #4ade80 !important; }

/* Blue text */
.dark-mode .text-blue-800 { color: #93c5fd !important; }
.dark-mode .text-blue-700 { color: #60a5fa !important; }
.dark-mode .text-blue-600 { color: #60a5fa !important; }
.dark-mode .text-blue-500 { color: #60a5fa !important; }

/* Violet text */
.dark-mode .text-violet-700 { color: #a78bfa !important; }
.dark-mode .text-violet-600 { color: #a78bfa !important; }
.dark-mode .text-violet-500 { color: #a78bfa !important; }

/* Purple text */
.dark-mode .text-purple-800 { color: #d8b4fe !important; }
.dark-mode .text-purple-700 { color: #c084fc !important; }
.dark-mode .text-purple-600 { color: #c084fc !important; }
.dark-mode .text-purple-600\/80,
.dark-mode .text-purple-600\/50,
.dark-mode .text-purple-700\/60 { color: #c084fc !important; }
.dark-mode .text-purple-500 { color: #c084fc !important; }

/* Red text */
.dark-mode .text-red-800 { color: #fca5a5 !important; }
.dark-mode .text-red-700 { color: #f87171 !important; }
.dark-mode .text-red-600 { color: #f87171 !important; }
.dark-mode .text-red-500 { color: #f87171 !important; }

/* Teal text */
.dark-mode .text-teal-700 { color: #2dd4bf !important; }
.dark-mode .text-teal-600 { color: #2dd4bf !important; }
.dark-mode .text-teal-500 { color: #2dd4bf !important; }

/* Emerald text */
.dark-mode .text-emerald-700 { color: #34d399 !important; }
.dark-mode .text-emerald-500 { color: #34d399 !important; }

/* Rose text */
.dark-mode .text-rose-700 { color: #fb7185 !important; }
.dark-mode .text-rose-500 { color: #fb7185 !important; }

/* Slate text */
.dark-mode .text-slate-500 { color: #94a3b8 !important; }
.dark-mode .text-slate-600 { color: #94a3b8 !important; }

/* Dark mode backgrounds that pair with colored text */
.dark-mode .bg-amber-50,
.dark-mode .bg-amber-100 { background: rgba(251, 191, 36, 0.1) !important; }
.dark-mode .bg-green-50,
.dark-mode .bg-green-100 { background: rgba(74, 222, 128, 0.1) !important; }
.dark-mode .bg-blue-50,
.dark-mode .bg-blue-100 { background: rgba(96, 165, 250, 0.1) !important; }
.dark-mode .bg-red-50,
.dark-mode .bg-red-100 { background: rgba(248, 113, 113, 0.1) !important; }
.dark-mode .bg-violet-50,
.dark-mode .bg-violet-100 { background: rgba(167, 139, 250, 0.1) !important; }
.dark-mode .bg-purple-50,
.dark-mode .bg-purple-100 { background: rgba(192, 132, 252, 0.1) !important; }
.dark-mode .bg-orange-50 { background: rgba(251, 146, 60, 0.1) !important; }
.dark-mode .bg-teal-50 { background: rgba(45, 212, 191, 0.1) !important; }
.dark-mode .bg-emerald-50 { background: rgba(52, 211, 153, 0.1) !important; }
.dark-mode .bg-rose-50 { background: rgba(251, 113, 133, 0.1) !important; }
.dark-mode .bg-indigo-50 { background: rgba(165, 180, 252, 0.1) !important; }
.dark-mode .bg-gray-50,
.dark-mode .bg-gray-100 { background: rgba(255, 255, 255, 0.05) !important; }

/* Dark mode colored borders */
.dark-mode .border-amber-200,
.dark-mode .border-amber-100 { border-color: rgba(251, 191, 36, 0.2) !important; }
.dark-mode .border-green-200,
.dark-mode .border-green-100 { border-color: rgba(74, 222, 128, 0.2) !important; }
.dark-mode .border-blue-200,
.dark-mode .border-blue-100 { border-color: rgba(96, 165, 250, 0.2) !important; }
.dark-mode .border-red-200,
.dark-mode .border-red-100 { border-color: rgba(248, 113, 113, 0.2) !important; }
.dark-mode .border-violet-200,
.dark-mode .border-violet-100 { border-color: rgba(167, 139, 250, 0.2) !important; }
.dark-mode .border-teal-200,
.dark-mode .border-teal-100 { border-color: rgba(45, 212, 191, 0.2) !important; }

/* Dark mode borders */
.dark-mode .border-cream-dark,
.dark-mode .border-cream-dark\/50,
.dark-mode .border-cream-dark\/30 {
    border-color: var(--border) !important;
}

.dark-mode .border-gray-100,
.dark-mode .border-gray-200 {
    border-color: var(--border) !important;
}

/* Dark mode inputs */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Dark mode primary color */
.dark-mode .text-primary {
    color: var(--primary-dm) !important;
}

/* Primary with opacity — make fully opaque and light in dark mode */
.dark-mode .text-primary\/70,
.dark-mode .text-primary\/60,
.dark-mode .text-primary\/50,
.dark-mode .text-primary\/40 {
    color: #f5e6d0 !important;
}

.dark-mode .bg-primary\/10,
.dark-mode .bg-primary\/5 {
    background: rgba(218, 165, 32, 0.15) !important;
}

/* Dark mode cards and modals */
.dark-mode .bg-white.rounded-2xl,
.dark-mode .bg-white.rounded-xl {
    background: var(--bg-secondary) !important;
}

/* Dark mode Mobile Nav */
.dark-mode .mobile-nav {
    background: rgba(30, 22, 16, 0.97) !important;
    border-top-color: rgba(197, 165, 90, 0.2) !important;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .mobile-nav-link {
    color: var(--text-secondary);
}

.dark-mode .mobile-nav-link:hover {
    color: var(--primary-dm);
    opacity: 0.85;
}

.dark-mode .mobile-nav-link.active {
    color: var(--primary-dm) !important;
}

.dark-mode .mobile-nav-link.active .material-symbols-outlined {
    background: linear-gradient(135deg, var(--primary-dm) 0%, #fab387 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dark-mode .mobile-nav-link.active::before {
    background: var(--primary-dm);
}

.dark-mode .mobile-nav-scribe span:last-child {
    color: var(--primary-dm);
}

/* ============================================
   EMBERS MODE - Ambient Fire Theme
   A subtle dark background with floating embers
   ============================================ */
.embers-mode {
    /* Inherit dark mode colors */
    --bg-primary: #0a0806;
    --bg-secondary: #141210;
    --bg-tertiary: #1e1a16;
    --surface: #0a0806;

    /* Warmer text colors */
    --text-primary: #f5ebe0;
    --text-secondary: #c4a77d;
    --text-muted: #8b7355;

    /* Borders with warm tint */
    --border: #2a2218;
    --border-light: #3d3228;

    /* Ember accent colors */
    --ember-orange: #ff6b35;
    --ember-red: #ff4444;
    --ember-gold: #ffaa00;
    --ember-glow: rgba(255, 107, 53, 0.3);

    /* Override root primary variables for embers dark theme */
    --color-primary: #ffcc66;
    --color-primary-dark: #ffaa00;
    --color-primary-light: #ffe0a0;
    --color-action: #ffcc66;
    --color-action-hover: #ffaa00;
}

/* Embers mode base styles - apply to body directly */
body.embers-mode,
.embers-mode body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Override Tailwind bg-cream with explicit class */
.embers-mode.bg-cream,
.embers-mode .bg-cream,
.embers-mode .bg-cream-dark {
    background: var(--bg-primary) !important;
}

.embers-mode .bg-white,
.embers-mode .bg-white\/80,
.embers-mode .bg-white\/90,
.embers-mode .bg-white\/95 {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
}

.embers-mode .text-text-main {
    color: var(--text-primary) !important;
}

.embers-mode .text-text-body {
    color: var(--text-secondary) !important;
}

.embers-mode .text-primary {
    color: var(--ember-gold) !important;
}

.embers-mode .text-primary\/70,
.embers-mode .text-primary\/60,
.embers-mode .text-primary\/50,
.embers-mode .text-primary\/40 {
    color: #ffe0a0 !important;
}

.embers-mode input,
.embers-mode textarea,
.embers-mode select {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

.embers-mode header {
    background: rgba(10, 8, 6, 0.95) !important;
    border-bottom-color: var(--border) !important;
}

.embers-mode .mobile-nav {
    background: rgba(10, 8, 6, 0.95) !important;
    border-top-color: var(--border) !important;
}

.embers-mode .mobile-nav-link {
    color: var(--text-secondary);
}

.embers-mode .mobile-nav-link:hover {
    color: var(--ember-gold);
    opacity: 0.85;
}

.embers-mode .mobile-nav-link.active {
    color: var(--ember-gold) !important;
}

.embers-mode .mobile-nav-link.active .material-symbols-outlined {
    background: linear-gradient(135deg, var(--ember-gold) 0%, #fab387 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.embers-mode .mobile-nav-link.active::before {
    background: var(--ember-gold);
}

.embers-mode .mobile-nav-scribe span:last-child {
    color: var(--ember-gold);
}

/* Embers mode: same Tailwind color contrast fixes as dark mode */
.embers-mode .text-gray-900 { color: #f3f4f6 !important; }
.embers-mode .text-gray-800 { color: #e5e7eb !important; }
.embers-mode .text-gray-700 { color: #d1d5db !important; }
.embers-mode .text-gray-600 { color: #9ca3af !important; }
.embers-mode .text-gray-500 { color: #9ca3af !important; }
.embers-mode .text-amber-800,
.embers-mode .text-amber-700 { color: #fcd34d !important; }
.embers-mode .text-amber-600 { color: #fbbf24 !important; }
.embers-mode .text-amber-500 { color: #fcd34d !important; }
.embers-mode .text-orange-800,
.embers-mode .text-orange-700 { color: #fdba74 !important; }
.embers-mode .text-orange-600 { color: #fb923c !important; }
.embers-mode .text-orange-500 { color: #fdba74 !important; }
.embers-mode .text-indigo-600,
.embers-mode .text-indigo-600\/70,
.embers-mode .text-indigo-500 { color: #a5b4fc !important; }
.embers-mode .text-indigo-400 { color: #c7d2fe !important; }
.embers-mode .text-green-800 { color: #86efac !important; }
.embers-mode .text-green-700,
.embers-mode .text-green-600,
.embers-mode .text-green-500 { color: #4ade80 !important; }
.embers-mode .text-blue-800 { color: #93c5fd !important; }
.embers-mode .text-blue-700,
.embers-mode .text-blue-600,
.embers-mode .text-blue-500 { color: #60a5fa !important; }
.embers-mode .text-violet-700,
.embers-mode .text-violet-600,
.embers-mode .text-violet-500 { color: #a78bfa !important; }
.embers-mode .text-purple-800 { color: #d8b4fe !important; }
.embers-mode .text-purple-700,
.embers-mode .text-purple-600,
.embers-mode .text-purple-500 { color: #c084fc !important; }
.embers-mode .text-red-800 { color: #fca5a5 !important; }
.embers-mode .text-red-700,
.embers-mode .text-red-600,
.embers-mode .text-red-500 { color: #f87171 !important; }
.embers-mode .text-teal-700,
.embers-mode .text-teal-600,
.embers-mode .text-teal-500 { color: #2dd4bf !important; }
.embers-mode .text-emerald-700,
.embers-mode .text-emerald-500 { color: #34d399 !important; }
.embers-mode .text-rose-700,
.embers-mode .text-rose-500 { color: #fb7185 !important; }
.embers-mode .text-slate-500,
.embers-mode .text-slate-600 { color: #94a3b8 !important; }
.embers-mode .bg-gray-50,
.embers-mode .bg-gray-100 { background: rgba(255, 255, 255, 0.05) !important; }
.embers-mode .bg-amber-50 { background: rgba(251, 191, 36, 0.1) !important; }
.embers-mode .bg-green-50,
.embers-mode .bg-green-100 { background: rgba(74, 222, 128, 0.1) !important; }
.embers-mode .bg-blue-50 { background: rgba(96, 165, 250, 0.1) !important; }
.embers-mode .bg-red-50 { background: rgba(248, 113, 113, 0.1) !important; }
.embers-mode .bg-violet-50,
.embers-mode .bg-violet-100 { background: rgba(167, 139, 250, 0.1) !important; }
.embers-mode .bg-orange-50 { background: rgba(251, 146, 60, 0.1) !important; }

/* Embers container - holds the floating particles */
.embers-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.embers-mode .embers-container {
    opacity: 1;
}

/* Individual ember particle */
.ember {
    position: absolute;
    bottom: -20px;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #ff6b35 0%, #ff4444 50%, transparent 70%);
    border-radius: 50%;
    box-shadow:
        0 0 6px 2px rgba(255, 107, 53, 0.6),
        0 0 12px 4px rgba(255, 68, 68, 0.3);
    animation: ember-float linear infinite;
    opacity: 0;
}

/* Ember sizes */
.ember.ember-sm {
    width: 2px;
    height: 2px;
    box-shadow:
        0 0 4px 1px rgba(255, 107, 53, 0.5),
        0 0 8px 2px rgba(255, 68, 68, 0.2);
}

.ember.ember-lg {
    width: 6px;
    height: 6px;
    box-shadow:
        0 0 8px 3px rgba(255, 107, 53, 0.7),
        0 0 16px 6px rgba(255, 68, 68, 0.4);
}

/* Ember float animation - rises and drifts */
@keyframes ember-float {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(1);
    }

    10% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.6;
    }

    90% {
        opacity: 0.2;
    }

    100% {
        opacity: 0;
        transform: translateY(-100vh) translateX(var(--drift, 30px)) scale(0.5);
    }
}

/* Ember flicker animation */
@keyframes ember-flicker {

    0%,
    100% {
        opacity: 0.8;
    }

    25% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.9;
    }

    75% {
        opacity: 0.4;
    }
}

/* Individual ember positioning and timing */
.ember:nth-child(1) {
    left: 10%;
    animation-duration: 8s;
    animation-delay: 0s;
    --drift: 40px;
}

.ember:nth-child(2) {
    left: 20%;
    animation-duration: 10s;
    animation-delay: 1s;
    --drift: -30px;
}

.ember:nth-child(3) {
    left: 30%;
    animation-duration: 7s;
    animation-delay: 2s;
    --drift: 50px;
}

.ember:nth-child(4) {
    left: 40%;
    animation-duration: 9s;
    animation-delay: 0.5s;
    --drift: -40px;
}

.ember:nth-child(5) {
    left: 50%;
    animation-duration: 11s;
    animation-delay: 3s;
    --drift: 20px;
}

.ember:nth-child(6) {
    left: 60%;
    animation-duration: 8s;
    animation-delay: 1.5s;
    --drift: -50px;
}

.ember:nth-child(7) {
    left: 70%;
    animation-duration: 10s;
    animation-delay: 2.5s;
    --drift: 35px;
}

.ember:nth-child(8) {
    left: 80%;
    animation-duration: 7s;
    animation-delay: 0.8s;
    --drift: -25px;
}

.ember:nth-child(9) {
    left: 90%;
    animation-duration: 9s;
    animation-delay: 3.5s;
    --drift: 45px;
}

.ember:nth-child(10) {
    left: 5%;
    animation-duration: 12s;
    animation-delay: 1.2s;
    --drift: -35px;
}

.ember:nth-child(11) {
    left: 15%;
    animation-duration: 8s;
    animation-delay: 4s;
    --drift: 25px;
}

.ember:nth-child(12) {
    left: 25%;
    animation-duration: 10s;
    animation-delay: 0.3s;
    --drift: -45px;
}

.ember:nth-child(13) {
    left: 35%;
    animation-duration: 9s;
    animation-delay: 2.8s;
    --drift: 55px;
}

.ember:nth-child(14) {
    left: 45%;
    animation-duration: 11s;
    animation-delay: 1.8s;
    --drift: -20px;
}

.ember:nth-child(15) {
    left: 55%;
    animation-duration: 7s;
    animation-delay: 3.2s;
    --drift: 30px;
}

.ember:nth-child(16) {
    left: 65%;
    animation-duration: 10s;
    animation-delay: 0.7s;
    --drift: -55px;
}

.ember:nth-child(17) {
    left: 75%;
    animation-duration: 8s;
    animation-delay: 2.2s;
    --drift: 40px;
}

.ember:nth-child(18) {
    left: 85%;
    animation-duration: 9s;
    animation-delay: 4.5s;
    --drift: -30px;
}

.ember:nth-child(19) {
    left: 95%;
    animation-duration: 11s;
    animation-delay: 1.7s;
    --drift: 20px;
}

.ember:nth-child(20) {
    left: 12%;
    animation-duration: 8s;
    animation-delay: 3.8s;
    --drift: -40px;
}

/* Subtle glow at the bottom (unseen fire source) */
.embers-mode::after {
    content: '';
    position: fixed;
    bottom: -100px;
    left: 0;
    right: 0;
    height: 200px;
    background: radial-gradient(ellipse at 50% 100%,
            rgba(255, 107, 53, 0.08) 0%,
            rgba(255, 68, 68, 0.04) 30%,
            transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   PAGE LOAD ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

    100% {
        background-position: 200% 0;
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 20px var(--primary-glow);
    }

    50% {
        box-shadow: 0 0 40px var(--primary-glow);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* ============================================
   CINEMATIC ANIMATIONS (PREMIUM)
   ============================================ */
@keyframes revealBlur {
    from {
        opacity: 0;
        filter: blur(20px);
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

@keyframes cascadeReveal {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
    }

    60% {
        opacity: 1;
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes subtlePulse {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

@keyframes ambientBreath {

    0%,
    100% {
        opacity: 0.03;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.06;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

@keyframes glowPulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(212, 163, 115, 0.2);
    }

    50% {
        box-shadow: 0 0 40px rgba(212, 163, 115, 0.4);
    }
}

@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes textReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes successPop {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* Ambient Background Glow */
.ambient-bg {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 150vw;
    height: 150vh;
    background: radial-gradient(ellipse at center,
            rgba(212, 163, 115, 0.04) 0%,
            rgba(107, 142, 107, 0.02) 40%,
            transparent 70%);
    animation: ambientBreath 8s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

/* Page Entrance */
.page-enter {
    animation: revealBlur 0.8s var(--ease-out-expo) forwards;
}

/* Cascade Animation Classes */
.cascade-item {
    opacity: 0;
    animation: cascadeReveal 0.7s var(--ease-out-expo) forwards;
}

.cascade-1 {
    animation-delay: 0.05s;
}

.cascade-2 {
    animation-delay: 0.1s;
}

.cascade-3 {
    animation-delay: 0.15s;
}

.cascade-4 {
    animation-delay: 0.2s;
}

.cascade-5 {
    animation-delay: 0.25s;
}

.cascade-6 {
    animation-delay: 0.3s;
}

.cascade-7 {
    animation-delay: 0.35s;
}

.cascade-8 {
    animation-delay: 0.4s;
}

/* Text Reveal */
.text-reveal {
    animation: textReveal 0.6s var(--ease-out-expo) forwards;
}

/* Glow Effects */
.glow-hover:hover {
    animation: glowPulse 2s ease-in-out infinite;
}

.glow-attention {
    animation: glowPulse 2s ease-in-out infinite;
}

/* Success Animation */
.success-pop {
    animation: successPop 0.5s var(--ease-out-back);
}

/* ============================================
   STAGGERED ANIMATION DELAYS
   ============================================ */
.stagger-1 {
    animation-delay: 0.1s;
}

.stagger-2 {
    animation-delay: 0.15s;
}

.stagger-3 {
    animation-delay: 0.2s;
}

.stagger-4 {
    animation-delay: 0.25s;
}

.stagger-5 {
    animation-delay: 0.3s;
}

/* ============================================
   PREMIUM CARD COMPONENT
   ============================================ */
.premium-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(245, 237, 224, 0.8);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    transition: all var(--duration-normal) var(--ease-out-expo);
    animation: fadeInUp var(--duration-cinematic) var(--ease-out-expo) backwards;
}

.premium-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-light);
}

.premium-card:active {
    transform: translateY(-2px);
    transition-duration: var(--duration-fast);
}

/* ============================================
   PREMIUM BUTTON COMPONENT
   ============================================ */
.premium-btn {
    position: relative;
    overflow: hidden;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all var(--duration-normal) var(--ease-out-expo);
}

.premium-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--duration-normal);
}

.premium-btn:hover::before {
    opacity: 1;
}

.premium-btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    box-shadow: 0 4px 15px var(--primary-glow);
}

.premium-btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px var(--primary-glow);
}

.premium-btn-secondary {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--cream-dark);
    color: var(--text-main);
}

.premium-btn-secondary:hover {
    background: var(--cream);
    border-color: var(--primary);
    transform: translateY(-1px);
}

/* ============================================
   PREMIUM INPUT COMPONENT
   ============================================ */
.premium-input {
    padding: 0.75rem 1rem;
    border: 1px solid var(--cream-dark);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    transition: all var(--duration-normal) var(--ease-out-expo);
}

.premium-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-glow);
    background: white;
}

.premium-input::placeholder {
    color: #6B7280;  /* gray-500 for proper contrast, no opacity reduction */
}

/* ============================================
   MODAL ANIMATIONS
   ============================================ */
.modal-backdrop {
    background: rgba(44, 36, 24, 0.6);
    backdrop-filter: blur(8px);
    animation: fadeIn var(--duration-normal) var(--ease-out-expo);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content {
    animation: modalSlideIn var(--duration-slow) var(--ease-out-back);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-close {
    animation: modalSlideOut var(--duration-normal) var(--ease-in-out-cubic) forwards;
}

@keyframes modalSlideOut {
    to {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
}

/* ============================================
   SKELETON LOADING
   ============================================ */
.skeleton {
    background: linear-gradient(90deg,
            var(--cream-dark) 0%,
            var(--cream) 50%,
            var(--cream-dark) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 8px;
}

.skeleton-card {
    height: 180px;
    border-radius: 16px;
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-text-lg {
    height: 1.5rem;
    width: 60%;
}

/* ============================================
   LOADING STATE UTILITIES
   ============================================ */

/* Spinning loader */
.loader {
    width: 24px;
    height: 24px;
    border: 3px solid var(--cream-dark);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin var(--duration-loading) linear infinite;
}

.loader-sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.loader-lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

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

/* Pulse loading effect */
.loading-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Button loading state */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin var(--duration-loading) linear infinite;
}

.btn-loading::after {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: white;
}

/* Content loading overlay */
.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
}

.dark-mode .loading-overlay {
    background: rgba(13, 13, 13, 0.8);
}

/* Disabled/loading state for cards */
.card-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Progress bar loading */
.progress-bar {
    height: 4px;
    background: var(--cream-dark);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    border-radius: var(--radius-full);
    transition: width var(--duration-normal) var(--ease-out-expo);
}

.progress-bar-indeterminate .progress-bar-fill {
    width: 30%;
    animation: indeterminate 1.5s ease-in-out infinite;
}

@keyframes indeterminate {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(400%);
    }
}

/* ============================================
   BOOK SIDEBAR (BIBLE READER)
   ============================================ */
.book-item {
    position: relative;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    transition: all var(--duration-normal) var(--ease-out-expo);
    overflow: hidden;
}

.book-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: 2px;
    transition: height var(--duration-normal) var(--ease-out-expo);
}

.book-item:hover {
    background: var(--cream-dark);
    padding-left: 1rem;
}

.book-item:hover::before {
    height: 60%;
}

.book-item.active {
    background: rgba(212, 163, 115, 0.1);
    color: var(--primary);
    font-weight: 600;
}

.book-item.active::before {
    height: 80%;
}

/* ============================================
   CHAPTER BUTTONS (BIBLE READER)
   ============================================ */
.chapter-btn {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 500;
    background: var(--cream);
    color: var(--text-body);
    transition: all var(--duration-normal) var(--ease-out-expo);
    overflow: hidden;
}

.chapter-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    opacity: 0;
    transition: opacity var(--duration-normal);
}

.chapter-btn span {
    position: relative;
    z-index: 1;
}

.chapter-btn:hover {
    transform: scale(1.1);
    color: white;
}

.chapter-btn:hover::after {
    opacity: 1;
}

.chapter-btn:active {
    transform: scale(1.05);
}

.chapter-btn.active {
    color: white;
}

.chapter-btn.active::after {
    opacity: 1;
}

/* ============================================
   NOTE CARD (NOTES PAGE)
   ============================================ */
.note-card {
    position: relative;
    background: var(--sn-parchment, #FDF8EF);
    background-image: var(--tex-paper, none);
    background-size: 300px auto;
    border: 1px solid rgba(139, 115, 85, 0.3);
    border-radius: 2px;
    padding: 1.25rem;
    box-shadow: var(--shadow-paper, 0 1px 3px rgba(92,74,53,.08), 0 3px 10px rgba(92,74,53,.05));
    transition: all var(--duration-normal) var(--ease-out-expo);
    animation: fadeInUp var(--duration-cinematic) var(--ease-out-expo) backwards;
    overflow: hidden;
}

/* Dog-ear fold — signature motif */
.note-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(225deg, var(--sn-cream, #F5E6C8) 50%, rgba(139,105,70,0.25) 50%);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    z-index: 3;
    pointer-events: none;
}

.note-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md, 0 4px 14px rgba(92, 74, 53, 0.14));
    border-color: rgba(139, 115, 85, 0.5);
}

/* ============================================
   FOCUS MODE ENHANCEMENTS
   ============================================ */
.focus-container {
    animation: fadeInScale var(--duration-cinematic) var(--ease-out-expo);
}

.focus-input {
    font-size: 1.25rem;
    line-height: 2;
    transition: all var(--duration-normal);
}

.focus-input:focus {
    box-shadow: none;
}

.quick-note-item {
    animation: slideInLeft var(--duration-slow) var(--ease-out-expo) backwards;
}

/* ============================================
   DARK MODE ENHANCEMENTS
   Uses variables from .dark-mode defined above (lines 196-222)
   ============================================ */

.dark-mode .premium-card,
.dark-mode .note-card {
    background: var(--bg-secondary);
    background-image: none;
    border-color: var(--border);
}

.dark-mode .note-card::after {
    background: linear-gradient(225deg, var(--bg-surface, #3B2F22) 50%, rgba(0,0,0,0.3) 50%);
}

.dark-mode .scripture-premium {
    border-left-color: var(--fg-heading, #D4A94E);
}

.dark-mode .chapter-drop-cap::first-letter {
    color: var(--fg-heading, #D4A94E);
}

.dark-mode .scripture-premium .verse-num {
    color: var(--fg-heading, #D4A94E);
}

.dark-mode .premium-input {
    background: var(--bg-tertiary) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}

.dark-mode .premium-input:focus {
    background: var(--bg-tertiary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(212, 163, 115, 0.2) !important;
}

.dark-mode .premium-input::placeholder {
    color: var(--text-muted) !important;
}

.dark-mode .skeleton {
    background: linear-gradient(90deg,
            var(--bg-tertiary) 0%,
            var(--bg-secondary) 50%,
            var(--bg-tertiary) 100%);
}

/* Dark Mode Chapter Button Fix */
.dark-mode .chapter-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.dark-mode .chapter-btn:hover {
    background: linear-gradient(135deg, var(--primary-dm) 0%, var(--primary-light-dm) 100%);
    color: #0d0d0d !important;
}

.dark-mode .chapter-btn.active {
    background: linear-gradient(135deg, var(--primary-dm) 0%, var(--primary-light-dm) 100%);
    color: #0d0d0d !important;
}

/* Dark Mode User Menu Fix */
.dark-mode #user-menu {
    background: var(--bg-secondary) !important;
    border-color: var(--border) !important;
}

.dark-mode #user-info {
    background: var(--bg-tertiary) !important;
    border-bottom-color: var(--border) !important;
}

.dark-mode #menu-user-name,
.dark-mode #user-menu .text-gray-900 {
    color: var(--text-primary) !important;
}

.dark-mode #menu-user-email,
.dark-mode #user-menu .text-gray-500 {
    color: var(--text-secondary) !important;
}

.dark-mode #user-menu .text-gray-700 {
    color: var(--text-primary) !important;
}

.dark-mode #user-menu .text-gray-400,
.dark-mode #user-menu .text-gray-600 {
    color: var(--text-secondary) !important;
}

.dark-mode #user-menu .hover\:bg-gray-50:hover {
    background: var(--bg-tertiary) !important;
}

.dark-mode #user-menu .border-gray-100 {
    border-color: var(--border) !important;
}

.dark-mode #user-menu .hover\:bg-primary\/5:hover {
    background: rgba(212, 163, 115, 0.1) !important;
}

.dark-mode #user-menu .hover\:bg-red-50:hover {
    background: rgba(220, 38, 38, 0.1) !important;
}


/* ============================================
   HEADER ANIMATIONS
   ============================================ */
.nav-link {
    position: relative;
    padding: 0.5rem 0;
    transition: color var(--duration-normal);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--sn-gold, #C5A55A) 0%, var(--sn-gold-light, #E8D4B8) 100%);
    border-radius: 1px;
    transition: width var(--duration-normal) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* ============================================
   SAVE INDICATOR (PREMIUM)
   ============================================ */
.save-indicator {
    animation: saveSlideIn var(--duration-slow) var(--ease-out-back);
}

@keyframes saveSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   LOADING SPINNER (PREMIUM)
   ============================================ */
.premium-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--cream-dark);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* ============================================
   SCROLL REVEAL
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--duration-cinematic) var(--ease-out-expo);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   EMPTY STATE ANIMATIONS
   ============================================ */
.empty-state-icon {
    animation: float 3s ease-in-out infinite;
}

/* ============================================
   RIPPLE EFFECT
   ============================================ */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
            rgba(255, 255, 255, 0.3) 0%, transparent 60%);
    opacity: 0;
    transform: scale(0);
    transition: transform 0.5s, opacity 0.3s;
}

.ripple:active::after {
    opacity: 1;
    transform: scale(2);
    transition: transform 0s, opacity 0s;
}

/* ============================================
   PREMIUM TOAST NOTIFICATIONS
   ============================================ */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    padding: 1rem 1.5rem;
    border-radius: 16px;
    background: white;
    border: 1px solid var(--cream-dark);
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 0.4s var(--ease-out-back);
    z-index: 1000;
}

.toast.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.toast-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
}

.toast-error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
}

/* ============================================
   GUIDED TOOLTIPS (FIRST-TIME USER)
   ============================================ */
.guide-tooltip {
    position: absolute;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: var(--shadow-lg), 0 0 30px var(--primary-glow);
    z-index: 100;
    animation: bounceIn 0.5s var(--ease-out-back), glowPulse 2s ease-in-out infinite;
}

.guide-tooltip::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--primary);
    transform: rotate(45deg);
}

.guide-tooltip.arrow-left::before {
    left: -6px;
    top: 50%;
    margin-top: -6px;
}

.guide-tooltip.arrow-top::before {
    top: -6px;
    left: 50%;
    margin-left: -6px;
}

.guide-tooltip.arrow-right::before {
    right: -6px;
    top: 50%;
    margin-top: -6px;
}

.guide-dismiss {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    color: white;
    font-size: 0.75rem;
    cursor: pointer;
    margin-left: 0.5rem;
    transition: background 0.2s;
}

.guide-dismiss:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   ATTENTION PULSE (FOR GUIDANCE)
   ============================================ */
.attention-pulse {
    position: relative;
}

.attention-pulse::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    border: 2px solid var(--primary);
    animation: pulse-ring 2s ease-out infinite;
}

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

    100% {
        transform: scale(1.15);
        opacity: 0;
    }
}

/* ============================================
   PREMIUM SCRIPTURE TYPOGRAPHY
   ============================================ */
.scripture-premium {
    font-family: var(--serif-body, 'Lora'), Georgia, serif;
    font-size: 1.2rem;
    line-height: 2.0;
    color: var(--fg1, var(--text-main));
    letter-spacing: 0.01em;
    border-left: 3px solid var(--sn-burgundy, #5C1A1B);
    padding-left: 1.5rem;
    margin-left: 0.5rem;
}

.scripture-premium p {
    margin-bottom: 1.5rem;
    text-indent: 1.5rem;
    text-align: justify;
    text-wrap: pretty;
}

.scripture-premium .verse-num {
    font-family: var(--sans-system, 'Inter'), sans-serif;
    font-size: 0.65em;
    font-weight: 700;
    color: var(--sn-burgundy, var(--primary));
    vertical-align: super;
    margin-right: 0.3rem;
    opacity: 0.7;
}

.chapter-drop-cap::first-letter {
    font-size: 4em;
    float: left;
    line-height: 0.75;
    margin-right: 0.12em;
    margin-top: 0.05em;
    font-family: 'EB Garamond', 'Playfair Display', serif;
    color: var(--sn-burgundy, var(--primary));
    font-weight: 400;
}

/* ============================================
   ENHANCED FOCUS STATES
   ============================================ */
.focus-visible-ring:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-glow), 0 0 0 6px rgba(212, 163, 115, 0.1);
}

/* ============================================
   PREMIUM DIVIDERS
   ============================================ */
.divider-gold {
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--primary) 20%,
            var(--primary-light) 50%,
            var(--primary) 80%,
            transparent 100%);
    border: none;
    margin: 2rem 0;
}

.divider-subtle {
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--cream-dark) 20%,
            var(--cream-dark) 80%,
            transparent 100%);
    border: none;
    margin: 1.5rem 0;
}

/* ============================================
   LOGO ANIMATION
   ============================================ */
.logo-hover:hover .logo-icon {
    transform: rotate(-5deg) scale(1.05);
    transition: transform 0.3s var(--ease-out-back);
}

.logo-icon {
    transition: transform 0.3s var(--ease-out-expo);
}

/* ============================================
   CARD LIFT EFFECT
   ============================================ */
.card-lift {
    transition: all 0.4s var(--ease-out-expo);
}

.card-lift:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow:
        0 20px 40px rgba(44, 36, 24, 0.1),
        0 0 30px rgba(212, 163, 115, 0.08);
}

/* ============================================
   TYPING INDICATOR
   ============================================ */
.typing-indicator {
    display: inline-flex;
    gap: 4px;
    padding: 0.5rem;
}

.typing-indicator span {
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typing {

    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* ============================================
   SCRIBE MASCOT ANIMATIONS
   ============================================ */

/* Base Scribe Mascot Class */
.scribe-mascot {
    display: inline-block;
    transition: all 0.3s var(--ease-out-expo);
}

.scribe-mascot img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(212, 163, 115, 0.3));
}

/* Size Variants */
.scribe-sm {
    width: 48px;
    height: 48px;
}

.scribe-md {
    width: 80px;
    height: 80px;
}

.scribe-lg {
    width: 120px;
    height: 120px;
}

.scribe-xl {
    width: 180px;
    height: 180px;
}

/* Bounce Animation (Nib hop) */
@keyframes scribe-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-8px);
    }

    50% {
        transform: translateY(-4px);
    }

    75% {
        transform: translateY(-10px);
    }
}

.scribe-bounce {
    animation: scribe-bounce 1.5s ease-in-out infinite;
}

/* Swing Animation (Listening idle) */
@keyframes scribe-swing {

    0%,
    100% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(3deg);
    }
}

.scribe-swing {
    transform-origin: top center;
    animation: scribe-swing 2s ease-in-out infinite;
}

/* Float Animation (Thinking/hovering) */
@keyframes scribe-float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    33% {
        transform: translateY(-6px) rotate(1deg);
    }

    66% {
        transform: translateY(-3px) rotate(-1deg);
    }
}

.scribe-float {
    animation: scribe-float 3s ease-in-out infinite;
}

/* Celebrate Animation (Sermon complete) */
@keyframes scribe-celebrate {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    10% {
        transform: scale(1.1) rotate(-5deg);
    }

    20% {
        transform: scale(1.1) rotate(5deg);
    }

    30% {
        transform: scale(1.1) rotate(-5deg);
    }

    40% {
        transform: scale(1.1) rotate(5deg);
    }

    50% {
        transform: scale(1) rotate(0deg);
    }
}

.scribe-celebrate {
    animation: scribe-celebrate 1s ease-in-out;
}

/* Zip Entrance (Fast entry) */
@keyframes scribe-zip-in {
    0% {
        transform: translateX(-100%) scale(0.3);
        opacity: 0;
    }

    60% {
        transform: translateX(10%) scale(1.1);
        opacity: 1;
    }

    80% {
        transform: translateX(-5%) scale(0.95);
    }

    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

.scribe-zip-in {
    animation: scribe-zip-in 0.6s var(--ease-out-back);
}

/* Thinking Animation */
@keyframes scribe-thinking {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

.scribe-thinking {
    animation: scribe-thinking 2s ease-in-out infinite;
}

/* Writing Animation (Scribble motion) */
@keyframes scribe-writing {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(3px);
    }

    75% {
        transform: translateX(-2px);
    }
}

.scribe-writing {
    animation: scribe-writing 0.4s ease-in-out infinite;
}

/* Glow Effect */
.scribe-glow {
    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.6)) drop-shadow(0 4px 12px rgba(212, 163, 115, 0.4));
}

/* Empty State Container */
.scribe-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    gap: 1rem;
}

.scribe-empty-state h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.scribe-empty-state p {
    color: var(--text-body);
    max-width: 280px;
    margin: 0;
}

/* Loading State */
.scribe-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.scribe-loading-text {
    font-size: 0.875rem;
    color: var(--text-body);
    animation: pulse 1.5s ease-in-out infinite;
}

/* Confetti Burst */
@keyframes confetti-fall {
    0% {
        transform: translateY(-100%) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

.confetti-piece {
    position: fixed;
    width: 10px;
    height: 10px;
    background: var(--primary);
    animation: confetti-fall 3s ease-out forwards;
    pointer-events: none;
    z-index: 9999;
}

.confetti-piece:nth-child(2n) {
    background: #f59e0b;
    animation-duration: 2.5s;
}

.confetti-piece:nth-child(3n) {
    background: #10b981;
    animation-duration: 3.5s;
}

.confetti-piece:nth-child(4n) {
    background: #3b82f6;
    animation-duration: 2.8s;
}

/* ============================================
   PREFERENCES PAGE DARK MODE
   ============================================ */

/* Preference Card Overrides */
.dark-mode .pref-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px);
}

.dark-mode .pref-card h3 {
    color: var(--text-primary) !important;
}

.dark-mode .pref-card p {
    color: var(--text-secondary) !important;
}

/* Inputs and Selects */
.dark-mode select,
.dark-mode input[type="text"],
.dark-mode input[type="email"] {
    background-color: rgba(20, 20, 35, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

.dark-mode select option {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Range Slider */
.dark-mode .custom-slider {
    background: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .custom-slider::-webkit-slider-thumb {
    background: var(--text-primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 10px rgba(212, 163, 115, 0.3) !important;
}

/* Toggle Switch */
.dark-mode .toggle-switch {
    background: rgba(255, 255, 255, 0.15) !important;
}

.dark-mode .toggle-switch.active {
    background: linear-gradient(135deg, var(--primary) 0%, #E8C8A5 100%) !important;
}

.dark-mode .toggle-switch::after {
    background: white !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}

/* Back Button & Header Text in Preferences */
.dark-mode header .text-text-main {
    color: var(--text-primary) !important;
}

.dark-mode header .text-text-body {
    color: var(--text-secondary) !important;
}

/* text-text-main/body dark mode styles consolidated at lines 247-260 */

/* ============================================
   PERCY MASCOT SYSTEM
   Premium, Investor-Ready Animations
   Inspired by Jackbox Tee K.O. Style
   ============================================ */

/* Percy Container - Use for positioning */
.percy-container {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Percy Base Image */
/* NOTE: Images have checkered pattern baked in - need re-export with true transparency */
.percy {
    width: 120px;
    height: auto;
    will-change: transform;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}

.percy-sm {
    width: 60px;
}

.percy-md {
    width: 100px;
}

.percy-lg {
    width: 150px;
}

.percy-xl {
    width: 200px;
}

/* ============================================
   PERCY IDLE ANIMATIONS (Tee K.O. Style)
   Subtle, continuous, premium feel
   ============================================ */

/* Gentle Float - Default idle state */
@keyframes percy-float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-6px) rotate(0.5deg);
    }
}

.percy-idle {
    animation: percy-float 3.5s ease-in-out infinite;
}

/* Gentle Breathing - For loading states */
@keyframes percy-breathe {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.03);
        opacity: 0.9;
    }
}

.percy-loading {
    animation: percy-breathe 2s ease-in-out infinite;
}

/* Subtle Wobble - Slight life without distraction */
@keyframes percy-wobble {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(1deg);
    }

    75% {
        transform: rotate(-1deg);
    }
}

.percy-wobble {
    animation: percy-wobble 4s ease-in-out infinite;
}

/* ============================================
   PERCY REACTION ANIMATIONS
   Triggered on user actions
   ============================================ */

/* Celebration Bounce - For completions */
@keyframes percy-celebrate {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    15% {
        transform: scale(1.15) rotate(-5deg);
    }

    30% {
        transform: scale(1.1) rotate(4deg);
    }

    45% {
        transform: scale(1.12) rotate(-3deg);
    }

    60% {
        transform: scale(1.08) rotate(2deg);
    }

    75% {
        transform: scale(1.05) rotate(-1deg);
    }
}

.percy-celebrate {
    animation: percy-celebrate 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Excited Jump - For streaks/milestones */
@keyframes percy-jump {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    30% {
        transform: translateY(-20px) scale(1.1);
    }

    50% {
        transform: translateY(-15px) scale(1.05);
    }

    70% {
        transform: translateY(-5px) scale(1.02);
    }
}

.percy-jump {
    animation: percy-jump 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Nod - For acknowledgment */
@keyframes percy-nod {

    0%,
    100% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(8deg);
    }

    40% {
        transform: rotate(-5deg);
    }

    60% {
        transform: rotate(3deg);
    }
}

.percy-nod {
    animation: percy-nod 0.6s ease-out;
}

/* ============================================
   PERCY ENTRANCE ANIMATIONS
   ============================================ */

/* Fade In Up - Standard entrance */
@keyframes percy-enter {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.85);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.percy-enter {
    animation: percy-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Pop In - For celebrations */
@keyframes percy-pop-in {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        transform: scale(1.1);
    }

    70% {
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.percy-pop-in {
    animation: percy-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Slide In From Side */
@keyframes percy-slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.percy-slide-in {
    animation: percy-slide-in-right 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ============================================
   PERCY EXIT ANIMATIONS
   ============================================ */

@keyframes percy-exit {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }
}

.percy-exit {
    animation: percy-exit 0.3s ease-in forwards;
}

/* ============================================
   PERCY GLOW EFFECTS (Premium Touch)
   ============================================ */

@keyframes percy-glow {

    0%,
    100% {
        filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.15)) drop-shadow(0 0 0 rgba(212, 163, 115, 0));
    }

    50% {
        filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.15)) drop-shadow(0 0 25px rgba(212, 163, 115, 0.4));
    }
}

.percy-glow {
    animation: percy-glow 2s ease-in-out infinite;
}

/* Combined: Float + Glow for hero moments */
.percy-hero {
    animation: percy-float 3.5s ease-in-out infinite,
        percy-glow 2.5s ease-in-out infinite;
}

/* ============================================
   PERCY SPEECH BUBBLE (Optional)
   ============================================ */

.percy-speech {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 12px 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    animation: percy-enter 0.4s ease-out forwards;
}

.percy-speech::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white;
}

.dark-mode .percy-speech {
    background: #2a2a3c;
    color: var(--text-primary);
}

.dark-mode .percy-speech::after {
    border-top-color: #2a2a3c;
}

/* ============================================
   PERCY PHASE 2: STATE CROSSFADE + WRITING FRAME SEQUENCE
   ============================================ */

/* Crossfade wrapper — ensures smooth image swap between states */
.percy-widget {
    position: fixed;
    bottom: 88px;
    right: 16px;
    z-index: 50;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Percy image crossfade on state change */
.percy[data-fading] {
    transition: opacity 0.18s ease-out;
    opacity: 0;
}

/* Listening pulse ring — gold glow around widget */
@keyframes percy-listen-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(197, 165, 90, 0);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(197, 165, 90, 0.22);
    }
}

.percy-widget.percy-state-listening {
    border-radius: 50%;
    animation: percy-listen-pulse 1.4s ease-in-out infinite;
}

/* Writing tick — subtle pen-tap for writing state */
@keyframes percy-writing-tick {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    20%       { transform: rotate(-3deg) translateY(-2px); }
    40%       { transform: rotate(2deg) translateY(0); }
    60%       { transform: rotate(-1deg) translateY(-1px); }
    80%       { transform: rotate(0deg) translateY(0); }
}

.percy-writing-anim {
    animation: percy-writing-tick 0.7s ease-in-out infinite;
    transform-origin: center bottom;
}

/* Thinking shimmer — subtle back-and-forth for thinking state */
@keyframes percy-thinking-rock {
    0%, 100% { transform: rotate(-4deg); }
    50%       { transform: rotate(4deg); }
}

.percy-thinking-anim {
    animation: percy-thinking-rock 1.2s ease-in-out infinite;
    transform-origin: center bottom;
}

/* Error shake — quick jitter for error state */
@keyframes percy-error-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-5px); }
    40%       { transform: translateX(5px); }
    60%       { transform: translateX(-3px); }
    80%       { transform: translateX(3px); }
}

.percy-error-anim {
    animation: percy-error-shake 0.45s ease-out;
}

/* Celebrate bounce — upgraded from simple scale to full bounce */
@keyframes percy-celebrate-bounce {
    0%         { transform: scale(1) translateY(0) rotate(0deg); }
    15%        { transform: scale(1.18) translateY(-10px) rotate(-6deg); }
    30%        { transform: scale(1.12) translateY(-6px) rotate(5deg); }
    45%        { transform: scale(1.15) translateY(-8px) rotate(-3deg); }
    60%        { transform: scale(1.08) translateY(-4px) rotate(2deg); }
    75%        { transform: scale(1.04) translateY(-2px) rotate(0deg); }
    100%       { transform: scale(1) translateY(0) rotate(0deg); }
}

.percy-celebrate-v2 {
    animation: percy-celebrate-bounce 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Dark mode speech bubble — brand warm tones */
.dark-mode .percy-speech,
[data-theme="dark"] .percy-speech {
    background: #2C1E12;
    color: #E8D5B0;
    border: 1px solid rgba(197, 165, 90, 0.3);
}

.dark-mode .percy-speech::after,
[data-theme="dark"] .percy-speech::after {
    border-top-color: #2C1E12;
}

/* ============================================
   ACCESSIBILITY: Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {

    .percy,
    .percy-idle,
    .percy-loading,
    .percy-wobble,
    .percy-celebrate,
    .percy-celebrate-v2,
    .percy-jump,
    .percy-nod,
    .percy-enter,
    .percy-pop-in,
    .percy-slide-in,
    .percy-exit,
    .percy-glow,
    .percy-hero,
    .percy-writing-anim,
    .percy-thinking-anim,
    .percy-error-anim,
    .percy-widget.percy-state-listening {
        animation: none !important;
        transition: none !important;
    }

    .percy-enter,
    .percy-pop-in,
    .percy-slide-in {
        opacity: 1;
        transform: none;
    }
}

/* ============================================
   ACCESSIBILITY: Touch Targets (WCAG 2.5.5)
   Minimum 44x44px for all interactive elements
   ============================================ */

/* Universal minimum touch target size */
.touch-target {
    min-width: 44px;
    min-height: 44px;
}

/* Apply to common interactive elements on mobile */
@media (pointer: coarse) {

    /* Buttons, links, and interactive elements */
    button,
    [role="button"],
    a[href],
    input[type="checkbox"],
    input[type="radio"],
    select {
        min-height: 44px;
    }

    /* Small buttons need padding to meet target size */
    .icon-btn,
    .btn-sm {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }

    /* Chapter buttons in Bible reader */
    .chapter-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Book items in sidebar */
    .book-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Mobile nav items */
    .mobile-nav-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* Type radio options */
    .type-radio {
        min-height: 44px;
    }

    /* Filter pills */
    .filter-pill {
        min-height: 44px;
    }
}

/* ============================================
   ACCESSIBILITY: Focus Visible Ring
   Clear keyboard navigation indicators
   ============================================ */

/* Modern focus ring for keyboard navigation only */
:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* Remove default focus for mouse/touch */
:focus:not(:focus-visible) {
    outline: none;
}

/* Custom focus ring utility class */
.focus-visible-ring:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Enhanced button focus for dark mode */
.dark-mode :focus-visible {
    outline-color: var(--primary-light);
}

/* ============================================
   SHARED MOBILE NAV STYLES
   Centralized mobile navigation CSS
   ============================================ */

.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #6B4A32;
    background-image: url('/assets/phase2/textures/leather-header.png');
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: none;
    padding: 0.5rem 1rem;
    padding-top: 1.5rem;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
    z-index: 50;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

/* Gold page-edge strip at TOP of mobile nav = "bottom of the book" look
   (mirrors the header's bottom gold edge so content is bookended by page gilding) */
.mobile-nav::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background-image: var(--tex-gold-edge, linear-gradient(180deg, #E8C572 0%, #C5A55A 45%, #8B6F30 100%));
    background-size: auto 100%;
    background-repeat: repeat-x;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    pointer-events: none;
    z-index: 1;
    /* Flip horizontally so the gilding orientation reads "bottom of book" */
    transform: scaleY(-1);
}

.mobile-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0.5rem 0.75rem;
    color: #F5EBE0;
    transition: all 0.2s ease;
    font-size: 10px;
    font-weight: 600;
    min-width: 44px;
    min-height: 44px;
    text-decoration: none;
    flex: 1;
    min-width: 0;
    position: relative;
}

.mobile-nav-link:hover {
    color: var(--accent-gold, #C5A55A);
    opacity: 0.85;
}

.mobile-nav-link.active {
    color: var(--accent-gold, #C5A55A) !important;
}

/* Active indicator — top bar */
.mobile-nav-link.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--color-burgundy, #722F37);
}

.mobile-nav-link .material-symbols-outlined {
    font-size: 24px;
}

/* Emoji icons should use system emoji fonts, not Material Symbols */
.mobile-nav-link .text-2xl:not(.material-symbols-outlined) {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", sans-serif !important;
    font-size: 18px;
}

/* Elevated center button (Record/Scribe) */
.mobile-nav-scribe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0;
    color: white;
    transition: all 0.2s ease;
    font-size: 10px;
    font-weight: 600;
    position: relative;
    margin-top: -24px;
    text-decoration: none;
    flex: 1 !important;
    min-width: 0 !important;
}

.mobile-nav-scribe .scribe-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px var(--primary-glow), 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.mobile-nav-scribe .scribe-btn:hover,
.mobile-nav-scribe .scribe-btn:active {
    transform: scale(1.05);
    box-shadow: 0 6px 20px var(--primary-glow), 0 3px 10px rgba(0, 0, 0, 0.3);
}

.mobile-nav-scribe .scribe-btn .material-symbols-outlined {
    color: white;
    font-size: 28px;
}

.mobile-nav-scribe span:last-child {
    color: #F5E6D3;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
    margin-top: 4px;
    font-weight: 600;
}
:not(.dark-mode) .mobile-nav-scribe span:last-child {
    color: #F5E6D3 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

/* Force burgundy mic FAB in mobile nav (override base .scribe-btn gradient) */
.mobile-nav-scribe .scribe-btn.sn-mic-fab {
    background: linear-gradient(135deg, #5C1A1B, #8B4049) !important;
    box-shadow:
        0 4px 14px rgba(92,26,27,0.55),
        0 0 0 2px rgba(197,165,90,0.55) inset,
        0 0 0 3px rgba(255,248,240,0.25) !important;
}
.mobile-nav-scribe .scribe-btn.sn-mic-fab .material-symbols-outlined {
    color: #FFF8F0 !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

/* Dark mode mobile nav - consolidated at lines 309-321 */
/* Embers mode mobile nav - consolidated at lines 397-407 */

/* ============================================
   CANONICAL BUTTON COMPONENTS
   Use these classes to avoid hardcoding colors.
   Always high-contrast. Always on-brand.
   ============================================ */

/* Primary: Burgundy — strong CTA, modals, key actions */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--color-burgundy), var(--color-burgundy-light));
    color: #fff;
    font-family: var(--font-system);
    font-size: var(--text-sm);
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(92, 26, 27, 0.3);
    transition: all var(--duration-normal) var(--ease-out-expo);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-burgundy-dark), var(--color-burgundy));
    box-shadow: 0 4px 14px rgba(92, 26, 27, 0.4);
    transform: translateY(-1px);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(92, 26, 27, 0.3);
}

/* Secondary: Gold outline — secondary actions, cancel, less-emphasis */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: transparent;
    color: var(--color-primary-dark);
    font-family: var(--font-system);
    font-size: var(--text-sm);
    font-weight: 600;
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--duration-normal) var(--ease-out-expo);
}
.btn-secondary:hover {
    background: rgba(197, 165, 90, 0.1);
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
}
.dark-mode .btn-secondary {
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}
.dark-mode .btn-secondary:hover {
    background: rgba(212, 169, 78, 0.15);
}

/* Ghost: Subtle text-only — low-emphasis links, skip buttons */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-system);
    font-size: var(--text-sm);
    font-weight: 500;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--duration-fast) ease;
}
.btn-ghost:hover {
    background: rgba(139, 111, 71, 0.08);
    color: var(--text-primary);
}
.dark-mode .btn-ghost {
    color: var(--text-secondary);
}
.dark-mode .btn-ghost:hover {
    background: rgba(197, 165, 90, 0.1);
    color: var(--text-primary);
}

/* Gold Fill: Accent CTA — premium upsell, record button */
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary), var(--color-primary-dark));
    color: #3B2314;
    font-family: var(--font-system);
    font-size: var(--text-sm);
    font-weight: 700;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(197, 165, 90, 0.35);
    transition: all var(--duration-normal) var(--ease-out-expo);
}
.btn-gold:hover {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    box-shadow: 0 4px 16px rgba(197, 165, 90, 0.5);
    transform: translateY(-1px);
}

/* Size modifiers */
.btn-sm {
    padding: 0.375rem 0.875rem;
    font-size: var(--text-xs);
}
.btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: var(--text-base);
}

/* ============================================
   MOBILE UI POLISH — PIXEL FRONTEND
   ============================================ */

/* Hide scrollbar utility (used by filter pills in gems.html) */
.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Mobile nav: improved label readability */
@media (max-width: 1023px) {
    .mobile-nav-link {
        gap: 4px;
        font-size: 11px;
    }

    .mobile-nav-link .material-symbols-outlined {
        font-size: 22px;
    }

    .mobile-nav-link .text-2xl:not(.material-symbols-outlined) {
        font-size: 20px;
    }

    .mobile-nav-scribe {
        gap: 4px;
        font-size: 11px;
    }
}

/* Gem flip-cards: constrain height on small phones */
@media (max-width: 640px) {
    .gem-card-container {
        height: 280px;
    }
}

/* Auth features grid: single column on very small screens */
@media (max-width: 479px) {
    .features-preview-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 240px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================
   MOBILE LAYOUT FIXES — focus.html / scribe
   ============================================ */
@media (max-width: 767px) {
    /* Cap note area height so quick capture stays on screen */
    #main-note {
        min-height: 220px !important;
        max-height: 340px !important;
    }

    /* Quick Capture: float above mobile nav */
    .note-writing-area {
        margin-bottom: 1rem !important;
    }

    /* Ensure quick notes list has bottom clearance */
    #quick-notes {
        padding-bottom: 0.5rem;
    }
}

/* ============================================
   MOBILE LAYOUT FIXES — subscription.html
   ============================================ */
@media (max-width: 767px) {
    /* Highlight the primary CTA button with stronger contrast on mobile */
    .plan-card button[onclick*="plus_monthly"] {
        background: var(--primary-dark, #A87F55) !important;
        color: #fff !important;
        font-weight: 700 !important;
        box-shadow: 0 4px 16px rgba(168, 127, 85, 0.35) !important;
    }

    /* Annual plan outline button: filled on mobile for clarity */
    .plan-card button[onclick*="plus_annual"] {
        background: transparent;
        border: 2px solid var(--primary-dark, #A87F55);
        color: var(--primary-dark, #A87F55);
        font-weight: 700;
    }

    /* Pricing cards: full-width scroll on mobile, horizontal swipe */
    .grid.md\\:grid-cols-3 {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* Popular badge doesn't clip on mobile */
    .popular-badge {
        font-size: 10px;
        padding: 2px 12px;
    }
}

/* ============================================
   MOBILE LAYOUT FIXES — bible.html
   ============================================ */
@media (max-width: 767px) {
    /* Bible sidebar: full-screen overlay on mobile */
    .bible-sidebar,
    aside.bible-nav {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Bible reader content: ensure bottom clearance for mobile nav */
    .bible-content,
    #bible-content,
    main.bible-main {
        padding-bottom: 120px !important;
    }
}

/* ============================================
   MOBILE LAYOUT FIXES — gems.html / notes.html / devotional.html
   ============================================ */
@media (max-width: 767px) {
    /* Ensure page content clears the bottom nav on all inner pages */
    body:not(.no-mobile-nav) main {
        padding-bottom: 120px !important;
    }

    /* Gems filter pills: horizontal scroll */
    .filter-pills-row {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.5rem;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .filter-pills-row::-webkit-scrollbar {
        display: none;
    }

    /* Notes page header: stack on mobile */
    .notes-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* ============================================
   DESIGN SYSTEM — Section Heads
   Cormorant SC inscription-style labels
   ============================================ */
.sect-head {
    font-family: var(--serif-display, 'Playfair Display'), serif;
    font-weight: 700;
    font-size: var(--text-3xl, 1.875rem);
    color: var(--fg-heading, var(--text-heading, #5C1A1B));
    margin: 0 0 var(--space-2, 0.5rem);
    line-height: var(--lh-tight, 1.25);
}

.sect-head-count {
    font-family: 'Cormorant SC', 'Georgia', serif;
    font-weight: 500;
    font-size: var(--text-sm, 0.875rem);
    letter-spacing: 0.30em;
    text-transform: uppercase;
    color: var(--fg2, var(--text-secondary, #8B6F47));
}

.dark-mode .sect-head {
    color: var(--fg-heading, #D4A94E);
}

/* ============================================
   DESIGN SYSTEM — Handwritten accents
   Kalam ink for margin notes, highlights
   ============================================ */
.ink-handwritten {
    font-family: var(--script-accent, 'Kalam'), cursive;
    color: var(--ink-handwritten, #6B2119);
    transform: rotate(-1deg);
}

.dark-mode .ink-handwritten {
    color: var(--fg-accent, #D4A94E);
}

/* ============================================
   DESIGN SYSTEM — Pull quotes
   EB Garamond italic for literary epigraphs
   ============================================ */
.pull-quote {
    font-family: 'EB Garamond', var(--serif-body, 'Lora'), serif;
    font-style: italic;
    font-size: var(--text-xl, 1.25rem);
    line-height: 1.3;
    color: var(--fg-heading, #5C1A1B);
    border-left: 3px solid var(--sn-burgundy, #5C1A1B);
    padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
    margin: var(--space-6, 1.5rem) 0;
    background: linear-gradient(90deg, rgba(92,26,27,.04), transparent 60%);
}

.dark-mode .pull-quote {
    color: var(--fg-heading, #D4A94E);
    border-left-color: var(--fg-heading, #D4A94E);
}

/* ============================================
   DESIGN SYSTEM — Note card item overrides
   Apply paper + dog-ear to dynamically generated cards
   ============================================ */
.note-card-item {
    position: relative;
    background: var(--sn-parchment, #FDF8EF) !important;
    background-image: var(--tex-paper, none) !important;
    background-size: 300px auto !important;
    border-radius: 2px !important;
    overflow: hidden;
}

.note-card-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 36px;
    height: 36px;
    background: linear-gradient(225deg, var(--sn-cream, #F5E6C8) 50%, rgba(139,105,70,0.25) 50%);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    z-index: 3;
    pointer-events: none;
}

.dark-mode .note-card-item {
    background: var(--bg-secondary, #1E1610) !important;
    background-image: none !important;
}

.dark-mode .note-card-item::after {
    background: linear-gradient(225deg, var(--bg-surface, #3B2F22) 50%, rgba(0,0,0,0.3) 50%);
}

/* ============================================
   DESIGN SYSTEM — Wordmark
   EB Garamond "Scripture Notes." wordmark with gold dot accent
   Per Claude Design logo spec
   ============================================ */
.sn-wordmark {
    font-family: 'EB Garamond', 'Playfair Display', Georgia, serif;
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: 0.01em;
    color: var(--text-heading, #3B2314);
    line-height: 1;
}
.sn-wordmark .sn-wordmark-accent {
    font-style: italic;
    font-weight: 500;
    color: var(--text-heading, #5C1A1B);
}
.sn-wordmark .sn-wordmark-dot {
    color: var(--sn-gold, #C5A55A);
    font-style: normal;
    font-weight: 700;
    margin-left: 1px;
}
.dark-mode .sn-wordmark { color: var(--fg-heading, #D4A94E); }
.dark-mode .sn-wordmark .sn-wordmark-accent { color: var(--fg-heading, #D4A94E); }
.dark-mode .sn-wordmark .sn-wordmark-dot { color: var(--fg-heading, #D4A94E); }

/* Wordmark on leather header — cream for contrast, gold dot stays gold */
:not(.dark-mode) header .sn-wordmark,
:not(.dark-mode) .site-header .sn-wordmark {
    color: #FFF8F0 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
:not(.dark-mode) header .sn-wordmark .sn-wordmark-accent,
:not(.dark-mode) .site-header .sn-wordmark .sn-wordmark-accent {
    color: #F5E6D3 !important;
}
:not(.dark-mode) header .sn-wordmark .sn-wordmark-dot,
:not(.dark-mode) .site-header .sn-wordmark .sn-wordmark-dot {
    color: #E8C572 !important;
}

/* ============================================
   DESIGN SYSTEM — Inscription Eyebrow
   Cormorant SC uppercase label, tiny, wide-tracked
   Per Claude Design "A SERMON JOURNAL" spec
   ============================================ */
.sn-inscription {
    font-family: 'Cormorant SC', 'Georgia', serif;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    color: var(--sn-amber-700, #B45309);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.sn-inscription::before,
.sn-inscription::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
}
.dark-mode .sn-inscription { color: var(--fg2, #C5A55A); }

/* ============================================
   DESIGN SYSTEM — Record Mic FAB
   Burgundy circular FAB with gold pulse ring when recording
   Per Claude Design "Record control" spec
   ============================================ */
.sn-mic-fab {
    background: linear-gradient(135deg, #5C1A1B, #8B4049) !important;
    box-shadow: 0 4px 14px rgba(92,26,27,0.40), 0 0 0 2px rgba(197,165,90,0.45) inset !important;
    color: #FDF8EF !important;
    position: relative;
}
.sn-mic-fab:hover {
    box-shadow: 0 6px 18px rgba(92,26,27,0.55), 0 0 0 2px rgba(197,165,90,0.70) inset !important;
}
.sn-mic-fab.is-recording {
    background: linear-gradient(135deg, #7c2d2e, #5C1A1B) !important;
    animation: sn-mic-pulse 2s ease-in-out infinite;
}
.sn-mic-fab.is-recording::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 9999px;
    border: 2px solid #C5A55A;
    opacity: 0;
    animation: sn-mic-ring 1.6s ease-out infinite;
    pointer-events: none;
}
@keyframes sn-mic-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(92,26,27,0.40), 0 0 0 2px rgba(197,165,90,0.45) inset; }
    50%      { box-shadow: 0 6px 20px rgba(92,26,27,0.60), 0 0 0 2px rgba(197,165,90,0.90) inset; }
}
@keyframes sn-mic-ring {
    0%   { transform: scale(0.92); opacity: 0.85; }
    100% { transform: scale(1.35); opacity: 0; }
}
.dark-mode .sn-mic-fab {
    background: linear-gradient(135deg, #8B3A3A, #5C1A1B) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 0 2px rgba(212,169,78,0.50) inset !important;
}

/* ============================================
   SN MONOGRAM — canonical brand mark
   (replaces retired raster app icon; Cormorant Unicase
   stacked monogram per brand-logos final spec)
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@600;700&display=swap');

.sn-mono {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.625rem;          /* 42px — gives the inner ring room to breathe */
    height: 2.625rem;
    border-radius: 22%;
    background: linear-gradient(135deg, #6B2119, #4A1216);
    color: #F5E6C8;
    font-family: 'Cormorant Unicase', 'Cormorant SC', 'EB Garamond', serif;
    font-weight: 600;
    font-size: 1.2rem;        /* ~19px, tuned for 42px box */
    line-height: 1;
    letter-spacing: 0.04em;
    box-shadow: 0 3px 8px rgba(74, 18, 22, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
    user-select: none;
    transition: transform 0.3s ease;
}
/* Inner gold-leaf border ring — canonical app icon detail */
.sn-mono::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(232, 184, 100, 0.42);
    border-radius: 18%;
    pointer-events: none;
}
/* Tiny gold rule under the SN — echoes the full-spec horizontal accent */
.sn-mono::after {
    content: '';
    position: absolute;
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 38%;
    height: 1px;
    background: rgba(232, 184, 100, 0.55);
    pointer-events: none;
}
.sn-mono.sn-mono-lg {
    width: 5rem;              /* 80px — auth hero */
    height: 5rem;
    font-size: 2.6rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(74, 18, 22, 0.38),
                inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.sn-mono.sn-mono-lg::before {
    inset: 8px;
    border-width: 1px;
    border-radius: 14px;
    border-color: rgba(232, 184, 100, 0.5);
}
.sn-mono.sn-mono-lg::after {
    bottom: 14px;
    width: 32%;
    height: 1px;
    background: rgba(232, 184, 100, 0.65);
}
.group:hover .sn-mono {
    transform: scale(1.06);
}
.dark-mode .sn-mono {
    background: linear-gradient(135deg, #8B3A3A, #5C1A1B);
    color: #F5E6C8;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.50),
                inset 0 1px 0 rgba(255, 240, 200, 0.12);
}
.dark-mode .sn-mono::before {
    border-color: rgba(232, 184, 100, 0.55);
}
.dark-mode .sn-mono::after {
    background: rgba(232, 184, 100, 0.7);
}