@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,650&display=swap');

:root { --forest:#143c36; --forest-2:#21584e; --cream:#f4f0e6; --paper:#fffdf7; --ink:#1f2926; --muted:#68736f; --gold:#e5a93f; --coral:#d9684f; --line:#dcd8ce; --shadow:0 14px 40px rgba(20,60,54,.11); font-family:"DM Sans",sans-serif; color:var(--ink); background:var(--cream); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 5% 5%,#fff9df 0,transparent 28rem),var(--cream); }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.topbar { height:72px; padding:0 max(20px,calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; background:rgba(244,240,230,.9); backdrop-filter:blur(14px); position:sticky; top:0; z-index:10; border-bottom:1px solid rgba(20,60,54,.08); }
.brand { color:var(--forest); text-decoration:none; font-family:"Fraunces",serif; font-size:1.45rem; display:flex; align-items:center; gap:9px; }
.brand-mark { display:grid; place-items:center; width:35px; height:35px; border-radius:50%; color:var(--forest); background:var(--gold); font-family:sans-serif; }
nav { display:flex; gap:5px; overflow:auto; }
.nav-button { color:var(--muted); background:transparent; border:0; border-radius:999px; padding:9px 13px; white-space:nowrap; }
.nav-button.active { color:white; background:var(--forest); }
.shell { width:min(1180px,calc(100% - 32px)); margin:32px auto 80px; }
h1,h2,h3 { font-family:"Fraunces",serif; color:var(--forest); margin-top:0; line-height:1.08; }
h1 { font-size:clamp(2.3rem,7vw,5.5rem); letter-spacing:-.045em; }
h2 { font-size:clamp(1.6rem,3vw,2.4rem); }
h3 { font-size:1.25rem; }
p { line-height:1.55; }
.eyebrow { color:var(--coral); font-weight:700; text-transform:uppercase; letter-spacing:.13em; font-size:.76rem; }
.hero { display:grid; grid-template-columns:1.15fr .85fr; gap:24px; min-height:520px; }
.hero-card,.card { background:var(--paper); border:1px solid rgba(20,60,54,.09); border-radius:26px; padding:clamp(24px,4vw,52px); box-shadow:var(--shadow); }
.hero-card { display:flex; flex-direction:column; justify-content:center; overflow:hidden; position:relative; }
.hero-card:after { content:""; width:230px; height:230px; border:55px solid var(--gold); border-radius:50%; position:absolute; right:-110px; bottom:-100px; opacity:.7; }
.hero-card p { max-width:620px; color:var(--muted); font-size:1.08rem; }
.login-card { background:var(--forest); color:white; border-radius:26px; padding:clamp(26px,4vw,48px); display:flex; flex-direction:column; justify-content:center; box-shadow:var(--shadow); }
.login-card h2,.login-card label { color:white; }
.login-card p { color:#c8d7d3; }
.stack { display:grid; gap:14px; }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.split { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
label { display:grid; gap:7px; font-size:.85rem; font-weight:600; color:var(--forest); }
.check { display:flex; align-items:center; gap:10px; cursor:pointer; }
.check input { width:18px; height:18px; margin:0; flex:0 0 auto; accent-color:var(--forest); }
.help { position:relative; display:inline-grid; place-items:center; width:17px; height:17px; margin-left:3px; border-radius:50%; color:white; background:var(--forest-2); font-size:.7rem; font-weight:700; cursor:help; vertical-align:text-bottom; }
.help:hover:after,.help:focus:after { content:attr(data-help); position:absolute; left:50%; bottom:calc(100% + 9px); width:230px; padding:10px 12px; border-radius:9px; color:white; background:var(--ink); font-size:.76rem; font-weight:500; line-height:1.4; text-align:left; box-shadow:var(--shadow); transform:translateX(-50%); z-index:20; pointer-events:none; }
.help:focus { outline:2px solid var(--gold); outline-offset:2px; }
input,textarea,select { width:100%; padding:12px 14px; color:var(--ink); background:white; border:1px solid var(--line); border-radius:12px; outline:none; }
input:focus,textarea:focus,select:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(229,169,63,.2); }
textarea { resize:vertical; min-height:90px; }
.button { border:0; border-radius:12px; padding:12px 17px; font-weight:700; color:white; background:var(--forest); display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.button:hover { background:var(--forest-2); transform:translateY(-1px); }
.button.secondary { color:var(--forest); background:#e6eee9; }
.button.gold { color:var(--forest); background:var(--gold); }
.button.danger { background:var(--coral); }
.button.small { padding:8px 11px; font-size:.82rem; }
.button:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.divider { display:flex; align-items:center; gap:12px; color:#9bb1ab; margin:7px 0; }
.divider:before,.divider:after { content:""; height:1px; background:#436b64; flex:1; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.page-head h1 { font-size:clamp(2.2rem,5vw,4rem); margin-bottom:4px; }
.page-head p { margin:0; color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.span-12 { grid-column:span 12; }.span-8 { grid-column:span 8; }.span-7 { grid-column:span 7; }.span-6 { grid-column:span 6; }.span-5 { grid-column:span 5; }.span-4 { grid-column:span 4; }
.card { padding:24px; border-radius:20px; box-shadow:0 8px 24px rgba(20,60,54,.07); }
.card.flat { box-shadow:none; }
.card.gold { background:#f6d997; }
.card.forest { background:var(--forest); color:white; }.card.forest h2,.card.forest h3 { color:white; }
.metric { font-family:"Fraunces",serif; color:var(--forest); font-size:2.5rem; display:block; }
.muted { color:var(--muted); }
.pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:6px 10px; color:var(--forest); background:#e5eee9; font-size:.77rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.pill.pending { background:#fff0cb; }.pill.rejected { color:#812b1e; background:#f9d6cf; }.pill.approved { color:#15553c; background:#d8f1e4; }
.list { display:grid; gap:10px; }
.list-item { background:white; border:1px solid var(--line); border-radius:15px; padding:15px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.list-item p,.list-item h3 { margin:3px 0; }
.answer-thumb { width:120px; height:90px; object-fit:cover; border-radius:11px; flex:0 0 auto; }
.clue-card { background:var(--paper); border-radius:22px; border:1px solid rgba(20,60,54,.1); overflow:hidden; box-shadow:var(--shadow); }
.clue-number { height:8px; background:var(--gold); }
.clue-content { padding:25px; }
.clue-content h2 { font-size:1.7rem; }
.photo { display:block; width:100%; max-height:420px; object-fit:cover; border-radius:14px; background:#e4e0d7; }
.standings { width:100%; border-collapse:collapse; }
.standings td,.standings th { padding:11px 8px; border-bottom:1px solid var(--line); text-align:left; }
.standings tr.mine { background:#fff1c8; font-weight:700; }
.review { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(260px,1.2fr); gap:24px; }
.review .photo { height:340px; }
.team-submission { min-width:0; padding:16px; border:1px solid var(--line); border-radius:16px; background:white; }
.team-submission .photo { height:240px; }
.team-submission h3,.team-submission p { margin:10px 0; }
.time { font-variant-numeric:tabular-nums; }
.progress { height:8px; border-radius:8px; background:#d9ded9; overflow:hidden; }
.progress span { display:block; height:100%; background:var(--gold); }
.empty { text-align:center; padding:45px 20px; color:var(--muted); }
.empty span { font-size:2.8rem; color:var(--gold); }
#toast { position:fixed; right:20px; bottom:20px; max-width:360px; padding:13px 17px; background:var(--ink); color:white; border-radius:12px; box-shadow:var(--shadow); opacity:0; transform:translateY(15px); pointer-events:none; transition:.2s; z-index:30; }
#toast.show { opacity:1; transform:none; }
.loading { animation:pulse 1.3s infinite alternate; }
@keyframes pulse { to { opacity:.58; } }
@media(max-width:800px) { .hero { grid-template-columns:1fr; }.hero-card { min-height:410px; }.span-8,.span-7,.span-6,.span-5,.span-4 { grid-column:span 12; }.review { grid-template-columns:1fr; }.page-head { align-items:flex-start; flex-direction:column; }.topbar { padding:0 14px; }.brand { font-size:1.15rem; }.nav-button { padding:8px 9px; font-size:.85rem; } }
@media(max-width:500px) { .shell { width:min(100% - 20px,1180px); margin-top:16px; }.hero-card,.login-card,.card { padding:21px; border-radius:19px; }.list-item { align-items:flex-start; flex-direction:column; }.list-item .button { width:100%; } }