/* ============================================
       THEME CSS VARIABLES
    ============================================ */
    :root {
        --transition-theme: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* --- DARK THEME (default) --- */
    [data-theme="dark"] {
        --bg-page:        #07080f;
        --bg-card:        rgba(255,255,255,0.05);
        --bg-card-solid:  #0f1120;
        --bg-card-hover:  rgba(255,255,255,0.10);
        --bg-input:       rgba(255,255,255,0.06);
        --bg-sidebar:     #0b0d1a;
        --bg-glass:       rgba(10,12,28,0.75);
        --bg-badge:       rgba(99,102,241,0.15);
        --border-card:    rgba(255,255,255,0.09);
        --border-input:   rgba(255,255,255,0.15);
        --border-accent:  rgba(99,102,241,0.4);
        --text-primary:   #f1f5f9;
        --text-secondary: rgba(196,181,253,0.85);
        --text-muted:     rgba(196,181,253,0.5);
        --text-heading:   #ffffff;
        --shadow-card:    0 8px 32px rgba(0,0,0,0.5);
        --shadow-glow:    0 0 40px rgba(99,102,241,0.2);
        --overlay-hero:   linear-gradient(135deg,#0a0b1e 0%,#1a1040 35%,#312e81 65%,#4c1d95 100%);
        --console-bg:     linear-gradient(135deg,#07080f 0%,#0d0f20 50%,#07080f 100%);
        --stat-bg:        rgba(99,102,241,0.12);
        --tag-bg:         rgba(99,102,241,0.18);
        --shimmer-base:   rgba(255,255,255,0.03);
        --shimmer-shine:  rgba(255,255,255,0.07);
        --icon-filter:    none;
        --hero-text:      rgba(196,181,253,0.85);
        --nav-hover:      #fbbf24;
        --footer-bg:      linear-gradient(135deg,#0a0b1e 0%,#1a1040 50%,#0a0b1e 100%);
        --theme-icon:     "🌙";
    }

    /* --- LIGHT THEME --- */
    [data-theme="light"] {
        --bg-page:        #f0f4ff;
        --bg-card:        rgba(255,255,255,0.92);
        --bg-card-solid:  #ffffff;
        --bg-card-hover:  rgba(255,255,255,1);
        --bg-input:       rgba(255,255,255,0.9);
        --bg-sidebar:     #f8faff;
        --bg-glass:       rgba(255,255,255,0.82);
        --bg-badge:       rgba(99,102,241,0.1);
        --border-card:    rgba(99,102,241,0.12);
        --border-input:   rgba(99,102,241,0.25);
        --border-accent:  rgba(99,102,241,0.35);
        --text-primary:   #1e1b4b;
        --text-secondary: #4c1d95;
        --text-muted:     #6b7280;
        --text-heading:   #1e1b4b;
        --shadow-card:    0 4px 24px rgba(99,102,241,0.1), 0 1px 4px rgba(0,0,0,0.06);
        --shadow-glow:    0 0 30px rgba(99,102,241,0.12);
        --overlay-hero:   linear-gradient(135deg,#1e1b4b 0%,#312e81 35%,#4338ca 65%,#6d28d9 100%);
        --console-bg:     linear-gradient(135deg,#eef2ff 0%,#e0e7ff 50%,#ede9fe 100%);
        --stat-bg:        rgba(99,102,241,0.08);
        --tag-bg:         rgba(99,102,241,0.1);
        --shimmer-base:   rgba(99,102,241,0.04);
        --shimmer-shine:  rgba(99,102,241,0.08);
        --icon-filter:    brightness(0.85);
        --hero-text:      rgba(224,231,255,0.95);
        --nav-hover:      #fbbf24;
        --footer-bg:      linear-gradient(135deg,#1e1b4b 0%,#312e81 50%,#1e1b4b 100%);
        --theme-icon:     "☀️";
    }

    /* ============================================
       GLOBAL BASE WITH THEME TRANSITIONS
    ============================================ */
    *, *::before, *::after {
        transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.3s ease;
    }

    body { background: var(--bg-page); }
    html { scroll-behavior: smooth; }

    /* ============================================
       ENTRANCE & CONTINUOUS ANIMATIONS
    ============================================ */
    @keyframes fade-in       { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
    @keyframes fadeInUp      { from { opacity:0; transform:translateY(55px); } to { opacity:1; transform:translateY(0); } }
    @keyframes fadeInLeft    { from { opacity:0; transform:translateX(-70px);} to { opacity:1; transform:translateX(0); } }
    @keyframes fadeInRight   { from { opacity:0; transform:translateX(70px); } to { opacity:1; transform:translateX(0); } }
    @keyframes zoomIn        { from { opacity:0; transform:scale(0.7);       } to { opacity:1; transform:scale(1);       } }
    @keyframes slideInDown   { from { opacity:0; transform:translateY(-35px);} to { opacity:1; transform:translateY(0); } }
    @keyframes spin          { to { transform:rotate(360deg);  } }
    @keyframes spinReverse   { to { transform:rotate(-360deg); } }
    @keyframes spinSlow      { to { transform:rotate(360deg);  } }
    @keyframes pulse         { 0%,100% { opacity:1; transform:scale(1);    } 50% { opacity:0.5; transform:scale(0.96); } }
    @keyframes float         { 0%,100% { transform:translateY(0px) rotate(0deg); } 33% { transform:translateY(-18px) rotate(3deg); } 66% { transform:translateY(-9px) rotate(-2deg); } }
    @keyframes floatGentle   { 0%,100% { transform:translateY(0px);  } 50% { transform:translateY(-12px); } }
    @keyframes gradientShift { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
    @keyframes textGradAnim  { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
    @keyframes glowPulse     { 0%,100% { box-shadow:0 0 20px rgba(99,102,241,.45); } 50% { box-shadow:0 0 55px rgba(99,102,241,1), 0 0 110px rgba(99,102,241,.35); } }
    @keyframes shimmer       { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
    @keyframes morphShape    { 0%,100% { border-radius:60% 40% 30% 70%/60% 30% 70% 40%; } 25% { border-radius:30% 60% 70% 40%/50% 60% 30% 60%; } 50% { border-radius:50% 40% 60% 50%/40% 50% 60% 50%; } 75% { border-radius:70% 30% 50% 50%/30% 70% 50% 50%; } }
    @keyframes particleRise  { 0% { transform:translateY(0) scale(1); opacity:.8; } 100% { transform:translateY(-110vh) scale(.3); opacity:0; } }
    @keyframes starTwinkle   { 0%,100% { opacity:.15; transform:scale(.7); } 50% { opacity:1; transform:scale(1.3); } }
    @keyframes blink         { 0%,100% { opacity:1; } 50% { opacity:0; } }
    @keyframes progressFill  { from { width:0%; } to { width:100%; } }
    @keyframes orbitDot      { 0% { transform:rotate(0deg) translateX(70px) rotate(0deg); } 100% { transform:rotate(360deg) translateX(70px) rotate(-360deg); } }
    @keyframes bounceIn      { 0% { opacity:0; transform:scale(.3); } 40% { opacity:1; transform:scale(1.08); } 60% { transform:scale(.95); } 80% { transform:scale(1.03); } 100% { opacity:1; transform:scale(1); } }
    @keyframes rocketLaunch  { 0% { transform:translateX(-50%) translateY(20px) rotate(-45deg); opacity:1; } 25% { transform:translateX(-50%) translateY(-20vh) rotate(-45deg); opacity:1; } 65% { transform:translateX(-50%) translateY(-120vh) rotate(-45deg); opacity:.9; } 100% { transform:translateX(-50%) translateY(-210vh) rotate(-45deg); opacity:0; } }
    @keyframes launchOverlay { 0% { opacity:0; } 5% { opacity:1; } 95% { opacity:1; } 100% { opacity:0; } }
    @keyframes launchFlash   { 0%,100% { opacity:0; } 50% { opacity:.55; } }
    @keyframes launchText    { 0% { opacity:0; transform:translate(-50%,-40%); } 15% { opacity:1; transform:translate(-50%,-50%); } 85% { opacity:1; transform:translate(-50%,-50%); } 100% { opacity:0; transform:translate(-50%,-60%); } }
    @keyframes exhaustGlow   { 0%,100% { transform:scaleX(1); opacity:.8; } 50% { transform:scaleX(1.5); opacity:1; } }
    @keyframes rpgGlow       { 0%,100% { filter:drop-shadow(0 0 35px rgba(139,92,246,.6)); } 50% { filter:drop-shadow(0 0 80px rgba(139,92,246,1)) drop-shadow(0 0 140px rgba(167,139,250,.5)); } }
    @keyframes slideUp       { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
    @keyframes cardEntrance  { from { opacity:0; transform:translateY(20px) scale(0.95); } to { opacity:1; transform:translateY(0) scale(1); } }
    @keyframes ripple        { 0% { transform:scale(0); opacity:1; } 100% { transform:scale(4); opacity:0; } }
    @keyframes sparkle       { 0%,100% { opacity:0; transform:scale(0) rotate(0deg); } 50% { opacity:1; transform:scale(1) rotate(180deg); } }
    @keyframes numberCount   { from { transform:translateY(100%); opacity:0; } to { transform:translateY(0); opacity:1; } }
    @keyframes waveFlow      { 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } }
    @keyframes uploadPulse   { 0%,100% { border-color:rgba(99,102,241,0.4); background:rgba(99,102,241,0.05); } 50% { border-color:rgba(99,102,241,0.8); background:rgba(99,102,241,0.1); } }
    @keyframes float-subtle  { 0%,100% { transform:translateY(0px); } 50% { transform:translateY(-6px); } }
    @keyframes consoleEntrance { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
    @keyframes statGlow      { 0%,100% { box-shadow: 0 4px 20px rgba(99,102,241,0.2); } 50% { box-shadow: 0 4px 40px rgba(99,102,241,0.5); } }
    @keyframes progressBar   { from { width:0; } to { width:var(--target-w, 70%); } }
    @keyframes iconBounce    { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
    @keyframes tagSlideIn    { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:translateX(0); } }
    @keyframes themeSpin     { 0% { transform:rotate(0deg) scale(1); } 50% { transform:rotate(180deg) scale(0.7); } 100% { transform:rotate(360deg) scale(1); } }

    /* ============================================
       LIGHT MODE — reduce heavy glow animations
    ============================================ */
    [data-theme="light"] .hero-blob { opacity: 0.6; }
    [data-theme="light"] .particle { opacity: 0.5 !important; }
    [data-theme="light"] .star { background: rgba(99,102,241,0.4) !important; }
    [data-theme="light"] .glowPulse { animation: none !important; box-shadow: 0 4px 16px rgba(99,102,241,0.2) !important; }
    [data-theme="light"] .text-glow-white { text-shadow: none; }
    [data-theme="light"] .text-glow-gold  { text-shadow: 0 0 12px rgba(245,158,11,0.4); }

    /* ============================================
       SCROLL REVEAL
    ============================================ */
    .reveal       { opacity:0; transform:translateY(55px); transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
    .reveal-left  { opacity:0; transform:translateX(-70px); transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
    .reveal-right { opacity:0; transform:translateX(70px);  transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
    .reveal-scale { opacity:0; transform:scale(.82);        transition:opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); }
    .reveal.visible, .reveal-left.visible, .reveal-right.visible, .reveal-scale.visible { opacity:1; transform:none; }
    .delay-100 { transition-delay:.10s; } .delay-200 { transition-delay:.20s; }
    .delay-300 { transition-delay:.30s; } .delay-400 { transition-delay:.40s; }
    .delay-500 { transition-delay:.50s; } .delay-600 { transition-delay:.60s; }

    /* ============================================
       LOADING SCREEN
    ============================================ */
    .loading-ring   { animation:spin        2s   linear   infinite; }
    .loading-ring-2 { animation:spinReverse 1.6s linear   infinite; }
    .loading-ring-3 { animation:spinSlow    3.5s linear   infinite; }
    .loading-logo   { animation:bounceIn 1s ease-out, pulse 2.5s ease-in-out infinite 1.2s; }
    .loading-dot    { display:inline-block; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.8); animation:pulse 1.4s ease-in-out infinite; }
    .loading-dot:nth-child(2) { animation-delay:.25s; }
    .loading-dot:nth-child(3) { animation-delay:.5s;  }
    .loading-progress { height:100%; background:linear-gradient(90deg,#6366f1,#a855f7,#ec4899,#f59e0b,#6366f1); background-size:300% 100%; animation:shimmer 1.8s infinite, progressFill 2.8s ease-out both; border-radius:4px; }

    /* ============================================
       TYPOGRAPHY
    ============================================ */
    .animate-fade-in   { animation:fadeInUp 1s ease-out both; }
    .gradient-text     { background:linear-gradient(135deg,#6366f1 0%,#a855f7 50%,#ec4899 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .animated-gradient-text { background:linear-gradient(270deg,#6366f1,#a855f7,#ec4899,#f59e0b,#10b981,#6366f1); background-size:400% 400%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:textGradAnim 5s ease infinite; }
    .text-glow-white   { text-shadow:0 0 35px rgba(255,255,255,.65), 0 0 80px rgba(255,255,255,.2); }
    .text-glow-gold    { text-shadow:0 0 25px rgba(251,191,36,.8),   0 0 60px rgba(251,191,36,.3); }
    .hero-headline     { animation:fadeInUp 1s ease-out .2s  both; }
    .hero-subtext      { animation:fadeInUp 1s ease-out .45s both; }
    .hero-cta          { animation:fadeInUp 1s ease-out .7s  both; }
    .hero-stats        { animation:fadeInUp 1s ease-out .95s both; }
    .section-heading   { position:relative; display:inline-block; padding-bottom:14px; }
    .section-heading::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:70px; height:4px; background:linear-gradient(90deg,#6366f1,#a855f7,#ec4899); border-radius:4px; box-shadow:0 0 18px rgba(99,102,241,.65); }

    /* ============================================
       HERO BACKGROUND
    ============================================ */
    .hero-blob { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; animation:morphShape 12s ease-in-out infinite; mix-blend-mode:screen; }
    .hero-grid { position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0); background-size:40px 40px; }
    .particle  { position:absolute; border-radius:50%; pointer-events:none; animation:particleRise linear infinite; }
    .star      { position:absolute; border-radius:50%; background:white;   pointer-events:none; animation:starTwinkle ease-in-out infinite; }

    /* ============================================
       CARD EFFECTS
    ============================================ */
    .glow-card { transition:all .4s cubic-bezier(.175,.885,.32,1.275); position:relative; overflow:hidden; }
    .glow-card:hover { box-shadow:0 30px 70px rgba(0,0,0,.16), 0 0 45px rgba(99,102,241,.22); transform:translateY(-13px) scale(1.025); }
    .glow-card::after { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent); transition:left .65s ease; pointer-events:none; }
    .glow-card:hover::after { left:150%; }

    .feature-card { transition:all .4s cubic-bezier(.175,.885,.32,1.275); position:relative; overflow:hidden; background:rgba(255,255,255,.05); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.1); }
    .feature-card:hover { transform:translateY(-12px) scale(1.04); background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); box-shadow:0 30px 60px rgba(0,0,0,.35), 0 0 40px rgba(255,255,255,.08); }
    .feature-card .icon-wrap { display:inline-block; transition:transform .4s ease; }
    .feature-card:hover .icon-wrap { animation:float 1.8s ease-in-out infinite; }

    .boardgame-card { transition:all .45s cubic-bezier(.175,.885,.32,1.275); position:relative; }
    .boardgame-card:hover { transform:translateY(-6px); box-shadow:0 40px 80px rgba(0,0,0,.4), 0 0 60px rgba(168,85,247,.25); }

    /* ============================================
       BUTTON EFFECTS
    ============================================ */
    .btn-glow { position:relative; overflow:hidden; transition:all .3s ease; isolation:isolate; }
    .btn-glow:hover { box-shadow:0 0 35px rgba(234,179,8,.7), 0 0 70px rgba(234,179,8,.25), 0 12px 35px rgba(0,0,0,.35); transform:translateY(-4px) scale(1.06); }
    .btn-glow::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); width:350px; height:350px; border-radius:50%; background:rgba(255,255,255,.2); transition:transform .6s ease, opacity .6s ease; opacity:0; }
    .btn-glow:hover::before { transform:translate(-50%,-50%) scale(1); opacity:1; }
    .btn-outline-glow { position:relative; overflow:hidden; transition:all .3s ease; }
    .btn-outline-glow:hover { background:rgba(255,255,255,1); color:#1e1b4b; transform:translateY(-3px); box-shadow:0 0 25px rgba(255,255,255,.4), 0 10px 25px rgba(0,0,0,.25); }
    .btn-purple-glow { transition:all .3s ease; }
    .btn-purple-glow:hover { box-shadow:0 0 30px rgba(168,85,247,.65), 0 10px 30px rgba(0,0,0,.3); transform:translateY(-3px) scale(1.04); }

    /* ============================================
       CONSOLE COMPONENTS — SHARED
    ============================================ */
    .console-card {
        background: var(--bg-card);
        border: 1px solid var(--border-card);
        backdrop-filter: blur(20px);
        box-shadow: var(--shadow-card);
        border-radius: 20px;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .console-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-card), var(--shadow-glow);
        border-color: var(--border-accent);
    }

    .stat-card {
        background: var(--stat-bg);
        border: 1px solid var(--border-card);
        border-radius: 16px;
        padding: 20px;
        transition: all 0.35s ease;
        animation: consoleEntrance 0.6s ease both;
    }
    .stat-card:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow: var(--shadow-glow);
        animation: statGlow 2s ease infinite;
    }

    .class-btn {
        background: var(--bg-card);
        border: 1px solid var(--border-card);
        border-radius: 14px;
        padding: 14px 16px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        color: var(--text-primary);
        font-weight: 500;
        text-align: left;
        position: relative;
        overflow: hidden;
    }
    .class-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg,#6366f1,#a855f7);
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: inherit;
    }
    .class-btn span { position: relative; z-index: 1; }
    .class-btn:hover { transform: translateY(-3px) scale(1.02); border-color: rgba(99,102,241,0.5); }
    .class-btn:hover::before { opacity: 0.15; }
    .class-btn.active { background: linear-gradient(135deg,#6366f1,#a855f7); border-color: transparent; color: white; }
    .class-btn.active::before { opacity: 0; }

    .console-input {
        background: var(--bg-input);
        border: 1px solid var(--border-input);
        border-radius: 12px;
        padding: 12px 16px;
        color: var(--text-primary);
        width: 100%;
        outline: none;
        font-size: 0.95rem;
        transition: all 0.3s ease;
    }
    .console-input:focus {
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99,102,241,0.2), 0 0 20px rgba(99,102,241,0.1);
    }
    .console-input::placeholder { color: var(--text-muted); }

    .console-select {
        background: var(--bg-input);
        border: 1px solid var(--border-input);
        border-radius: 12px;
        padding: 12px 16px;
        color: var(--text-primary);
        width: 100%;
        outline: none;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .console-select option { background: var(--bg-card-solid); }
    .console-select:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.2); }

    .console-label {
        color: var(--text-secondary);
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        margin-bottom: 8px;
        display: block;
    }

    .upload-zone {
        border: 2px dashed var(--border-accent);
        border-radius: 16px;
        padding: 40px 24px;
        text-align: center;
        cursor: pointer;
        animation: uploadPulse 3s ease infinite;
        transition: all 0.3s ease;
        background: var(--bg-badge);
    }
    .upload-zone:hover {
        animation: none;
        border-color: #6366f1;
        background: rgba(99,102,241,0.1);
        transform: scale(1.01);
    }

    .material-card {
        background: var(--bg-card);
        border: 1px solid var(--border-card);
        border-radius: 16px;
        padding: 20px;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
        overflow: hidden;
        animation: cardEntrance 0.5s ease both;
    }
    .material-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 3px;
        background: linear-gradient(90deg,#6366f1,#a855f7,#ec4899);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
    }
    .material-card:hover::before { transform: scaleX(1); }
    .material-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-card), var(--shadow-glow);
        border-color: var(--border-accent);
    }

    .console-btn-primary {
        background: linear-gradient(135deg,#6366f1,#a855f7);
        color: white;
        border: none;
        border-radius: 12px;
        padding: 12px 24px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
        overflow: hidden;
    }
    .console-btn-primary::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); width:200px; height:200px; background:rgba(255,255,255,0.2); border-radius:50%; transition:transform 0.5s ease,opacity 0.5s ease; opacity:0; }
    .console-btn-primary:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 8px 30px rgba(99,102,241,0.5); }
    .console-btn-primary:hover::after { transform:translate(-50%,-50%) scale(1); opacity:1; }
    .console-btn-primary:disabled { opacity:0.5; cursor:not-allowed; transform:none; }

    .console-btn-danger {
        background: linear-gradient(135deg,#ef4444,#dc2626);
        color: white;
        border: none;
        border-radius: 10px;
        padding: 10px 18px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .console-btn-danger:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(239,68,68,0.4); }

    .console-btn-view {
        background: linear-gradient(135deg,#0ea5e9,#0284c7);
        color: white;
        border: none;
        border-radius: 10px;
        padding: 10px 18px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
    }
    .console-btn-view:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(14,165,233,0.4); }

    .console-btn-green {
        background: linear-gradient(135deg,#10b981,#059669);
        color: white;
        border: none;
        border-radius: 12px;
        padding: 12px 24px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .console-btn-green:hover { transform:translateY(-3px); box-shadow:0 8px 25px rgba(16,185,129,0.45); }

    .console-btn-outline {
        background: transparent;
        color: var(--text-secondary);
        border: 1px solid var(--border-card);
        border-radius: 12px;
        padding: 12px 24px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .console-btn-outline:hover { border-color: #6366f1; color: #6366f1; background: rgba(99,102,241,0.05); }

    .filter-pill {
        padding: 8px 18px;
        border-radius: 50px;
        font-weight: 600;
        font-size: 0.85rem;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        border: 1px solid var(--border-card);
        background: var(--bg-card);
        color: var(--text-muted);
        position: relative;
        overflow: hidden;
    }
    .filter-pill:hover { transform:translateY(-2px); border-color: rgba(99,102,241,0.4); color: var(--text-primary); }
    .filter-pill.active { background: linear-gradient(135deg,#6366f1,#a855f7); color: white; border-color: transparent; box-shadow: 0 4px 20px rgba(99,102,241,0.4); }

    .console-section-title {
        color: var(--text-heading);
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: -0.02em;
    }

    .console-text { color: var(--text-primary); }
    .console-text-muted { color: var(--text-muted); }
    .console-text-secondary { color: var(--text-secondary); }

    .progress-track {
        height: 6px;
        background: var(--shimmer-base);
        border-radius: 10px;
        overflow: hidden;
    }
    .progress-fill {
        height: 100%;
        background: linear-gradient(90deg,#6366f1,#a855f7);
        border-radius: 10px;
        animation: progressBar 1.5s ease both;
    }

    .badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.05em;
    }
    .badge-purple { background: rgba(99,102,241,0.15); color: #a78bfa; border: 1px solid rgba(99,102,241,0.25); }
    .badge-green  { background: rgba(16,185,129,0.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.25); }
    .badge-amber  { background: rgba(245,158,11,0.15); color: #fde68a; border: 1px solid rgba(245,158,11,0.25); }
    .badge-pink   { background: rgba(236,72,153,0.15); color: #f9a8d4; border: 1px solid rgba(236,72,153,0.25); }
    .badge-blue   { background: rgba(14,165,233,0.15); color: #7dd3fc; border: 1px solid rgba(14,165,233,0.25); }

    [data-theme="light"] .badge-purple { background: rgba(99,102,241,0.1); color: #4f46e5; }
    [data-theme="light"] .badge-green  { background: rgba(16,185,129,0.1); color: #059669; }
    [data-theme="light"] .badge-amber  { background: rgba(245,158,11,0.1); color: #d97706; }
    [data-theme="light"] .badge-pink   { background: rgba(236,72,153,0.1); color: #db2777; }
    [data-theme="light"] .badge-blue   { background: rgba(14,165,233,0.1); color: #0284c7; }

    /* ============================================
       THEME TOGGLE BUTTON
    ============================================ */
    .theme-toggle {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.2);
        background: rgba(255,255,255,0.1);
        backdrop-filter: blur(12px);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
        overflow: hidden;
    }
    .theme-toggle:hover {
        transform: translateY(-2px) scale(1.1);
        background: rgba(255,255,255,0.2);
        box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    }
    .theme-toggle .icon { transition: all 0.4s ease; display: block; }
    .theme-toggle.spinning .icon { animation: themeSpin 0.4s ease forwards; }

    /* ============================================
       HEADER & NAV
    ============================================ */
    header { transition: all .4s ease; }
    header.header-scrolled { backdrop-filter:blur(28px) saturate(200%); background:rgba(9,12,30,.88) !important; box-shadow:0 4px 50px rgba(0,0,0,.55); }
    .nav-link { position:relative; transition:color .3s; padding-bottom:4px; }
    .nav-link::after { content:''; position:absolute; bottom:-2px; left:50%; transform:translateX(-50%); width:0; height:2px; background:linear-gradient(90deg,#fbbf24,#f59e0b); border-radius:2px; transition:width .3s cubic-bezier(.16,1,.3,1); box-shadow:0 0 12px rgba(251,191,36,.75); }
    .nav-link:hover::after { width:80%; }

    /* ============================================
       FORM EFFECTS (public pages)
    ============================================ */
    .form-input { transition:all .3s ease; }
    .form-input:focus { box-shadow:0 0 0 3px rgba(99,102,241,.28), 0 0 22px rgba(99,102,241,.12) !important; border-color:#6366f1 !important; }

    /* ============================================
       MISC UTILITIES
    ============================================ */
    .animate-float       { animation:float 4s ease-in-out infinite; }
    .animate-float-d1    { animation:float 4s ease-in-out .7s  infinite; }
    .animate-float-d2    { animation:float 4s ease-in-out 1.4s infinite; }
    .animate-float-d3    { animation:float 4s ease-in-out 2.1s infinite; }
    .animate-gradient-bg { background-size:300% 300%; animation:gradientShift 8s ease infinite; }
    .animate-glow        { animation:glowPulse 2.5s ease-in-out infinite; }
    .rpg-logo-glow       { filter:drop-shadow(0 0 45px rgba(139,92,246,.65)); animation:rpgGlow 2.5s ease-in-out infinite; height:auto; max-width:100%; }
    .glass { backdrop-filter:blur(16px) saturate(180%); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); }
    .animate-float-subtle { animation: float-subtle 3s ease-in-out infinite; }

    [data-theme="light"] .feature-card { background: rgba(255,255,255,0.7); border-color: rgba(99,102,241,0.15); }
    [data-theme="light"] .feature-card:hover { background: rgba(255,255,255,0.95); }

    @media (max-width:768px) {
        .glow-card:hover    { transform:translateY(-6px) scale(1.01); }
        .feature-card:hover { transform:translateY(-6px) scale(1.02); }
        .hero-blob          { filter:blur(50px); }
    }

    /* scrollbar style */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg-page); }
    ::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.4); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.7); }