/* ============================================================================
   ArbFinder Console — design system
   Dark, data-dense, odds-screen aesthetic. Tabular numerals everywhere.
   ========================================================================= */
:root{
  --bg:#0B0F1A; --bg-2:#0E1420; --panel:#111725; --panel-2:#151D2E; --panel-3:#1A2338;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --text:#E7EEF9; --text-2:#AEBBCF; --muted:#77859C; --dim:#55617A;
  --pos:#00E07A; --pos-dim:rgba(0,224,122,.14); --pos-line:rgba(0,224,122,.35);
  --neg:#FF5A6A; --neg-dim:rgba(255,90,106,.14);
  --warn:#FFB020; --warn-dim:rgba(255,176,32,.14);
  --accent:#4CC2FF; --accent-dim:rgba(76,194,255,.14);
  --violet:#A78BFA;
  --b-thababet:#FFB020; --b-betpawa:#00E07A; --b-simacombet:#4CC2FF;
  --b-gbets:#A78BFA; --b-ebet:#FF7AB6;
  --r:7px; --r-lg:11px;
  --row-h:30px; --fs:12.5px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
html[data-density="comfortable"]{ --row-h:38px; --fs:13.5px; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
  font-size:var(--fs); line-height:1.45; -webkit-font-smoothing:antialiased;
}
.num,td.num,th.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:var(--accent);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#26314a;border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:#33415f}
::-webkit-scrollbar-track{background:transparent}
[hidden]{display:none !important}

/* ── login ─────────────────────────────────────────────────────────────── */
.login-wrap{position:fixed;inset:0;display:grid;place-items:center;
  background:radial-gradient(1100px 600px at 50% -10%,#16233c 0%,var(--bg) 62%)}
.login-card{width:352px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px 24px;display:flex;flex-direction:column;gap:13px;
  box-shadow:0 24px 70px rgba(0,0,0,.55)}
.brand-lg{display:flex;align-items:center;gap:11px;margin-bottom:6px;color:var(--pos)}
.brand-lg div{display:flex;flex-direction:column;line-height:1.15}
.brand-lg b{color:var(--text);font-size:16px;letter-spacing:.2px}
.brand-lg span{color:var(--muted);font-size:11px;letter-spacing:.5px;text-transform:uppercase}
.brand-mark{width:30px;height:30px;flex:0 0 30px}
.login-card label{display:flex;flex-direction:column;gap:5px;font-size:11px;
  color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.login-card input{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);
  padding:9px 11px;color:var(--text);font-size:13px;text-transform:none;letter-spacing:0}
.login-card input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.login-err{color:var(--neg);font-size:12px;margin:0;text-align:center}

/* ── shell ─────────────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:212px 1fr;height:100vh;overflow:hidden}
.rail{background:var(--bg-2);border-right:1px solid var(--line);display:flex;
  flex-direction:column;overflow:hidden}
.rail-brand{display:flex;align-items:center;gap:9px;padding:15px 15px 13px;
  border-bottom:1px solid var(--line);color:var(--pos)}
.rail-brand div{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.rail-brand b{color:var(--text);font-size:13.5px}
.rail-brand span{color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.6px}
.rail-brand .brand-mark{width:24px;height:24px;flex:0 0 24px}
.nav{display:flex;flex-direction:column;gap:1px;padding:9px 8px;overflow-y:auto;flex:1}
.nav-sec{font-size:9.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.8px;
  padding:12px 8px 5px;font-weight:600}
.nav a{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r);
  color:var(--text-2);font-size:12.5px;position:relative;transition:background .1s,color .1s}
.nav a svg{width:15px;height:15px;flex:0 0 15px;opacity:.75}
.nav a:hover{background:var(--panel);color:var(--text)}
.nav a.on{background:var(--panel-3);color:var(--text);font-weight:500}
.nav a.on::before{content:"";position:absolute;left:-8px;top:6px;bottom:6px;width:2px;
  border-radius:2px;background:var(--pos)}
.nav a.on svg{opacity:1;color:var(--pos)}
.nav .badge{margin-left:auto;font-size:10px;padding:1px 6px;border-radius:20px;
  background:var(--panel-3);color:var(--text-2);font-family:var(--mono)}
.nav .badge.alert{background:var(--neg-dim);color:var(--neg)}
.rail-foot{border-top:1px solid var(--line);padding:10px 12px 14px}
.rail-sec{font-size:9.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.8px;
  margin:9px 0 6px;font-weight:600}
.book-dots{display:flex;flex-direction:column;gap:4px}
.bdot{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-2)}
.bdot i{width:6px;height:6px;border-radius:50%;background:var(--dim);flex:0 0 6px}
.bdot.ok i{background:var(--pos);box-shadow:0 0 6px var(--pos-line)}
.bdot.bad i{background:var(--neg)}
.bdot span{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted)}
.rail-bal{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-2);
  padding:2px 0;font-family:var(--mono)}

/* ── topbar ────────────────────────────────────────────────────────────── */
.main{display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;padding:11px 16px;
  border-bottom:1px solid var(--line);background:var(--bg-2);flex:0 0 auto}
.tb-left{display:flex;align-items:baseline;gap:10px;min-width:0}
.topbar h1{font-size:15.5px;margin:0;font-weight:600;letter-spacing:.1px;white-space:nowrap}
.page-sub{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.search{display:flex;align-items:center;gap:7px;background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--r);padding:0 9px;height:31px;width:290px}
.search svg{width:14px;height:14px;color:var(--dim);flex:0 0 14px}
.search input{background:none;border:0;outline:none;width:100%;font-size:12.5px}
.search kbd{font-family:var(--mono);font-size:10px;color:var(--dim);
  border:1px solid var(--line-2);border-radius:4px;padding:0 4px}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--r);padding:6px 11px;
  font-size:12px;cursor:pointer;color:var(--text-2);transition:.12s;white-space:nowrap}
.btn:hover{background:var(--panel-3);color:var(--text);border-color:var(--line-2)}
.btn.primary{background:var(--pos);border-color:var(--pos);color:#04150C;font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--neg);border-color:rgba(255,90,106,.3)}
.btn.danger:hover{background:var(--neg-dim)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--panel)}
.btn.icon{padding:6px;width:31px;height:31px;justify-content:center}
.btn.icon svg{width:15px;height:15px}
.btn.sm{padding:3px 8px;font-size:11px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.user-chip{display:flex;align-items:center;gap:8px;padding:4px 9px 4px 5px;
  border:1px solid var(--line-2);border-radius:20px;cursor:pointer;background:var(--panel)}
.user-chip:hover{background:var(--panel-3)}
.avatar{width:23px;height:23px;border-radius:50%;background:linear-gradient(135deg,var(--pos),var(--accent));
  display:grid;place-items:center;font-size:10.5px;font-weight:700;color:#04150C}
.user-chip span{font-size:12px;color:var(--text-2);max-width:110px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ── health strip ──────────────────────────────────────────────────────── */
.health-strip{display:flex;align-items:stretch;gap:0;background:var(--panel);
  border-bottom:1px solid var(--line);overflow-x:auto;flex:0 0 auto}
.hs{display:flex;flex-direction:column;gap:2px;padding:7px 14px;
  border-right:1px solid var(--line);min-width:104px}
.hs .k{font-size:9.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;
  white-space:nowrap}
.hs .v{font-family:var(--mono);font-size:12.5px;color:var(--text);white-space:nowrap}
.hs .v.pos{color:var(--pos)} .hs .v.neg{color:var(--neg)} .hs .v.warn{color:var(--warn)}
.hs.alert{background:var(--neg-dim)}
.hs.alert .v{color:var(--neg)}
.hs.stall{background:var(--warn-dim)}
.hs.stall .v{color:var(--warn)}
.pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--pos);
  margin-right:5px;vertical-align:middle;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ── view ──────────────────────────────────────────────────────────────── */
.view{flex:1;overflow-y:auto;padding:14px 16px 40px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;margin-bottom:14px}
.card-h{display:flex;align-items:center;gap:10px;padding:10px 13px;
  border-bottom:1px solid var(--line);background:var(--panel-2)}
.card-h h2{font-size:12.5px;margin:0;font-weight:600;letter-spacing:.2px}
.card-h .sub{color:var(--muted);font-size:11px}
.card-h .spacer{margin-left:auto}
.card-b{padding:13px}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1240px){.g5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* stat tiles */
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:12px 13px;display:flex;flex-direction:column;gap:5px;position:relative;overflow:hidden}
.tile .lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px}
.tile .val{font-family:var(--mono);font-size:21px;font-weight:600;letter-spacing:-.4px;line-height:1.1}
.tile .val.pos{color:var(--pos)} .tile .val.neg{color:var(--neg)}
.tile .foot{font-size:11px;color:var(--muted);display:flex;gap:8px;align-items:center}
.tile .spark{position:absolute;right:10px;top:10px;opacity:.5}

/* ── tables ────────────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;max-width:100%}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
table.tbl th{position:sticky;top:0;z-index:2;background:var(--panel-2);
  text-align:left;font-size:9.5px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.7px;padding:7px 10px;
  border-bottom:1px solid var(--line);white-space:nowrap;cursor:default}
table.tbl th.sortable{cursor:pointer;user-select:none}
table.tbl th.sortable:hover{color:var(--text-2)}
table.tbl th.on{color:var(--pos)}
table.tbl th.num,table.tbl td.num{text-align:right}
table.tbl td{padding:0 10px;height:var(--row-h);border-bottom:1px solid var(--line);
  white-space:nowrap;color:var(--text-2);vertical-align:middle}
table.tbl tbody tr{transition:background .08s}
table.tbl tbody tr:hover{background:var(--panel-2)}
table.tbl tbody tr.clickable{cursor:pointer}
table.tbl tbody tr.arb{background:linear-gradient(90deg,var(--pos-dim),transparent 55%)}
table.tbl tbody tr.arb:hover{background:linear-gradient(90deg,rgba(0,224,122,.2),transparent 55%)}
table.tbl tbody tr.islive td:first-child{box-shadow:inset 2px 0 0 var(--neg)}
table.tbl td.strong{color:var(--text)}
.empty{padding:34px 16px;text-align:center;color:var(--muted);font-size:12.5px}

/* edge / pills / chips */
.edge{font-family:var(--mono);font-weight:700;font-size:12.5px}
.edge.pos{color:var(--pos)} .edge.neg{color:var(--neg)} .edge.warn{color:var(--warn)}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;padding:1.5px 7px;
  border-radius:20px;border:1px solid var(--line-2);color:var(--text-2);
  background:var(--panel-3);white-space:nowrap;font-family:var(--mono)}
