:root{
  --bg:#0b0f14; --panel:#121821; --panel2:#182029; --line:#22303d;
  --txt:#e6edf3; --dim:#8b9bab; --acc:#4ade80; --acc2:#38bdf8;
  --qb:#f472b6; --rb:#4ade80; --wr:#38bdf8; --te:#fbbf24; --dst:#a78bfa; --k:#94a3b8;
  --warn:#f87171;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);
  font:14px/1.4 "Segoe UI",system-ui,sans-serif;overflow:hidden}

header{display:flex;align-items:center;justify-content:space-between;
  padding:8px 16px;background:linear-gradient(90deg,#0f172a,#111a24);
  border-bottom:1px solid var(--line)}
header h1{margin:0;font-size:17px;letter-spacing:2px;font-weight:700}
.yr{color:var(--acc)}
.hdr-right{display:flex;gap:12px;align-items:center}
.clock{font-variant-numeric:tabular-nums;color:var(--dim);font-size:13px}
.datastamp{font-size:10px;color:#5b6b7b;text-align:right;line-height:1.3;max-width:260px}

main{display:grid;grid-template-columns:320px 1fr 320px;gap:10px;
  padding:10px;height:calc(100vh - 45px)}
.col{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto}
.col::-webkit-scrollbar{width:8px}
.col::-webkit-scrollbar-thumb{background:#1e2a36;border-radius:4px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px}
.card.grow{flex:1;display:flex;flex-direction:column;min-height:0}
.card h3{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--dim);display:flex;justify-content:space-between;align-items:baseline}
.card h3 small{font-size:10px;text-transform:none;letter-spacing:0;color:#5b6b7b}

/* ---- pick card ---- */
.pickcard{background:linear-gradient(135deg,#132030,#0f1720)}
.pc-top{display:flex;justify-content:space-between;gap:8px}
.lbl{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--dim)}
.big{font-size:26px;font-weight:700;line-height:1.1}
.mid{font-size:15px;font-weight:600;color:var(--acc2)}
.right{text-align:right}
.pc-turn{margin-top:8px;padding:6px;text-align:center;font-weight:700;
  background:var(--acc);color:#04150a;border-radius:5px;animation:pulse 1.1s infinite}
@keyframes pulse{50%{opacity:.55}}
.untilbar{margin-top:8px;font-size:12px;color:var(--dim)}

/* ---- recs ---- */
.recs{display:flex;flex-direction:column;gap:6px}
.rec{display:flex;gap:8px;align-items:center;padding:7px 8px;border-radius:6px;
  background:var(--panel2);border-left:3px solid var(--line);cursor:pointer}
.rec:hover{background:#1e2836}
.rec.top{border-left-color:var(--acc);background:#14251c}
.rec .rk{font-size:10px;color:var(--dim);width:16px}
.rec .nm{font-weight:600;flex:1}
.rec .why{font-size:11px;color:var(--dim);flex-basis:100%;margin-top:2px}
.rec-wrap{display:flex;flex-wrap:wrap}
.strat{font-size:12px;color:var(--acc2);background:#0e1c26;border:1px solid #1b3242;
  padding:6px 8px;border-radius:6px;margin-bottom:6px;line-height:1.45}

/* ---- pos chips ---- */
.pos{font-size:10px;font-weight:700;padding:1px 5px;border-radius:3px;color:#08111a}
.pos.QB{background:var(--qb)} .pos.RB{background:var(--rb)} .pos.WR{background:var(--wr)}
.pos.TE{background:var(--te)} .pos.DST{background:var(--dst)} .pos.K{background:var(--k)}

/* ---- runs ---- */
.runs{display:flex;gap:6px;flex-wrap:wrap}
.runbar{flex:1;min-width:44px;text-align:center;background:var(--panel2);
  border-radius:5px;padding:5px 2px}
.runbar b{display:block;font-size:17px}
.runbar span{font-size:9px;color:var(--dim)}
.runbar.hot{outline:1px solid var(--warn);background:#2a1515}

/* ---- roster ---- */
.roster{display:flex;flex-direction:column;gap:3px}
.rslot{display:flex;gap:6px;align-items:center;font-size:12px;
  padding:4px 6px;background:var(--panel2);border-radius:4px}
.rslot .sl{width:38px;font-size:10px;color:var(--dim);font-weight:700}
.rslot.empty{opacity:.42}
.needs{margin-top:8px;font-size:11px;color:var(--warn)}

/* ---- board ---- */
.boardhdr{display:flex;gap:8px;align-items:center;justify-content:space-between}
.boardhdr h3{margin:0}
#search{flex:1;max-width:340px;background:#0c1219;border:1px solid var(--line);
  color:var(--txt);padding:6px 9px;border-radius:5px;font-size:13px}
#search:focus{outline:1px solid var(--acc2)}
.posfilter{display:flex;gap:4px;margin:8px 0 4px}
.pf{background:var(--panel2);border:1px solid var(--line);color:var(--dim);
  padding:3px 10px;border-radius:12px;font-size:11px;cursor:pointer}
.pf.active{background:var(--acc);color:#04150a;border-color:var(--acc);font-weight:700}
.legend{display:flex;gap:12px;font-size:10px;color:var(--dim);margin-bottom:6px;align-items:center}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}
.dot.me{background:var(--acc)} .dot.gone{background:#3a4551}

.board{flex:1;overflow:auto;min-height:0}
.board::-webkit-scrollbar{width:9px}
.board::-webkit-scrollbar-thumb{background:#1e2a36;border-radius:4px}
.prow{display:grid;grid-template-columns:34px 40px 1fr 46px 40px 44px;gap:8px;
  align-items:center;padding:5px 7px;border-radius:5px;cursor:pointer;font-size:13px}
.prow:hover{background:#1b2430}
.prow.gone{opacity:.3;text-decoration:line-through}
.prow.mine{background:#13291c;opacity:1;text-decoration:none}
.prow.mine:hover{background:#18351f}
.prow.cursor{outline:1px solid var(--acc2)}
.prow .rk{color:var(--dim);font-variant-numeric:tabular-nums;font-size:11px}
.prow .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .tm{color:var(--dim);font-size:11px}
.prow .bye{color:var(--dim);font-size:11px}
.prow .adp{color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums}
.prow .val{font-size:11px;font-variant-numeric:tabular-nums}
.val.pos{background:none;color:var(--acc);padding:0}
.tierbar{font-size:10px;color:var(--dim);letter-spacing:1px;text-transform:uppercase;
  padding:6px 7px 3px;border-top:1px solid var(--line);margin-top:4px}
.note{grid-column:3/-1;font-size:10px;color:#6b7c8c}

/* ---- tier watch ---- */
.tierwatch{display:flex;flex-direction:column;gap:4px}
.tw{display:flex;justify-content:space-between;align-items:center;font-size:12px;
  background:var(--panel2);padding:4px 7px;border-radius:4px}
.tw.thin{outline:1px solid var(--warn)}
.tw b{font-variant-numeric:tabular-nums}

/* ---- log ---- */
.log{flex:1;overflow:auto;min-height:0;display:flex;flex-direction:column;gap:2px}
.log::-webkit-scrollbar{width:8px}
.log::-webkit-scrollbar-thumb{background:#1e2a36;border-radius:4px}
.lg{display:grid;grid-template-columns:44px 1fr auto;gap:6px;font-size:12px;
  padding:3px 6px;border-radius:4px;background:var(--panel2)}
.lg.mine{background:#13291c}
.lg .pk{color:var(--dim);font-size:10px;font-variant-numeric:tabular-nums}
.lg .tm{color:var(--dim);font-size:10px;max-width:78px;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}

/* ---- modal ---- */
.modal-wrap{position:fixed;inset:0;background:#000a;display:flex;
  align-items:center;justify-content:center;z-index:50}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:18px;width:520px;max-height:88vh;overflow:auto}
.modal h2{margin:0 0 12px;font-size:16px}
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tab{background:var(--panel2);border:1px solid var(--line);color:var(--dim);
  padding:5px 12px;border-radius:5px;cursor:pointer;font-size:12px}
.tab.active{background:var(--acc2);color:#04151f;font-weight:700}
label{display:block;font-size:11px;color:var(--dim);margin:9px 0 0}
label input{display:block;width:100%;margin-top:3px;background:#0c1219;
  border:1px solid var(--line);color:var(--txt);padding:6px 8px;border-radius:5px;font-size:13px}
.row{display:flex;gap:8px;margin-top:14px}
.row.end{justify-content:flex-end}
.btn{background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  padding:6px 14px;border-radius:5px;cursor:pointer;font-size:12px}
.btn:hover{background:#22303d}
.btn.primary{background:var(--acc);color:#04150a;border-color:var(--acc);font-weight:700}
.btn.ghost{color:var(--dim)}
.hint{font-size:11px;color:var(--dim);line-height:1.5;margin:0 0 4px}
.status{margin-top:10px;font-size:12px;min-height:16px}
.status.ok{color:var(--acc)} .status.err{color:var(--warn)}
.help{margin-top:12px;font-size:11px;color:var(--dim)}
.help ol{padding-left:18px;line-height:1.7}
code,kbd{background:#0c1219;padding:1px 4px;border-radius:3px;font-size:11px}

.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  background:var(--acc);color:#04150a;padding:8px 18px;border-radius:6px;
  font-weight:700;z-index:99;font-size:13px}
.hidden{display:none!important}

@media(max-width:1300px){
  main{grid-template-columns:280px 1fr 260px}
}

/* ---- explicit mark buttons (clicking a row itself never drafts) ---- */
.prow .mk{
  opacity:0; visibility:hidden;
  width:20px; min-width:20px; text-align:center;
  border:1px solid var(--line); border-radius:4px;
  font-size:11px; line-height:16px; cursor:pointer; margin-left:4px;
  color:var(--dim); background:#0c1219;
}
.prow:hover .mk, .prow.cursor .mk{ opacity:1; visibility:visible; }
.prow .mk:hover{ color:#fff; border-color:var(--dim); }
.prow .mk[data-act="taken"]:hover{ background:#5a1f1f; border-color:#a33; color:#fff; }
.prow .mk-mine:hover{ background:#14532d; border-color:var(--acc); color:#fff; }
.prow .undo-btn{ opacity:1; visibility:visible; }
.prow .undo-btn:hover{ background:#1f3a5a; border-color:#38a; color:#fff; }
.rec-wrap{ cursor:default; }