:root {
    --color-primary: #FF2D2D;
    --color-primary-dark: #B30000;
    --color-bg: #111111;
    --color-panel: #202020;
    --color-text: #F5F5F5;
    --color-text-muted: #A0A0A0;
    --color-border: #2E2E2E;
    --color-success: #2ECC71;
    --color-warning: #FFB020;
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-glow: 0 0 24px rgba(255, 45, 45, 0.25);
    --font-main: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    background: radial-gradient(circle at top, #1a1010 0%, var(--color-bg) 55%);
    color: var(--color-text);
    font-family: var(--font-main);
    min-height: 100vh;
}
.container { max-width: 640px; margin: 0 auto; padding: 32px 20px; }
.topbar {
    display: flex; align-items: center; padding: 16px 28px;
    background: rgba(20,20,20,0.85); border-bottom: 1px solid var(--color-border);
}
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.2rem; }
.brand .flame { color: var(--color-primary); text-shadow: 0 0 12px rgba(255,45,45,0.7); }
.muted-strong { color: var(--color-text-muted); font-weight:600; }
.card {
    background: linear-gradient(180deg, var(--color-panel) 0%, #1c1c1c 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 20px;
}
.card-hero { text-align: center; padding: 48px 24px; }
.card-hero h1 { font-size: 1.8rem; margin: 0 0 10px; }
.card-hero p { color: var(--color-text-muted); }
.section-title { font-size: 1.05rem; font-weight: 800; margin: 0 0 16px; display:flex; align-items:center; gap:8px; }
.section-title::before { content:''; width:4px; height:18px; background:var(--color-primary); border-radius:2px; box-shadow:0 0 8px var(--color-primary); }
label { display:block; font-size:0.85rem; color:var(--color-text-muted); margin-bottom:6px; font-weight:600; }
input[type=text], input[type=email], input[type=password] {
    width:100%; background:#161616; border:1px solid var(--color-border); border-radius:var(--radius-sm);
    padding:12px 14px; color:var(--color-text); font-family:var(--font-main); font-size:0.95rem; margin-bottom:16px;
}
input:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(255,45,45,0.15); }
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 22px; border-radius:var(--radius-md); border:2px solid var(--color-primary);
    background:transparent; color:var(--color-text); font-weight:700; font-size:0.95rem; cursor:pointer;
}
.btn-solid { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); border-color:transparent; color:#fff; }
.btn-solid:hover { box-shadow: var(--shadow-glow); filter: brightness(1.08); }
.btn-block { width:100%; }
.btn:disabled { opacity:0.45; cursor:not-allowed; }
.alert { padding:12px 16px; border-radius:var(--radius-md); margin-bottom:16px; font-size:0.88rem; }
.alert-error { background: rgba(255,45,45,0.1); border:1px solid rgba(255,45,45,0.35); color:#ff8a8a; }
.badge { display:inline-block; padding:4px 12px; border-radius:999px; font-size:0.75rem; font-weight:700; }
.badge-pending { background: rgba(255,176,32,0.15); color: var(--color-warning); border:1px solid rgba(255,176,32,0.4); }
.muted { color: var(--color-text-muted); font-size:0.88rem; }

/* --- Modal / popup --- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal {
    background: linear-gradient(180deg, #202020 0%, #181818 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 28px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), var(--shadow-glow);
    animation: modal-in .18s ease;
}
@keyframes modal-in { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }
.modal h3 { margin: 0 0 12px; font-size: 1.15rem; }
.modal-body { color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.6; margin-bottom: 20px; }
.modal-body p { margin: 0 0 10px; }
.quiz-option {
    display: block; width: 100%; text-align: left; background:#161616; border:1px solid var(--color-border);
    border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; color: var(--color-text);
    cursor: pointer; font-size: 0.9rem; font-family: var(--font-main);
}
.quiz-option:hover { border-color: var(--color-primary); }