.pill.live{background:var(--neg-dim);border-color:rgba(255,90,106,.35);color:var(--neg);
  font-family:var(--sans);font-weight:600;letter-spacing:.4px}
.pill.pre{background:var(--accent-dim);border-color:rgba(76,194,255,.3);color:var(--accent);
  font-family:var(--sans);font-weight:600}
.pill.ok{background:var(--pos-dim);border-color:var(--pos-line);color:var(--pos)}
.pill.bad{background:var(--neg-dim);border-color:rgba(255,90,106,.35);color:var(--neg)}
.pill.warn{background:var(--warn-dim);border-color:rgba(255,176,32,.35);color:var(--warn)}
.pill.mute{background:var(--panel-3);color:var(--muted)}
.bk{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:1px 7px;border-radius:5px;background:var(--panel-3);border:1px solid var(--line-2)}
.bk::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.bk.thababet{color:var(--b-thababet)} .bk.betpawa{color:var(--b-betpawa)}
.bk.simacombet{color:var(--b-simacombet)} .bk.gbets{color:var(--b-gbets)}
.bk.ebet{color:var(--b-ebet)} .bk.sima{color:var(--b-simacombet)}
.odds{font-family:var(--mono);font-weight:600;color:var(--text);font-size:12.5px}
.odds.best{color:var(--pos)}
.mini{font-size:10.5px;color:var(--dim);font-family:var(--mono)}
.bar{height:3px;border-radius:3px;background:var(--panel-3);overflow:hidden;min-width:38px}
.bar i{display:block;height:100%;background:var(--pos)}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:10px 13px;
  border-bottom:1px solid var(--line);background:var(--panel-2)}
.seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:var(--r);padding:2px}
.seg button{background:none;border:0;padding:4px 10px;border-radius:5px;cursor:pointer;
  font-size:11.5px;color:var(--muted)}
.seg button.on{background:var(--panel-3);color:var(--text);font-weight:600}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{font-size:11px;padding:3px 9px;border-radius:20px;border:1px solid var(--line-2);
  background:var(--panel);cursor:pointer;color:var(--muted);user-select:none}
.chip:hover{color:var(--text-2)}
.chip.on{background:var(--panel-3);color:var(--text);border-color:var(--line-2)}
.chip.on.thababet{color:var(--b-thababet);border-color:rgba(255,176,32,.4)}
.chip.on.betpawa{color:var(--b-betpawa);border-color:var(--pos-line)}
.chip.on.simacombet{color:var(--b-simacombet);border-color:rgba(76,194,255,.4)}
.chip.on.gbets{color:var(--b-gbets);border-color:rgba(167,139,250,.4)}
.chip.on.ebet{color:var(--b-ebet);border-color:rgba(255,122,182,.4)}
.field{display:flex;align-items:center;gap:6px;background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--r);padding:0 8px;height:28px}
.field label{font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.field input,.field select{background:none;border:0;outline:none;font-size:12px;
  font-family:var(--mono);width:64px;color:var(--text)}
.field select{width:auto;font-family:var(--sans)}

/* forms */
.form{display:grid;gap:11px;max-width:440px}
.form label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.5px}
.form input,.form select,.form textarea{background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:var(--r);padding:8px 10px;font-size:12.5px;color:var(--text);
  text-transform:none;letter-spacing:0;outline:none}
