/* ============================================================================ MLO ARCADE — FULL REDESIGN STYLESHEET Design Philosophy:Premium fintech meets clean study app Font:Satoshi (from Fontshare) Palette:Arctic Frost — icy blues, silver, mint accents Borders:Thin (1px), subtle, no heavy glows Shadows:Soft, minimal — no neon arcade effects ============================================================================ */@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,600,700,900&display=swap');/* ============================================================================ CSS CUSTOM PROPERTIES (Design Tokens) — ARCTIC FROST ============================================================================ */:root{--font-primary:'Satoshi', system-ui, -apple-system, sans-serif;--bg-base:#0b0f1a;--bg-card:rgba(140,180,255,0.03);--bg-card-hover:rgba(140,180,255,0.06);--bg-elevated:#141929;--border-subtle:rgba(140,180,255,0.08);--border-accent:rgba(126,180,255,0.15);--border-accent-hover:rgba(126,180,255,0.3);--text-primary:#eef2ff;--text-secondary:rgba(238,242,255,0.6);--text-tertiary:rgba(238,242,255,0.35);--text-muted:rgba(238,242,255,0.2);--accent-cyan:#7eb4ff;--accent-green:#6ee7b7;--accent-gold:#e2c57b;--accent-orange:#fb923c;--accent-red:#f87171;--accent-yellow:#fbbf24;--gradient-primary:linear-gradient(90deg, #7eb4ff, #a8d4ff);--gradient-card:linear-gradient(160deg, rgba(126,180,255,0.06), rgba(110,231,183,0.04), transparent);--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-pill:100px;--shadow-card:0 2px 8px rgba(0,0,0,0.25);--shadow-elevated:0 4px 16px rgba(0,0,0,0.35);--transition-fast:0.15s ease;--transition-normal:0.25s ease;--transition-smooth:0.35s cubic-bezier(0.4, 0, 0.2, 1)}/* ============================================================================ GLOBAL RESETS & BASE ============================================================================ */body{font-family:var(--font-primary) !important;background:#0b0f1a;color:#eef2ff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{font-family:inherit}h1, h2, h3, h4{font-family:var(--font-primary) !important;letter-spacing:-0.3px}/* ============================================================================ ANIMATIONS ============================================================================ */@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes ringFill{from{stroke-dashoffset:var(--ring-circumference)}to{stroke-dashoffset:var(--ring-target)}}@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}/* ============================================================================ TOP BAR / HEADER ============================================================================ */.logo{font-family:var(--font-primary) !important;font-weight:800 !important;letter-spacing:2.5px !important;text-shadow:none !important}/* ============================================================================ BOTTOM NAVIGATION ============================================================================ */.bottom-nav{border-top:1px solid var(--border-accent) !important;box-shadow:0 -2px 12px rgba(0,0,0,0.3) !important;background:rgba(10,10,26,0.95) !important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.bottom-nav-tab{font-family:var(--font-primary) !important;font-weight:600;font-size:10px !important;letter-spacing:0.3px;transition:color var(--transition-fast)}.bottom-nav-tab svg{stroke-width:1.5 !important;transition:all var(--transition-fast)}.bottom-nav-tab.active svg{filter:none !important;color:var(--accent-cyan)}/* Focus mode nav — warm analog */body.focus-mode .bottom-nav{background:#ece6da !important;border-top-color:#d4cdbf !important;box-shadow:0 -1px 3px rgba(0,0,0,0.06) !important}/* ============================================================================ MODE GRID (Practice & Test Screens) ============================================================================ */.mode-grid{gap:10px !important}.mode-card{background:var(--bg-card) !important;border:1px solid var(--border-subtle) !important;border-radius:var(--radius-lg) !important;padding:22px 16px !important;transition:all var(--transition-normal) !important;box-shadow:none !important}.mode-card:hover{background:var(--bg-card-hover) !important;border-color:var(--border-accent-hover) !important;box-shadow:none !important;transform:translateY(-1px) !important}.mode-card:active{transform:scale(0.98) !important;opacity:0.95 !important}.mode-card-icon{font-size:28px;margin-bottom:10px !important;line-height:1}.mode-card-name{font-family:var(--font-primary) !important;font-size:14px !important;font-weight:700 !important;letter-spacing:-0.2px}.mode-card-desc{font-size:11px !important;color:var(--text-tertiary) !important;line-height:1.5 !important}.mode-card-time{font-size:10px !important;color:var(--text-muted) !important;margin-top:8px !important}/* Locked mode cards */.mode-card.locked{opacity:0.35 !important;filter:none !important}.mode-card-unlock-hint{font-size:10px !important;color:var(--text-muted) !important;font-style:normal !important;letter-spacing:0.3px}/* ============================================================================ BACK BUTTON ============================================================================ */.mode-back-btn{border:1px solid var(--border-subtle) !important;border-radius:var(--radius-sm) !important;color:var(--text-tertiary) !important;font-family:var(--font-primary) !important;font-size:12px !important;font-weight:500 !important;padding:10px 16px !important;transition:all var(--transition-fast) !important}.mode-back-btn:hover{border-color:var(--border-accent) !important;color:var(--accent-cyan) !important}/* ============================================================================ QUESTION CARDS ============================================================================ */.question-card{background:var(--bg-card) !important;border:1px solid var(--border-subtle) !important;border-radius:var(--radius-xl) !important;box-shadow:var(--shadow-card) !important;padding:28px 22px !important}.question-text{font-family:var(--font-primary) !important;font-size:16px !important;font-weight:500 !important;line-height:1.65 !important;color:var(--text-primary) !important;letter-spacing:-0.1px}/* ============================================================================ ANSWER BUTTONS ============================================================================ */.answer-btn{font-family:var(--font-primary) !important;background:var(--bg-card) !important;border:1px solid var(--border-subtle) !important;border-radius:var(--radius-md) !important;padding:16px 18px !important;font-size:14px !important;font-weight:500 !important;line-height:1.5 !important;color:var(--text-primary) !important;transition:all var(--transition-fast) !important;box-shadow:none !important}.answer-btn:hover{background:var(--bg-card-hover) !important;border-color:var(--border-accent) !important;box-shadow:none !important;transform:none !important}.answer-btn.correct,.answer-btn[style*="border-color:#6ee7b7"],.answer-btn[style*="border-color:#6ee7b7"]{background:rgba(110,231,183,0.08) !important;border-color:rgba(110,231,183,0.4) !important;box-shadow:none !important}.answer-btn.wrong,.answer-btn[style*="border-color:#f87171"],.answer-btn[style*="border-color:#f87171"]{background:rgba(248,113,113,0.08) !important;border-color:rgba(248,113,113,0.4) !important;box-shadow:none !important}/* ============================================================================ PRIMARY & SECONDARY BUTTONS ============================================================================ */.btn-primary{font-family:var(--font-primary) !important;background:var(--gradient-primary) !important;border:none !important;border-radius:var(--radius-md) !important;font-weight:700 !important;letter-spacing:0.3px !important;box-shadow:0 4px 16px rgba(126,180,255,0.15) !important;transition:all var(--transition-normal) !important}.btn-primary:hover{box-shadow:0 4px 20px rgba(126,180,255,0.25) !important;transform:translateY(-1px) !important}.btn-secondary{font-family:var(--font-primary) !important;background:var(--bg-card) !important;border:1px solid var(--border-accent) !important;border-radius:var(--radius-md) !important;font-weight:600 !important;color:var(--text-primary) !important;transition:all var(--transition-normal) !important}.btn-secondary:hover{background:var(--bg-card-hover) !important;border-color:var(--border-accent-hover) !important}/* ============================================================================ RESULTS SCREENS ============================================================================ */.results-screen{animation:fadeUp 0.4s ease both}.results-title{font-family:var(--font-primary) !important;font-weight:800 !important;letter-spacing:-0.5px !important;text-shadow:none !important}.results-stat{font-family:var(--font-primary) !important}.game-over-title{font-family:var(--font-primary) !important;font-weight:800 !important;letter-spacing:-0.5px !important}/* Star rating */.results-screen .star-rating,.results-screen [style*="font-size:36px"]{letter-spacing:4px}/* ============================================================================ EXPLANATION BLOCKS ============================================================================ */.explanation{background:var(--bg-card) !important;border:1px solid var(--border-subtle) !important;border-radius:var(--radius-md) !important;padding:18px !important;font-family:var(--font-primary) !important;font-size:14px !important;line-height:1.65 !important;color:var(--text-secondary) !important;animation:fadeIn 0.3s ease both}/* ============================================================================ TIMER DISPLAYS ============================================================================ */.timer{font-family:var(--font-primary) !important;font-weight:700 !important;letter-spacing:1px}.survival-timer{font-family:'Satoshi', monospace !important;font-weight:700 !important}/* ============================================================================ FLASHCARDS ============================================================================ */.flashcard{font-family:var(--font-primary) !important;background:var(--bg-card) !important;border:1px solid var(--border-subtle) !important;border-radius:var(--radius-xl) !important;font-size:16px !important;font-weight:500 !important;line-height:1.6 !important;box-shadow:var(--shadow-card) !important}/* ============================================================================ MATCHING / DEFINITION DUEL ============================================================================ */.match-card{font-family:var(--font-primary) !important;background:var(--bg-card) !important;border:1px solid var(--border-subtle) !important;border-radius:var(--radius-md) !important;font-weight:500 !important;transition:all var(--transition-fast) !important}.duel-term{font-family:var(--font-primary) !important;background:var(--gradient-card) !important;border:1px solid var(--border-accent) !important;border-radius:var(--radius-lg) !important;box-shadow:none !important;font-weight:700 !important}.duel-option{font-family:var(--font-primary) !important;background:var(--bg-card) !important;border:1px solid var(--border-subtle) !important;border-radius:var(--radius-md) !important;padding:16px 18px !important;font-weight:500 !important;transition:all var(--transition-fast) !important}.duel-option:hover{border-color:var(--border-accent) !important;background:var(--bg-card-hover) !important;transform:none !important;box-shadow:none !important}.duel-option.correct{border-color:rgba(110,231,183,0.4) !important;background:rgba(110,231,183,0.08) !important;box-shadow:none !important}.duel-option.wrong{border-color:rgba(248,113,113,0.4) !important;background:rgba(248,113,113,0.08) !important;box-shadow:none !important}/* Progress dots */.duel-dot{border:1.5px solid rgba(255,255,255,0.15) !important;background:transparent !important}.duel-dot.correct{background:var(--accent-green) !important;border-color:var(--accent-green) !important;box-shadow:none !important}.duel-dot.wrong{background:var(--accent-red) !important;border-color:var(--accent-red) !important;box-shadow:none !important}.duel-dot.current{border-color:var(--accent-cyan) !important;box-shadow:none !important}/* ============================================================================ CALCULATOR ============================================================================ */.calc-toggle{background:var(--gradient-primary) !important;box-shadow:0 4px 16px rgba(126,180,255,0.2) !important;font-family:var(--font-primary) !important}.calc-panel{background:var(--bg-elevated) !important;border:1px solid var(--border-accent) !important;border-radius:var(--radius-lg) !important;box-shadow:var(--shadow-elevated) !important}.calc-display{font-family:'Satoshi', monospace !important;border:1px solid var(--border-subtle) !important;border-radius:var(--radius-sm) !important}.calc-btn{font-family:var(--font-primary) !important;background:var(--bg-card) !important;border:1px solid var(--border-subtle) !important;border-radius:var(--radius-sm) !important;transition:all var(--transition-fast) !important}.calc-btn:hover{background:var(--bg-card-hover) !important;border-color:var(--border-accent) !important}.calc-btn.eq{background:var(--gradient-primary) !important}/* ============================================================================ REVIEW CARDS ============================================================================ */.review-card{background:var(--bg-card) !important;border:1px solid var(--border-subtle) !important;border-radius:var(--radius-md) !important}.review-card-header{font-family:var(--font-primary) !important;font-weight:500 !important}.review-card-header.correct-header{border-left:3px solid var(--accent-green) !important}.review-card-header.wrong-header{border-left:3px solid var(--accent-red) !important;background:rgba(248,113,113,0.03) !important}/* ============================================================================ CATEGORY MASTERY BARS ============================================================================ */.mastery-bar-bg{background:rgba(255,255,255,0.04) !important;border-radius:4px !important;height:8px !important}.mastery-bar-fill{border-radius:4px !important}.mastery-row{border-bottom:1px solid var(--border-subtle) !important;padding:10px 0 !important}.mastery-label{font-family:var(--font-primary) !important;font-weight:600 !important;font-size:12px !important}.mastery-pct{font-family:var(--font-primary) !important;font-weight:700 !important}/* ============================================================================ ONBOARDING ============================================================================ */.onboarding-overlay{background:var(--bg-base) !important}.ob-logo{font-family:var(--font-primary) !important;font-weight:900 !important;letter-spacing:3px !important;animation:fadeIn 0.8s ease both !important;text-shadow:none !important}.ob-cta{font-family:var(--font-primary) !important;background:var(--gradient-primary) !important;border-radius:var(--radius-md) !important;font-weight:700 !important}.onboarding-dot{border:1.5px solid var(--accent-cyan) !important;background:transparent !important}.onboarding-dot.active{background:var(--accent-cyan) !important;box-shadow:none !important}.onboarding-dot.done{background:var(--accent-green) !important;border-color:var(--accent-green) !important}/* ============================================================================ BANNERS (Returning Student, Streak Risk, Drills) ============================================================================ */.returning-banner{background:var(--bg-card) !important;border:1px solid var(--border-accent) !important;border-radius:var(--radius-lg) !important}.returning-banner-action button{background:var(--gradient-primary) !important;border-radius:var(--radius-sm) !important;box-shadow:none !important}.streak-risk-banner{background:rgba(251,191,36,0.04) !important;border:1px solid rgba(251,191,36,0.2) !important;border-radius:var(--radius-lg) !important}.drills-banner{background:var(--bg-card) !important;border:1px solid rgba(251,191,36,0.15) !important;border-radius:var(--radius-lg) !important;transition:all var(--transition-normal) !important}.drills-banner:hover{border-color:rgba(251,191,36,0.3) !important;box-shadow:none !important;transform:translateY(-1px) !important}/* ============================================================================ EXAM MODE ============================================================================ */.exam-mode-active .question-card{border-color:var(--border-subtle) !important;box-shadow:var(--shadow-card) !important;background:var(--bg-card) !important}.exam-mode-active .timer{background:rgba(126,180,255,0.04) !important;border-radius:var(--radius-sm) !important;font-family:var(--font-primary) !important}/* Exam navigator */.exam-nav-bar{background:rgba(10,10,26,0.95) !important;backdrop-filter:blur(8px);border-bottom:1px solid var(--border-subtle) !important}.exam-nav-btn{border:1px solid rgba(255,255,255,0.1) !important;border-radius:4px !important;font-family:var(--font-primary) !important;font-weight:600 !important;transition:all var(--transition-fast) !important}.exam-nav-btn.current{border-color:var(--accent-cyan) !important;background:rgba(126,180,255,0.12) !important}.exam-nav-btn.answered::after{box-shadow:none !important}/* ============================================================================ LEADERBOARD ============================================================================ */.lb-mode-tab.active{background:var(--gradient-primary) !important;border-color:var(--accent-cyan) !important}.lb-row{font-family:var(--font-primary) !important;border-bottom:1px solid var(--border-subtle) !important}.lb-row.me{background:rgba(126,180,255,0.04) !important;border-left:3px solid var(--accent-cyan) !important}.lb-rank{font-family:var(--font-primary) !important;font-weight:700 !important}.lb-score{font-family:var(--font-primary) !important;font-weight:700 !important}/* ============================================================================ SHARE CARD ============================================================================ */.share-card{font-family:var(--font-primary) !important;border:1px solid var(--border-accent) !important;border-radius:var(--radius-xl) !important;box-shadow:var(--shadow-elevated) !important}.share-card-logo{font-family:var(--font-primary) !important;font-weight:900 !important;letter-spacing:3px !important}/* ============================================================================ PASS CELEBRATION ============================================================================ */.pass-celebration{background:rgba(10,10,26,0.97) !important}.pass-title{font-family:var(--font-primary) !important;font-weight:800 !important;text-shadow:none !important}.pass-score{font-family:var(--font-primary) !important;font-weight:800 !important}/* ============================================================================ TOAST & OVERLAY NOTIFICATIONS ============================================================================ */.unlock-toast{font-family:var(--font-primary) !important;background:var(--bg-elevated) !important;border:1px solid var(--border-accent) !important;border-radius:var(--radius-md) !important;box-shadow:var(--shadow-elevated) !important;font-weight:600 !important}.unlock-overlay{background:rgba(10,10,26,0.95) !important}.unlock-name{font-family:var(--font-primary) !important;font-weight:800 !important;animation:none !important}/* ============================================================================ PERSONAL BEST BANNER ============================================================================ */.pb-banner{font-family:var(--font-primary) !important;background:var(--gradient-primary) !important;border-radius:0 0 var(--radius-md) var(--radius-md) !important;box-shadow:0 4px 16px rgba(126,180,255,0.3) !important;letter-spacing:0.5px !important}/* ============================================================================ GAME OVER ENHANCEMENTS ============================================================================ */.go-xp-earned{font-family:var(--font-primary) !important;font-weight:700 !important}.go-percentile{font-family:var(--font-primary) !important;background:var(--bg-card) !important;border:1px solid var(--border-accent) !important;border-radius:var(--radius-pill) !important;font-weight:600 !important}/* ============================================================================ KEYBOARD HELP ============================================================================ */.kb-help-card{font-family:var(--font-primary) !important;background:var(--bg-elevated) !important;border:1px solid var(--border-accent) !important;border-radius:var(--radius-lg) !important}.kb-help-key{font-family:var(--font-primary) !important;background:rgba(126,180,255,0.08) !important;border:1px solid rgba(126,180,255,0.2) !important}/* ============================================================================ DIFFICULTY BADGES ============================================================================ */.difficulty-badge{font-family:var(--font-primary) !important;font-weight:700 !important;border-radius:4px !important;letter-spacing:0.5px !important}/* ============================================================================ COMBO MILESTONES (subtle glow, no heavy text-shadow) ============================================================================ */.combo-milestone-5{text-shadow:none !important}.combo-milestone-10{text-shadow:none !important}.combo-milestone-15{text-shadow:none !important}.combo-milestone-25{text-shadow:none !important}/* ============================================================================ REINFORCEMENT TOGGLE ============================================================================ */.reinforce-toggle-btn{background:var(--bg-card) !important;border:1px solid var(--border-subtle) !important;border-radius:6px !important}.reinforce-menu{background:var(--bg-elevated) !important;border:1px solid var(--border-subtle) !important;border-radius:var(--radius-sm) !important;box-shadow:var(--shadow-elevated) !important}.reinforce-menu-item{font-family:var(--font-primary) !important}/* ============================================================================ AD SLOTS (Arctic Frost styled) ============================================================================ */.ad-banner-slot{font-family:var(--font-primary) !important}.ad-banner-slot ins{border-radius:var(--radius-sm) !important;overflow:hidden}.ad-interstitial{position:fixed !important;top:0;left:0;right:0;bottom:0;z-index:9999 !important;background:rgba(11,15,26,0.97) !important;backdrop-filter:blur(12px) !important;-webkit-backdrop-filter:blur(12px) !important;display:flex !important;align-items:center !important;justify-content:center !important;animation:fadeIn 0.3s ease !important}.ad-interstitial .btn-secondary{border-color:rgba(126,180,255,0.2) !important;color:var(--text-secondary) !important;margin-top:8px}.ad-interstitial .btn-secondary:hover{border-color:var(--accent-cyan) !important;color:var(--accent-cyan) !important}/* ============================================================================ DASHBOARD CARDS (generic) ============================================================================ */.dashboard-card{font-family:var(--font-primary) !important;background:var(--bg-card) !important;border:1px solid var(--border-subtle) !important;border-radius:var(--radius-lg) !important;box-shadow:none !important}/* ============================================================================ INFO BOXES (in-game stats) ============================================================================ */.info-box{font-family:var(--font-primary) !important;background:var(--bg-card) !important;border:1px solid var(--border-subtle) !important;border-radius:var(--radius-md) !important}.info-value{font-family:var(--font-primary) !important;font-weight:700 !important}/* ============================================================================ GLOSSARY ============================================================================ */.glossary-item{font-family:var(--font-primary) !important;background:var(--bg-card) !important;border:1px solid var(--border-subtle) !important;border-radius:var(--radius-md) !important}/* ============================================================================ TOMORROW PREVIEW ============================================================================ */.tomorrow-preview{background:var(--bg-card) !important;border:1px solid var(--border-subtle) !important;border-radius:var(--radius-md) !important}.tomorrow-preview-label{font-family:var(--font-primary) !important;letter-spacing:1px !important}.tomorrow-preview-mode{font-family:var(--font-primary) !important;font-weight:600 !important}/* ============================================================================ CONTAINER ADJUSTMENTS ============================================================================ */.container{max-width:480px;margin:0 auto}/* ============================================================================ INLINE SVG ICON SYSTEM ============================================================================ */.icon-svg{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1}.icon-svg svg{width:1em;height:1em;stroke-width:1.5;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}.icon-svg.icon-lg svg{width:1.5em;height:1.5em}.icon-svg.icon-xl svg{width:2em;height:2em}/* ============================================================================ NAV TABS (category selector in game modes) ============================================================================ */.nav-tabs{border-bottom:1px solid var(--border-subtle)}.nav-tab{font-family:var(--font-primary) !important;font-weight:600 !important;border-radius:var(--radius-sm) var(--radius-sm) 0 0 !important;transition:all var(--transition-fast) !important}/* ============================================================================ SPEED ROUND SPECIFICS ============================================================================ */.speed-slide-in{animation:slideIn 0.25s ease both !important}/* ============================================================================ RESPONSIVE REFINEMENTS ============================================================================ */@media (max-width:480px){.container{padding:0 12px !important}h1{font-size:22px !important;font-weight:700 !important}.question-card{padding:22px 16px !important}.answer-btn{padding:14px 16px !important;font-size:13px !important}.mode-card{padding:18px 14px !important}.duel-term{font-size:20px !important;padding:18px !important}.duel-option{font-size:13px !important;padding:14px 16px !important}}/* ============================================================================ ACCESSIBILITY ============================================================================ */@media (prefers-reduced-motion:reduce){*, *::before, *::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}@media (prefers-contrast:more){.mode-card, .question-card, .answer-btn, .duel-option, .review-card, .flashcard{border-width:2px !important}}/* ============================================================================ FOCUS VISIBLE (keyboard nav) ============================================================================ */:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:2px}button:focus-visible,.answer-btn:focus-visible,.mode-card:focus-visible{outline:2px solid var(--accent-cyan);outline-offset:2px}/* ============================================================================ ARCTIC FROST — GLOBAL COLOR OVERRIDES Catches all hardcoded colors from the original styles.css ============================================================================ *//* Background overrides */body,.onboarding-overlay,.pass-celebration,.unlock-overlay,.ad-interstitial,.kb-help-overlay{background:#0b0f1a !important}.top-bar,.bottom-nav,.exam-nav-bar{background:rgba(11,15,26,0.95) !important}/* Elevated surfaces */.calc-panel,.kb-help-card,.reinforce-menu,.unlock-toast{background:#141929 !important}/* Accent color:cyan → soft blue */.bottom-nav-tab.active{color:#7eb4ff !important}.logo{color:#7eb4ff !important}.ob-logo{color:#7eb4ff !important}.mastery-pct{color:#7eb4ff !important}.lb-score{color:#7eb4ff !important}.tomorrow-preview-mode{color:#7eb4ff !important}.share-card-logo{color:#7eb4ff !important}/* Border accents:cyan → soft blue */.bottom-nav{border-top-color:rgba(126,180,255,0.15) !important}.calc-panel{border-color:rgba(126,180,255,0.15) !important}.kb-help-card{border-color:rgba(126,180,255,0.15) !important}.share-card{border-color:rgba(126,180,255,0.15) !important}/* Green accent → Mint */.answer-btn.correct,.answer-btn[style*="border-color:#6ee7b7"],.answer-btn[style*="border-color:#6ee7b7"]{background:rgba(110,231,183,0.08) !important;border-color:rgba(110,231,183,0.4) !important}/* Duplicate .duel-option.correct removed — defined at line 432 */.duel-dot.correct{background:#6ee7b7 !important;border-color:#6ee7b7 !important}.review-card-header.correct-header{border-left-color:#6ee7b7 !important}.difficulty-badge.easy{background:rgba(110,231,183,0.15) !important;color:#6ee7b7 !important}.go-xp-earned{color:#6ee7b7 !important}.pass-score{color:#6ee7b7 !important}.calc-display{color:#6ee7b7 !important}/* Red accent → Soft red */.answer-btn.wrong,.answer-btn[style*="border-color:#f87171"],.answer-btn[style*="border-color:#f87171"]{background:rgba(248,113,113,0.08) !important;border-color:rgba(248,113,113,0.4) !important}.duel-option.wrong{border-color:rgba(248,113,113,0.4) !important;background:rgba(248,113,113,0.08) !important}.duel-dot.wrong{background:#f87171 !important;border-color:#f87171 !important}.review-card-header.wrong-header{border-left-color:#f87171 !important;background:rgba(248,113,113,0.03) !important}.survival-timer{color:#f87171 !important}.difficulty-badge.hard{background:rgba(248,113,113,0.15) !important;color:#f87171 !important}/* Gold accent → Warm amber */.pass-title{color:#e2c57b !important}.duel-streak{color:#e2c57b !important}.lb-rank.gold{color:#e2c57b !important}.streak-risk-banner{background:rgba(251,191,36,0.04) !important;border-color:rgba(251,191,36,0.2) !important}.drills-banner{border-color:rgba(251,191,36,0.15) !important}.difficulty-badge.medium{background:rgba(251,191,36,0.15) !important;color:#fbbf24 !important}/* Gradient button overrides */.returning-banner-action button,.btn-primary,.ob-cta,.calc-toggle,.calc-btn.eq{background:linear-gradient(90deg, #7eb4ff, #a8d4ff) !important;color:#0b0f1a !important}.pb-banner{background:linear-gradient(90deg, #7eb4ff, #a8d4ff) !important;color:#0b0f1a !important}/* Focus mode overrides */body.focus-mode .bottom-nav{border-top-color:#d4cdbf !important;background:#ece6da !important}body.focus-mode .bottom-nav-tab.active{color:#5c4a3a !important}/* Combo milestone colors (Arctic Frost tones) */.combo-milestone-5{color:#6ee7b7 !important}.combo-milestone-10{color:#e2c57b !important}.combo-milestone-15{color:#fb923c !important}.combo-milestone-25{color:#f87171 !important}/* Leaderboard active tab */.lb-mode-tab.active{background:linear-gradient(90deg, #7eb4ff, #a8d4ff) !important;color:#0b0f1a !important;border-color:#7eb4ff !important}.lb-row.me{background:rgba(126,180,255,0.06) !important;border-left-color:#7eb4ff !important}/* Exam nav frost colors */.exam-nav-btn.current{border-color:#7eb4ff !important;background:rgba(126,180,255,0.12) !important}.exam-nav-btn.answered::after{background:#6ee7b7 !important}.exam-nav-btn.flagged{border-color:#e2c57b !important}.exam-nav-btn.flagged::after{background:#e2c57b !important}/* Level badge & XP accent */.level-badge{background:linear-gradient(90deg, #7eb4ff, #a8d4ff) !important;color:#0b0f1a !important}/* Go-percentile badge */.go-percentile{background:rgba(126,180,255,0.1) !important;border-color:#7eb4ff !important;color:#7eb4ff !important}/* Onboarding dots frost */.onboarding-dot{border-color:#7eb4ff !important}.onboarding-dot.active{background:#7eb4ff !important}.onboarding-dot.done{background:#6ee7b7 !important;border-color:#6ee7b7 !important}/* Active nav glow removal */.bottom-nav-tab.active svg{filter:none !important}/* ============================================================================ UX ENHANCEMENT #1:3D FLASHCARD FLIP True perspective-based card flip with front/back faces ============================================================================ */.flashcard-container{perspective:1200px !important}.flashcard{cursor:pointer;position:relative !important;min-height:200px !important;transform-origin:center center}.flashcard .card-label{font-size:11px !important;font-weight:700 !important;letter-spacing:1.5px !important;text-transform:uppercase;color:var(--accent-cyan) !important;margin-bottom:12px}.flashcard-hint{font-size:13px !important;color:var(--text-tertiary) !important;text-align:center;margin-top:12px;transition:opacity 0.3s ease}/* ============================================================================ UX ENHANCEMENT #2:SMOOTH SCREEN TRANSITIONS Crossfade + subtle slide on screen switches ============================================================================ */.screen:not(.active){opacity:0 !important;transform:translateY(8px);transition:opacity 0.25s ease, transform 0.25s ease !important}.screen.active{opacity:1 !important;transform:none !important;transition:opacity 0.25s ease !important}/* Bottom nav tab transitions */.bottom-nav-tab{transition:color 0.2s ease, transform 0.15s ease !important}.bottom-nav-tab:active{transform:scale(0.92) !important}/* ============================================================================ UX ENHANCEMENT #3:DASHBOARD LOADING SKELETON Shimmer placeholders while stats calculate ============================================================================ */.skeleton-pulse{background:linear-gradient( 90deg, rgba(140,180,255,0.04) 0%, rgba(140,180,255,0.08) 40%, rgba(140,180,255,0.04) 80% ) !important;background-size:200% 100% !important;animation:shimmer 1.8s ease-in-out infinite !important;border-radius:var(--radius-md) !important;border:1px solid var(--border-subtle) !important}.skeleton-line{height:16px;border-radius:8px;margin-bottom:10px}.skeleton-line.short{width:40%}.skeleton-line.medium{width:65%}.skeleton-line.long{width:90%}.skeleton-card{height:120px;border-radius:var(--radius-lg);margin-bottom:16px}.skeleton-ring{width:160px;height:160px;border-radius:50%;margin:20px auto}/* ============================================================================ UX ENHANCEMENT #4:FLASHCARD SWIPE GESTURES Visual feedback during swipe ============================================================================ */.flashcard.swiping{transition:none !important}.flashcard.swipe-right{animation:swipeRight 0.3s ease forwards !important}.flashcard.swipe-left{animation:swipeLeft 0.3s ease forwards !important}.flashcard.swipe-up{animation:swipeUp 0.3s ease forwards !important}.flashcard.swipe-down{animation:swipeDown 0.3s ease forwards !important}@keyframes swipeRight{to{transform:translateX(120px) rotate(8deg);opacity:0}}@keyframes swipeLeft{to{transform:translateX(-120px) rotate(-8deg);opacity:0}}@keyframes swipeUp{to{transform:translateY(-100px);opacity:0}}@keyframes swipeDown{to{transform:translateY(100px);opacity:0}}/* Swipe hint badges */.swipe-hint{position:absolute;top:50%;transform:translateY(-50%);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:6px 14px;border-radius:var(--radius-pill);opacity:0;transition:opacity 0.2s ease;pointer-events:none;z-index:10}.swipe-hint.left{left:12px;background:rgba(248,113,113,0.15);border:1px solid rgba(248,113,113,0.3);color:#f87171}.swipe-hint.right{right:12px;background:rgba(110,231,183,0.15);border:1px solid rgba(110,231,183,0.3);color:#6ee7b7}.flashcard.swiping .swipe-hint.active{opacity:1}/* ============================================================================ UX ENHANCEMENT #7:EXAM PROGRESS BAR Thin bar at top of exam screen ============================================================================ */.exam-progress-bar{position:sticky;top:0;left:0;right:0;height:4px;background:rgba(140,180,255,0.06);z-index:50;border-radius:0 0 2px 2px;overflow:hidden;margin-bottom:16px}.exam-progress-fill{height:100%;background:linear-gradient(90deg, #7eb4ff, #6ee7b7);border-radius:0 2px 2px 0;transition:width 0.4s cubic-bezier(0.4, 0, 0.2, 1)}.exam-progress-label{text-align:center;font-size:12px;font-weight:600;color:var(--text-tertiary);margin-bottom:12px;letter-spacing:0.5px}/* ============================================================================ UX ENHANCEMENT #8:MICRO-INTERACTIONS ON ANSWERS Scale + glow on correct, enhanced shake on wrong ============================================================================ */.answer-btn.correct{animation:correctPop 0.4s ease !important}.answer-btn.wrong{animation:wrongShake 0.4s ease !important}@keyframes correctPop{0%{transform:scale(1)}30%{transform:scale(1.03);box-shadow:0 0 20px rgba(110,231,183,0.2)}60%{transform:scale(0.99)}100%{transform:scale(1);box-shadow:none}}@keyframes wrongShake{0%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}100%{transform:translateX(0)}}/* Correct answer icon indicator */.answer-btn.correct::after{content:'';display:inline-block;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%236ee7b7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;margin-left:8px;vertical-align:middle;animation:fadeIn 0.3s ease 0.1s both}.answer-btn.wrong::after{content:'';display:inline-block;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 6L6 18'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;margin-left:8px;vertical-align:middle;animation:fadeIn 0.3s ease 0.1s both}/* ============================================================================ UX ENHANCEMENT #9:TOUCH TARGET FIXES Minimum 44px on all interactive elements ============================================================================ */.mode-back-btn{min-height:44px !important;min-width:44px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important}/* Modal close buttons */button[onclick*="remove()"],button[onclick*="close"],.close-btn,[class*="close"],[class*="dismiss"]{min-height:44px !important;min-width:44px !important}/* Small secondary actions */.btn-secondary{min-height:44px !important;padding:10px 18px !important}/* Exam nav buttons */.exam-nav-btn{min-height:36px !important;min-width:36px !important}/* Self-check toggle */button[onclick*="toggleFlashcard"]{min-height:40px !important;padding:8px 16px !important}/* Flag button in exam */button[onclick*="toggleExamFlag"]{min-height:40px !important}/* Calculator buttons */.calc-btn{min-height:48px !important;min-width:48px !important}/* ============================================================================ UX ENHANCEMENT #10:EMPTY STATE ILLUSTRATIONS Styled SVG-based empty states ============================================================================ */.empty-state{text-align:center;padding:40px 24px;animation:fadeUp 0.5s ease}.empty-state-icon{width:80px;height:80px;margin:0 auto 20px;border-radius:50%;background:rgba(126,180,255,0.06);border:1px solid rgba(126,180,255,0.1);display:flex;align-items:center;justify-content:center}.empty-state-icon svg{width:36px;height:36px;stroke:var(--accent-cyan);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0.6}.empty-state-title{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.empty-state-text{font-size:14px;color:var(--text-secondary);line-height:1.6;max-width:280px;margin:0 auto}/* ============================================================================ UX ENHANCEMENT #6:TONED DOWN MOMENTUM NAGS Softer styling for recommendation prompts ============================================================================ */.momentum-prompt-soft{margin:15px 0 !important;padding:14px 18px !important;background:rgba(126,180,255,0.04) !important;border:1px solid rgba(126,180,255,0.1) !important;border-radius:var(--radius-md) !important;animation:fadeUp 0.3s ease}.momentum-prompt-soft .momentum-header{color:var(--accent-cyan) !important;font-size:11px !important;font-weight:600 !important;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}.momentum-prompt-soft .momentum-text{color:var(--text-secondary) !important;font-size:13px !important;line-height:1.5;margin-bottom:10px}/* Override the escalated CRITICAL styling with something gentler */div[style*="CRITICAL"]{background:rgba(251,191,36,0.04) !important;border-color:rgba(251,191,36,0.15) !important}/* ============================================================================ UX ENHANCEMENT #5:MODAL OVERLAY POLISH Consistent overlay styling, smoother entrances ============================================================================ */.trophy-modal,.unlock-overlay,.pass-celebration,.daily-complete-overlay,.streak-celebration{animation:fadeIn 0.3s ease !important;backdrop-filter:blur(12px) !important;-webkit-backdrop-filter:blur(12px) !important}.trophy-modal > div,.unlock-overlay > div,.pass-celebration > div{animation:correctPop 0.4s ease !important}