:root{
  --bg:#0f1218;
  --panel:#171b24;
  --panel-2:#1f2430;
  --line:#2b3140;
  --text:#eef2f8;
  --muted:#9ba6b8;
  --accent:#8fb6ff;
  --accent-2:#c7dcff;
  --danger:#ff8f8f;
  --ok:#9be7bd;
  --shadow:0 16px 40px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:radial-gradient(circle at top left,#1b2740 0,#0f1218 38%,#0f1218 100%);
  color:var(--text);
}
button,input,select{font:inherit}
button{
  border:0;
  border-radius:12px;
  padding:.72rem 1rem;
  cursor:pointer;
  color:var(--text);
}
button:disabled{opacity:.45; cursor:not-allowed}
.primary{background:var(--accent);color:#08101d;font-weight:800}
.secondary{background:var(--panel-2);border:1px solid var(--line)}
.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.topbar{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-start;
  padding:28px clamp(16px,4vw,48px);
}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(2rem,4vw,4rem);letter-spacing:-.06em;line-height:.95}
h2{font-size:1.15rem;letter-spacing:-.02em}
.dek{color:var(--muted);margin-top:.55rem;max-width:720px}
.eyebrow{
  color:var(--accent-2);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:800;
  margin-bottom:.35rem;
}
.header-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}
.layout{
  display:grid;
  grid-template-columns:280px minmax(320px, 1fr) minmax(360px, 1.3fr);
  grid-template-areas:
    "controls board pool"
    "results results results";
  gap:18px;
  padding:0 clamp(16px,4vw,48px) 40px;
}
.panel{
  background:rgba(23,27,36,.92);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:22px;
  padding:18px;
}
.controls{grid-area:controls; position:sticky; top:16px; align-self:start}
.board-panel{grid-area:board}
.pool-panel{grid-area:pool}
.results-panel{grid-area:results}
.year-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-bottom:1rem}
.year-tabs button{background:var(--panel-2);border:1px solid var(--line);padding:.6rem}
.year-tabs button.active{background:var(--accent);color:#08101d;font-weight:900}
.field{display:grid;gap:.45rem;margin:1rem 0}
.field span,.muted{color:var(--muted)}
input,select{
  width:100%;
  color:var(--text);
  background:#0f141d;
  border:1px solid var(--line);
  border-radius:12px;
  padding:.72rem .8rem;
}
input[type="range"]{padding:.4rem 0}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:14px;
}
.board-list{
  list-style:none;
  display:grid;
  gap:.6rem;
  margin:0;
  padding:0;
  min-height:220px;
}
.board-item,.candidate-card,.result-card{
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(31,36,48,.92),rgba(19,23,31,.92));
  border-radius:16px;
  padding:.75rem;
}
.board-item{
  display:grid;
  grid-template-columns:44px 1fr auto;
  gap:.7rem;
  align-items:center;
}
.slot{
  width:36px;height:36px;border-radius:12px;
  display:grid;place-items:center;
  background:#0f141d;color:var(--accent-2);font-weight:900;
}
.player-main{display:grid;gap:.2rem}
.player-name{font-weight:900}
.player-meta{color:var(--muted);font-size:.84rem;line-height:1.35}
.card-actions{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
.card-actions button{padding:.42rem .58rem;border-radius:10px;font-size:.82rem}
.candidate-list{display:grid;gap:.7rem;max-height:720px;overflow:auto;padding-right:4px}
.candidate-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.8rem;
  align-items:start;
}
.badges{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.42rem}
.badge{
  color:var(--accent-2);
  background:#101825;
  border:1px solid var(--line);
  border-radius:999px;
  padding:.18rem .45rem;
  font-size:.76rem;
}
.badge.good{color:var(--ok)}
.badge.bad{color:var(--danger)}
.status{margin-top:.8rem;color:var(--muted);font-size:.9rem;line-height:1.4}
#comparison,#communityResults{display:grid;gap:.7rem}
table{width:100%;border-collapse:collapse;font-size:.9rem;overflow:hidden;border-radius:14px}
th,td{border-bottom:1px solid var(--line);padding:.55rem;text-align:left;vertical-align:top}
th{color:var(--accent-2);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em}
td:last-child,th:last-child{text-align:right}
dialog{
  max-width:min(920px,calc(100vw - 28px));
  width:920px;
  border:1px solid var(--line);
  border-radius:22px;
  padding:0;
  color:var(--text);
  background:var(--panel);
  box-shadow:var(--shadow);
}
dialog::backdrop{background:rgba(0,0,0,.65)}
.dialog-head{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:18px;
  border-bottom:1px solid var(--line);
}
#modalBody{padding:18px;display:grid;gap:14px}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.stat{
  background:#0f141d;
  border:1px solid var(--line);
  border-radius:14px;
  padding:.75rem;
}
.stat span{display:block;color:var(--muted);font-size:.76rem;margin-bottom:.25rem}
.stat strong{font-size:1.05rem}
@media (max-width:1100px){
  .layout{
    grid-template-columns:1fr;
    grid-template-areas:"controls" "board" "pool" "results";
  }
  .controls{position:static}
  .candidate-list{max-height:none}
}
@media (max-width:720px){
  .topbar{display:grid}
  .section-head,.candidate-card,.board-item{grid-template-columns:1fr}
  .card-actions{justify-content:flex-start}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.scoring-panel{
  border:1px solid var(--line);
  border-radius:16px;
  padding:.85rem;
  background:linear-gradient(180deg,rgba(31,36,48,.92),rgba(15,20,29,.92));
  margin:1rem 0;
}
.scoring-head{display:flex;justify-content:space-between;gap:.75rem;align-items:flex-start;margin-bottom:.5rem}
.scoring-actions,.value-dialog-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}
.value-examples{margin-top:.55rem}
.value-badge{background:#111c2c}
.inline-value{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  color:var(--accent-2);
  background:#101825;
  border:1px solid var(--line);
  border-radius:999px;
  padding:.18rem .45rem;
  font-size:.76rem;
}
.inline-value span{color:var(--accent-2)}
.inline-value input{
  width:5.5rem;
  padding:.18rem .35rem;
  border-radius:8px;
  font-size:.76rem;
}
.league-row{margin-top:.28rem}
.tabs{display:flex;gap:.45rem;flex-wrap:wrap}
.tab{background:var(--panel-2);border:1px solid var(--line);padding:.55rem .75rem;border-radius:999px;color:var(--muted)}
.tab.active{background:var(--accent);color:#08101d;font-weight:900}
#modalStatsContent{display:grid;gap:14px}
.table-wrap{max-width:100%;overflow:auto}
.empty-stats{opacity:.88}
.no-private-note{margin-top:.35rem;color:var(--accent-2)}
.value-dialog{width:min(820px,calc(100vw - 28px))}
#valueDialogBody{padding:18px;display:grid;gap:14px}
.value-table{max-height:52vh;border:1px solid var(--line);border-radius:14px}
.custom-value-input{max-width:8rem;padding:.45rem .55rem}
.comparison-summary{display:grid;gap:.25rem}
.empty-board{grid-template-columns:44px 1fr}
@media (max-width:720px){
  .inline-value{border-radius:12px;align-items:flex-start;flex-direction:column}
  .inline-value input{width:7rem}
  .value-dialog-actions button,.scoring-actions button{width:100%}
}
.year-tabs button small{
  display:block;
  margin-top:.15rem;
  font-size:.65rem;
  color:inherit;
  opacity:.78;
  letter-spacing:.02em;
}
.year-status,
.auto-fill-panel,
.voter-card,
.nomination-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:.85rem;
  background:linear-gradient(180deg,rgba(31,36,48,.72),rgba(15,20,29,.72));
  margin:1rem 0;
}
.compact-field{margin:.7rem 0}
.auto-actions{display:grid;gap:.45rem;margin-top:.75rem}
.auto-actions button{width:100%}
.candidate-value{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  color:var(--accent-2);
  background:#101825;
  border:1px solid var(--line);
  border-radius:999px;
  padding:.18rem .45rem;
  font-size:.76rem;
}
.candidate-value span{color:var(--accent-2)}
.candidate-value input{
  width:5.75rem;
  padding:.18rem .35rem;
  border-radius:8px;
  font-size:.76rem;
}
.player-value-input{width:5.75rem}
.nomination-card .secondary{width:100%}
@media (max-width:720px){
  .candidate-value{border-radius:12px;align-items:flex-start;flex-direction:column}
  .candidate-value input{width:7rem}
}