/* OpenSIPS Control Panel - same tokens as the PHP panel's custom theme (/root/theme-build) */
:root {
  --bg:#F3F5F9; --surface:#FFFFFF; --surface-2:#F8FAFC; --border:#E3E8EF; --border-strong:#CBD5E1;
  --text:#0F172A; --text-2:#475569; --text-3:#64748B;
  --primary:#2563EB; --primary-600:#1D4ED8; --primary-50:#EFF6FF; --primary-ring:rgba(37,99,235,.18);
  --nav-bg:#0B1B2E; --nav-bg-2:#10294A; --nav-text:#A9B8CB; --nav-muted:#7F93AE;
  --success:#15803D; --success-bg:#DCFCE7; --danger:#DC2626; --danger-bg:#FEF2F2; --warn:#B45309; --warn-bg:#FEF3C7;
  --info:#1D4ED8; --info-bg:#DBEAFE;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.08);
  --font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0B1220; --surface:#111A2B; --surface-2:#0F1726; --border:#1F2A3D; --border-strong:#2C3A52;
    --text:#E2E8F0; --text-2:#B4C0D3; --text-3:#8A99B0;
    --primary:#60A5FA; --primary-600:#3B82F6; --primary-50:#13233F; --primary-ring:rgba(96,165,250,.25);
    --success:#4ADE80; --success-bg:#0F2E1C; --danger:#F87171; --danger-bg:#3A1515; --warn:#FBBF24; --warn-bg:#3A2A0A;
    --info:#93C5FD; --info-bg:#132A4A;
    --shadow:0 1px 2px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}
