:root { --ink:#f2f6ff; --muted:#94a3ba; --panel:#101d30; --panel-2:#172941; --line:#263a55; --accent:#d5fa68; --accent-2:#80a6ff; --danger:#ff8d8d; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#07111f; font-family:'DM Sans',sans-serif; min-height:100vh; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.app-shell { max-width:1240px; margin:auto; padding:0 28px 70px; }
.topbar { height:86px; display:flex; align-items:center; border-bottom:1px solid var(--line); gap:42px; }
.brand { color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:10px; font:700 23px 'Space Grotesk'; letter-spacing:-1px; }
.brand-mark { display:grid; place-items:center; width:29px; height:29px; border-radius:9px; background:var(--accent); color:#0b1825; font-size:21px; }
.nav-tabs { display:flex; gap:24px; height:100%; align-items:center; flex:1; }
.nav-tab,.admin-link { color:var(--muted); background:none; border:0; height:100%; position:relative; }
.nav-tab.active { color:var(--ink); }
.nav-tab.active:after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:3px; background:var(--accent); border-radius:3px 3px 0 0; }
.admin-link { height:auto; border:1px solid var(--line); border-radius:9px; padding:10px 14px; color:var(--ink); }
.remove-signup { background:none; border:0; color:var(--muted); font-size:11px; padding:2px 0 2px 8px; }.remove-signup:hover { color:var(--danger); }
.signup-form > div:has(#contact) { display:none; }
.admin-link span { color:var(--accent); padding-left:5px; }
.hero { display:flex; justify-content:space-between; align-items:end; padding:54px 0 29px; gap:30px; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:1.5px; font-size:11px; font-weight:700; }
h1,h2,h3 { font-family:'Space Grotesk'; margin:0; letter-spacing:-1.4px; }
h1 { font-size:clamp(34px,5vw,58px); line-height:1; max-width:650px; margin-top:12px; }
h2 { font-size:25px; }
h3 { font-size:18px; }
.hero p { max-width:440px; color:var(--muted); line-height:1.6; margin:15px 0 0; }
.week-picker { background:var(--panel); border:1px solid var(--line); padding:15px; border-radius:12px; min-width:240px; }
label { color:var(--muted); font-size:12px; display:block; margin-bottom:7px; }
input,select { color:var(--ink); background:#0b1829; border:1px solid var(--line); border-radius:8px; padding:11px 12px; width:100%; outline:none; }
input:focus,select:focus { border-color:var(--accent-2); }
.grid { display:grid; grid-template-columns:1fr; gap:20px; }
.grid > .card:first-child { display:none; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:23px; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:20px; }
.subtle { color:var(--muted); font-size:13px; }
.position-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
.position-card { border:1px solid var(--line); border-radius:10px; padding:15px; background:#0d1a2c; }
.position-card.full { border-color:#b2d957; }
.position-top { display:flex; justify-content:space-between; align-items:center; }
.position-name { font-weight:700; text-transform:capitalize; }
.count { font:600 13px 'Space Grotesk'; color:var(--accent); }
.meter { height:5px; background:#243550; border-radius:9px; margin:13px 0 10px; overflow:hidden; }
.meter i { display:block; height:100%; background:var(--accent); border-radius:inherit; }
.signup-form { display:grid; gap:14px; }
.row { display:grid; grid-template-columns:1.1fr .9fr; gap:12px; }
.primary,.secondary,.danger { border:0; border-radius:8px; padding:12px 16px; font-weight:700; }
.primary { background:var(--accent); color:#07111f; }
.secondary { background:var(--panel-2); border:1px solid var(--line); color:var(--ink); }
.danger { background:transparent; border:1px solid #79444c; color:var(--danger); }
.primary:hover { filter:brightness(1.08); }
.teams { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.team-card { border-top:3px solid var(--accent-2); background:#0d1a2c; border-radius:10px; padding:15px; }
.team-card.drag-over { outline:2px dashed var(--accent); outline-offset:3px; }.team-actions { margin-left:auto; }.team-add,.team-remove { background:none; border:0; color:var(--accent); font-size:11px; padding:2px 0 2px 8px; }.team-remove { color:var(--muted); }.team-remove:hover { color:var(--danger); }
.team-card:nth-child(2) { border-color:var(--accent); }.team-card:nth-child(3) { border-color:#ffac70; }
.team-title { display:flex; justify-content:space-between; margin-bottom:13px; }.team-elo { color:var(--accent); font-size:12px; }
.player-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #20314a; font-size:13px; }.player-row:last-child { border:0; }.player-position { color:var(--muted); font-size:11px; }
.team-card .player-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; }.team-card .player-row > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.team-card .player-position { text-align:right; white-space:nowrap; }
.schedule-row { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:15px 0; border-bottom:1px solid #20314a; }.schedule-row:last-child { border:0; }.schedule-result { color:var(--accent); font:600 15px 'Space Grotesk'; white-space:nowrap; }
.history-list { display:grid; gap:16px; }.history-card h2 { margin-top:6px; }.history-score { font:700 25px 'Space Grotesk'; color:var(--accent); white-space:nowrap; }.history-teams { display:grid; grid-template-columns:1fr 1fr; gap:20px; border-top:1px solid var(--line); padding-top:16px; }.history-teams p { color:var(--muted); font-size:13px; line-height:1.55; margin:7px 0 0; }.video-link { display:inline-block; margin-top:16px; color:var(--accent-2); font-size:13px; text-decoration:none; }.video-link:hover { text-decoration:underline; }.history-video-form { border-top:1px solid var(--line); margin-top:16px; padding-top:16px; }.video-form-row { display:grid; grid-template-columns:1fr auto; gap:10px; }
.team-elo { display:none; }
.empty { padding:25px 4px; color:var(--muted); text-align:center; line-height:1.5; }
.rank-list { display:grid; gap:8px; }.rank-row { display:grid; grid-template-columns:42px 1fr 100px; align-items:center; padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:10px; }.rank { font:700 21px 'Space Grotesk'; color:var(--muted); }.rank-row:nth-child(-n+3) .rank { color:var(--accent); }.rank-name { font-weight:700; }.rank-meta { color:var(--muted); font-size:12px; margin-top:3px; }.elo { text-align:right; font:700 18px 'Space Grotesk'; }.elo small { display:block; color:var(--muted); font:400 11px 'DM Sans'; }
.admin-panel { max-width:980px; margin:48px auto; }.admin-panel .card { margin-bottom:16px; }.admin-actions { display:flex; gap:10px; flex-wrap:wrap; }.admin-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; }.admin-grid input { padding:9px; }
.modal-backdrop { position:fixed; inset:0; background:#02070dcc; display:grid; place-items:center; padding:20px; z-index:5; }.modal { width:min(420px,100%); background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px; }.modal p { color:var(--muted); font-size:13px; line-height:1.5; }.modal-actions { display:flex; gap:10px; margin-top:15px; }.toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:var(--accent); color:#07111f; padding:12px 18px; border-radius:8px; font-weight:700; transition:.2s; z-index:8; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:800px) { .app-shell { padding:0 16px 45px; }.topbar { gap:18px; }.admin-link { font-size:12px; padding:8px; }.hero { display:block; padding-top:38px; }.week-picker { margin-top:25px; }.grid { grid-template-columns:1fr; }.teams { grid-template-columns:1fr; }.admin-grid { grid-template-columns:repeat(2,1fr); }.position-grid { grid-template-columns:1fr; } }