:root {
    --primary: #ff6b6b;
    --secondary: #4d96ff;
    --dark: #111827;
    --light: #f8fafc;
    --panel: #ffffff;
    --muted: #64748b;
    --accent: #5b21b6;
    --success: #16a34a;
    --error: #dc2626;
    --shadow: 0 12px 28px rgba(0,0,0,.12);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin:0; font-family: Inter, 'Segoe UI', sans-serif; background: linear-gradient(140deg, #f3f4ff, #fdf5ff); color: var(--dark); }

header { background: linear-gradient(115deg, #4d96ff, #7c3aed); color: white; text-align: center; padding: 42px 20px; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; }
header h1 { margin: 0; font-size: clamp(1.9rem, 5vw, 2.8rem); letter-spacing: .5px; }
header p { margin: .6rem auto 0; max-width: 740px; color: rgba(255,255,255,.9); font-size: 1rem; }

.container { width: min(100%, 1000px); margin: -26px auto 26px; padding: 0 16px 26px; }
.intro-card { background: var(--panel); border-radius: 20px; padding: 24px; box-shadow: var(--shadow); border: 1px solid #e2e8f0; margin-bottom: 18px; }

.intro-card h2 { color: var(--primary); margin-top: 0; font-size: 1.65rem; }
.intro-card p { color: #334155; margin-bottom: .4rem; }

.center-action { text-align:center; margin-top: 12px; }
.btn { display: inline-flex; align-items:center; justify-content:center; background: var(--primary); color: #fff; text-decoration:none; border-radius: 999px; font-weight: 700; border: 0; padding: 11px 20px; box-shadow: 0 8px 20px rgba(0,0,0,.16); transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.2); }

.quiz-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 18px; }
.quiz-card { background: var(--panel); border-radius: 16px; box-shadow: var(--shadow); border-left: 5px solid var(--secondary); overflow:hidden; display:flex; flex-direction:column; }
.quiz-card.quiz-money { border-left-color: #f59e0b; }
.quiz-card.quiz-history { border-left-color: #db2777; }
.quiz-card.quiz-no { border-left-color: #16a34a; }
.quiz-card.quiz-math { border-left-color: #3b82f6; }
.quiz-card.quiz-english { border-left-color: #8b5cf6; }
.quiz-card-content { padding: 15px 16px 18px; }
.quiz-card h3 { margin: 0 0 .2rem; font-size: 1.15rem; color: #111827; }
.quiz-card p { margin:.3rem 0 1rem; color:#475569; font-size:.95rem; }
.status-badge { display:inline-block; border-radius:999px; font-size:.75rem; font-weight:700; padding:.2rem .55rem; background:#e2e8f0; color:#1e293b; margin-bottom:.45rem; }
.legend-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 8px; margin-top: 14px; }
.legend-item { display:flex; align-items:center; border: 1px solid #e2e8f0; border-radius: 999px; padding: 8px 10px; background:#fff; font-size:.85rem; color:#1f2937; gap:8px; }
.legend-item span { width: 14px; height: 14px; border-radius: 50%; display:inline-block; }
.legend-money span { background:#f59e0b; }
.legend-history span { background:#db2777; }
.legend-no span { background:#16a34a; }
.legend-math span { background:#3b82f6; }
.legend-english span { background:#8b5cf6; }

footer { text-align:center; font-size:.9rem; color:#64748b; padding: 16px 0 22px; }

/* quiz page tweaks */
body.quiz { background: linear-gradient(180deg, #f8fafc, #edf2ff); min-height:100vh; padding:15px; color:#1f2937; }
#quiz-card { max-width:500px; margin:auto; border-radius:18px; background:white; border:1px solid #e2e8f0; box-shadow:var(--shadow); padding:20px; }
.progress { font-size:.9rem; color:#64748b; margin-bottom:.45rem; }
.option-btn { width:100%; text-align:left; border:1px solid #e2e8f0; border-radius:10px; padding:12px 14px; background:#f8fafc; cursor:pointer; transition:.2s; font-size:.95rem; }
.option-btn:hover { border-color: var(--primary); background:#eef2ff; }
.option-btn.correct { background: #16a34a; color:white; border-color:#15803d; }
.option-btn.wrong { background:#dc2626; color:white; border-color:#b91c1c; }
#next-btn, .btn { background: var(--secondary); color:white; }
#feedback { margin-top:16px; border-radius:10px; padding:12px; display:none; }