:root{
  --bg:#0f1115; --surface:#161a22; --surface-2:#1c212b; --line:#262c38;
  --text:#e8eaed; --muted:#9aa4b2; --dim:#6b7480;
  --accent:#7ee2a8; --accent-dim:#1f5133; --warn:#ffcc66; --bad:#ff8a80;
  --qb:#c792ea; --rb:#7ee2a8; --wr:#82b1ff; --te:#ffcc66; --k:#8b95a3; --def:#8b95a3;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  height:100dvh; display:flex; flex-direction:column; overflow:hidden;
}
header{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:10px 14px; background:var(--surface); border-bottom:1px solid var(--line);
}
header h1{margin:0; font-size:15px; letter-spacing:.02em}
header .sub{font-size:11px; color:var(--muted)}
header .sp{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
button,select{
  background:var(--surface-2); color:var(--text); border:1px solid var(--line);
  border-radius:6px; padding:4px 9px; font-size:12px; cursor:pointer; font-family:inherit;
}
button:hover{background:#252c39}
button.primary{background:var(--accent-dim); border-color:#2c6b46; color:var(--accent)}
main{flex:1; overflow:hidden; display:grid; grid-template-columns:1fr; min-height:0}
@media (min-width:900px){ main{grid-template-columns:minmax(0,1fr) 340px} }
.panel{overflow-y:auto; min-height:0; padding:12px 14px}
.side{border-top:1px solid var(--line); background:var(--surface)}
@media (min-width:900px){ .side{border-top:none; border-left:1px solid var(--line)} }
h2{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
   margin:14px 0 6px; font-weight:600}
h2:first-child{margin-top:0}
table{width:100%; border-collapse:collapse}
th{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim);
   text-align:left; font-weight:600; padding:4px 6px; position:sticky; top:0;
   background:var(--bg); border-bottom:1px solid var(--line)}
td{padding:4px 6px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums}
tbody tr{cursor:pointer}
tbody tr:hover{background:var(--surface-2)}
tr.gone{opacity:.32}
tr.mine{background:rgba(126,226,168,.07)}
.num{text-align:right}
.pos{display:inline-block; min-width:26px; text-align:center; border-radius:4px;
     font-size:10px; font-weight:700; padding:1px 4px; color:#0f1115}
.pos.QB{background:var(--qb)} .pos.RB{background:var(--rb)} .pos.WR{background:var(--wr)}
.pos.TE{background:var(--te)} .pos.K{background:var(--k)} .pos.DEF{background:var(--def)}
.rec{background:#12251a; border:1px solid var(--accent-dim); border-radius:8px; padding:10px}
.rec .nm{font-size:17px; font-weight:700; color:var(--accent)}
.rec .why{font-size:11px; color:#a9b6c4; margin-top:4px}
.row{display:flex; justify-content:space-between; gap:8px; padding:4px 0;
     border-top:1px solid var(--line); font-size:12px}
.row .r{color:var(--muted); font-size:11px; white-space:nowrap}
.muted{color:var(--muted)} .warn{color:var(--warn)} .bad{color:var(--bad)}
.small{font-size:11px}
.chip{display:inline-block; background:var(--surface-2); border:1px solid var(--line);
      border-radius:4px; padding:0 5px; font-size:10px; color:var(--muted); margin-left:4px}
.filters{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px}
.filters button.on{background:var(--accent-dim); color:var(--accent); border-color:#2c6b46}
#status{font-size:11px; color:var(--dim); padding:6px 14px; border-top:1px solid var(--line);
        background:var(--surface)}