/* ============================================================
FLEXING DATA — Assessment Platform Styles
============================================================ */
:root {
--bg-1:#02061a; --bg-2:#0a1545; --bg-3:#1a2a7a;
--gold-1:#ffd451; --gold-2:#f5a623; --gold-3:#c98712;
--hot-purple:#6a1b9a; --hot-red:#c62828;
--ok-green:#2ecc71; --text-light:#f5f1e8; --text-dim:#a9b3d1;
}
body { background: var(--bg-1); color: var(--text-light); }
/* ===== Global text-color guard against site main.css bleed =====
Anything inside .card defaults to light text unless explicitly themed.
Buttons, score pills and gold-themed elements override below. */
.card, .card p, .card span, .card div, .card li, .card td, .card th,
.card label, .card legend, .card small, .card strong { color: #f5f1e8; }
.card h1, .card h2, .card h3, .card h4 { color: var(--gold-1); }
.card a { color: var(--gold-1); }
.card a:hover { color: #fff; }
/* Re-allow buttons/pills/badges to keep their own dark text on gold backgrounds */
.card .start-btn, .card .next-btn, .card .score-pill, .card .qnum-pill,
.card .badge-item, .card .role-card.active, .card .num-circle { color: #1a1a1a; }
.quiz-page {
font-family: "Segoe UI", system-ui, sans-serif;
background:
radial-gradient(ellipse at 50% 0%, #1a2a7a 0%, #0a1545 35%, #02061a 80%),
radial-gradient(ellipse at 50% 100%, #4a148c33 0%, transparent 60%);
background-attachment: fixed;
color: var(--text-light);
padding: 140px 1rem 5rem;
min-height: 100vh;
display: flex; justify-content: center; align-items: flex-start; box-sizing: border-box;
}
@media (max-width:768px) { .quiz-page { padding: 110px .5rem 3rem; } }
.card {
background: linear-gradient(180deg, rgba(15,27,90,.85), rgba(5,10,40,.95));
border-radius: 22px; padding: 2.25rem;
max-width: 880px; width: 100%;
box-shadow: 0 0 60px rgba(255,212,81,.15), 0 0 0 1px rgba(255,212,81,.25);
margin: 0 auto; position: relative;
}
.badge-q {
display: inline-block;
background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
color: #1a1a1a; font-size: 12px; padding: 5px 14px; border-radius: 8px;
font-weight: 700; margin-bottom: 1rem; letter-spacing: .5px;
}
.quiz-page h1 {
font-size: 28px; font-weight: 800; margin-bottom: .5rem;
color: var(--gold-1); text-shadow: 0 2px 12px rgba(255,212,81,.3);
}
.quiz-page h2 { font-size: 20px; font-weight: 700; color: var(--gold-1); margin: 1.5rem 0 .75rem; }
.sub { font-size: 15px; color: var(--text-dim); line-height: 1.65; margin-bottom: 1.25rem; }
.stat-row { display: flex; gap: 10px; margin-bottom: 1.25rem; flex-wrap: wrap; }
.stat-box { flex: 1 1 120px; background: rgba(255,212,81,.08); border: 1px solid rgba(255,212,81,.2); border-radius: 10px; padding: 12px; text-align: center; }
.stat-box .num { font-size: 22px; font-weight: 800; color: var(--gold-1); }
.stat-box .lbl { font-size: 11px; color: var(--text-dim); letter-spacing: .5px; }
.start-btn, .next-btn {
padding: 14px 32px;
background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
color: #1a1a1a; border: none; border-radius: 12px;
font-size: 16px; font-weight: 800; cursor: pointer;
transition: transform .15s, box-shadow .15s;
box-shadow: 0 4px 16px rgba(255,165,35,.4);
}
.start-btn:hover, .next-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,165,35,.55); }
.start-btn:disabled { background: #6b6552; color: #aaa; cursor: not-allowed; }
.restart-btn {
padding: 12px 28px; background: transparent; color: var(--gold-1);
border: 1.5px solid var(--gold-1); border-radius: 12px;
font-size: 15px; font-weight: 700; cursor: pointer;
}
.restart-btn:hover { background: rgba(255,212,81,.1); }
.screen { display: none; }
.screen.active { display: block; }
/* ── Retake-from-Hub: no flash before the countdown ──────────────────────────
Set on by an early script when the URL is ?fromHub=1&autostart=1.
The countdown (#prep-screen) paints first; the sign-up wizard (#intro) is
never shown; and the fade is suppressed so the pre-painted "10" doesn't blink
when JS starts the timer. JS removes .hub-autostart when it leaves the prep. */
html.hub-autostart #intro { display: none !important; }
html.hub-autostart #prep-screen { display: block; }
html.hub-autostart #prep-screen.active { animation: none; }
/* Form — !important everywhere to beat site main.css */
.form-label { display: block !important; font-weight: 600 !important; margin-bottom: 6px !important; font-size: 14px !important; color: var(--gold-1) !important; }
.form-input, .form-select {
width: 100% !important; padding: 12px 14px !important; border-radius: 10px !important;
border: 1.5px solid rgba(255,212,81,.25) !important;
background: rgba(0,0,0,.4) !important;
background-color: rgba(0,0,0,.4) !important;
color: #f5f1e8 !important;
-webkit-text-fill-color: #f5f1e8 !important; /* Chrome autofill safety */
margin-bottom: 12px !important; font-size: 14px !important; font-family: inherit !important;
appearance: none !important;
-webkit-appearance: none !important;
}
.form-select {
/* Custom gold chevron arrow since we killed the native appearance */
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
padding-right: 36px !important;
}
.form-input:focus, .form-select:focus { outline: none !important; border-color: var(--gold-1) !important; box-shadow: 0 0 0 3px rgba(255,212,81,.15) !important; }
.form-input::placeholder { color: #8b94b8 !important; opacity: 1 !important; }
.form-input::-webkit-input-placeholder { color: #8b94b8 !important; }
.form-input::-moz-placeholder { color: #8b94b8 !important; opacity: 1 !important; }
/*