:root{
    --bg:#17181a; --panel:#1f2124; --panel-2:#232629; --line:#2c2f34; --line-soft:#26292d;
    /* state sets the level; tier parity nudges it by the smallest step that still reads */
    --taken-a:#15171a; --taken-b:#1d2024;
    --open-a:#24282e;  --open-b:#31363e;
    --text:#e8e9ea; --muted:#8b9096; --dim:#5f656b;
    --yellow:#f5c518; --yellow-dim:#c99f10; --green:#35c46a; --green-dim:#22854a;
    --qb:#f5c518; --rb:#35c46a; --wr:#4f9df7; --te:#ff7a45; --flex:#8b9096;
    --r:10px;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
  input,select{font:inherit;color:inherit}

  /* ---------- top bar ---------- */
  .topbar{
    display:flex;align-items:center;gap:16px;padding:12px 18px;
    background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
  }
  .logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;letter-spacing:-.2px}
  .logo .mark{
    width:26px;height:26px;border-radius:7px;background:var(--yellow);color:#17181a;
    display:grid;place-items:center;font-weight:800;font-size:14px;
  }
  .logo em{font-style:normal;color:var(--yellow)}
  .field{display:flex;align-items:center;gap:7px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 10px}
  .field label{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
  .field input{background:none;border:0;outline:none;width:150px;font-variant-numeric:tabular-nums}
  .field select{background:none;border:0;outline:none;cursor:pointer}
  .field select option{background:var(--panel)}
  .spacer{flex:1}
  .live{display:flex;align-items:center;gap:7px;color:var(--green);font-size:12px;font-weight:600}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(53,196,106,.55);animation:pulse 2s infinite}
  @keyframes pulse{70%{box-shadow:0 0 0 7px rgba(53,196,106,0)}100%{box-shadow:0 0 0 0 rgba(53,196,106,0)}}
  .btn{border:1px solid var(--line);border-radius:8px;padding:7px 13px;font-size:13px;font-weight:600;color:var(--muted);transition:.14s}
  .btn:hover{color:var(--text);border-color:#3a3f45}
  .btn-primary{background:var(--yellow);color:#17181a;border-color:var(--yellow)}
  .btn-primary:hover{background:#ffd42e;color:#17181a}

  /* ---------- setup strip ---------- */
  .setup{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding:9px 18px;background:var(--panel-2);border-bottom:1px solid var(--line);font-size:12.5px;
  }
  .setup .tag{color:var(--dim);text-transform:uppercase;font-size:10.5px;letter-spacing:.09em;font-weight:700}
  .chip{
    display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;
    border:1px solid var(--line);background:var(--bg);color:var(--muted);font-size:12px;
  }
  .chip.ok{border-color:var(--green-dim);color:var(--green)}
  .chip.warn{border-color:var(--yellow-dim);color:var(--yellow);cursor:pointer}
  .chip.warn:hover{background:rgba(245,197,24,.08)}
  .drop{
    border:1px dashed #3a3f45;border-radius:8px;padding:5px 12px;color:var(--dim);font-size:12px;cursor:pointer;
  }
  .drop:hover{border-color:var(--yellow-dim);color:var(--yellow)}

  /* unmatched tray */
  .caveat{padding:9px 18px;background:#1c1a12;border-bottom:1px solid #3d3413;color:#c9bb86;font-size:12.5px;line-height:1.5}
  .caveat b{color:var(--yellow)}
  .tray{display:none;padding:12px 18px;background:#1c1a12;border-bottom:1px solid var(--yellow-dim);max-height:340px;overflow-y:auto}
  .tray.open{display:block}
  .tray h4{margin:0 0 9px;font-size:12px;color:var(--yellow);text-transform:uppercase;letter-spacing:.08em}
  .tray-row{display:flex;align-items:center;gap:12px;padding:7px 0;border-top:1px solid #2e2a18;font-size:13px}
  .tray-row:first-of-type{border-top:0}
  .tray-row .name{flex:0 0 190px;color:var(--text)}
  .tray-row .sub{color:var(--dim);font-size:12px}
  .tray-row select{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:5px 8px;outline:none}

  /* ---------- layout ---------- */
  .layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;padding:14px 18px 28px;align-items:start}
  @media (max-width:1400px){.layout{grid-template-columns:minmax(0,1fr) 300px}}
  @media (max-width:1200px){.layout{grid-template-columns:1fr}}   /* board takes the full width rather than squeezing */

  .layout > *{min-width:0}   /* let the scrollable board shrink instead of widening the page */
  .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px}
  .card:last-child{margin-bottom:0}
  .card > h3{
    margin:0;padding:11px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
    color:var(--dim);font-weight:700;border-bottom:1px solid var(--line-soft);
    display:flex;align-items:center;justify-content:space-between;gap:8px;
  }
  .card > h3 .hint{text-transform:none;letter-spacing:0;font-weight:500;color:#4b5157;font-size:11px}
  .card .body{padding:12px 14px}

  /* ---------- tier watch ---------- */
  .tier{margin-bottom:8px}
  .tier:last-child{margin-bottom:0}
  .tier-head{display:flex;justify-content:space-between;font-size:11.5px;margin-bottom:4px}
  .tier-head b{font-weight:600}
  .tier-head span{color:var(--muted);font-variant-numeric:tabular-nums}
  .pips{display:flex;gap:3px}
  .pip{height:5px;flex:1;border-radius:2px;background:#191b1e}
  .pip.on{background:var(--green)}
  .pip.low{background:var(--yellow)}

  /* ---------- board ---------- */
  .board-tools{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
  .search{flex:1;min-width:130px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 11px;outline:none}
  .search:focus{border-color:var(--yellow-dim)}
  .seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .seg button{padding:6px 11px;font-size:12px;font-weight:600;color:var(--dim)}
  .seg button.on{background:var(--yellow);color:#17181a}
  .legend{display:flex;gap:10px;font-size:11px;color:var(--dim);align-items:center}
  .legend i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:4px;vertical-align:-1px}

  .board-scroll{padding:10px}
  .grid{display:grid;grid-template-columns:24px repeat(var(--cols,12),minmax(0,1fr));gap:3px}
  .hcell{
    padding:4px 4px 6px;font-size:clamp(8.5px,.62vw,10.5px);color:var(--muted);
    border-bottom:1px solid var(--line-soft);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .hcell b{display:block;font-size:8px;color:var(--dim);font-weight:700;letter-spacing:.06em}
  .hcell.me{color:var(--yellow)}
  .hcell.col-on{background:rgba(245,197,24,.07);border-radius:6px 6px 0 0}
  .rlab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    font-size:8.5px;color:var(--dim);font-weight:700;
  }
  .rlab .arrow{color:#3f454b;font-size:9px}

  .pick{
    position:relative;background:var(--open-a);border:1px solid var(--line);border-left:3px solid var(--flex);
    border-radius:5px;padding:4px 4px 4px 5px;min-height:40px;text-align:left;width:100%;
    transition:.12s;overflow:hidden;
  }
  .pick:hover{border-color:#464c53;transform:translateY(-1px)}
  .pick.sel{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow)}
  .pick .no{position:absolute;top:3px;right:4px;font-size:8px;color:#4b5157;font-variant-numeric:tabular-nums}
  .pick .pname{font-size:clamp(9px,.68vw,11.5px);font-weight:600;line-height:1.2;padding-right:13px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
  .pick .meta{margin-top:3px;display:flex;align-items:center;gap:4px;font-size:8.5px;color:var(--dim)}
  .pos{font-weight:800;font-size:8.5px;letter-spacing:.03em}
  .delta{margin-left:auto;font-size:8.5px;font-weight:700;padding:0 4px;border-radius:3px;font-variant-numeric:tabular-nums}
  .delta.steal{background:rgba(53,196,106,.16);color:var(--green)}
  .delta.reach{border:1px solid var(--yellow-dim);color:var(--yellow)}
  .delta.flat{color:#4b5157}
  .delta.val{color:#767c83;font-weight:600}
  .pick.empty{background:#1b1d20;border-style:dashed;border-left-color:var(--line);cursor:default}
  .pick.empty:hover{transform:none;border-color:var(--line)}
  .pick.clock{border-color:var(--yellow);border-left-color:var(--yellow);background:rgba(245,197,24,.07)}
  .pick.clock .pname{color:var(--yellow);font-size:11px}
  .pick.dim{opacity:.22}
  /* chalk board states */
  .pick.s-taken{border-color:#202327}
  .pick.s-taken .pname{color:#565b61;text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:#3d4247}
  .pick.s-taken .meta{opacity:.34}
  .pick.s-taken .no{color:#383d42}
  .pick.s-taken:hover{border-color:#343a40}
  .pick.s-open{border-color:#343941}
  .pick.s-open .pname{color:var(--text)}
  .pick.s-fell{border-color:var(--green-dim);box-shadow:inset 0 0 0 1px rgba(53,196,106,.28)}
  .pick.s-fell .pname{color:var(--green)}
  .pick.now{box-shadow:inset 0 0 0 1px var(--yellow)}
  /* your own picks: name only, no ring on the cell */
  .pick.mine .pname{color:var(--yellow);text-decoration-color:var(--yellow-dim)}
  .nowtag,.youtag{position:absolute;top:3px;left:5px;font-size:7px;font-weight:800;letter-spacing:.1em;color:var(--yellow)}
  .pick.now .pname,.pick.mine .pname{margin-top:7px}
  .pick.hit{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}

  /* ---------- inspector ---------- */
  .insp .body{padding:0}
  #detailPane .insp-head{border-top:0}
  .insp-head{padding:13px 14px;border-bottom:1px solid var(--line-soft)}
  .insp-head .n{font-size:17px;font-weight:700;letter-spacing:-.3px}
  .insp-head .sub{color:var(--muted);font-size:12px;margin-top:3px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
  .insp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft)}
  .insp-stats div{background:var(--panel);padding:10px 11px;min-width:0;overflow:hidden}
  .insp-stats .k{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);font-weight:700;white-space:nowrap}
  .insp-stats .v{font-size:16px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
  .insp-stats .who{font-size:10.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .passed{padding:12px 14px}
  .passed .lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);font-weight:700;margin-bottom:8px}
  .passed ul{list-style:none;margin:0;padding:0}
  .passed li{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12.5px;border-top:1px solid var(--line-soft)}
  .passed li:first-child{border-top:0}
  .passed li .rk{color:var(--dim);font-size:11px;width:24px;font-variant-numeric:tabular-nums}
  .passed li .st{margin-left:auto;font-size:10px;color:var(--green);font-weight:700}
  .empty-note{padding:26px 14px;text-align:center;color:var(--dim);font-size:12.5px}

  /* ---------- feed / teams ---------- */
  .tabs{display:flex;gap:1px;padding:8px 8px 0;border-bottom:1px solid var(--line-soft)}
  .tabs button{flex:1;padding:7px 4px;font-size:11.5px;font-weight:600;color:var(--dim);border-bottom:2px solid transparent;white-space:nowrap}
  .tabs button:hover{color:var(--muted)}
  .tabs button.on{color:var(--yellow);border-bottom-color:var(--yellow)}
  .feed{max-height:430px;overflow-y:auto}
  .fitem{display:flex;align-items:center;gap:9px;padding:9px 14px;border-top:1px solid var(--line-soft);width:100%;text-align:left}
  .fitem:hover{background:var(--panel-2)}
  .fitem.mine{border-left:2px solid var(--yellow);background:rgba(245,197,24,.05)}
  .fitem .pk{font-size:10px;color:var(--dim);width:26px;font-variant-numeric:tabular-nums;font-weight:700}
  .fitem .who{flex:1;min-width:0}
  .fitem .who .a{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fitem .who .b{display:block;font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .roster{padding:0}
  .rteam{display:flex;align-items:center;gap:8px;padding:10px 14px}
  .rteam select{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:6px 9px;outline:none}
  .rslot{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line-soft);font-size:12.5px}
  .rslot .rk{margin-left:auto;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
  .needs{display:flex;gap:5px;flex-wrap:wrap;padding-top:10px;margin-top:2px;border-top:1px solid var(--line-soft)}
  .need{font-size:10px;font-weight:700;padding:2px 7px;border-radius:11px;border:1px solid var(--line);color:var(--dim)}
  .need.hot{border-color:var(--yellow-dim);color:var(--yellow)}

  /* best-available ticker */
  .ticker{display:flex;align-items:stretch;background:var(--panel);border-bottom:1px solid var(--line)}
  .tk-lab{
    flex:0 0 auto;display:flex;align-items:center;padding:0 12px;font-size:9px;line-height:1.15;
    text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--dim);
    border-right:1px solid var(--line);background:var(--panel-2);
  }
  .tk-scroll{display:flex;align-items:stretch;overflow-x:auto;padding:0 4px;scrollbar-width:thin}
  .tk-scroll::-webkit-scrollbar{height:6px}
  .tk-tier{
    flex:0 0 auto;align-self:center;margin:0 8px 0 5px;padding:3px 9px;border-radius:20px;
    background:var(--panel-2);border:1px solid var(--line);
    font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--yellow);
  }
  /* same box as a board cell, so the ticker reads as the board's overflow */
  .tk{
    flex:0 0 auto;width:104px;margin:6px 3px;padding:4px 4px 4px 5px;text-align:left;
    position:relative;border:1px solid var(--line);border-left:3px solid var(--flex);
    border-radius:5px;background:var(--open-a);
  }
  .tk:hover{border-color:#464c53}
  .tk .rk{position:absolute;top:3px;right:4px;font-size:8px;color:#4b5157;font-variant-numeric:tabular-nums}
  .tk .nm{
    display:block;font-size:11px;font-weight:600;line-height:1.2;padding-right:13px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .tk .mt{display:flex;align-items:center;gap:4px;margin-top:3px;font-size:8.5px;color:var(--dim)}
  .tk b{margin-left:auto;font-size:9.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
  /* the live line: everything left of it has already slipped past its chalk slot */
  .tk-line{
    flex:0 0 auto;width:2px;align-self:stretch;margin:6px 14px;
    background:var(--yellow);border-radius:2px;
  }
  .tk-more{flex:0 0 auto;padding:7px 12px;font-size:11.5px;color:var(--dim);white-space:nowrap}
  /* lineup / value / runs panes */
  .lu-head{
    display:flex;justify-content:space-between;padding:7px 14px;background:var(--panel-2);
    border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
    font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--muted);
  }
  .lu-head span:last-child{color:var(--dim);letter-spacing:0;text-transform:none;font-weight:500}
  .lu{display:flex;align-items:center;gap:8px;padding:6px 14px;font-size:12.5px;border-bottom:1px solid #202327}
  .lus{
    flex:0 0 34px;font-size:9px;font-weight:800;letter-spacing:.06em;color:var(--muted);
    background:var(--panel-2);border-radius:3px;padding:3px 0;text-align:center;
  }
  .lun{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lup{font-size:9px;font-weight:800}
  .luv{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
  .dimtxt{color:var(--dim);font-size:11.5px}
  .lu.hole .lus{color:var(--yellow);background:rgba(245,197,24,.10)}

  .vb{display:grid;grid-template-columns:20px 1fr auto;gap:4px 8px;padding:8px 14px;width:100%;
      text-align:left;border-bottom:1px solid #202327;align-items:center}
  .vb:hover{background:var(--panel-2)}
  .vb.mine{background:rgba(245,197,24,.06)}
  .vb.mine .vbn{color:var(--yellow)}
  .vbr{font-size:11px;color:var(--dim);font-weight:700;font-variant-numeric:tabular-nums}
  .vbn{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vbv{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
  .vbar{grid-column:2/4;height:5px;border-radius:3px;background:#191b1e;overflow:hidden}
  .vbar i{display:block;height:100%;background:var(--green);border-radius:3px}
  .vb.mine .vbar i{background:var(--yellow)}
  .vbs{grid-column:2/4;font-size:10.5px;color:var(--dim)}

  /* taken vs expected */
  .vs-row{display:grid;grid-template-columns:26px 1fr 52px;align-items:center;gap:9px;margin-bottom:10px}
  .vs-lab{font-size:10px;font-weight:800}
  .vs-bar{position:relative;height:11px;border-radius:3px;background:#191b1e;overflow:hidden}
  .vs-bar i{display:block;height:100%;border-radius:3px;opacity:.75}
  .vs-bar u{position:absolute;top:-2px;bottom:-2px;width:2px;background:#fff;border-radius:1px;
            transform:translateX(-1px);box-shadow:0 0 0 1px rgba(0,0,0,.55)}
  .vs-num{font-size:11.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
  .vs-num em{font-style:normal;font-weight:500;color:var(--dim)}
  .vs-key{display:flex;align-items:center;gap:6px;margin-top:11px;font-size:10.5px;color:var(--dim)}
  .vs-key u{display:inline-block;width:2px;height:10px;background:#fff;border-radius:1px}

  /* headline lean, above the expected-count bars */
  .lean{display:flex;align-items:center;gap:10px;padding:2px 0 12px;margin-bottom:10px;
        border-bottom:1px solid var(--line-soft)}
  .lean-v{font-size:26px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1}
  .lean-t{display:flex;flex-direction:column;gap:2px;min-width:0}
  .lean-t b{font-size:12px}
  .lean-t em{font-style:normal;font-size:10.5px;color:var(--dim)}

  /* single-slot fill rates */
  .fill{margin-top:2px}
  .fill-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
    font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;
    color:var(--muted);margin-bottom:8px}
  .fill-h span{text-transform:none;letter-spacing:0;font-weight:500;color:var(--dim)}
  .fill-r{display:grid;grid-template-columns:26px 1fr 34px;align-items:center;gap:8px;margin-bottom:6px}
  .fill-r:last-child{margin-bottom:0}
  .fill-p{font-size:10px;font-weight:800}
  .fill-b{height:7px;border-radius:4px;background:#191b1e;overflow:hidden}
  .fill-b i{display:block;height:100%;border-radius:4px;opacity:.85}
  .fill-n{font-size:11.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
  .fill-s{grid-column:2/4;font-size:10px;color:var(--dim);margin-top:-3px}

  /* teams on the clock before you */
  .wq{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
  .wq-i{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:20px;
        border:1px solid var(--line);background:var(--bg);font-size:10.5px;color:var(--muted)}
  .wq-i b{color:var(--dim);font-weight:700;font-variant-numeric:tabular-nums}
  .wq-i em{font-style:normal;font-weight:700}

  /* diverging WR-RB mix */
  .mx{display:grid;grid-template-columns:1fr 96px 26px;align-items:center;gap:9px;
      padding:6px 14px;border-bottom:1px solid #202327;font-size:12.5px}
  .mx.mine{background:rgba(245,197,24,.06)}
  .mx.mine .mx-n{color:var(--yellow)}
  .mx-n{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mx-dot{flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--yellow)}
  .mx-bar{position:relative;height:8px;background:#191b1e;border-radius:3px}
  .mx-bar::before{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:#3a4046}
  .mx-bar i{position:absolute;top:0;height:100%;border-radius:2px;opacity:.8}
  .mx-v{font-size:11.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}

  .avail{display:flex;gap:6px;overflow-x:auto;padding:11px 14px}
  .acard{flex:0 0 auto;background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:6px 9px;min-width:118px}
  .acard .n{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:112px}
  .acard .m{font-size:10px;color:var(--dim);margin-top:2px}
  ::-webkit-scrollbar{height:9px;width:9px}
  ::-webkit-scrollbar-track{background:var(--bg)}
  ::-webkit-scrollbar-thumb{background:#33383e;border-radius:5px}
  ::-webkit-scrollbar-thumb:hover{background:#41474e}

/* ============================================================
   server app: setup, connection state, on-the-clock
   ============================================================ */
.screen{
  position:fixed;inset:0;background:var(--bg);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto;
}
.screen.hide{display:none}
.setup-card{width:100%;max-width:560px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.setup-card h1{margin:0;padding:20px 22px 6px;font-size:20px;letter-spacing:-.3px}
.setup-card h1 em{font-style:normal;color:var(--yellow)}
.setup-card .lede{padding:0 22px 16px;color:var(--muted);font-size:13px;line-height:1.55}
.mode-tabs{display:flex;gap:2px;padding:0 22px;border-bottom:1px solid var(--line)}
.mode-tabs button{padding:10px 16px;font-size:13px;font-weight:600;color:var(--dim);border-bottom:2px solid transparent}
.mode-tabs button.on{color:var(--yellow);border-bottom-color:var(--yellow)}
.setup-body{padding:18px 22px 22px}
.frow{display:flex;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.fld{flex:1;min-width:130px}
.fld label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);font-weight:700;margin-bottom:5px}
.fld input,.fld select{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:9px 11px;outline:none;font-size:13.5px;
}
.fld input:focus,.fld select:focus{border-color:var(--yellow-dim)}
.fld .hint2{font-size:11px;color:var(--dim);margin-top:5px;line-height:1.4}
.go{width:100%;padding:11px;border-radius:9px;background:var(--yellow);color:#17181a;font-weight:700;font-size:14px;margin-top:4px}
.go:hover{background:#ffd42e}
.go[disabled]{opacity:.55;cursor:default}
.err{margin-top:12px;padding:10px 12px;border-radius:8px;background:rgba(245,197,24,.09);
     border:1px solid var(--yellow-dim);color:var(--yellow);font-size:12.5px;line-height:1.5;display:none}
.err.show{display:block}

/* refresh button: spinner while working, brief result after */
.btn.busy{position:relative;color:transparent!important}
.btn.busy::after{
  content:"";position:absolute;top:50%;left:50%;width:13px;height:13px;margin:-7px 0 0 -7px;
  border:2px solid var(--line);border-top-color:var(--yellow);border-radius:50%;
  animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.busy[data-flash]::after{animation:none;border:0;width:auto;height:auto;margin:0;
  top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:700;line-height:1}
.btn.busy[data-flash="ok"]::after{content:"✓";color:var(--green)}
.btn.busy[data-flash="fail"]::after{content:"✕";color:var(--yellow)}
.btn.busy[data-flash^="+"]::after{content:attr(data-flash);color:var(--green)}

/* connection pill */
.conn{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600}
.conn.live{color:var(--green)} .conn.off{color:var(--dim)} .conn.done{color:var(--muted)}

/* on the clock bar */
.clock-bar{
  display:none;align-items:center;gap:12px;padding:10px 18px;
  background:rgba(245,197,24,.10);border-bottom:1px solid var(--yellow-dim);
}
.clock-bar.on{display:flex}
.clock-bar .cb-t{font-size:13px;font-weight:700;color:var(--yellow);white-space:nowrap}
.clock-bar .cb-s{font-size:12px;color:#c9bb86}
.cb-picks{display:flex;gap:6px;overflow-x:auto;flex:1}
.cb-pick{
  flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:5px 10px;border-radius:7px;
  background:var(--panel);border:1px solid var(--line);font-size:12px;white-space:nowrap;
}
.cb-pick:hover{border-color:var(--yellow);background:var(--panel-2)}
.cb-pick b{font-variant-numeric:tabular-nums;color:var(--muted);font-size:11px}
.ctrl{display:flex;gap:6px;align-items:center}
.ctrl button{border:1px solid var(--line);border-radius:7px;padding:5px 10px;font-size:11.5px;font-weight:600;color:var(--muted)}
.ctrl button:hover{color:var(--text);border-color:#3a3f45}
.ctrl select{background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:5px 7px;font-size:11.5px;outline:none}

/* a board cell you can draft */
.pick.draftable{cursor:pointer}
.pick.draftable:hover{border-color:var(--yellow);box-shadow:inset 0 0 0 1px var(--yellow)}
.tk.draftable:hover{border-color:var(--yellow);box-shadow:inset 0 0 0 1px var(--yellow)}
.flash{animation:flash 1.1s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 2px var(--yellow)}100%{box-shadow:0 0 0 0 rgba(245,197,24,0)}}