:root { --ink:#10283c; --ink-2:#173a54; --paper:#f6f2e9; --card:#fffdf7; --solar:#f7c948; --muted:#70818d; --line:#ded8cd; --green:#2d765d; --red:#b94b42; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; } body:not(.admin-body) { background:linear-gradient(115deg,#10283c 0%,#10283c 47%,#f6f2e9 47%); } a { color:inherit; text-decoration:none; } header { display:flex; align-items:center; justify-content:space-between; min-height:74px; padding:18px max(24px,calc((100vw - 1180px)/2)); color:var(--ink); } body:not(.admin-body) header { color:#fffdf7; } .brand { font-size:13px; font-weight:700; letter-spacing:.18em; }.brand strong { color:var(--solar); }.admin-nav { display:flex; gap:18px; color:#c6d1d5; font-size:12px; }.admin-nav a:hover { color:var(--solar); } main { width:min(1180px,calc(100% - 40px)); margin:0 auto; min-height:calc(100vh - 132px); } footer { padding:20px; color:#7f8e97; font-size:10px; letter-spacing:.08em; text-align:center; } .eyebrow { margin:0 0 12px; color:var(--solar); font-size:10px; font-weight:bold; letter-spacing:.16em; }.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; border:0; border-radius:5px; padding:0 18px; background:var(--solar); color:var(--ink); font-size:13px; font-weight:700; cursor:pointer; }.button:hover { background:#ffda6c; }.button:disabled { background:#d4d0c9; color:#848b90; cursor:not-allowed; }.secondary { border:1px solid var(--line); background:transparent; color:var(--ink); }.secondary:hover { border-color:#b7891d; background:#fff6d6; }.alert { margin:20px 0; border-radius:5px; padding:12px 14px; font-size:13px; }.alert.error { border:1px solid #f3c8c1; background:#fce8e4; color:#8d332c; }.alert.success { border:1px solid #bfe2d2; background:#e7f5ee; color:#225c49; }
.public-hero,.access-page,.question-page,.result-page,.notice { max-width:650px; padding:clamp(70px,13vh,130px) 0 70px; color:#fffdf7; }.public-hero h1,.access-page h1,.question-page h1,.result-page h1,.notice h1 { margin:0 0 18px; font-size:clamp(42px,7vw,76px); letter-spacing:-.07em; line-height:.91; }.public-hero h1 em,.access-page h1 em,.result-page h1 em { color:var(--solar); font-style:normal; }.public-hero>p:not(.eyebrow),.access-page>p,.result-page>p,.notice>p { color:#cad5d8; font-size:16px; line-height:1.6; }.specs { display:flex; flex-wrap:wrap; gap:9px; margin:31px 0; }.specs span { border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:8px 11px; color:#e0e8e8; font-size:11px; }.callout { border-left:3px solid var(--solar); padding:14px; background:rgba(255,255,255,.1); color:#fffdf7; }.access-page,.question-page,.result-page { margin-left:auto; padding-right:2vw; color:var(--ink); }.access-page>p:not(.eyebrow),.result-page>p { color:#5d6e7a; }.access-page .eyebrow,.question-page .eyebrow,.result-page .eyebrow { color:#a77b16; }.access-form,.auth-card form,.form-grid { display:grid; gap:15px; margin-top:28px; }.access-form { max-width:465px; padding:25px; border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:0 18px 45px rgba(16,40,60,.1); }.access-form label,.auth-card label,.form-grid label { display:grid; gap:7px; color:#415564; font-size:11px; font-weight:bold; }.access-form .check { display:flex; align-items:flex-start; gap:8px; font-weight:normal; line-height:1.4; }.access-form .check input { width:auto; margin-top:1px; }.micro { color:#81909a!important; font-size:10px!important; }.reference { display:flex; gap:14px; margin:30px 0; color:#70818d; font-size:10px; letter-spacing:.11em; }.reference strong { color:#a77b16; }.notice { margin-left:auto; }.notice h1 { color:var(--ink); font-size:36px; }.notice>p { color:#5d6e7a; }
input,textarea,select { width:100%; border:1px solid #d8d2c6; border-radius:5px; padding:12px; background:#fffdf7; color:var(--ink); font:inherit; font-size:13px; } input:focus,textarea:focus,select:focus { outline:3px solid rgba(247,201,72,.25); border-color:#b7891d; }.auth-card { width:min(430px,100%); margin:clamp(55px,12vh,115px) auto; border:1px solid var(--line); border-radius:10px; padding:31px; background:var(--card); box-shadow:0 25px 70px rgba(0,0,0,.16); }.dark-card { border-color:rgba(255,255,255,.17); background:rgba(11,32,48,.86); color:#fffdf7; }.dark-card label { color:#d2dcdf; }.dark-card input { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:#fffdf7; }.dark-card h1 { margin:0; font-size:39px; letter-spacing:-.06em; line-height:.98; }.dark-card h1 em { color:var(--solar); font-style:normal; }
.admin-layout { display:grid; grid-template-columns:180px minmax(0,1fr); gap:45px; padding:42px 0; }.admin-rail { display:grid; align-content:start; gap:12px; padding:20px 0; border-right:1px solid var(--line); }.admin-rail a { color:#506371; font-size:13px; }.admin-rail a:hover { color:#a77b16; }.admin-stage>h1 { margin:0 0 29px; font-size:37px; letter-spacing:-.06em; }.admin-stage .eyebrow { color:#75838d; }.metric-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }.metric { min-height:110px; border:1px solid #294a5f; border-top:3px solid var(--solar); border-radius:7px; padding:16px; background:var(--ink-2); color:#fffdf7; }.metric span { display:block; color:#a9bbc3; font-size:10px; letter-spacing:.05em; }.metric strong { display:block; margin-top:12px; font-size:29px; letter-spacing:-.06em; }.panel-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:35px 0 14px; }.panel-head h2 { margin:4px 0; font-size:22px; letter-spacing:-.04em; }.panel { overflow:auto; border:1px solid var(--line); border-radius:8px; background:var(--card); }.panel>h3 { padding:18px 20px 0; margin:0; }.panel .form-grid { padding:20px; margin:0; }.panel table { width:100%; border-collapse:collapse; min-width:650px; }.panel th,.panel td { border-bottom:1px solid #eee9df; padding:14px 16px; color:#506371; font-size:12px; text-align:left; }.panel th { color:#7f8c94; font-size:9px; letter-spacing:.1em; }.panel td strong { display:block; color:var(--ink); }.panel td small { color:#8b989f; }.trivia-list,.question-list { display:grid; gap:11px; }.trivia-row,.question-admin { display:flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid var(--line); border-radius:8px; padding:19px; background:var(--card); }.trivia-row h3,.question-admin h3 { margin:7px 0 4px; font-size:18px; letter-spacing:-.035em; }.trivia-row p,.question-admin p,.muted { margin:0; color:#72818b; font-size:12px; line-height:1.45; }.status { color:#506371; font-size:9px; font-weight:bold; letter-spacing:.1em; }.status.active { color:var(--green); }.status.scheduled { color:#9c7a26; }.status.disabled,.status.finished { color:var(--red); }.row-actions { display:flex; gap:8px; }.inline-form { display:inline; }.create-panel { border:1px solid var(--line); border-radius:8px; background:var(--card); padding:17px 20px; }.create-panel summary { color:var(--ink); font-weight:bold; cursor:pointer; }.form-grid { grid-template-columns:1fr 1fr; }.form-grid .full { grid-column:1/-1; }.form-grid .button { width:max-content; }.question-admin { justify-content:start; }.question-admin>span { display:grid; flex:none; width:32px; height:32px; place-items:center; border-radius:50%; background:#fff2c5; color:#92701a; font-size:12px; font-weight:bold; }
.question-page { max-width:720px; }.question-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:55px; }.question-top>div>p:last-child { margin:0; color:#6f808b; font-size:13px; }.timer { border:1px solid #d0c7ba; border-radius:5px; padding:10px 14px; color:var(--ink); font-family:monospace; font-size:19px; font-weight:bold; }.timer.danger { border-color:#dc7b70; background:#fbe6e2; color:#a44239; }.choices { display:grid; gap:10px; margin:26px 0; }.choice { display:flex; align-items:center; gap:12px; min-height:57px; border:1px solid var(--line); border-radius:6px; padding:11px 14px; background:var(--card); cursor:pointer; }.choice:hover { border-color:#d1a52d; background:#fff9e7; }.choice input { width:auto; }.choice span { font-size:14px; }
@media (max-width:780px) { body:not(.admin-body) { background:linear-gradient(180deg,#10283c 0%,#10283c 42%,#f6f2e9 42%); }.admin-layout { grid-template-columns:1fr; gap:12px; }.admin-rail { display:flex; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--line); padding:0 0 15px; }.admin-rail .eyebrow { flex-basis:100%; }.metric-grid { grid-template-columns:repeat(2,1fr); }.panel-head { align-items:start; flex-direction:column; }.form-grid { grid-template-columns:1fr; }.form-grid .full { grid-column:auto; }.public-hero { padding-top:90px; }.access-page,.question-page,.result-page { padding-top:70px; }.trivia-row { align-items:start; flex-direction:column; }.row-actions { flex-wrap:wrap; } }