*,*::before,*::after { box-sizing:border-box }
html,body { margin:0; padding:0 }
body { background:var(--bg); color:var(--text); font:13.5px/1.5 var(--font); -webkit-font-smoothing:antialiased }
a { color:var(--primary); text-decoration:none } a:hover { text-decoration:underline }
h1 { font-size:20px; font-weight:700; letter-spacing:-.2px; margin:0 }
h2 { font-size:15px; font-weight:650; margin:0 0 12px } h3 { font-size:13px; font-weight:650; margin:16px 0 8px; color:var(--text-2) }
.mono { font-family:var(--mono); font-size:12.5px } .muted { color:var(--text-3) } .small { font-size:12px }
.right { text-align:right } .nowrap { white-space:nowrap }
.ellipsis { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* ---- shell ---- */
.shell { display:flex; min-height:100vh }
.nav { --nav-w:248px; width:var(--nav-w); flex:0 0 var(--nav-w); background:linear-gradient(180deg,var(--nav-bg),var(--nav-bg-2));
  color:var(--nav-text); position:sticky; top:0; height:100vh; display:flex; flex-direction:column; transition:width .18s ease, flex-basis .18s ease; z-index:20 }
.nav-top { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 12px 10px 14px }
.brand { display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; font-size:15px; min-width:0 }
.brand:hover { text-decoration:none }
.brand-mark { flex:0 0 32px; height:32px; border-radius:9px; display:grid; place-items:center; background:rgba(96,165,250,.16); color:#60A5FA }
.brand-text { white-space:nowrap; overflow:hidden } .brand small { display:block; font-weight:500; font-size:11px; color:var(--nav-muted) }
.nav-collapse { flex:0 0 32px; height:32px; border-radius:8px; border:0; background:transparent; color:var(--nav-muted); cursor:pointer; display:grid; place-items:center }
.nav-collapse:hover { background:rgba(255,255,255,.07); color:#fff }
.nav-filter { position:relative; margin:4px 12px 10px }
.nav-filter input { height:34px; padding-left:32px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08) !important; color:#E2E8F0; font-size:13px }
.nav-filter input::placeholder { color:var(--nav-muted) }
.nav-filter input:focus { border-color:#60A5FA !important; box-shadow:0 0 0 3px rgba(96,165,250,.2) }
.nav-filter-ico { position:absolute; left:10px; top:9px; color:var(--nav-muted); display:flex }
.nav-scroll { flex:1; overflow-y:auto; overflow-x:hidden; padding:2px 10px 24px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent }
.nav-scroll::-webkit-scrollbar { width:6px } .nav-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:3px }
.ico { flex:0 0 auto }
.nav-item { display:flex; align-items:center; gap:10px; color:var(--nav-text); padding:7px 10px; border-radius:8px; font-size:13px; font-weight:500;
  white-space:nowrap; position:relative }
.nav-item .ico { color:var(--nav-muted) }
.nav-item:hover { background:rgba(255,255,255,.06); color:#fff; text-decoration:none } .nav-item:hover .ico { color:#C7D4E6 }
.nav-item.active { background:rgba(96,165,250,.16); color:#fff } .nav-item.active .ico { color:#60A5FA }
.nav-item.active::before { content:""; position:absolute; left:-10px; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:#60A5FA }
.nav-item.solo { margin-bottom:6px; padding:8px 10px; font-weight:600 }
.nav-group { margin-bottom:2px }
.nav-group-head { width:100%; display:flex; align-items:center; gap:10px; padding:8px 10px; border:0; background:transparent; color:#D3DDEA;
  font:600 12.5px var(--font); letter-spacing:.01em; border-radius:8px; cursor:pointer; text-align:left; white-space:nowrap }
.nav-group-head:hover { background:rgba(255,255,255,.05) } .nav-group-head .ico { color:var(--nav-muted) }
.nav-group-head .nav-label { flex:1 }
.nav-count { font-size:10.5px; font-weight:600; color:var(--nav-muted); background:rgba(255,255,255,.06); border-radius:999px; padding:0 7px; line-height:18px }
.nav-chev { display:flex; color:var(--nav-muted); transition:transform .18s ease }
.nav-group.open .nav-chev { transform:rotate(180deg) }
.nav-group-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .2s ease }
.nav-group.open .nav-group-body, .nav.filtering .nav-group-body { grid-template-rows:1fr }
.nav-group-inner { overflow:hidden; padding-left:10px; margin-left:18px; border-left:1px solid rgba(255,255,255,.08) }
.nav-group.open .nav-group-inner { padding-top:2px; padding-bottom:6px }
.nav-group-inner .nav-item { padding:6px 10px }
.nav-group-inner .nav-item.active::before { left:-11px }
.nav-backdrop { display:none }

/* ---- icon rail (collapsed) ---- */
.nav-rail .nav { --nav-w:68px }
.nav-rail .nav-top { flex-direction:column; padding:14px 0 8px; gap:10px }
.nav-rail .brand-text, .nav-rail .nav-label, .nav-rail .nav-count, .nav-rail .nav-chev, .nav-rail .nav-filter { display:none }
.nav-rail .nav-scroll { padding:4px 10px 24px }
.nav-rail .nav-item, .nav-rail .nav-group-head { justify-content:center; padding:9px 0 }
.nav-rail .nav-group { border-top:1px solid rgba(255,255,255,.07); padding-top:4px; margin-top:4px }
.nav-rail .nav-group-head { display:none }
.nav-rail .nav-group-body { grid-template-rows:1fr }
.nav-rail .nav-group-inner { margin:0; padding:0; border:0 }
.nav-rail .nav-item.active::before { left:-10px }
.nav-rail .nav-item:hover::after { content:attr(title); position:fixed; left:72px; transform:translateY(-2px); background:#0F172A; color:#fff;
  font-size:12px; font-weight:600; padding:5px 9px; border-radius:6px; white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.35); pointer-events:none; z-index:50 }
.main { flex:1; min-width:0; display:flex; flex-direction:column }
.topbar { display:flex; align-items:center; gap:14px; height:56px; padding:0 24px; background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5 }
.crumbs { color:var(--text-3); font-weight:500; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.crumbs .sep { margin:0 6px; color:var(--border-strong) }
.topbar-right { display:flex; align-items:center; gap:12px }
.user { color:var(--text-2); font-weight:600 }
.box-pill { font-size:12px; background:var(--primary-50); color:var(--primary); padding:3px 10px; border-radius:999px; font-weight:600 }
.box-select select { height:32px; width:auto }
.nav-toggle { display:none; width:34px; height:34px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text-2); cursor:pointer; place-items:center }
.content { padding:22px 28px 48px; max-width:1500px; width:100% }

/* ---- page parts ---- */
.page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap }
.page-head .actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.count { font-size:12px; font-weight:600; color:var(--text-3); background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:1px 9px; vertical-align:middle }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; margin-bottom:18px }
.table-card { padding:0; overflow:hidden } .table-card > h2 { padding:16px 18px 0 } .table-card > .alert { margin:12px 18px }
.table-card > .form-actions { padding:14px 18px }
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:18px } .grid-2 > .card { margin-bottom:0 } .grid-2 { margin-bottom:18px }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:18px; overflow-x:auto }
.tab { padding:9px 14px; color:var(--text-3); font-weight:600; border-bottom:2px solid transparent; white-space:nowrap }
.tab:hover { color:var(--text); text-decoration:none } .tab.active { color:var(--primary); border-bottom-color:var(--primary) }
.flash { margin-bottom:14px }
.alert { padding:10px 14px; border-radius:var(--radius-sm); margin-bottom:8px; border:1px solid transparent; font-weight:500 }
.alert-success { background:var(--success-bg); color:var(--success) } .alert-error { background:var(--danger-bg); color:var(--danger) }
.alert-warning { background:var(--warn-bg); color:var(--warn) } .alert-info { background:var(--info-bg); color:var(--info) }

