:root {
    --bg-deep: #080812;
    --bg-card: #12121f;
    --bg-card-hover: #18182a;
    --accent-primary: #7c3aed;
    --accent-secondary: #06b6d4;
    --accent-success: #10b981;
    --accent-danger: #ef4444;
    --accent-gold: #f59e0b;
    --accent-pink: #ec4899;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-subtle: rgba(124,58,237,0.15);
    --border-active: rgba(124,58,237,0.5);
    --glow-purple: 0 0 30px rgba(124,58,237,0.3);
    --glow-cyan: 0 0 30px rgba(6,182,212,0.3);
    --glow-gold: 0 0 20px rgba(245,158,11,0.3);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --transition-fast: 0.15s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4,0,0.2,1);
    --transition-bounce: 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg-deep); color:var(--text-primary); font-family:'Inter',sans-serif; min-height:100vh; overflow-x:hidden; line-height:1.5; -webkit-font-smoothing:antialiased; }

#particlesCanvas { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:0.6; }

.app-container { position:relative; z-index:1; max-width:800px; margin:0 auto; padding:16px; }

.header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:rgba(18,18,31,0.8); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); margin-bottom:20px; position:sticky; top:16px; z-index:100; flex-wrap:wrap; gap:12px; }
.logo { font-size:1.6em; font-weight:900; background:linear-gradient(135deg,#a78bfa,#7c3aed,#06b6d4); background-size:200% 200%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:gradientShift 4s ease infinite; }
@keyframes gradientShift { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }

.stats-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.stat-pill { background:var(--bg-card); border:1px solid var(--border-subtle); padding:8px 14px; border-radius:20px; font-size:0.82em; font-weight:600; display:flex; align-items:center; gap:6px; transition:all var(--transition-fast); }
.stat-pill:hover { border-color:var(--border-active); box-shadow:var(--glow-purple); }
.stat-value { color:var(--accent-secondary); font-weight:800; }
.xp-mini-bar { width:80px; height:6px; background:rgba(255,255,255,0.08); border-radius:10px; overflow:hidden; }
.xp-mini-fill { height:100%; background:linear-gradient(90deg,#7c3aed,#06b6d4); border-radius:10px; width:0%; transition:width 0.6s ease; }
.streak-badge { background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; padding:8px 14px; border-radius:20px; font-weight:700; font-size:0.82em; animation:pulse-gold 2s infinite; }
@keyframes pulse-gold { 0%,100% { box-shadow:0 0 0 0 rgba(245,158,11,0.5); } 50% { box-shadow:0 0 0 15px rgba(245,158,11,0); } }

.category-nav { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; margin-bottom:20px; flex-wrap:wrap; scrollbar-width:none; }
.category-nav::-webkit-scrollbar { display:none; }
.cat-btn { background:var(--bg-card); border:1px solid var(--border-subtle); color:var(--text-secondary); padding:10px 18px; border-radius:25px; cursor:pointer; font-weight:600; font-size:0.85em; white-space:nowrap; transition:all var(--transition-smooth); }
.cat-btn:hover { border-color:var(--accent-primary); color:#fff; box-shadow:var(--glow-purple); }
.cat-btn.active { background:var(--accent-primary); color:#fff; border-color:var(--accent-primary); box-shadow:var(--glow-purple); }

.tests-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-bottom:20px; }
.test-card { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:20px; cursor:pointer; transition:all var(--transition-smooth); position:relative; overflow:hidden; display:flex; flex-direction:column; gap:10px; }
.test-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary),var(--accent-pink)); opacity:0; transition:opacity var(--transition-smooth); }
.test-card:hover { border-color:var(--border-active); transform:translateY(-3px); box-shadow:var(--glow-purple); background:var(--bg-card-hover); }
.test-card:hover::before { opacity:1; }
.test-card:active { transform:scale(0.97); }
.test-emoji { font-size:2.5em; transition:transform var(--transition-bounce); }
.test-card:hover .test-emoji { transform:scale(1.1) rotate(-3deg); }
.test-title { font-weight:700; font-size:1em; color:#fff; }
.test-meta { display:flex; gap:8px; flex-wrap:wrap; font-size:0.75em; color:var(--text-muted); }
.test-badge { background:rgba(124,58,237,0.2); color:#a78bfa; padding:3px 10px; border-radius:12px; font-weight:600; font-size:0.72em; }
.test-badge.hot { background:rgba(239,68,68,0.2); color:#f87171; animation:pulse-gold 2s infinite; }
.test-badge.new { background:rgba(16,185,129,0.2); color:#34d399; }

/* quiz */
.quiz-screen { display:none; animation:fadeSlideIn 0.5s ease; }
.quiz-screen.active { display:block; }
.hidden { display:none !important; }
@keyframes fadeSlideIn { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }

.quiz-header { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:16px 20px; margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.quiz-progress-text { font-weight:700; color:var(--accent-secondary); }
.quiz-timer { font-weight:700; color:var(--accent-danger); }
.quiz-progress-bar { width:100%; height:4px; background:rgba(255,255,255,0.08); border-radius:10px; margin-bottom:20px; }
.quiz-progress-fill { height:100%; background:linear-gradient(90deg,#7c3aed,#06b6d4); border-radius:10px; width:0%; transition:width 0.4s ease; }

.question-card { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:28px; margin-bottom:16px; animation:fadeSlideIn 0.4s ease; }
.question-number { font-size:0.8em; color:var(--accent-secondary); font-weight:700; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:12px; }
.question-text { font-size:1.25em; font-weight:700; margin-bottom:20px; }
.answers-list { display:flex; flex-direction:column; gap:10px; }
.answer-btn { background:var(--bg-deep); border:2px solid rgba(255,255,255,0.08); color:var(--text-primary); padding:16px 20px; border-radius:var(--radius-md); cursor:pointer; font-weight:500; font-size:0.95em; text-align:left; transition:all var(--transition-fast); }
.answer-btn:hover { border-color:var(--accent-primary); background:rgba(124,58,237,0.1); box-shadow:var(--glow-purple); }
.answer-btn.selected { border-color:var(--accent-secondary); background:rgba(6,182,212,0.15); }

.slider-container { display:flex; flex-direction:column; gap:12px; align-items:center; }
.slider-labels { display:flex; justify-content:space-between; width:100%; font-size:0.8em; color:var(--text-muted); }
.slider-input { -webkit-appearance:none; width:100%; height:8px; border-radius:10px; background:linear-gradient(90deg,#7c3aed,#06b6d4); outline:none; }
.slider-input::-webkit-slider-thumb { -webkit-appearance:none; width:28px; height:28px; border-radius:50%; background:#fff; border:3px solid #7c3aed; cursor:pointer; box-shadow:var(--glow-purple); }
.slider-value { font-weight:800; font-size:1.3em; color:var(--accent-secondary); }

.result-screen { display:none; animation:fadeSlideIn 0.6s ease; text-align:center; }
.result-screen.active { display:block; }
.result-card { background:var(--bg-card); border:2px solid var(--border-active); border-radius:var(--radius-xl); padding:40px 28px; box-shadow:var(--glow-purple); margin-bottom:16px; }
.result-emoji { font-size:5em; animation:float 3s ease-in-out infinite; }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-15px); } }
.result-title { font-size:2em; font-weight:900; margin:16px 0 8px; background:linear-gradient(135deg,#a78bfa,#06b6d4); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.result-description { color:var(--text-secondary); font-size:1.05em; line-height:1.7; margin-bottom:20px; }
.result-score { font-weight:800; font-size:1.1em; color:var(--accent-gold); margin-bottom:12px; }
.result-xp { font-weight:800; color:var(--accent-gold); margin-bottom:16px; }

.btn { display:inline-block; padding:14px 28px; border-radius:30px; font-weight:700; font-size:0.95em; cursor:pointer; border:none; transition:all var(--transition-bounce); color:#fff; text-decoration:none; }
.btn-primary { background:linear-gradient(135deg,#7c3aed,#6d28d9); box-shadow:0 4px 20px rgba(124,58,237,0.4); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(124,58,237,0.6); }
.btn-outline { background:transparent; border:2px solid var(--accent-secondary); color:var(--accent-secondary); }
.btn-outline:hover { background:rgba(6,182,212,0.1); box-shadow:var(--glow-cyan); }
.btn-gold { background:linear-gradient(135deg,#f59e0b,#d97706); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(245,158,11,0.6); }
.btn-group { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

.back-btn { background:var(--bg-card); border:1px solid var(--border-subtle); color:var(--text-secondary); padding:8px 16px; border-radius:20px; cursor:pointer; font-weight:600; font-size:0.85em; display:inline-flex; align-items:center; gap:6px; }
.back-btn:hover { border-color:#fff; color:#fff; }

.ad-placeholder { background:rgba(18,18,31,0.8); border:1px dashed rgba(255,255,255,0.1); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:0.8em; margin:16px 0; min-height:90px; }
.ad-banner-top { max-width:728px; margin:0 auto 20px; }
.ad-inline-rect { min-height:250px; max-width:300px; margin:16px auto; }

.achievement-toast { position:fixed; top:20px; right:20px; background:linear-gradient(135deg,#1a1a2e,#16213e); border:2px solid var(--accent-gold); border-radius:var(--radius-lg); padding:16px 22px; z-index:1000; display:none; align-items:center; gap:14px; box-shadow:var(--glow-gold); animation:slideInRight 0.5s cubic-bezier(0.34,1.56,0.64,1); max-width:350px; }
.achievement-toast.show { display:flex; }
@keyframes slideInRight { from { opacity:0; transform:translateX(120px); } to { opacity:1; transform:translateX(0); } }
.ach-toast-emoji { font-size:2.2em; }
.ach-toast-text { font-weight:700; color:var(--accent-gold); font-size:0.9em; }
.ach-toast-sub { font-size:0.75em; color:var(--text-secondary); }

@media (max-width:600px) {
    .app-container { padding:8px; }
    .header { padding:12px 14px; top:8px; }
    .logo { font-size:1.3em; }
    .tests-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
    .test-card { padding:14px; }
    .test-emoji { font-size:2em; }
    .question-card { padding:18px; }
    .result-card { padding:24px 16px; }
}