/* USSC visual system — light theme only */
:root{
  --bg:#fafaf9; --bg2:#fff; --bg3:#f5f5f4; --hover:#eceae8;
  --tx:#1c1917; --tx2:#78716c; --tx3:#a8a29e;
  --bd:#e7e5e4; --bd2:#d6d3d1;
  --pos:#15803d; --posbg:#dcfce7;
  --neg:#b91c1c; --negbg:#fee2e2;
  --acc:#2563eb; --accbg:#eff6ff;
}
html{color-scheme:light only}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:13px/1.4 'DM Sans',-apple-system,sans-serif}
.mono{font-family:'JetBrains Mono',monospace}
a{color:var(--acc);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:20px 24px}

/* nav */
nav{background:var(--bg2);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:10}
nav .wrap{display:flex;align-items:center;gap:4px;padding:0 24px;height:46px}
nav .brand{font-weight:700;font-size:14px;margin-right:14px;color:var(--tx)}
nav a.tab{color:var(--tx2);padding:13px 10px;border-bottom:2px solid transparent;font-weight:500}
nav a.tab.active{color:var(--acc);border-bottom-color:var(--acc)}
nav .spacer{flex:1}
nav button.logout{background:none;border:none;color:var(--tx3);cursor:pointer;font:inherit;padding:8px}
nav button.logout:hover{color:var(--neg)}

/* cards */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0}
.kpi{background:var(--bg2);border:1px solid var(--bd);border-radius:6px;padding:10px 12px}
.kpi .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);margin-bottom:4px}
.kpi .val{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:600}
.kpi .sub{font-size:11px;color:var(--tx2);margin-top:2px}

/* tables */
.ws{overflow-x:auto;background:var(--bg2);border:1px solid var(--bd);border-radius:6px}
table{border-collapse:collapse;width:100%}
th{position:sticky;top:0;background:var(--bg3);text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--tx2);padding:8px 10px;border-bottom:1px solid var(--bd2);white-space:nowrap}
td{padding:7px 10px;border-bottom:1px solid var(--bd);vertical-align:middle}
tr:hover td{background:var(--hover)}
td.num,th.num{text-align:right;font-family:'JetBrains Mono',monospace}
td.first{font-weight:600}
tr.total td{background:var(--bg3);font-weight:700;border-top:2px solid var(--bd2)}

/* pills */
.pill{display:inline-block;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600;font-family:'JetBrains Mono',monospace}
.pill.pos{color:var(--pos);background:var(--posbg)}
.pill.neg{color:var(--neg);background:var(--negbg)}
.pill.mut{color:var(--tx2);background:var(--bg3)}
.pill.acc{color:var(--acc);background:var(--accbg)}

/* forms */
input,select,button{font:inherit}
input[type=email],input[type=text]{border:1px solid var(--bd2);border-radius:6px;padding:9px 12px;width:100%;background:var(--bg2)}
input:focus{outline:2px solid var(--accbg);border-color:var(--acc)}
.btn{background:var(--acc);color:#fff;border:none;border-radius:6px;padding:9px 16px;font-weight:600;cursor:pointer}
.btn:disabled{background:var(--bd2);cursor:not-allowed}
.btn.ghost{background:var(--bg3);color:var(--tx)}

/* match rows */
.dayhdr{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);margin:18px 0 6px;font-weight:600}
.mrow{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--bd);border-radius:6px;padding:8px 12px;margin-bottom:6px;cursor:pointer}
.mrow:hover{background:var(--hover)}
.mrow .teams{flex:1;min-width:0}
.mrow .t{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .meta{font-size:11px;color:var(--tx3)}
.mrow .score{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;white-space:nowrap}
.mrow .pred{display:flex;align-items:center;gap:4px}
.mrow input.sc{width:42px;text-align:center;font-family:'JetBrains Mono',monospace;padding:6px 4px;border:1px solid var(--bd2);border-radius:6px;-moz-appearance:textfield}
.mrow input.sc::-webkit-outer-spin-button,.mrow input.sc::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mrow input.sc:disabled{background:var(--bg3);color:var(--tx3)}
.stagechip{font-size:10px;font-weight:700;color:var(--tx3);background:var(--bg3);border-radius:4px;padding:2px 6px;white-space:nowrap}

.note{color:var(--tx2);font-size:12px;margin:8px 0}
.errbox{background:var(--negbg);color:var(--neg);border-radius:6px;padding:10px 12px;margin:10px 0;font-size:13px}
.okbox{background:var(--posbg);color:var(--pos);border-radius:6px;padding:10px 12px;margin:10px 0;font-size:13px}
h1{font-size:20px;margin:14px 0 4px}
h2{font-size:15px;margin:20px 0 8px}

/* modal */
.modal{position:fixed;inset:0;background:rgba(28,25,23,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal .box{background:var(--bg2);border-radius:10px;padding:22px;max-width:380px;width:100%}

/* landing */
.hero{max-width:420px;margin:8vh auto 0;padding:0 20px}
.hero .logo{font-size:34px}
.hero h1{font-size:24px;margin:8px 0 2px}
.hero .sub{color:var(--tx2);margin-bottom:20px}
.consent{display:flex;gap:8px;align-items:flex-start;margin:12px 0;font-size:13px;color:var(--tx2)}
.consent input{margin-top:2px}

@media (max-width:640px){
  .wrap{padding:14px 12px}
  nav .wrap{padding:0 10px;overflow-x:auto}
  nav a.tab{padding:13px 7px;font-size:12px;white-space:nowrap}
  .kpi .val{font-size:16px}
}