:root{--pitch:#0c3b2b;--chalk:#f3f6f1;--ink:#14201a;--line:#d5ddd3;--won:#1b7f4b;--lost:#c23b32;--void:#7b867f;--pend:#d9a514;--r:6px}
*{box-sizing:border-box}
body{margin:0;background:var(--chalk);color:var(--ink);font:400 17px/1.55 'Source Serif 4',Georgia,serif}
.wrap{max-width:860px;margin:0 auto;padding:0 18px}
.narrow{max-width:560px}
.top{background:var(--pitch);color:#fff;padding:26px 0 22px;border-bottom:6px solid var(--pend)}
.brand{margin:0;font:800 clamp(30px,7vw,52px)/1 'Barlow Condensed','Arial Narrow',sans-serif;letter-spacing:.02em}
.brand b{color:var(--pend)}
.sub{margin:8px 0 0;color:#cfe0d6}
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:24px 0 10px;border:2px solid var(--pitch);border-radius:var(--r);overflow:hidden;background:#fff}
.cell{padding:14px 6px;text-align:center;font-size:14px;border-right:1px solid var(--line)}
.cell:last-child{border-right:0}
.cell span{display:block;font:800 clamp(34px,9vw,56px)/1 'Barlow Condensed',sans-serif}
.cell.won span{color:var(--won)}.cell.lost span{color:var(--lost)}.cell.void span{color:var(--void)}.cell.pend span{color:var(--pend)}
.metrics{display:grid;gap:4px;margin:0 0 28px;font-size:15px}
.metrics p{margin:0}.metrics b{font:800 22px 'Barlow Condensed',sans-serif;margin-right:4px}
.title{font:800 28px/1.1 'Barlow Condensed',sans-serif;margin:30px 0 12px}
.day h2{font:600 18px 'Barlow Condensed',sans-serif;margin:24px 0 8px;padding-bottom:4px;border-bottom:2px solid var(--pitch)}
.pick{display:flex;justify-content:space-between;gap:14px;background:#fff;border:1px solid var(--line);border-left:6px solid var(--pend);border-radius:var(--r);padding:12px 14px;margin:0 0 10px}
.pick.won{border-left-color:var(--won)}.pick.lost{border-left-color:var(--lost)}.pick.void{border-left-color:var(--void)}
.pick h3{margin:0;font:600 20px/1.2 'Barlow Condensed',sans-serif}
.league{margin:0;font-size:13px;color:#56635b}
.sel{margin:2px 0 0}.note{margin:6px 0 0;font-size:15px;color:#3a4740}
.side{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:84px}
.odds{font:800 30px/1 'Barlow Condensed',sans-serif}
.badge{font:600 13px 'Barlow Condensed',sans-serif;padding:2px 9px;border-radius:99px;background:var(--pend);color:#fff}
.won .badge{background:var(--won)}.lost .badge{background:var(--lost)}.void .badge{background:var(--void)}
.empty{padding:18px;border:1px dashed var(--void);border-radius:var(--r);background:#fff}
.foot{margin-top:40px;padding:22px 0;background:var(--pitch);color:#cfe0d6;font-size:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-top:20px}
label{display:block;margin:0 0 12px;font-size:15px}
input,select,textarea{display:block;width:100%;margin-top:4px;padding:10px;font:inherit;border:1px solid #aab6ad;border-radius:var(--r);background:#fff}
button{padding:10px 18px;font:600 17px 'Barlow Condensed',sans-serif;background:var(--pitch);color:#fff;border:0;border-radius:var(--r);cursor:pointer}
button.ghost{background:transparent;color:var(--lost);border:1px solid currentColor}
:focus-visible{outline:3px solid var(--pend);outline-offset:2px}
.row{display:flex;gap:8px;margin-top:10px;align-items:center}.row select{margin:0;flex:1}
.flash{padding:10px 14px;border-radius:var(--r);margin:18px 0 0}.flash.ok{background:#dff1e6;color:#10542f}.flash.bad{background:#f8dfdc;color:#8a231c}
.logout{margin:28px 0;display:flex;gap:14px;align-items:center}
@media(max-width:520px){.pick{flex-direction:column}.side{flex-direction:row;align-items:center;justify-content:space-between;width:100%}}