/* ============================================================
   SPIDER-MAN THEME — data-app-theme="spiderman"
   Classic web-slinger: vibrant Spider-Man red integrated with
   iconic superhero cobalt blue, web silver, and gold accents
   ============================================================ */

[data-app-theme="spiderman"] {
    /* Brand Design Tokens */
    --Primary: #DC2626;           /* Spider-Man red */
    --Primary_rgba: 220, 38, 38;
    --Primary_Dark: #991B1B;
    --Primary_Dark_rgba: 153, 27, 27;
    --Secondary: #0055D4;         /* Spider-Man hero blue */
    --Secondary_rgba: 0, 85, 212;
    --Secondary_Light: #2563EB;
    --Secondary_Dark: #0A2560;
    --Tertiary: #E2E8F0;          /* Web silver */
    --Tertiary_rgba: 226, 232, 240;
    --Quaternary: #FFD700;        /* Gold accent */
    --Quaternary_rgba: 255, 215, 0;

    /* Theme Specific Tokens */
    --theme-glow: 0 0 25px rgba(220, 38, 38, 0.45);
    --theme-blue-glow: 0 0 25px rgba(0, 85, 212, 0.50);
    --theme-web-glow: 0 0 20px rgba(226, 232, 240, 0.35);
    --theme-border: 1px solid rgba(0, 85, 212, 0.35);
    --theme-glass-bg: rgba(8, 14, 32, 0.82);
    --theme-card-bg: rgba(10, 16, 38, 0.88);
    --theme-text-primary: #f5f0f0;
    --theme-text-secondary: #93c5fd;
}

