/* styles.css — dark glass board. Same visual language as the Streamlit build,
   but with real hover/sticky/drawer behaviour that Streamlit couldn't do. */

:root{
  --bg:#070b16; --panel:#0d1424; --card:#111a2e;
  --line:rgba(148,163,184,.14); --line-2:rgba(148,163,184,.26);
  --txt:#f1f5f9; --txt-2:#94a3b8; --txt-3:#64748b;
  --blue:#3b82f6; --blue-lt:#60a5fa;
  --pos:#22c55e; --neg:#ef4444; --neu:#d4a574;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--txt); background:
    radial-gradient(1200px circle at 12% -10%,rgba(59,130,246,.18),transparent 45%),
    radial-gradient(900px circle at 88% 110%,rgba(37,99,235,.14),transparent 50%),
    var(--bg);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 18px; flex-wrap:wrap;
  background:rgba(7,11,22,.82); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px}
.brand-mark{font-size:1.4rem}
.topbar h1{margin:0; font-size:1.05rem; font-weight:800; letter-spacing:-.02em}
.sub{margin:2px 0 0; font-size:.72rem; color:var(--txt-3)}
.controls{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

.seg{display:inline-flex; background:rgba(148,163,184,.08); border:1px solid var(--line);
  border-radius:10px; padding:3px; gap:2px}
.seg-btn{
  border:0; background:transparent; color:var(--txt-2); cursor:pointer;
  font-family:var(--mono); font-size:.78rem; font-weight:700;
  padding:6px 11px; border-radius:7px; transition:.15s;
}
.seg-btn:hover{color:var(--txt); background:rgba(148,163,184,.10)}
.seg-btn.is-on{background:var(--blue); color:#fff; box-shadow:0 3px 10px rgba(59,130,246,.35)}

.search{
  min-width:210px; padding:8px 12px; border-radius:10px;
  background:var(--card); border:1px solid var(--line-2); color:var(--txt);
  font-family:var(--sans); font-size:.85rem;
}
.search:focus{outline:0; border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.18)}

.btn{
  padding:8px 13px; border-radius:10px; cursor:pointer;
  background:var(--card); border:1px solid var(--line-2); color:var(--txt);
  font-family:var(--sans); font-size:.82rem; font-weight:600; transition:.15s;
}
.btn:hover{border-color:var(--blue); transform:translateY(-1px)}
.btn:disabled{opacity:.45; cursor:default; transform:none}
.btn-primary{background:var(--blue); border-color:var(--blue); color:#fff}
.file-btn{display:inline-flex; align-items:center}

/* ---------- filters ---------- */
main{max-width:1400px; margin:0 auto; padding:14px 18px 60px}
.filters{display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap; margin-bottom:12px}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  padding:4px 10px; border-radius:999px; cursor:pointer; user-select:none;
  background:rgba(148,163,184,.08); border:1px solid var(--line);
  font-size:.72rem; font-weight:600; color:var(--txt-2); transition:.14s;
}
.chip:hover{color:var(--txt); border-color:var(--line-2)}
.chip.is-on{background:rgba(59,130,246,.18); border-color:rgba(59,130,246,.5); color:var(--blue-lt)}
.filter-right{display:flex; gap:14px; align-items:center}
.toggle{display:inline-flex; align-items:center; gap:6px; font-size:.75rem;
  color:var(--txt-2); cursor:pointer}
.toggle input{accent-color:var(--blue)}

/* ---------- panel ---------- */
.panel{
  background:linear-gradient(160deg,rgba(59,130,246,.10),rgba(17,26,46,.8) 45%,rgba(13,20,36,.8));
  border:1px solid rgba(59,130,246,.28); border-radius:14px;
  margin-bottom:14px; overflow:hidden; backdrop-filter:blur(20px);
}
.panel-head{display:flex; justify-content:space-between; align-items:center;
  padding:12px 15px; border-bottom:1px solid var(--line)}
.panel-head h2{margin:0; font-size:.95rem; font-weight:700}
.panel-body{padding:14px 15px}
.icon-btn{background:transparent; border:0; color:var(--txt-2); cursor:pointer;
  font-size:1rem; padding:4px 8px; border-radius:8px}
.icon-btn:hover{color:var(--txt); background:rgba(148,163,184,.10)}

.formula-status{font-size:.85rem; color:var(--txt-2); margin-bottom:10px}
.formula-status.is-on{color:var(--pos)}
.formula-actions{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.code{
  width:100%; min-height:170px; padding:11px; border-radius:10px;
  background:rgba(8,14,26,.75); border:1px solid var(--line-2);
  color:var(--txt); font-family:var(--mono); font-size:.78rem; line-height:1.5;
  resize:vertical;
}
.formula-apply{display:flex; align-items:center; gap:10px; margin:10px 0}
.errors{display:flex; flex-direction:column; gap:5px; margin:8px 0}
.err{background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.35);
  color:#fca5a5; padding:7px 11px; border-radius:8px; font-size:.78rem}
.hint{font-size:.72rem; color:var(--txt-3); margin:6px 0 0; line-height:1.5}

.weight-row{display:flex; align-items:center; gap:12px; margin-top:14px}
.weight-row label{font-size:.8rem; color:var(--txt-2); white-space:nowrap}
.weight-row input[type=range]{flex:1; accent-color:var(--blue)}
.weight-row output{font-family:var(--mono); font-weight:700; color:var(--blue-lt);
  min-width:44px; text-align:right}

.features{margin-top:12px}
.features summary{cursor:pointer; font-size:.78rem; color:var(--txt-2); padding:6px 0}
.feature-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:3px; max-height:260px; overflow:auto; margin-top:6px}
.feature-list code{font-family:var(--mono); font-size:.7rem; color:var(--blue-lt)}
.feature-list div{font-size:.72rem; color:var(--txt-3); padding:3px 6px; border-radius:5px}
.feature-list div:hover{background:rgba(148,163,184,.07)}

/* ---------- board ---------- */
.board-wrap{
  background:linear-gradient(180deg,rgba(17,26,46,.78),rgba(13,20,36,.78));
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  backdrop-filter:blur(22px);
}
.board-head{display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; flex-wrap:wrap; padding:13px 15px 10px}
.board-head h2{margin:0; font-size:1rem; font-weight:800; letter-spacing:-.02em}
.board-meta{display:flex; gap:7px; flex-wrap:wrap}
.pill{font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 9px; border-radius:999px; background:rgba(148,163,184,.10);
  border:1px solid var(--line); color:var(--txt-2)}
.pill.pos{color:var(--pos); background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.35)}
.pill.warn{color:var(--neu); background:rgba(212,165,116,.12); border-color:rgba(212,165,116,.35)}
.pill.blue{color:var(--blue-lt); background:rgba(59,130,246,.14); border-color:rgba(59,130,246,.38)}

