:root{--bg:#fafaf9;--card:#fff;--text:#111827;--muted:#6b7280;--border:#e5e7eb;--accent:#84cc16;--hero:linear-gradient(135deg,#57534e,#1c1917);--radius:12px;}
*{box-sizing:border-box} body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit} .container{max-width:1120px;margin:0 auto;padding:18px}
.topbar{background:#111827;color:white} .topbar .container{display:flex;justify-content:space-between;align-items:center;padding:18px}
.brand{font-size:24px;font-weight:800} .nav a{color:white;margin-left:16px}
.hero{background:var(--hero);color:#ffffff;padding:32px 0}
.hero h1{margin:0 0 10px;font-size:40px;line-height:1.05} .hero p{max-width:860px;color:rgba(255,255,255,.82);margin:0}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin:16px 0;box-shadow:0 10px 22px rgba(0,0,0,.04)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .quiz-card{display:block;background:#fff;border:1px solid var(--border);border-radius:calc(var(--radius) - 4px);padding:16px}
.quiz-card h3{margin:0 0 8px;font-size:20px} .muted{color:var(--muted)} .badge{display:inline-block;padding:5px 10px;border-radius:999px;background:#eef2ff;color:#3730a3;font-size:12px;font-weight:700;margin-right:8px}
.badge.general{background:#ecfeff;color:#155e75} .badge.specific{background:#fff7ed;color:#9a3412}
.filter-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
input[type=text],select{padding:12px 14px;border-radius:12px;border:1px solid var(--border);font-size:16px;background:#fff}
.ad-slot{border:2px dashed #cbd5e1;background:#f8fafc;color:#64748b;border-radius:16px;padding:24px;text-align:center;margin:18px 0;font-weight:600}
.ad-slot.small{padding:16px} .footer{color:#6b7280;padding:30px 0} .footer a{color:#374151;margin-right:14px}
.question-wrap img{width:100%;border-radius:16px;border:1px solid var(--border)} .progress{font-size:14px;color:var(--muted);margin-bottom:8px}
.q-title{font-size:34px;line-height:1.12;margin:12px 0 14px} .answers{display:grid;gap:12px;margin-top:12px}
.answer-btn,.action-btn,.secondary-btn,.text-input{padding:15px 16px;border-radius:14px;font-size:18px} .answer-btn{background:#fff;border:1px solid var(--border);text-align:left;cursor:pointer}
.action-btn{background:#111827;color:#fff;border:none;cursor:pointer} .secondary-btn{background:#fff;border:1px solid var(--border);cursor:pointer}
.text-input{width:100%;border:1px solid var(--border)} .feedback.good h1{color:#166534} .feedback.bad h1{color:#b91c1c}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .pill{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:10px 14px;font-size:14px}
.hero-stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px} .callout{background:#fff7ed;border:1px solid #fed7aa;border-radius:16px;padding:16px}
@media(max-width:900px){.grid{grid-template-columns:1fr 1fr}} @media(max-width:640px){.grid,.related-grid{grid-template-columns:1fr} .q-title{font-size:28px} .hero h1{font-size:32px} .topbar .container{display:block} .nav{margin-top:10px}}