/* Light / Base Mode for Spider-Man (Dark Web City Night with Red & Blue Glow) */
[data-app-theme="spiderman"] body {
    background:
        radial-gradient(ellipse at 12% 18%, rgba(220, 38, 38, 0.30) 0%, transparent 50%),
        radial-gradient(ellipse at 88% 82%, rgba(0, 85, 212, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 15%, rgba(0, 85, 212, 0.22) 0%, transparent 50%),
        radial-gradient(ellipse at 15% 85%, rgba(220, 38, 38, 0.20) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(226, 232, 240, 0.05) 0%, transparent 60%),
        linear-gradient(160deg, #060914 0%, #0d1428 45%, #150914 100%) !important;
    background-attachment: fixed !important;
    color: var(--theme-text-primary) !important;
    position: relative;
}

[data-app-theme="spiderman"] main,
[data-app-theme="spiderman"] .page {
    background: transparent !important;
    color: var(--theme-text-primary) !important;
    position: relative;
    z-index: 2;
}

/* Dark Mode + Spider-Man (Deep Void City Red & Blue) */
[data-app-theme="spiderman"][data-theme="dark"] body {
    background:
        radial-gradient(ellipse at 12% 18%, rgba(220, 38, 38, 0.38) 0%, transparent 55%),
        radial-gradient(ellipse at 88% 82%, rgba(0, 85, 212, 0.42) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 15%, rgba(0, 85, 212, 0.28) 0%, transparent 50%),
        radial-gradient(circle at 50% 40%, rgba(153, 27, 27, 0.18) 0%, transparent 50%),
        linear-gradient(165deg, #03060d 0%, #080d1e 45%, #0c040b 100%) !important;
    background-attachment: fixed !important;
    color: var(--theme-text-primary) !important;
    position: relative;
}

[data-app-theme="spiderman"][data-theme="dark"] main,
[data-app-theme="spiderman"][data-theme="dark"] .page {
    background: transparent !important;
    color: var(--theme-text-primary) !important;
    position: relative;
    z-index: 2;
}

/* ============================================================
   SPIDER-MAN THEME — SPIDER SPIKES & WEB SYSTEM
   ============================================================ */
@keyframes spiderSenseSpikes {
    0%, 100% {
        opacity: 0.70;
        transform: scale(1);
    }
    50% {
        opacity: 0.95;
        transform: scale(1.02);
    }
}

@keyframes spiderWebGlow {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(220, 38, 38, 0.4)) drop-shadow(0 0 10px rgba(0, 85, 212, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 9px rgba(220, 38, 38, 0.65)) drop-shadow(0 0 18px rgba(0, 85, 212, 0.55));
    }
}

/* Spider Spikes Layer 1: Geometric Angular Web & Suit Lattice */
[data-app-theme="spiderman"] body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    background-image:
        /* Sharp diagonal spider web spike lines */
        repeating-linear-gradient(60deg, transparent, transparent 58px, rgba(0, 85, 212, 0.18) 59px, transparent 61px),
        repeating-linear-gradient(-60deg, transparent, transparent 58px, rgba(220, 38, 38, 0.18) 59px, transparent 61px),
        repeating-linear-gradient(0deg, transparent, transparent 58px, rgba(255, 255, 255, 0.08) 59px, transparent 61px),
        /* Concentric sharp spider web spike octagons */
        radial-gradient(circle at 18% 22%, transparent 0%, transparent 60px, rgba(220, 38, 38, 0.22) 61px, transparent 63px, transparent 120px, rgba(220, 38, 38, 0.16) 121px, transparent 123px, transparent 180px, rgba(220, 38, 38, 0.10) 181px, transparent 183px),
        radial-gradient(circle at 82% 78%, transparent 0%, transparent 70px, rgba(0, 85, 212, 0.24) 71px, transparent 73px, transparent 140px, rgba(0, 85, 212, 0.17) 141px, transparent 143px, transparent 210px, rgba(0, 85, 212, 0.11) 211px, transparent 213px);
    background-size: 100% 100%;
    animation: spiderSenseSpikes 8s ease-in-out infinite;
}

/* Spider Spikes Layer 2: Radial Spider-Sense Spikes & Corner Web Bursts */
[data-app-theme="spiderman"] body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    background-image:
        /* Spider-Sense sharp radial spikes radiating from key focal points */
        repeating-conic-gradient(from 0deg at 18% 22%, transparent 0deg, transparent 12deg, rgba(220, 38, 38, 0.20) 13deg, transparent 15deg),
        repeating-conic-gradient(from 15deg at 82% 78%, transparent 0deg, transparent 12deg, rgba(0, 85, 212, 0.22) 13deg, transparent 15deg),
        /* Center ambient spider-sense spike burst */
        repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg, transparent 20deg, rgba(220, 38, 38, 0.10) 21deg, transparent 24deg, transparent 40deg, rgba(0, 85, 212, 0.10) 41deg, transparent 44deg);
    animation: spiderWebGlow 6s ease-in-out infinite alternate;
}

/* Top Navigation Bar */
[data-app-theme="spiderman"] .top-row {
    background: rgba(6, 10, 24, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 2px solid rgba(220, 38, 38, 0.5) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 85, 212, 0.3) inset !important;
}

/* Sidebar Drawer */
[data-app-theme="spiderman"] .sidebar {
    background: linear-gradient(180deg, #070b1a 0%, #0c1635 50%, #060914 100%) !important;
    border-left: 1px solid rgba(0, 85, 212, 0.35) !important;
    box-shadow: -4px 0 25px rgba(0, 0, 0, 0.6), -2px 0 15px rgba(220, 38, 38, 0.15) !important;
}

/* Logo handling (always white on dark header) */
[data-app-theme="spiderman"] .nav-logo,
[data-app-theme="spiderman"] .responsive-logo {
    content: url('/assets/images/NurzWhite.png') !important;
}

/* Cards & Surface Containers */
[data-app-theme="spiderman"] .mud-card:not(.course-details),
[data-app-theme="spiderman"] .rounded-card:not(.course-details),
[data-app-theme="spiderman"] .rounded-card-100:not(.course-details) {
    background: var(--theme-card-bg) !important;
    border: 1px solid rgba(0, 85, 212, 0.32) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65), 0 0 16px rgba(220, 38, 38, 0.15) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: var(--theme-text-primary) !important;
}