.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.board{width:100%; border-collapse:collapse; font-size:.85rem}
table.board thead th{
  position:sticky; top:0; z-index:5;
  background:rgba(13,20,36,.97); backdrop-filter:blur(8px);
  font-size:.6rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--txt-3); padding:9px 10px; text-align:left; white-space:nowrap;
  border-bottom:1px solid var(--line-2); cursor:pointer; user-select:none;
}
table.board thead th.num{text-align:right}
table.board thead th[data-sort]:hover{color:var(--txt)}
table.board thead th.sorted-asc::after{content:' ▲'; color:var(--blue-lt)}
table.board thead th.sorted-desc::after{content:' ▼'; color:var(--blue-lt)}
table.board tbody td{padding:9px 10px; border-bottom:1px solid rgba(148,163,184,.06);
  vertical-align:middle; white-space:nowrap}
table.board tbody tr{transition:background .12s}
table.board tbody tr:hover{background:rgba(255,255,255,.04); cursor:pointer}
table.board tbody tr:last-child td{border-bottom:0}
.num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}

.rank{width:36px; color:var(--txt-3); font-family:var(--mono); font-size:.76rem; text-align:center}
.rank.gold{color:#fbbf24} .rank.silver{color:#cbd5e1} .rank.bronze{color:#d97706}
.hitter{font-weight:600}
.hitter a{color:var(--blue-lt); text-decoration:none; border-bottom:1px dashed rgba(96,165,250,.5)}
.hitter a:hover{color:#93c5fd}
.hsub{font-size:.68rem; color:var(--txt-3); margin-top:2px; font-weight:500}
.side{display:inline-block; margin-left:6px; padding:1px 6px; border-radius:4px;
  border:1px solid; font-size:.6rem; font-weight:800; vertical-align:middle}
.side.L{color:#60a5fa; border-color:#60a5fa55; background:#60a5fa18}
.side.R{color:#f59e0b; border-color:#f59e0b55; background:#f59e0b18}
.side.S{color:#a78bfa; border-color:#a78bfa55; background:#a78bfa18}
.tag{display:inline-block; margin-left:5px; padding:0 5px; border-radius:4px;
  border:1px solid; font-size:.55rem; font-weight:800; letter-spacing:.06em; vertical-align:middle}
.tag.pos{color:var(--pos); border-color:#22c55e55; background:#22c55e16}
.tag.neg{color:var(--neg); border-color:#ef444455; background:#ef444416}
.proj{display:inline-block; margin-left:6px; padding:0 5px; border-radius:4px;
  font-size:.55rem; font-weight:800; color:var(--txt-3);
  border:1px solid rgba(148,163,184,.35); background:rgba(148,163,184,.10)}

.edge{font-size:1rem; font-weight:800}
.prob{font-size:.95rem; font-weight:700}
.range-col{width:20%}
.meter{position:relative; height:7px; border-radius:999px; background:rgba(148,163,184,.10); min-width:90px}
.meter-band{position:absolute; top:0; bottom:0; background:rgba(148,163,184,.30); border-radius:999px}
.meter-tick{position:absolute; top:-2px; width:3px; height:11px; border-radius:2px; transform:translateX(-1.5px)}
.hunt{font-size:.75rem; color:var(--txt-2)}
.board-foot{font-size:.68rem; color:var(--txt-3); padding:10px 15px 12px; margin:0;
  border-top:1px solid var(--line)}
.group-row td{background:rgba(59,130,246,.08); font-weight:700; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--blue-lt)}
.empty{padding:28px; text-align:center; color:var(--txt-3); font-size:.85rem}

/* ---------- drawer ---------- */
.drawer-scrim{position:fixed; inset:0; background:rgba(3,6,14,.62); z-index:50;
  backdrop-filter:blur(2px)}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(680px,100vw); z-index:60;
  background:linear-gradient(180deg,#0e1727,#0a1020);
  border-left:1px solid var(--line-2); overflow-y:auto;
  padding:20px 22px 60px; animation:slide .22s cubic-bezier(.16,1,.3,1);
}
@keyframes slide{from{transform:translateX(24px); opacity:0}to{transform:none; opacity:1}}
.drawer-close{position:absolute; top:14px; right:16px}
.drawer h2{margin:0 0 2px; font-size:1.5rem; font-weight:800; letter-spacing:-.03em}
.drawer .meta{display:flex; gap:7px; flex-wrap:wrap; margin:8px 0 16px}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin-bottom:16px}
.kpi{background:rgba(255,255,255,.025); border:1px solid var(--line);
  border-left:3px solid var(--k); border-radius:9px; padding:9px 11px}
.kpi .l{font-size:.58rem; text-transform:uppercase; letter-spacing:.13em;
  color:var(--txt-3); font-weight:700}
.kpi .v{font-family:var(--mono); font-size:1.1rem; font-weight:700; color:var(--k); margin-top:2px}
.kpi .s{font-size:.62rem; color:var(--txt-3)}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:14px;
  overflow-x:auto}
.tab{background:transparent; border:0; color:var(--txt-2); cursor:pointer;
  padding:8px 12px; font-size:.8rem; font-weight:600; white-space:nowrap;
  border-bottom:2px solid transparent}
.tab:hover{color:var(--txt)}
.tab.is-on{color:var(--blue-lt); border-bottom-color:var(--blue)}
.tabpane{display:none} .tabpane.is-on{display:block}

table.data{width:100%; border-collapse:collapse; font-size:.78rem;
  background:rgba(8,14,26,.5); border:1px solid var(--line-2); margin:4px 0 12px}
table.data th{background:linear-gradient(180deg,rgba(59,130,246,.20),rgba(59,130,246,.09));
  font-size:.6rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700;
  padding:6px 9px; text-align:right; border:1px solid var(--line-2); white-space:nowrap}
table.data th:first-child{text-align:left}
table.data td{padding:5px 9px; text-align:right; border:1px solid rgba(148,163,184,.16);
  font-family:var(--mono); font-weight:600; white-space:nowrap}
table.data td:first-child{text-align:left; font-family:var(--sans);
  border-left:3px solid var(--rc,transparent)}
table.data tbody tr:nth-child(even){background:rgba(255,255,255,.028)}

/* ---------- zone grid ---------- */
.zone-wrap{display:flex; gap:22px; flex-wrap:wrap; margin-top:6px}
.zone-cap{font-size:.62rem; text-transform:uppercase; letter-spacing:.13em;
  color:var(--txt-2); font-weight:700; margin-bottom:7px}
.zgrid{display:grid; grid-template-columns:repeat(5,52px); grid-template-rows:repeat(5,44px);
  gap:2px; padding:8px; background:rgba(8,14,26,.55);
  border:1px solid var(--line-2); border-radius:10px}
.zcell{display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:3px; font-family:var(--mono); transition:transform .12s}
.zcell:hover{transform:scale(1.07); z-index:2}
.zv{font-size:.78rem; font-weight:700}
.zn{font-size:.55rem; opacity:.6; margin-top:1px}
.zone-legend{display:flex; align-items:center; gap:7px; font-size:.68rem;
  color:var(--txt-3); margin-top:10px; flex-wrap:wrap}
.swatch{width:60px; height:9px; border-radius:3px}
.swatch.heat{background:linear-gradient(90deg,rgba(56,120,220,.85),rgba(150,150,150,.35) 50%,rgba(225,62,52,.9))}
.swatch.use{background:linear-gradient(90deg,rgba(96,165,250,.08),rgba(96,165,250,.8))}
.zsel{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px}

/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background:var(--card); border:1px solid var(--line-2); color:var(--txt);
  padding:10px 16px; border-radius:10px; font-size:.82rem; z-index:80;
  box-shadow:0 10px 30px rgba(0,0,0,.45)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .range-col,.hunt-col{display:none}
  main{padding:12px 10px 60px}
  .drawer{width:100vw}
  .zgrid{grid-template-columns:repeat(5,44px); grid-template-rows:repeat(5,38px)}
}
@media(max-width:620px){
  .topbar{padding:10px 12px}
  .search{min-width:140px; flex:1}
  table.board thead th:nth-child(3){display:none}
  table.board tbody td:nth-child(3){display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}