.form input:focus,.form select:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim)}
.form .row{display:flex;gap:10px;align-items:flex-end}
.switch{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-2);
  text-transform:none;letter-spacing:0}
.switch input{width:auto}

/* drawer */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(620px,94vw);background:var(--panel);
  border-left:1px solid var(--line-2);box-shadow:-24px 0 60px rgba(0,0,0,.5);
  z-index:60;display:flex;flex-direction:column;animation:slidein .16s ease-out}
@keyframes slidein{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.drawer-h{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--line);background:var(--panel-2)}
.drawer-h h2{font-size:14.5px;margin:0 0 3px}
.drawer-h .spacer{margin-left:auto}
.drawer-b{overflow-y:auto;padding:14px 16px 28px;flex:1}
.matrix{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
.matrix th,.matrix td{padding:6px 9px;border-bottom:1px solid var(--line);text-align:right}
.matrix th:first-child,.matrix td:first-child{text-align:left}
.matrix th{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.matrix td.best{color:var(--pos);font-weight:700;background:var(--pos-dim);
  font-family:var(--mono)}
.matrix td{font-family:var(--mono);color:var(--text-2)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:12px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-family:var(--mono);color:var(--text-2)}

/* palette */
.palette{position:fixed;inset:0;background:rgba(6,9,16,.62);backdrop-filter:blur(3px);
  z-index:80;display:flex;justify-content:center;padding-top:12vh}
.palette-box{width:min(560px,92vw);height:fit-content;background:var(--panel);
  border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.palette-box input{width:100%;background:none;border:0;border-bottom:1px solid var(--line);
  outline:none;padding:13px 15px;font-size:14px}
.palette-list{max-height:320px;overflow-y:auto;padding:5px}
.palette-list div{padding:8px 11px;border-radius:var(--r);cursor:pointer;font-size:12.5px;
  color:var(--text-2);display:flex;gap:9px;align-items:center}
.palette-list div:hover,.palette-list div.on{background:var(--panel-3);color:var(--text)}
.palette-list div .k{margin-left:auto;font-size:10.5px;color:var(--dim);font-family:var(--mono)}

/* toast */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:90;
  background:var(--panel-3);border:1px solid var(--line-2);border-radius:var(--r);
  padding:9px 15px;font-size:12.5px;box-shadow:0 12px 34px rgba(0,0,0,.5);
  animation:pop .16s ease-out}
.toast.bad{border-color:rgba(255,90,106,.5);color:var(--neg)}
.toast.good{border-color:var(--pos-line);color:var(--pos)}
@keyframes pop{from{transform:translate(-50%,8px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* misc */
.sparkline{display:block}
.hr{height:1px;background:var(--line);margin:13px 0}
.muted{color:var(--muted)} .dim{color:var(--dim)} .pos{color:var(--pos)}
.neg{color:var(--neg)} .warn{color:var(--warn)} .right{text-align:right}
.flex{display:flex;gap:9px;align-items:center} .wrap{flex-wrap:wrap}
.mt{margin-top:12px} .mb{margin-bottom:12px}
.trunc{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:inline-block;vertical-align:middle}
.loading{padding:40px;text-align:center;color:var(--muted);font-size:12.5px}
code.snip{font-family:var(--mono);font-size:11px;color:var(--text-2);
  background:var(--bg-2);border:1px solid var(--line);border-radius:5px;
  padding:7px 9px;display:block;white-space:pre-wrap;word-break:break-all;max-height:150px;
  overflow:auto}
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .rail{position:fixed;inset:0 auto 0 0;width:212px;z-index:70;transform:translateX(-100%);
    transition:transform .18s}
  .rail.open{transform:none}
  .search{width:150px}
}


/* _ARF_CSS_PATCH ---------------------------------------------------------
   Controls + Services. Reuses the existing tokens; no new palette.
   ---------------------------------------------------------------------- */

/* control groups: two comfortable columns, collapsing on narrow screens */
.ctrls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.ctl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.ctl {
  display: grid;
  grid-template-columns: 1fr 160px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.ctl:last-child { border-bottom: 0; }

.ctl-k {
  color: var(--text);
  font-size: var(--fs, 13px);
}

.ctl-v {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ctl input[type="number"] {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 7px;
  padding: 6px 9px;
  font-family: var(--mono);
  font-size: var(--fs, 13px);
  font-variant-numeric: tabular-nums;
  text-align: right;
  transition: border-color .12s, box-shadow .12s;
}
.ctl input[type="number"]:hover { border-color: rgba(255, 255, 255, .24); }
.ctl input[type="number"]:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(76, 194, 255, .16);
}

/* "using the code default" marker -- subtle, not a warning */
.ctl-def {
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--warn);
  opacity: .85;
  white-space: nowrap;
}

/* services */
.svc-list { display: grid; gap: 2px; }

.svc-row {
  display: grid;
  grid-template-columns: 1fr 110px auto;
  align-items: center;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.svc-row:last-child { border-bottom: 0; }

.svc-name { display: flex; flex-direction: column; gap: 1px; }
.svc-name b { font-size: var(--fs, 13px); }
.svc-name .muted { font-size: 11.5px; }

.svc-state { display: flex; }

.svc-acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.btn.sm {
  padding: 5px 11px;
  font-size: 11.5px;
  border-radius: 7px;
}

.svc-btn:disabled { opacity: .45; cursor: not-allowed; }

/* status pills -- .ok/.warn/.bad already exist elsewhere; make sure the
   service variants read clearly against the panel background */
.pill.ok   { background: rgba(0, 224, 122, .14); color: var(--pos);  border: 1px solid rgba(0, 224, 122, .3); }
.pill.warn { background: rgba(255, 176, 32, .14); color: var(--warn); border: 1px solid rgba(255, 176, 32, .3); }
.pill.bad  { background: rgba(255, 90, 106, .14); color: var(--neg);  border: 1px solid rgba(255, 90, 106, .3); }

/* small generic helpers used by the new views */
.flex.wrap.gap { gap: 10px; }

@media (max-width: 900px) {
  .ctl { grid-template-columns: 1fr; gap: 4px; }
  .ctl input[type="number"] { text-align: left; }
  .svc-row { grid-template-columns: 1fr auto; row-gap: 8px; }
  .svc-state { grid-column: 2; justify-content: flex-end; }
  .svc-acts { grid-column: 1 / -1; justify-content: flex-start; }
}