/* Primary Action Buttons - Spider-Man Red & Hero Blue dynamic fusion */
[data-app-theme="spiderman"] .mud-button-filled-primary,
[data-app-theme="spiderman"] .button-primary,
[data-app-theme="spiderman"] .bg-primary-100 {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 40%, #0055D4 100%) !important;
    border: 1px solid rgba(220, 38, 38, 0.6) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.45), 0 0 10px rgba(0, 85, 212, 0.35) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[data-app-theme="spiderman"] .mud-button-filled-primary:hover,
[data-app-theme="spiderman"] .button-primary:hover,
[data-app-theme="spiderman"] .bg-primary-100:hover {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 35%, #2563EB 100%) !important;
    box-shadow: 0 6px 22px rgba(220, 38, 38, 0.60), 0 0 16px rgba(0, 85, 212, 0.50) !important;
    transform: translateY(-1px) !important;
}

/* Course Details Cards - Matching Default Theme Dimensions & Artwork Placement */
[data-app-theme="spiderman"] .rounded-card.course-details {
    position: relative;
    overflow: hidden;
    background-color: rgba(18, 12, 38, 0.88) !important;
    background-repeat: no-repeat !important;
    background-position: right top !important;
    background-size: auto 75% !important;
    border: 1.5px solid rgba(0, 85, 212, 0.5) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 16px rgba(220, 38, 38, 0.25) !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    height: 140px !important;
    display: flex !important;
    flex-direction: column !important;
}

@media(min-width: 768px) {
    [data-app-theme="spiderman"] .course-card-link,
    [data-app-theme="spiderman"] .course-grid > a,
    [data-app-theme="spiderman"] .course-grid > .mud-link {
        width: 220px !important;
        display: flex !important;
    }
    [data-app-theme="spiderman"] .course-card-badge,
    [data-app-theme="spiderman"] .course-card-badge.mud-badge-root {
        width: 220px !important;
    }
    [data-app-theme="spiderman"] .rounded-card.course-details {
        width: 220px !important;
        height: 140px !important;
    }
}

@media(max-width: 767.98px) {
    [data-app-theme="spiderman"] .rounded-card.course-details {
        width: 100% !important;
        max-width: 100% !important;
        height: 150px !important;
    }
}

[data-app-theme="spiderman"] .rounded-card.course-details:hover {
    border-color: #EF4444 !important;
    background-color: rgba(28, 16, 52, 0.95) !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.7), 0 0 24px rgba(220, 38, 38, 0.55), 0 0 14px rgba(0, 85, 212, 0.5) !important;
    transform: translateY(-4px) !important;
}

/* Remove dark overlay completely so artwork images are bright and clear */
[data-app-theme="spiderman"] .rounded-card.course-details::after {
    display: none !important;
}

[data-app-theme="spiderman"] .rounded-card.course-details > * {
    position: relative;
    z-index: 1;
}

[data-app-theme="spiderman"] .rounded-card.course-details.sessions {
    background-image: url('/assets/images/course-details-sessions.png') !important;
    background-repeat: no-repeat !important;
    background-position: right top !important;
    background-size: auto 75% !important;
}
[data-app-theme="spiderman"] .rounded-card.course-details.assignments {
    background-image: url('/assets/images/course-details-assignments.png') !important;
    background-repeat: no-repeat !important;
    background-position: right top !important;
    background-size: auto 75% !important;
}
[data-app-theme="spiderman"] .rounded-card.course-details.exams {
    background-image: url('/assets/images/course-details-exams.png') !important;
    background-repeat: no-repeat !important;
    background-position: right top !important;
    background-size: auto 75% !important;
}
[data-app-theme="spiderman"] .rounded-card.course-details.quizzes {
    background-image: url('/assets/images/course-details-quizes.png') !important;
    background-repeat: no-repeat !important;
    background-position: right top !important;
    background-size: auto 75% !important;
}
[data-app-theme="spiderman"] .rounded-card.course-details.live-sessions {
    background-image: url('/assets/images/course-details-live-sessions.png') !important;
    background-repeat: no-repeat !important;
    background-position: right top !important;
    background-size: auto 75% !important;
}
[data-app-theme="spiderman"] .rounded-card.course-details.announcements {
    background-image: url('/assets/images/announcements.png') !important;
    background-repeat: no-repeat !important;
    background-position: right top !important;
    background-size: auto 75% !important;
}
[data-app-theme="spiderman"] .rounded-card.course-details.mark-scheme {
    background-image: url('/assets/images/course-details-mark-scheme.jpg') !important;
    background-size: contain !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
}
[data-app-theme="spiderman"] .rounded-card.course-details.notes {
    background-image: url('/assets/images/course-details-Notes.png') !important;
    background-size: contain !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
}
[data-app-theme="spiderman"] .rounded-card.course-details.store {
    background-image: url('/assets/images/trophy.png') !important;
    background-size: contain !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
}

