/* ==========================================================================
   AzTyping - Real-Time Interactive Engine Styling & Animations
   ========================================================================== */

:root {
    --bg-paper: #F6F3EB;
    --card-bg: #FFFFFF;
    --primary-purple: #6E44FF;
    --primary-purple-hover: #5B21B6;
    --accent-green: #22C55E;
    --accent-blue: #3B82F6;
    --accent-yellow: #EAB308;
    --accent-orange: #F97316;
    --accent-red: #EF4444;
    --sticky-yellow: #FEF9C3;
    --text-main: #2D3748;
    --text-muted: #64748B;
}

/* ==========================================================================
   THEME DESIGN SYSTEM (REFINED & HARMONIZED)
   ========================================================================== */

/* 1. Classic Clean Paper Theme (No Ruled Lines) */
body.theme-paper { 
    --bg-paper: #F8FAFC; 
    --card-bg: #FFFFFF; 
    --card-border: #E2E8F0;
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
    --primary-purple: #6E44FF; 
    --text-main: #0F172A; 
    --text-muted: #64748B; 
    --input-bg: #F8FAFC;
    --input-border: #CBD5E1;
    --pill-bg: rgba(0, 0, 0, 0.04);
    --pill-active-bg: linear-gradient(135deg, #6E44FF, #5B21B6);
    --pill-active-text: #FFFFFF;
    --sticky-bg: #FEF9C3;
    --sticky-text: #713F12;
    --word-pending: #94A3B8;
    --word-correct: #16A34A;
    --word-error: #DC2626;
    --kb-bg: linear-gradient(180deg, #F8FAFC, #F1F5F9); 
    --key-bg: linear-gradient(180deg, #FFFFFF, #F8FAFC); 
    --key-border: #CBD5E1; 
    --key-text: #1E293B; 
    --key-shadow: #94A3B8;
    --para-bg: linear-gradient(180deg, rgba(248,250,252,0.95), rgba(241,245,249,0.95));
    background-color: #F8FAFC; 
    background-image: none !important;
    color: var(--text-main); 
}

/* 2. Midnight Dark Theme */
body.theme-dark { 
    --bg-paper: #09090B; 
    --card-bg: #18181B; 
    --card-border: #27272A;
    --card-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    --primary-purple: #A855F7; 
    --text-main: #F4F4F5; 
    --text-muted: #A1A1AA; 
    --input-bg: #27272A;
    --input-border: #3F3F46;
    --pill-bg: rgba(255, 255, 255, 0.06);
    --pill-active-bg: linear-gradient(135deg, #A855F7, #7E22CE);
    --pill-active-text: #FFFFFF;
    --sticky-bg: #27272A;
    --sticky-text: #FDE047;
    --word-pending: #71717A;
    --word-correct: #4ADE80;
    --word-error: #F87171;
    --kb-bg: linear-gradient(180deg, #27272A, #18181B); 
    --key-bg: linear-gradient(180deg, #3F3F46, #27272A); 
    --key-border: #52525B; 
    --key-text: #FAFAFA; 
    --key-shadow: #09090B;
    --para-bg: linear-gradient(180deg, rgba(39,39,42,0.95), rgba(24,24,27,0.95));
    background-color: #09090B; 
    background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 20px 20px;
    color: var(--text-main); 
}

/* 3. Cyberpunk Neon Theme */
body.theme-neon { 
    --bg-paper: #030712; 
    --card-bg: #0B0F19; 
    --card-border: rgba(192, 132, 252, 0.25);
    --card-shadow: 0 0 25px rgba(192, 132, 252, 0.12), 0 10px 30px rgba(0,0,0,0.6);
    --primary-purple: #C084FC; 
    --text-main: #F3E8FF; 
    --text-muted: #9CA3AF; 
    --input-bg: #111827;
    --input-border: #374151;
    --pill-bg: rgba(192, 132, 252, 0.08);
    --pill-active-bg: linear-gradient(135deg, #C084FC, #9333EA);
    --pill-active-text: #FFFFFF;
    --sticky-bg: #1E1B4B;
    --sticky-text: #C084FC;
    --word-pending: #6B7280;
    --word-correct: #38BDF8;
    --word-error: #F43F5E;
    --kb-bg: linear-gradient(180deg, #1E293B, #0F172A); 
    --key-bg: linear-gradient(180deg, #334155, #1E293B); 
    --key-border: #475569; 
    --key-text: #E9D5FF; 
    --key-shadow: #020617;
    --para-bg: linear-gradient(180deg, rgba(30,41,59,0.95), rgba(15,23,42,0.95));
    background-color: #030712; 
    background-image: linear-gradient(rgba(192, 132, 252, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(192, 132, 252, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    color: var(--text-main); 
}

/* 4. Emerald Forest Theme */
body.theme-forest { 
    --bg-paper: #022C22; 
    --card-bg: #064E3B; 
    --card-border: #047857;
    --card-shadow: 0 12px 32px rgba(2, 44, 34, 0.4);
    --primary-purple: #34D399; 
    --text-main: #ECFDF5; 
    --text-muted: #A7F3D0; 
    --input-bg: #065F46;
    --input-border: #059669;
    --pill-bg: rgba(255, 255, 255, 0.08);
    --pill-active-bg: linear-gradient(135deg, #10B981, #047857);
    --pill-active-text: #FFFFFF;
    --sticky-bg: #065F46;
    --sticky-text: #6EE7B7;
    --word-pending: #047857;
    --word-correct: #6EE7B7;
    --word-error: #F87171;
    --kb-bg: linear-gradient(180deg, #047857, #064E3B); 
    --key-bg: linear-gradient(180deg, #065F46, #047857); 
    --key-border: #059669; 
    --key-text: #ECFDF5; 
    --key-shadow: #022C22;
    --para-bg: linear-gradient(180deg, rgba(6,78,59,0.95), rgba(4,120,87,0.95));
    background-color: #022C22; 
    color: var(--text-main); 
}

/* 5. Deep Ocean Theme */
body.theme-ocean { 
    --bg-paper: #082F49; 
    --card-bg: #075985; 
    --card-border: #0284C7;
    --card-shadow: 0 12px 32px rgba(8, 47, 73, 0.4);
    --primary-purple: #38BDF8; 
    --text-main: #F0F9FF; 
    --text-muted: #BAE6FD; 
    --input-bg: #0369A1;
    --input-border: #0284C7;
    --pill-bg: rgba(255, 255, 255, 0.08);
    --pill-active-bg: linear-gradient(135deg, #0284C7, #0369A1);
    --pill-active-text: #FFFFFF;
    --sticky-bg: #0369A1;
    --sticky-text: #7DD3FC;
    --word-pending: #0284C7;
    --word-correct: #38BDF8;
    --word-error: #F87171;
    --kb-bg: linear-gradient(180deg, #0284C7, #075985); 
    --key-bg: linear-gradient(180deg, #0369A1, #0284C7); 
    --key-border: #38BDF8; 
    --key-text: #F0F9FF; 
    --key-shadow: #0C4A6E;
    --para-bg: linear-gradient(180deg, rgba(7,89,133,0.95), rgba(2,132,199,0.95));
    background-color: #082F49; 
    color: var(--text-main); 
}

/* ==========================================================================
   UNIVERSAL THEME HARMONIZATION RULES
   ========================================================================== */
body.theme-dark, body.theme-neon, body.theme-forest, body.theme-ocean {
    /* Inputs, Textareas & Selects */
    select, input[type="text"], input[type="email"], input[type="password"], textarea, .setting-select, .control-select, .select-box select, .typing-input-field {
        background-color: var(--input-bg) !important;
        border-color: var(--input-border) !important;
        color: var(--text-main) !important;
    }
    select option {
        background-color: var(--card-bg) !important;
        color: var(--text-main) !important;
    }
    
    /* Cards & Containers */
    .paper-card, .notebook-card, .sub-nav-card, .hero-card, .chart-card, .activity-card, .streak-card, .profile-card, .themes-main-card, .settings-main-card, .leaderboard-table-card, .custom-input-panel, .sparkline-card, .live-stats-bar {
        background-color: var(--card-bg) !important;
        border-color: var(--card-border) !important;
        color: var(--text-main) !important;
        box-shadow: var(--card-shadow) !important;
    }

    /* Navigation Header & Footer */
    .main-header, .main-footer {
        background: var(--card-bg) !important;
        border-color: var(--card-border) !important;
        color: var(--text-main) !important;
    }
    .nav-links .nav-item {
        color: var(--text-muted) !important;
    }
    .nav-links .nav-item:hover, .nav-links .nav-item.active {
        color: var(--primary-purple) !important;
        background: var(--pill-bg) !important;
    }

    /* Sub-menu items */
    .sub-menu .sub-item {
        color: var(--text-muted) !important;
    }
    .sub-menu .sub-item:hover {
        color: var(--text-main) !important;
        background: var(--pill-bg) !important;
    }
    .sub-menu .sub-item.active {
        background: var(--pill-active-bg) !important;
        color: var(--pill-active-text) !important;
    }

    /* Mode Pills & Control Tabs */
    .mode-pill, .leader-mode-tab, .filter-tab, .arena-goal-badge {
        background: var(--pill-bg) !important;
        color: var(--text-muted) !important;
        border: 1.5px solid var(--card-border) !important;
    }
    .mode-pill:hover, .leader-mode-tab:hover, .filter-tab:hover {
        color: var(--text-main) !important;
    }
    .mode-pill.active, .leader-mode-tab.active, .filter-tab.active {
        background: var(--pill-active-bg) !important;
        color: var(--pill-active-text) !important;
        border-color: transparent !important;
    }

    /* Sticky Notes */
    .sticky-note {
        background: var(--sticky-bg) !important;
        color: var(--sticky-text) !important;
        border: 1px solid var(--card-border) !important;
    }

    /* Dropdown Menus & Modals */
    .user-dropdown-menu, .modal-content, .paper-card.pro-modal-card {
        background: var(--card-bg) !important;
        border-color: var(--card-border) !important;
        color: var(--text-main) !important;
    }
    .dropdown-item {
        color: var(--text-main) !important;
    }
    .dropdown-item:hover {
        background: var(--pill-bg) !important;
    }

    /* Headings & Text */
    h1, h2, h3, h4, h5, h6, .page-title, .card-title, .hero-title, .username, .user-big-name, .setting-info h4 {
        color: var(--text-main) !important;
    }
    p, label, span:not(.badge-pro):not(.crown-icon), .setting-info p, .user-email-subtitle {
        color: var(--text-muted);
    }
    .setting-row label, .form-group label {
        color: var(--text-main) !important;
    }

    /* Passage Text & Arena */
    .paragraph-display-text, .test-passage-box {
        background: var(--para-bg) !important;
        border-color: var(--card-border) !important;
        color: var(--text-main) !important;
    }

    /* Table & Podiums */
    .leader-table th, .leader-table td {
        border-color: var(--card-border) !important;
        color: var(--text-main) !important;
    }
    .leader-table tr:hover {
        background: var(--pill-bg) !important;
    }
    .podium-card {
        background: var(--card-bg) !important;
        border-color: var(--card-border) !important;
        color: var(--text-main) !important;
    }

    /* Skeletons */
    .skeleton {
        background: rgba(255, 255, 255, 0.08) !important;
    }
}

/* ==========================================================================
   PAPER THEME — DOODLE NOTEBOOK ENHANCED DESIGN SYSTEM
   ========================================================================== */

/* 1. Enhanced Warm Paper & Notebook Background with Dot Grid Texture */
body.theme-paper { 
    --bg-paper: #FBF8F2; 
    --card-bg: #FFFFFF; 
    --card-border: #E8E2D2;
    --card-shadow: 4px 4px 0px #DDD6C6, 0 12px 24px -6px rgba(100, 70, 30, 0.06);
    --primary-purple: #6E44FF; 
    --primary-purple-hover: #5528EB;
    --text-main: #1E293B; 
    --text-muted: #64748B; 
    --input-bg: #FDFCF9;
    --input-border: #CBD5E1;
    --pill-bg: #F1ECE1;
    --pill-active-bg: linear-gradient(135deg, #6E44FF, #5B21B6);
    --pill-active-text: #FFFFFF;
    --sticky-bg: #FEF9C3;
    --sticky-text: #713F12;
    --word-pending: #94A3B8;
    --word-correct: #16A34A;
    --word-error: #DC2626;
    --kb-bg: linear-gradient(180deg, #F8F5EE, #EFE9DC); 
    --key-bg: linear-gradient(180deg, #FFFFFF, #FAF7F2); 
    --key-border: #D1C7B7; 
    --key-text: #1E293B; 
    --key-shadow: #B8AC99;
    --para-bg: #FFFEFB;
    background-color: #F8F4EB; 
    background-image: 
        radial-gradient(#D5CBB8 1.1px, transparent 1.1px),
        linear-gradient(90deg, rgba(239, 68, 68, 0.08) 60px, transparent 61px);
    background-size: 24px 24px, 100% 100%;
    color: var(--text-main); 
}

/* Paper-Specific Card Elevate with Hand-Drawn Edge */
body.theme-paper .paper-card {
    background-color: var(--card-bg) !important;
    border: 2px solid var(--card-border) !important;
    border-radius: 16px !important;
    box-shadow: 4px 4px 0px #DDD6C6, 0 10px 25px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative;
}

body.theme-paper .paper-card:hover {
    transform: translateY(-3px) scale(1.002) !important;
    box-shadow: 6px 6px 0px #6E44FF25, 0 16px 30px rgba(110, 68, 255, 0.08) !important;
    border-color: #C7BCA8 !important;
}

/* Realistic Notebook Ruled Paper Display for Typing Tests */
body.theme-paper .paragraph-display-text,
body.theme-paper .test-passage-box {
    background-color: #FFFEFB !important;
    background-image: 
        linear-gradient(90deg, transparent 48px, #F87171 49px, transparent 51px),
        repeating-linear-gradient(transparent, transparent 35px, #E2E8F0 36px, #E2E8F0 37px) !important;
    background-size: 100% 100%, 100% 37px !important;
    border: 2px solid #E2D8C3 !important;
    border-radius: 16px !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03), 3px 3px 0px #E5DEC9 !important;
    padding-left: 62px !important;
}

/* Notebook Spiral / Ring Binder Accent on Header & Wrapper */
.notebook-wrapper {
    position: relative;
}

/* Washi Tape Stickers (Yellow, Pastel Pink, Mint & Lavender) */
.washi-tape {
    position: absolute;
    height: 24px;
    width: 90px;
    top: -12px;
    left: 24px;
    background: rgba(254, 240, 138, 0.85);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(253, 224, 71, 0.4) 5px, rgba(253, 224, 71, 0.4) 10px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    border-left: 3px dashed rgba(234, 179, 8, 0.4);
    border-right: 3px dashed rgba(234, 179, 8, 0.4);
    transform: rotate(-3deg);
    z-index: 10;
    pointer-events: none;
}
.washi-tape.washi-pink {
    background: rgba(251, 207, 232, 0.85);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(244, 114, 182, 0.3) 5px, rgba(244, 114, 182, 0.3) 10px);
    border-color: rgba(236, 72, 153, 0.4);
    right: 24px;
    left: auto;
    transform: rotate(4deg);
}
.washi-tape.washi-mint {
    background: rgba(187, 247, 208, 0.85);
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(74, 222, 128, 0.3) 5px, rgba(74, 222, 128, 0.3) 10px);
    border-color: rgba(34, 197, 94, 0.4);
    transform: rotate(2deg);
}
.washi-tape.washi-purple {
    background: rgba(233, 213, 255, 0.85);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(192, 132, 252, 0.3) 5px, rgba(192, 132, 252, 0.3) 10px);
    border-color: rgba(168, 85, 247, 0.4);
    transform: rotate(-2deg);
}

/* Hand-Drawn Ink Stamp Badges (For Highscores & Achievements) */
.ink-stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 12px;
    border: 2.5px dashed #EF4444;
    border-radius: 8px;
    color: #DC2626;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: rotate(-4deg);
    mask-image: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.95));
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.3);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ink-stamp:hover {
    transform: rotate(0deg) scale(1.08);
}
.ink-stamp.stamp-passed {
    border-color: #16A34A;
    color: #15803D;
    transform: rotate(3deg);
}
.ink-stamp.stamp-gold {
    border-color: #D97706;
    color: #B45309;
    transform: rotate(-2deg);
}

/* Hand-Drawn Highlighter Marker Effect */
.highlighter-doodle {
    background: linear-gradient(104deg, rgba(254, 240, 138, 0) 0.9%, rgba(254, 240, 138, 0.85) 2.4%, rgba(254, 240, 138, 0.55) 98.3%);
    padding: 2px 6px;
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
.highlighter-doodle.highlight-mint {
    background: linear-gradient(104deg, rgba(187, 247, 208, 0) 0.9%, rgba(187, 247, 208, 0.85) 2.4%, rgba(187, 247, 208, 0.55) 98.3%);
}
.highlighter-doodle.highlight-pink {
    background: linear-gradient(104deg, rgba(251, 207, 232, 0) 0.9%, rgba(251, 207, 232, 0.85) 2.4%, rgba(251, 207, 232, 0.55) 98.3%);
}

/* Hand-Drawn Sketch Button (Organic Tactile Feel) */
body.theme-paper .btn-primary {
    background: linear-gradient(135deg, #6E44FF, #5B21B6) !important;
    border: 2px solid #4314A7 !important;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px !important;
    box-shadow: 3px 3px 0px #311075 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

body.theme-paper .btn-primary:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 5px 5px 0px #311075 !important;
}

body.theme-paper .btn-primary:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 1px 1px 0px #311075 !important;
}

/* Sketch Underline Animation on Links */
.doodle-link {
    position: relative;
    text-decoration: none;
    color: var(--primary-purple);
    font-weight: 600;
}
.doodle-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: -2px;
    left: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath d='M0,2 Q5,0 10,2 T20,2' fill='none' stroke='%236E44FF' stroke-width='2'/%3E%3C/svg%3E") repeat-x;
    background-size: 20px 4px;
    opacity: 0.7;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.doodle-link:hover::after {
    opacity: 1;
    transform: translateY(-1px);
}

/* Playful Doodle Badge Stickers */
.doodle-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #FEF3C7;
    border: 1.5px solid #F59E0B;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    color: #92400E;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 2px 2px 0px #D97706;
    transform: rotate(-1deg);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.doodle-badge:hover {
    transform: rotate(2deg) scale(1.05);
}

/* Sticky Note Aesthetic with 3D Tilt & Pin */
body.theme-paper .sticky-note {
    background: #FEF9C3 !important;
    color: #713F12 !important;
    border: 1px solid #FEF08A !important;
    border-radius: 4px 4px 12px 4px !important;
    box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.08), 2px 3px 0px #EAB30830 !important;
    transform: rotate(-1deg);
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
body.theme-paper .sticky-note:hover {
    transform: rotate(0deg) translateY(-2px) !important;
    box-shadow: 4px 8px 18px rgba(0, 0, 0, 0.12), 3px 4px 0px #EAB30850 !important;
}

/* Sketchy Nav Item Active Pill */
body.theme-paper .nav-item.active {
    background: linear-gradient(135deg, #6E44FF, #5B21B6) !important;
    box-shadow: 3px 3px 0px #3B168C !important;
    border-radius: 12px !important;
}