:root{
  --green:#1b4332; --green2:#2d6a4f; --field:#f4f6f4; --card:#ffffff;
  --ink:#1c2321; --muted:#6b7671; --line:#dde3de; --accent:#d4a017;
  --red:#b3402e; --blue:#2b5d8a; --ok:#2d6a4f;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--field); color:var(--ink); font-size:15px;}
header{background:var(--green); color:#fff; padding:10px 20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
header h1{font-size:18px; font-weight:700;}
header .spacer{flex:1;}
.userchip{background:rgba(255,255,255,.12); border-radius:20px; padding:5px 14px; font-size:13px;}
a.logout{color:#d8e4dd; font-size:13px;}
nav{background:var(--green2); padding:0 20px; display:flex; gap:2px; flex-wrap:wrap;}
nav a{color:#d8e4dd; padding:11px 16px; font-size:14px; text-decoration:none; border-bottom:3px solid transparent;}
nav a:hover{color:#fff;}
nav a.active{color:#fff; border-bottom-color:var(--accent); font-weight:600;}
nav a.admin-tab::before{content:"⚙ "; font-size:11px;}
main{max-width:1080px; margin:0 auto; padding:20px;}
h2{font-size:20px; margin-bottom:4px;}
.sub{color:var(--muted); font-size:13px; margin-bottom:16px;}
.grid{display:grid; gap:16px;}
.g2{grid-template-columns:1fr 1fr;}
@media(max-width:800px){.g2{grid-template-columns:1fr;}}
.card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px;}
.card h3{font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:10px;}
.banner{border-radius:10px; padding:12px 16px; margin-bottom:16px; font-size:14px;}
.banner.warn{background:#fdf3e3; border:1px solid #e8c97a;}
.banner.info{background:#e8f0f7; border:1px solid #b9d0e2;}
table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{text-align:left; color:var(--muted); font-weight:600; padding:7px 8px; border-bottom:2px solid var(--line); white-space:nowrap;}
td{padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top;}
tr:last-child td{border-bottom:none;}
tr.me td{background:#f3f8e9;}
.num{text-align:right; font-variant-numeric:tabular-nums;}
.pill{display:inline-block; border-radius:12px; padding:2px 9px; font-size:11.5px; font-weight:600; white-space:nowrap;}
.pill.nfl{background:#e3ebf4; color:var(--blue);}
.pill.cfb{background:#f4e9e3; color:#8a4b2b;}
.pill.paid{background:#e2efe6; color:var(--ok);}
.pill.unpaid{background:#f7e2de; color:var(--red);}
.pill.pending{background:#fdf3d5; color:#8a6d0b;}
.pill.win{background:#fdf3d5; color:#8a6d0b;}
.pill.auto{background:#eee; color:#777;}
.game{border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px; background:var(--card);}
.game .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:12px; color:var(--muted); gap:8px; flex-wrap:wrap;}
.teams{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
@media(max-width:560px){.teams{grid-template-columns:1fr;}}
label.team{border:1.5px solid var(--line); border-radius:8px; padding:9px 12px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; background:#fafbfa; gap:8px;}
label.team:hover{border-color:var(--green2);}
label.team.sel, .team input:checked ~ span{font-weight:600;}
label.team:has(input:checked){border-color:var(--green2); background:#e9f2ec; font-weight:600;}
.team .spread{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums;}
.team input[type=radio]{accent-color:var(--green2);}
.ha{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-right:6px;}
.tb{background:#fffdf4; border:1.5px dashed var(--accent);}
.tb input[type=number]{width:70px; padding:6px; border:1px solid var(--line); border-radius:6px; font-size:15px; text-align:center;}
.deadline{background:var(--green); color:#fff; border-radius:10px; padding:12px 16px; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;}
.deadline .clock{font-size:18px; font-weight:700; font-variant-numeric:tabular-nums;}
.btn{background:var(--green2); color:#fff; border:none; border-radius:8px; padding:9px 18px; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block;}
.btn.secondary{background:#fff; color:var(--green2); border:1.5px solid var(--green2);}
.btn.small{padding:5px 11px; font-size:12.5px;}
.btn.danger{background:var(--red);}
.btn:disabled{opacity:.35; cursor:not-allowed;}
.field{margin-bottom:12px;}
.field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:4px; font-weight:600;}
.field input,.field select,.field textarea{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:7px; font-size:14px; background:#fff;}
.msg{border-left:3px solid var(--green2); padding:8px 12px; margin-bottom:10px; background:#fafbfa; border-radius:0 6px 6px 0;}
.msg .meta{font-size:11.5px; color:var(--muted); margin-bottom:2px;}
.msg.personal{border-left-color:var(--accent); background:#fffdf4;}
.statrow{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
.stat{flex:1; min-width:140px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 16px;}
.stat .v{font-size:22px; font-weight:700;}
.stat .l{font-size:12px; color:var(--muted);}
.weeknav{display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap;}
.weeknav select, .toolbar select{padding:6px 10px; border:1px solid var(--line); border-radius:7px; font-size:14px;}
.pick-x{color:var(--red); font-weight:700;}
.pick-ok{color:var(--ok); font-weight:700;}
.allpicks th,.allpicks td{white-space:nowrap; font-size:12.5px; padding:6px 7px;}
.gm{font-size:10px; color:var(--muted); font-weight:400;}
.scroll{overflow-x:auto;}
.toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px;}
.toolbar .spacer{flex:1;}
.payopt{display:flex; gap:10px; flex-wrap:wrap;}
.payopt button{flex:1; min-width:120px; border:1.5px solid var(--line); border-radius:10px; padding:14px; text-align:center; cursor:pointer; background:#fff; font-size:14px;}
.payopt button:hover{border-color:var(--green2);}
.payopt b{display:block; margin-bottom:4px;}
.payopt span{font-size:12px; color:var(--muted);}
.auth-wrap{max-width:400px; margin:60px auto;}
.footer-note{color:var(--muted); font-size:12px; margin-top:24px; text-align:center;}