:root{--royal-blue: #00249a;--royal-blue-deep: #002450;--visionary-sky: #7680fb;--innovative-purple: #7702ff;--active-orange: #fb5e00;--neutral-grey: #c8c8c8;--pure-white: #ffffff;--bg: #f5f7ff;--text: #0f172a;--card: #ffffff;--radius: 20px;--shadow: 0 20px 50px rgba(0, 36, 80, .12);font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--text);background:var(--bg)}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg)}h1,h2,h3{font-family:Playfair Display,Inter,serif;margin:0 0 12px;color:var(--royal-blue)}h1{font-size:clamp(42px,4vw,56px);letter-spacing:-.5px}h2{font-size:clamp(28px,3vw,36px)}p{margin:0 0 12px;line-height:1.6}button{border:none;cursor:pointer;font-size:18px;font-weight:600;padding:16px 22px;border-radius:16px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}button:active{transform:scale(.98)}button.primary{background:var(--royal-blue);color:var(--pure-white);box-shadow:0 12px 30px #00249a40}button.secondary{background:var(--pure-white);color:var(--royal-blue);border:2px solid rgba(0,36,154,.1)}input{width:100%;padding:22px;font-size:20px;border-radius:18px;border:1px solid rgba(0,36,154,.2);background:#fffffff0}label{display:block;font-size:16px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;color:var(--royal-blue)}.app-shell{max-width:1200px;margin:0 auto;padding:32px 24px 48px}.quiz-stage{min-height:100vh;background-size:cover;background-position:center;position:relative}.quiz-stage__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#002450c7,#00249a9e)}.quiz-stage>.app-shell{position:relative;z-index:1}.screen{position:relative;min-height:100vh;width:100%;overflow:hidden}.screen:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#00249a94,#0024507a)}.register-screen{background:url(/assets/brand-banner.jpeg) center/cover no-repeat}.selection-screen{background:var(--royal-blue)}.selection-screen:after{background:none}.screen-content{position:relative;z-index:1;min-height:100vh;padding:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));align-items:stretch;gap:28px}.register-panel{background:#fffffff0;border-radius:calc(var(--radius) * 1.2);padding:32px;box-shadow:var(--shadow)}.brand-panel{color:var(--pure-white);display:flex;flex-direction:column;justify-content:space-between;padding:24px;border-radius:calc(var(--radius) * 1.2);border:1px solid rgba(255,255,255,.2);background:linear-gradient(160deg,#00249aa6,#7680fb8c);box-shadow:inset 0 0 0 1px #ffffff14}.brand-mark{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:14px;background:#ffffff1f;letter-spacing:.08em;font-weight:800}.form-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:16px}.form-actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}.selection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:100vh}.selection-panel{position:relative;cursor:pointer;overflow:hidden;display:flex;align-items:flex-end;padding:32px;color:var(--pure-white);transition:transform .18s ease,box-shadow .18s ease}.selection-panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;filter:brightness(.9)}.selection-panel:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(0deg,#002450bf,#0024500d)}.selection-panel:hover{transform:scale(1.01);box-shadow:0 40px 80px #00245059}.selection-content{position:relative;z-index:1;max-width:520px}.selection-heading{display:inline-flex;align-items:center;gap:12px;padding:14px 18px;border-radius:16px;background:#ffffff2e;letter-spacing:.06em;text-transform:uppercase;font-weight:800;font-size:18px}.tagline{font-size:20px;max-width:520px;line-height:1.5}.highlight-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}.highlight-list li{padding:12px 14px;border-radius:14px;background:#ffffff29;color:inherit;font-weight:600}.quiz-card{background:var(--card);border-radius:calc(var(--radius) * 1.1);padding:28px;box-shadow:var(--shadow);margin-top:20px;border:1px solid rgba(255,255,255,.06);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.progress{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px}.dot{height:10px;border-radius:999px;background:#00249a1f}.dot.active{background:var(--royal-blue)}.dot.done{background:var(--active-orange)}.question-text{font-size:32px;margin-bottom:20px;color:var(--royal-blue);font-family:Playfair Display,Inter,serif}.options{display:grid;gap:16px}.option-btn{width:100%;text-align:left;padding:22px;border-radius:18px;border:2px solid rgba(0,36,154,.16);font-size:20px;background:#ffffffeb;transition:background .15s ease,border .15s ease,transform .12s ease}.option-btn:hover{border-color:#00249a4d;transform:translateY(-2px)}.option-btn.selected{border-color:var(--royal-blue);background:#7680fb1f}.completion{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;align-items:start}.score-card{background:var(--card);padding:24px;border-radius:calc(var(--radius) * 1.1);box-shadow:var(--shadow)}.leaderboard{background:var(--card);padding:18px;border-radius:calc(var(--radius) * 1.1);box-shadow:var(--shadow);max-height:500px;overflow:auto}.leaderboard-row{display:grid;grid-template-columns:50px 1fr 80px;align-items:center;gap:10px;padding:12px 10px;border-radius:12px}.leaderboard-row.you{background:#fb5e001f}.badge{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:700;color:var(--pure-white);background:var(--royal-blue)}.qr-block{display:grid;place-items:center;padding:16px;border-radius:16px;background:#00249a0d}.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#00249a1a;color:var(--royal-blue);font-weight:600}@media (max-width: 900px){.screen-content{grid-template-columns:1fr;padding:28px 20px}.selection-grid{grid-template-columns:1fr}.selection-panel{min-height:50vh}.question-text{font-size:24px}}