/* ---- tables ---- */
.table-wrap { overflow-x:auto }
table.grid { width:100%; border-collapse:collapse }
.grid th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); font-weight:650;
  background:var(--surface-2); border-bottom:1px solid var(--border); padding:9px 12px; white-space:nowrap }
.grid th a { color:inherit } .grid td { padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:top }
.grid tbody tr:hover { background:var(--surface-2) } .grid tbody tr:last-child td { border-bottom:0 }
.grid th.right, .grid td.right { text-align:right }
.card > table.grid { margin:0 -20px; width:calc(100% + 40px) } .card > table.grid th:first-child, .card > table.grid td:first-child { padding-left:20px }
.empty { text-align:center; color:var(--text-3); padding:28px !important }
table.kv { border-collapse:collapse; width:100% } table.kv th { text-align:left; color:var(--text-3); font-weight:600; padding:4px 12px 4px 0; vertical-align:top; white-space:nowrap; width:1% }
table.kv td { padding:4px 0; vertical-align:top } .mi-item { border-left:2px solid var(--border); padding:4px 0 4px 10px; margin:6px 0 }
.pager { display:flex; align-items:center; justify-content:center; gap:12px; margin:8px 0 18px }

/* ---- forms ---- */
input, select, textarea { font:inherit; color:var(--text); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  height:36px; padding:6px 10px; width:100%; outline:none; transition:border-color .15s, box-shadow .15s }
textarea { height:auto; line-height:1.45 } textarea.mono { font-family:var(--mono); font-size:12.5px }
input:focus, select:focus, textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-ring) }
input[type=checkbox] { width:16px; height:16px; accent-color:var(--primary); vertical-align:middle }
.filters { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 16px; margin-bottom:16px; box-shadow:var(--shadow) }
.filters label { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:var(--text-2); min-width:150px; flex:0 1 190px }
.filter-actions { display:flex; gap:8px }
.form-card { max-width:760px } .form-card.wide { max-width:1000px }
fieldset { border:0; padding:0; margin:0 }
.field { margin-bottom:14px } .field > label { display:block; font-weight:600; font-size:12.5px; color:var(--text-2); margin-bottom:5px }
.field .help { font-size:12px; color:var(--text-3); margin-top:4px } .field .err { font-size:12px; color:var(--danger); margin-top:4px; font-weight:600 }
.has-error input, .has-error select, .has-error textarea { border-color:var(--danger) }
.req { color:var(--danger) } .check { display:inline-flex; gap:8px; align-items:center; font-weight:500 }
.form-actions { display:flex; gap:10px; align-items:center; margin-top:6px }
form.inline { display:inline }