[data-app-theme="spiderman"] .rounded-card.course-details h4,
[data-app-theme="spiderman"] .rounded-card.course-details h5,
[data-app-theme="spiderman"] .rounded-card.course-details h6,
[data-app-theme="spiderman"] .rounded-card.course-details .mud-typography {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.9), 0 0 2px #000000 !important;
}

/* Course Header Info Pills - Red & Blue contrast */
[data-app-theme="spiderman"] .course-info-pill {
    background: rgba(0, 85, 212, 0.18) !important;
    border: 1px solid rgba(220, 38, 38, 0.48) !important;
    backdrop-filter: blur(8px) !important;
}
[data-app-theme="spiderman"] .course-info-pill-text {
    color: #93C5FD !important;
    font-weight: 700 !important;
    text-shadow: 0 0 8px rgba(0, 85, 212, 0.5) !important;
}
[data-app-theme="spiderman"] .course-info-pill .mud-icon-root {
    color: #EF4444 !important;
}

/* Sidebar & Scoring Board */
[data-app-theme="spiderman"] .sidebar h4,
[data-app-theme="spiderman"] .sidebar h5,
[data-app-theme="spiderman"] .sidebar .mud-typography { color: #f5f0f0 !important; }
[data-app-theme="spiderman"] .scoring-list-name { color: #f5f0f0 !important; font-weight: 600 !important; }
[data-app-theme="spiderman"] .scoring-list-order { color: #93c5fd !important; }
[data-app-theme="spiderman"] .scoring-list-item { border-bottom: 1px solid rgba(0, 85, 212, 0.25) !important; }

/* Score Podiums - Red, Blue & Gold */
[data-app-theme="spiderman"] .rounded-card.score-podium-1 {
    color: #FFD700 !important;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.30) 0%, rgba(0, 85, 212, 0.25) 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.55) !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.25) !important;
}
[data-app-theme="spiderman"] .rounded-card.score-podium-2 {
    color: #E2E8F0 !important;
    background: rgba(0, 85, 212, 0.20) !important;
    border: 1px solid rgba(0, 85, 212, 0.40) !important;
}
[data-app-theme="spiderman"] .rounded-card.score-podium-3 {
    color: #F87171 !important;
    background: rgba(220, 38, 38, 0.18) !important;
    border: 1px solid rgba(220, 38, 38, 0.35) !important;
}

/* Background Utility Classes */
[data-app-theme="spiderman"] .bg-primary-10 { background: rgba(220, 38, 38, 0.12) !important; }
[data-app-theme="spiderman"] .bg-primary-25 { background: rgba(220, 38, 38, 0.25) !important; }
[data-app-theme="spiderman"] .bg-primary-50 { background: rgba(220, 38, 38, 0.50) !important; }

/* Text Color Classes */
[data-app-theme="spiderman"] .text-gray-900, [data-app-theme="spiderman"] .text-gray-800, [data-app-theme="spiderman"] .text-gray-700 { color: var(--theme-text-primary) !important; }
[data-app-theme="spiderman"] .text-gray-600, [data-app-theme="spiderman"] .text-gray-500, [data-app-theme="spiderman"] .text-gray-400 { color: var(--theme-text-secondary) !important; }

/* Heading Typography */
[data-app-theme="spiderman"] h1, [data-app-theme="spiderman"] h2, [data-app-theme="spiderman"] h3, [data-app-theme="spiderman"] .theme-heading { letter-spacing: 0.02em; }

/* Store Hero Header */
[data-app-theme="spiderman"] .store-hero-header {
    background: linear-gradient(135deg, rgba(8, 12, 28, 0.90) 0%, rgba(24, 8, 18, 0.90) 100%) !important;
    border: 1px solid rgba(0, 85, 212, 0.40) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(220, 38, 38, 0.20) !important;
}
[data-app-theme="spiderman"] .store-hero-badge {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.25) 0%, rgba(0, 85, 212, 0.25) 100%) !important;
    border: 1px solid rgba(220, 38, 38, 0.55) !important;
}
[data-app-theme="spiderman"] .store-hero-badge-icon { color: #EF4444 !important; }
[data-app-theme="spiderman"] .store-hero-badge-text { color: #93C5FD !important; }
[data-app-theme="spiderman"] .store-hero-title {
    color: #FFFFFF !important;
    text-shadow: 0 2px 10px rgba(220, 38, 38, 0.55), 0 0 20px rgba(0, 85, 212, 0.35);
}
[data-app-theme="spiderman"] .store-hero-subtitle { color: #93c5fd !important; }

/* Store Wallet Card - Dual Red & Blue */
[data-app-theme="spiderman"] .store-wallet-card {
    background: linear-gradient(135deg, rgba(12, 18, 44, 0.94) 0%, rgba(36, 10, 24, 0.94) 100%) !important;
    border: 1px solid rgba(0, 85, 212, 0.50) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 16px rgba(220, 38, 38, 0.25), 0 0 20px rgba(0, 85, 212, 0.20) !important;
}
[data-app-theme="spiderman"] .store-wallet-label { color: #FFD700 !important; }
[data-app-theme="spiderman"] .wallet-number { color: #FFD700 !important; text-shadow: 0 0 12px rgba(255, 215, 0, 0.45); }
[data-app-theme="spiderman"] .wallet-currency { color: #FCD34D !important; }
[data-app-theme="spiderman"] .store-wallet-stats { color: #E2E8F0 !important; }
[data-app-theme="spiderman"] .store-expiry-notice { background: rgba(220, 38, 38, 0.18) !important; border-color: rgba(255, 215, 0, 0.40) !important; color: #FFD700 !important; }

/* Store Tabs */
[data-app-theme="spiderman"] .store-tabs .mud-tabs-tabbar { border-bottom-color: rgba(0, 85, 212, 0.35) !important; }
[data-app-theme="spiderman"] .store-tabs .mud-tab { color: #93c5fd !important; }
[data-app-theme="spiderman"] .store-tabs .mud-tab:hover { color: #FFFFFF !important; }
[data-app-theme="spiderman"] .store-tabs .mud-tab.mud-tab-active { color: #EF4444 !important; text-shadow: 0 0 10px rgba(220, 38, 38, 0.6); }
[data-app-theme="spiderman"] .store-tabs .mud-tab-slider { background: linear-gradient(90deg, #DC2626 0%, #0055D4 50%, #E2E8F0 100%) !important; height: 3px !important; }

/* Equipped Strip */
[data-app-theme="spiderman"] .equipped-rewards-strip {
    background: rgba(10, 16, 36, 0.82) !important;
    border: 1px solid rgba(0, 85, 212, 0.35) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
[data-app-theme="spiderman"] .equipped-label { color: #93c5fd !important; }
[data-app-theme="spiderman"] .equipped-badge {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(220, 38, 38, 0.40) !important;
    color: #F5F0F0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

/* Filter Chips */
[data-app-theme="spiderman"] .filter-chip {
    background: rgba(10, 16, 36, 0.88) !important;
    border: 1px solid rgba(0, 85, 212, 0.35) !important;
    color: #93C5FD !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
[data-app-theme="spiderman"] .filter-chip:hover {
    background: rgba(18, 28, 60, 0.92) !important;
    border-color: rgba(220, 38, 38, 0.65) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 14px rgba(0, 85, 212, 0.40) !important;
}
[data-app-theme="spiderman"] .filter-chip.active {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 40%, #0055D4 100%) !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.55), 0 0 12px rgba(0, 85, 212, 0.35) !important;
}

/* Store Cards */
[data-app-theme="spiderman"] .store-card {
    background: rgba(10, 16, 36, 0.88) !important;
    border: 1px solid rgba(0, 85, 212, 0.35) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(220, 38, 38, 0.15) !important;
    color: #f5f0f0 !important;
}
[data-app-theme="spiderman"] .store-card.affordable:hover {
    border-color: #EF4444 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 40px -4px rgba(0, 85, 212, 0.45), 0 0 24px rgba(220, 38, 38, 0.35) !important;
}
[data-app-theme="spiderman"] .store-card.unaffordable { opacity: 0.72 !important; }
[data-app-theme="spiderman"] .store-card-image-box {
    background: radial-gradient(circle at 35% 40%, rgba(220, 38, 38, 0.38) 0%, transparent 60%),
                radial-gradient(circle at 75% 65%, rgba(0, 85, 212, 0.38) 0%, transparent 60%),
                #070c1e !important;
    border-bottom: 1px solid rgba(0, 85, 212, 0.28) !important;
}
[data-app-theme="spiderman"] .store-card-title { color: #ffffff !important; }
[data-app-theme="spiderman"] .store-card-desc { color: #93c5fd !important; }
[data-app-theme="spiderman"] .store-card-price { background: rgba(255, 215, 0, 0.15) !important; border: 1px solid rgba(255, 215, 0, 0.48) !important; }
[data-app-theme="spiderman"] .store-card-price .price-val { color: #FFD700 !important; }

/* Store Modal */
[data-app-theme="spiderman"] .store-modal {
    background: #080d20 !important;
    border: 1px solid rgba(0, 85, 212, 0.50) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(220, 38, 38, 0.35) !important;
    color: #f5f0f0 !important;
}
[data-app-theme="spiderman"] .modal-header, [data-app-theme="spiderman"] .modal-item-summary {
    background: linear-gradient(135deg, rgba(10, 16, 38, 0.95) 0%, rgba(28, 10, 22, 0.95) 100%) !important;
    border-color: rgba(0, 85, 212, 0.35) !important;
}
[data-app-theme="spiderman"] .modal-title, [data-app-theme="spiderman"] .modal-item-title { color: #ffffff !important; }
[data-app-theme="spiderman"] .modal-item-desc { color: #93c5fd !important; }
[data-app-theme="spiderman"] .modal-cost-row { color: #f5f0f0 !important; }

/* Daily Streak Badge */
[data-app-theme="spiderman"] .streak-badge {
    background: linear-gradient(135deg, #DC2626 0%, #0055D4 100%) !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.5), 0 0 6px rgba(0, 85, 212, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Daily Streak Floating Widget - Spider-Man */
[data-app-theme="spiderman"] .streak-header-banner {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 45%, #1D4ED8 100%) !important;
}
[data-app-theme="spiderman"] .streak-minimized-pill {
    background: linear-gradient(135deg, #DC2626 0%, #1D4ED8 100%) !important;
    box-shadow: 0 10px 25px rgba(220, 38, 38, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}
[data-app-theme="spiderman"] .streak-floating-card {
    border-color: rgba(220, 38, 38, 0.4) !important;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.35), 0 0 25px rgba(220, 38, 38, 0.25) !important;
}
[data-app-theme="spiderman"] .streak-speech-bubble {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
}
[data-app-theme="spiderman"] .streak-speech-tail {
    background: #fee2e2 !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
}
[data-app-theme="spiderman"] .streak-speech-text {
    color: #991b1b !important;
}
[data-app-theme="spiderman"][data-theme="dark"] .streak-speech-text {
    color: #fca5a5 !important;
}
[data-app-theme="spiderman"][data-theme="dark"] .streak-speech-tail {
    background: #2a111a !important;
}
[data-app-theme="spiderman"] .streak-choice-btn.selected {
    border-color: #dc2626 !important;
    background: rgba(220, 38, 38, 0.14) !important;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.25) !important;
}
[data-app-theme="spiderman"] .streak-choice-btn.selected .streak-choice-badge {
    background: #dc2626 !important;
    color: #ffffff !important;
}
[data-app-theme="spiderman"] .streak-choice-btn.selected .streak-choice-text {
    color: #991b1b !important;
}
[data-app-theme="spiderman"][data-theme="dark"] .streak-choice-btn.selected .streak-choice-text {
    color: #fecaca !important;
}
[data-app-theme="spiderman"] .streak-textarea:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
}
[data-app-theme="spiderman"] .streak-submit-btn,
[data-app-theme="spiderman"] .streak-success-circle {
    background: linear-gradient(135deg, #DC2626 0%, #1D4ED8 100%) !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4) !important;
}
[data-app-theme="spiderman"] .streak-reward-pill {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: rgba(220, 38, 38, 0.25) !important;
    color: #991b1b !important;
}
[data-app-theme="spiderman"][data-theme="dark"] .streak-reward-pill {
    color: #fca5a5 !important;
}

/* ============================================================
   SPIDER-MAN THEME — STUDY NOTES PAGE & HIGH-CONTRAST UI
   ============================================================ */

/* Breadcrumbs: Crisp blue links and glowing vibrant red active item */
[data-app-theme="spiderman"] .mud-breadcrumbs {
    color: #cbd5e1 !important;
}
[data-app-theme="spiderman"] .mud-breadcrumbs-separator {
    color: rgba(226, 232, 240, 0.6) !important;
}
[data-app-theme="spiderman"] .mud-breadcrumb-item > a {
    color: #93c5fd !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}
[data-app-theme="spiderman"] .mud-breadcrumb-item > a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(0, 85, 212, 0.6) !important;
}
[data-app-theme="spiderman"] .mud-breadcrumb-item.mud-disabled > a {
    color: #f87171 !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(248, 113, 113, 0.5) !important;
}

/* Filter Chips: Distinct, readable on dark spider background */
[data-app-theme="spiderman"] .mud-chip {
    color: #e2e8f0 !important;
    font-weight: 600 !important;
}
[data-app-theme="spiderman"] .mud-chip .mud-chip-content {
    color: inherit !important;
}
[data-app-theme="spiderman"] .mud-chip-outlined {
    background: rgba(10, 16, 36, 0.85) !important;
    border: 1px solid rgba(0, 85, 212, 0.45) !important;
    color: #cbd5e1 !important;
    backdrop-filter: blur(8px) !important;
}
[data-app-theme="spiderman"] .mud-chip-outlined .mud-chip-content {
    color: #cbd5e1 !important;
}
[data-app-theme="spiderman"] .mud-chip-outlined:hover {
    background: rgba(20, 30, 65, 0.95) !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(0, 85, 212, 0.4) !important;
}
[data-app-theme="spiderman"] .mud-chip-outlined:hover .mud-chip-content {
    color: #ffffff !important;
}
[data-app-theme="spiderman"] .mud-chip-filled-primary {
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.5) !important;
}
[data-app-theme="spiderman"] .mud-chip-filled-success {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(5, 150, 105, 0.4) !important;
}
[data-app-theme="spiderman"] .mud-chip-filled-warning {
    background: linear-gradient(135deg, #D97706 0%, #B45309 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(217, 119, 6, 0.4) !important;
}

/* Balance Pill: Sleek Spider-Man dark gold accent */
[data-app-theme="spiderman"] .notes-balance-pill {
    background: linear-gradient(135deg, rgba(12, 18, 44, 0.94) 0%, rgba(36, 10, 24, 0.94) 100%) !important;
    border: 1px solid rgba(0, 85, 212, 0.45) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(255, 215, 0, 0.2) !important;
}
[data-app-theme="spiderman"] .notes-balance-label {
    color: #ffd700 !important;
}
[data-app-theme="spiderman"] .notes-balance-amount {
    color: #ffd700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4) !important;
}

/* Search Box: Dark themed with bright white input text and clear placeholder */
[data-app-theme="spiderman"] .notes-search-input,
[data-app-theme="spiderman"] .notes-search-box .mud-input-outlined {
    background: rgba(10, 16, 36, 0.85) !important;
    border-color: rgba(0, 85, 212, 0.45) !important;
}
[data-app-theme="spiderman"] .notes-search-box input {
    color: #ffffff !important;
}
[data-app-theme="spiderman"] .notes-search-box input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}
[data-app-theme="spiderman"] .notes-search-box .mud-icon-root {
    color: #93c5fd !important;
}

/* Study Notes Cards: Heroic Spider-Man dark glass with crystal clear text */
[data-app-theme="spiderman"] .note-card {
    background: rgba(10, 16, 38, 0.92) !important;
    border: 1.5px solid rgba(0, 85, 212, 0.38) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 14px rgba(220, 38, 38, 0.15) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    color: #ffffff !important;
}
[data-app-theme="spiderman"] .note-card:hover {
    border-color: #ef4444 !important;
    background: rgba(16, 24, 52, 0.96) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(220, 38, 38, 0.4), 0 0 14px rgba(0, 85, 212, 0.4) !important;
    transform: translateY(-3px) !important;
}
[data-app-theme="spiderman"] .note-card.note-unlocked {
    border-color: rgba(20, 184, 166, 0.5) !important;
}
[data-app-theme="spiderman"] .note-card.note-unlocked:hover {
    border-color: #14b8a6 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(20, 184, 166, 0.35) !important;
}
[data-app-theme="spiderman"] .note-card-banner {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.20) 0%, rgba(0, 85, 212, 0.25) 100%) !important;
    border-bottom: 1px solid rgba(0, 85, 212, 0.30) !important;
}
[data-app-theme="spiderman"] .note-card-icon {
    background: rgba(6, 10, 24, 0.85) !important;
    border: 1px solid rgba(220, 38, 38, 0.4) !important;
    color: #ef4444 !important;
    box-shadow: 0 0 14px rgba(220, 38, 38, 0.3) !important;
}
[data-app-theme="spiderman"] .note-card-title,
[data-app-theme="spiderman"] .note-card h3 {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}
[data-app-theme="spiderman"] .note-card-desc,
[data-app-theme="spiderman"] .note-card p {
    color: #cbd5e1 !important;
    line-height: 1.45 !important;
}
[data-app-theme="spiderman"] .note-card-footer {
    border-top: 1px solid rgba(0, 85, 212, 0.25) !important;
}
[data-app-theme="spiderman"] .notes-empty-state {
    background: rgba(10, 16, 38, 0.90) !important;
    border: 1px solid rgba(0, 85, 212, 0.35) !important;
}
[data-app-theme="spiderman"] .notes-empty-title {
    color: #ffffff !important;
}
[data-app-theme="spiderman"] .notes-empty-desc {
    color: #93c5fd !important;
}

/* Bulletproof safety fallback: ensure any element on a white background is dark and legible */
[data-app-theme="spiderman"] .bg-white .text-gray-900,
[data-app-theme="spiderman"] .bg-white .note-card-title,
[data-app-theme="spiderman"] .bg-white h1,
[data-app-theme="spiderman"] .bg-white h2,
[data-app-theme="spiderman"] .bg-white h3,
[data-app-theme="spiderman"] .bg-white h4 {
    color: #0f172a !important;
}
[data-app-theme="spiderman"] .bg-white .text-gray-500,
[data-app-theme="spiderman"] .bg-white .note-card-desc,
[data-app-theme="spiderman"] .bg-white p {
    color: #475569 !important;
}