:root{
  --bg:#0b0f14; --panel:#121821; --muted:#98a2b3; --text:#e6edf3; --accent:#5b9cff;
  --ok:#2ecc71; --ghost:#2d3642; --border:#1f2937;
  --afc:#e74c3c; --nfc:#3498db;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--text); background:linear-gradient(180deg,#0b0f14,#0a111a 40%,#0b0f14);
}
header,footer{
  padding:16px 24px; background:var(--panel); border-bottom:1px solid var(--border);
}
header h1{margin:0 0 6px;font-size:22px}
header .hint{margin:.25rem 0 0; color:var(--muted); font-size:12px}
main{padding:20px 24px; display:grid; gap:20px}
.controls{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.players-box,.draft-settings{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px}
.player-list{margin:0;padding-left:20px;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.player-list li{list-style:decimal}
.player-list input{
  width:100%; background:#0f1520; color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:8px 10px;
}
h2{margin:0 0 10px}
h3{margin:0 0 8px}
h4{margin:8px 0}
label.row{display:flex; align-items:center; justify-content:space-between; margin:10px 0}
select{
  background:#0f1520; color:var(--text); border:1px solid var(--border); border-radius:8px; padding:8px 10px;
}
.buttons{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
button{
  border:1px solid var(--border); background:var(--ghost); color:var(--text);
  padding:8px 12px; border-radius:10px; cursor:pointer;
}
button.primary{background:var(--accent); border-color:#2666c9; color:white}
button.ghost{background:#0f1520}
button:disabled{opacity:.5; cursor:not-allowed}

.status{display:grid; grid-template-columns:280px 1fr 1fr; gap:20px}
.order,.now,.pool{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px}
#onClock{font-size:20px; margin:10px 0 4px}
#roundInfo,#confInfo{color:var(--muted)}
.pool-cols{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.team-pool{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.team-pill{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:6px 8px; border-radius:8px; background:#0f1520; border:1px solid var(--border);
  font-size:14px;
}
.team-pool .team-pill.clickable { cursor:pointer; transition:transform .05s ease, background .15s ease; }
.team-pool .team-pill.clickable:hover { background:#111a27; transform:translateY(-1px); }
.team-pill .lhs{display:flex; align-items:center; gap:8px}
.logo{
  width:22px; height:22px; object-fit:contain; background:#0b0f14; border-radius:4px;
}
.team-pill .tag{font-size:12px; opacity:.8; padding:2px 6px; border-radius:6px}
.tag.afc{background:rgba(231,76,60,.15); color:#ff9f92; border:1px solid rgba(231,76,60,.35)}
.tag.nfc{background:rgba(52,152,219,.15); color:#9fd4ff; border:1px solid rgba(52,152,219,.35)}

.boards{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px}

.boards-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.board{border:1px solid var(--border); border-radius:12px; overflow:hidden}
.board header{background:#0f1520; padding:10px 12px; border-bottom:1px solid var(--border)}
.board h3{margin:0;font-size:14px}
.board ol{margin:0; padding:10px 16px; list-style:decimal; min-height:160px; display:grid; gap:8px}
.board li{
  background:#0c121b; border:1px solid var(--border); border-radius:8px; padding:6px 8px;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.pick-lhs{display:flex; align-items:center; gap:8px}
.board .conf.afc{color:#ffb0a7}
.board .conf.nfc{color:#b8dcff}


footer{border-top:1px solid var(--border)}

/* Toast feedback */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:#111927; color:#e6edf3; border:1px solid #1f2937; border-radius:10px;
  padding:10px 14px; box-shadow:0 6px 24px rgba(0,0,0,.35); z-index:9999;
  font-size:14px;
}

/* Export cleanup */

.export-no-logos .logo{ display:none !important; }

@media (max-width: 980px){
  .controls{grid-template-columns:1fr}
  .status{grid-template-columns:1fr}
  .boards-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .boards-grid{grid-template-columns:1fr}
}