/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px; padding:0 14px; border-radius:var(--radius-sm);
  border:1px solid transparent; font:600 13px var(--font); cursor:pointer; white-space:nowrap; text-decoration:none !important; transition:background .15s }
.btn-primary { background:var(--primary); color:#fff } .btn-primary:hover { background:var(--primary-600) }
.btn-ghost { background:var(--surface); border-color:var(--border-strong); color:var(--text-2) } .btn-ghost:hover { background:var(--surface-2); color:var(--text) }
.btn-danger-ghost { background:var(--surface); border-color:var(--border-strong); color:var(--danger) } .btn-danger-ghost:hover { background:var(--danger-bg) }
.btn-sm { height:30px; padding:0 10px; font-size:12.5px } .btn-xs { height:26px; padding:0 8px; font-size:12px }
.btn-block { width:100% } .btn:disabled { opacity:.5; cursor:default }

/* ---- badges / stats ---- */
.badge { display:inline-block; font-size:11.5px; font-weight:650; padding:2px 8px; border-radius:999px; background:var(--surface-2); color:var(--text-2) }
.badge.ok { background:var(--success-bg); color:var(--success) } .badge.bad { background:var(--danger-bg); color:var(--danger) }
.badge.warn { background:var(--warn-bg); color:var(--warn) } .badge.info { background:var(--info-bg); color:var(--info) }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:18px }
.stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow) }
.stat-label { font-size:12px; font-weight:600; color:var(--text-3) }
.stat-value { font-size:26px; font-weight:700; letter-spacing:-.5px; margin:2px 0; font-variant-numeric:tabular-nums }
.stat-value.sm { font-size:17px; margin:8px 0 6px } .stat-value.ok { color:var(--success) } .stat-value.bad { color:var(--danger) }
.stat-sub { font-size:12px; color:var(--text-3) }
.meter { height:6px; background:var(--surface-2); border-radius:3px; overflow:hidden; margin:6px 0 }
.meter span { display:block; height:100%; background:var(--primary) } .meter span.warn { background:var(--warn) } .meter span.crit { background:var(--danger) }
.kpis { display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--text-3) } .kpis b { color:var(--text); font-variant-numeric:tabular-nums }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px } .page-head .chips { margin:0 }
.chip { padding:4px 11px; border-radius:999px; border:1px solid var(--border-strong); color:var(--text-2); font-size:12.5px; font-weight:600; background:var(--surface) }
.chip:hover { text-decoration:none; border-color:var(--primary) } .chip.active { background:var(--primary); border-color:var(--primary); color:#fff }

/* ---- charts ---- */
.chart-box { position:relative; height:260px }
.chart-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:16px }
.chart-grid .card { margin:0 } .chart-grid .chart-box { height:200px }
.mini-charts { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px } .mini-charts .chart-box { height:120px }
.chart-title { font-size:12.5px; font-weight:600; color:var(--text-2); margin-bottom:4px } .chart-title .muted { font-weight:500 }

/* ---- SIP ---- */
.ladder-wrap { overflow-x:auto }
.ladder text { font:12px var(--font); fill:var(--text-2) } .ladder .ladder-host { font-weight:650; fill:var(--text) }
.ladder .ladder-time { font:11px var(--mono); fill:var(--text-3) }
.ladder-life { stroke:var(--border-strong); stroke-dasharray:3 3 }
.ladder-arrow { stroke:var(--text-3); stroke-width:1.5 } .ladder-arrow.ok { stroke:var(--success) } .ladder-arrow.err { stroke:var(--danger) } .ladder-arrow.req { stroke:var(--primary) }
.ladder-head { fill:var(--text-3) } .ladder-label.ok { fill:var(--success) } .ladder-label.err { fill:var(--danger) } .ladder-label.req { fill:var(--primary) }
.sipmsg { border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:6px; background:var(--surface-2) }
.sipmsg summary { cursor:pointer; padding:7px 12px; display:flex; gap:10px; flex-wrap:wrap }
.sipmsg pre, pre.code { margin:0; padding:12px; font:12px/1.45 var(--mono); white-space:pre-wrap; word-break:break-all; border-top:1px solid var(--border); max-height:520px; overflow:auto }
pre.code { border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-2) }
.sipmsg:target { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-ring) }

/* ---- login ---- */
.login-body { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px;
  background:radial-gradient(circle at 20% 10%, #1b3a66 0, var(--nav-bg) 55%) }
.login-card { width:100%; max-width:380px; background:var(--surface); border-radius:16px; padding:28px; box-shadow:0 20px 50px rgba(0,0,0,.35) }
.login-card label { display:block; font-weight:600; font-size:12.5px; color:var(--text-2); margin-bottom:14px }
.login-card label input { margin-top:5px }
.login-brand { display:flex; align-items:center; gap:10px; margin-bottom:20px; color:var(--primary) }
.login-brand h1 { color:var(--text); font-size:18px }

/* ---- small screens ---- */
@media (max-width: 900px) {
  .nav, .nav-rail .nav { --nav-w:272px; position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .2s }
  .nav.open { transform:none; box-shadow:0 0 40px rgba(0,0,0,.4) }
  .nav-rail .brand-text, .nav-rail .nav-label, .nav-rail .nav-count, .nav-rail .nav-chev, .nav-rail .nav-filter, .nav-rail .nav-group-head { display:flex }
  .nav-collapse { display:none }
  .nav-backdrop.show { display:block; position:fixed; inset:0; background:rgba(2,6,23,.5); z-index:15 }
  .nav-toggle { display:grid }
  .content { padding:16px 16px 40px } .topbar { padding:0 16px } .user { display:none }
  .grid-2, .chart-grid { grid-template-columns:1fr } .filters label { flex:1 1 100% }
}

/* ---- dashboard widgets (PHP panel style) ---- */
.widgets { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin-bottom:18px }
.widget { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; min-height:190px }
.widget-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; background:var(--surface-2); border-bottom:1px solid var(--border) }
.widget-head a { color:var(--text); font-weight:650; font-size:13.5px } .widget-head a:hover { color:var(--primary); text-decoration:none }
.widget-body { padding:12px 14px 14px; flex:1; display:flex; flex-direction:column; justify-content:center }
.widget-err { font-size:12px; color:var(--danger); background:var(--danger-bg); border-radius:6px; padding:6px 8px; margin-bottom:8px; word-break:break-word }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex:0 0 10px; background:var(--border-strong) }
.dot-ok { background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.18) } .dot-warn { background:#F59E0B; box-shadow:0 0 0 3px rgba(245,158,11,.2) }
.dot-crit { background:#EF4444; box-shadow:0 0 0 3px rgba(239,68,68,.2) } .dot-none { background:var(--border-strong) }
.lvl-ok { color:var(--success) } .lvl-warn { color:var(--warn) } .lvl-crit { color:var(--danger) }
.w-sub { font-size:12px; color:var(--text-3); margin-top:6px; text-align:center }
.gauge { width:100%; max-width:220px; margin:0 auto; display:block }
.g-band { fill:none; stroke-width:16 } .g-band.ok { stroke:#22C55E } .g-band.warn { stroke:#F59E0B } .g-band.crit { stroke:#EF4444 }
.g-needle { stroke:var(--text); stroke-width:4; stroke-linecap:round } .g-hub { fill:var(--text) }
.gauge-scale { display:flex; justify-content:space-between; align-items:baseline; font-size:11.5px; color:var(--text-3); max-width:220px; margin:0 auto; width:100% }
.gauge-scale b { font-size:18px; color:var(--text); font-variant-numeric:tabular-nums }
.w-table { width:100%; border-collapse:collapse; font-size:12.5px } .w-table th { text-align:left; color:var(--text-3); font-weight:600; font-size:11.5px; padding:2px 4px 6px }
.w-table td { padding:4px; border-top:1px solid var(--border) } .w-table .right { text-align:right; font-weight:650; font-variant-numeric:tabular-nums }
.w-table .ellipsis { max-width:110px }
.w-split { display:flex; align-items:center; gap:14px } .donut { width:90px; flex:0 0 90px }
.d-track { fill:none; stroke:var(--surface-2); stroke-width:12 } .d-fill { fill:none; stroke:var(--primary); stroke-width:12; stroke-linecap:round }
.d-text { font:700 15px var(--font); fill:var(--text) }
.w-dl { display:grid; grid-template-columns:1fr auto; gap:5px 12px; margin:0; font-size:13px } .w-dl dt { color:var(--text-2) }
.w-dl dd { margin:0; text-align:right; font-weight:650; font-variant-numeric:tabular-nums } .w-dl dd.big { font-size:18px; font-weight:750 }
.w-dl.wide { width:100% }
.w-svcs { list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:13px } .w-svcs li { display:flex; align-items:center; gap:9px }
.refresh-note { margin-left:6px; padding:1px 8px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border) }
.page-head .actions.small span { white-space:nowrap }

/* ---- live dashboard ---- */
.live-badge { display:inline-flex; align-items:center; gap:6px; margin-left:8px; padding:2px 10px 2px 8px; border-radius:999px; cursor:pointer;
  font:700 11px var(--font); letter-spacing:.06em; border:1px solid rgba(34,197,94,.35); background:rgba(34,197,94,.12); color:var(--success) }
.live-dot { width:8px; height:8px; border-radius:50%; background:#22C55E; animation:livePulse 1.6s ease-out infinite }
.live-badge.paused { border-color:var(--border-strong); background:var(--surface-2); color:var(--text-3) } .live-badge.paused .live-dot { background:var(--text-3); animation:none }
.live-badge.offline { border-color:rgba(239,68,68,.4); background:var(--danger-bg); color:var(--danger) } .live-badge.offline .live-dot { background:#EF4444; animation:none }
@keyframes livePulse { 0% { box-shadow:0 0 0 0 rgba(34,197,94,.6) } 70% { box-shadow:0 0 0 7px rgba(34,197,94,0) } 100% { box-shadow:0 0 0 0 rgba(34,197,94,0) } }
.flash { animation:valFlash 1.2s ease-out }
@keyframes valFlash { 0% { background:var(--primary-ring); border-radius:4px } 100% { background:transparent } }
.g-needle-g { transform-box:view-box; transform-origin:100px 96px; transition:transform .9s cubic-bezier(.2,.8,.2,1) }
.d-fill { transition:stroke-dasharray .9s ease }
.live-top { display:flex; align-items:flex-end; justify-content:space-between; gap:12px }
.live-num { font-size:40px; font-weight:800; letter-spacing:-1px; line-height:1; font-variant-numeric:tabular-nums; color:var(--text) }
.live-side { display:grid; gap:3px; font-size:12.5px; text-align:right } .live-side b { font-variant-numeric:tabular-nums; display:inline-block; min-width:28px }
.spark { width:100%; height:44px; display:block; margin-top:10px }
@media (prefers-reduced-motion: reduce) { .live-dot, .flash { animation:none } .g-needle-g, .d-fill { transition:none } }

.cdr-why { max-width:300px; white-space:normal; margin-top:3px; line-height:1.35 }

.gmt-clock { display:inline-flex; align-items:center; gap:6px; font:600 13px var(--mono); color:var(--text); background:var(--surface-2);
  border:1px solid var(--border); border-radius:8px; padding:3px 10px; font-variant-numeric:tabular-nums }
.gmt-tag { font:700 10.5px var(--font); letter-spacing:.06em; color:var(--primary) }
.dest { font-size:12.5px } .dest-ok { color:var(--success); font-weight:650 } .dest-skip { color:var(--text-3); text-decoration:line-through }