/* bibby9 — qz7x4 Construction, quiet register. Light is the designed default; dark follows the visitor's system.
   Role tokens come from the design system; the short aliases below (--bg, --panel, --red …) keep older markup working. */
@font-face { font-family: "Sora"; src: url("/static/fonts/Sora-Variable-latin.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/static/fonts/Inter-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* colour roles (light) */
  --ground: #ffffff; --band: #f5f6f9; --surface: #ffffff; --rule: #e3e6ee; --boundary: #858ca3;
  --ink: #0e1330; --ink-2: #5a6180;
  --accent: #6a55ee; --accent-hover: #5a45dc; --on-accent: #ffffff; --accent-surface: #eae8ff; --focus: var(--accent);
  --positive: #0b7a55; --positive-surface: #e3f4ec; --nav-active: #0b7a55; --warning: #8a5a00; --danger: #c8361f; --beam: #ff5a1f;
  --cat-1: #5d75e4; --cat-2: #0784db; --cat-3: #0090c5; --cat-4: #0098a6; --cat-5: #259760;
  --shadow-menu: 0 8px 24px rgba(8, 17, 55, 0.12);
  --scrim: rgba(14, 19, 48, 0.32);
  color-scheme: light;

  /* type */
  --font-display: Sora, "Avenir Next", system-ui, sans-serif;
  --font-text: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* φ rails */
  --gap-pair: 5px; --gap-inline: 8px; --gap-related: 13px; --gap-group: 21px; --gap-section: 34px; --gap-region: 55px;
  --inset-mark: 3px; --inset-badge: 8px; --inset-control: 13px; --inset-card: 21px; --inset-page: 55px; --inset-page-compact: 21px;
  --corner-mark: 3px; --corner-badge: 5px; --corner-control: 8px; --corner-card: 13px; --corner-dialog: 21px; --corner-pill: 999px;
  --control-s: 31px; --control-m: 37px; --control-l: 47px; --bar: 55px; --wrap: 1220px;
  --stroke-hairline: 1px; --stroke-focus: 2px;
  --dur-press: 120ms; --dur-disclose: 180ms; --dur-1: 144ms;
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1); --ease-press: cubic-bezier(0.2, 0, 0, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0a0f24; --band: #0d1329; --surface: #111833; --rule: #222b4a; --boundary: #5c6892;
    --ink: #eef0f7; --ink-2: #9aa3c2;
    --accent: #8076fa; --accent-hover: #958dfb; --on-accent: #0a0f24; --accent-surface: #231a52;
    --positive: #3cc08a; --positive-surface: #0e2a22; --nav-active: #3cc08a; --warning: #f2c94c; --danger: #ff8a73;
    --cat-1: #5e9cff; --cat-2: #00a7f0; --cat-3: #00abcd; --cat-4: #00b0ab; --cat-5: #62ad67;
    --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.45); --scrim: rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0a0f24; --band: #0d1329; --surface: #111833; --rule: #222b4a; --boundary: #5c6892;
  --ink: #eef0f7; --ink-2: #9aa3c2;
  --accent: #8076fa; --accent-hover: #958dfb; --on-accent: #0a0f24; --accent-surface: #231a52;
  --positive: #3cc08a; --positive-surface: #0e2a22; --nav-active: #3cc08a; --warning: #f2c94c; --danger: #ff8a73;
  --cat-1: #5e9cff; --cat-2: #00a7f0; --cat-3: #00abcd; --cat-4: #00b0ab; --cat-5: #62ad67;
  --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.45); --scrim: rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}
/* aliases used by the app scripts and older rules */
:root {
  --bg: var(--band); --panel: var(--surface); --panel-2: var(--band); --border: var(--rule); --text: var(--ink); --muted: var(--ink-2);
  --red: var(--danger); --red-bg: color-mix(in srgb, var(--danger) 10%, var(--surface));
  --amber: var(--warning); --amber-bg: color-mix(in srgb, var(--warning) 12%, var(--surface));
  --blue: var(--accent); --blue-bg: var(--accent-surface);
  --green: var(--positive); --grey: var(--boundary); --grey-bg: var(--band);
  --shadow: var(--shadow-menu); --radius: var(--corner-card);
}

* { box-sizing: border-box; }
html { font-feature-settings: "calt" 0; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14px/23px var(--font-text); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--ink-2); } .small { font-size: 12px; line-height: 19px; letter-spacing: 0.16px; } .error { color: var(--danger); min-height: 1.2em; }
.num { font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; font-feature-settings: "calt" 0; }
h1, h2, h3, h4 { font-family: var(--font-display); }

/* brand + login */
.brand { display: inline-flex; align-items: center; gap: var(--gap-inline); font: 600 18px/23px var(--font-display); letter-spacing: -0.24px; text-decoration: none; color: var(--ink); white-space: nowrap; }
.brand.big { font-size: 36px; line-height: 46px; letter-spacing: -0.47px; }
.brand > .b9-mark { font-size: 22px; } .brand.big > .b9-mark { font-size: 36px; }
.brand .sub { font: 600 11px/18px var(--font-text); letter-spacing: 0.99px; text-transform: uppercase; color: var(--ink-2); }
.logo { display: none; }
/* bibby9 colour mark: "(" + b i b b y 9 + ")" — every letter split at the beam like the (qz7x4) mark, violet-to-green scale ring to ring */
.b9-mark { display: inline-flex; align-items: center; font: 700 1em/1.127 var(--font-display); letter-spacing: -0.03em; white-space: nowrap; }
.b9-mark .ring { flex: none; width: 0.507em; height: 1.015em; background: var(--ring-live-l) center / contain no-repeat; }
.b9-mark .ring.r { background-image: var(--ring-live-r); }
.b9-mark .ring.l { margin-right: 0.08em; } .b9-mark .ring.r { margin-left: 0.08em; }
.b9-mark .lt { display: inline-block; line-height: 1.127; color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(var(--t) 0 48.9%, var(--beam) 48.9% 55.9%, var(--b) 55.9%); }
.b9-mark .lt:nth-of-type(1) { --t: #5d75e4; --b: #5e9cff; }
.b9-mark .lt:nth-of-type(2) { --t: #0784db; --b: #00a7f0; }
.b9-mark .lt:nth-of-type(3) { --t: #0090c5; --b: #00abcd; }
.b9-mark .lt:nth-of-type(4) { --t: #0098a6; --b: #00b0ab; }
.b9-mark .lt:nth-of-type(5) { --t: #009a83; --b: #13b289; }
.b9-mark .lt:nth-of-type(6) { --t: #259760; --b: #62ad67; }

.login { min-height: 100vh; display: grid; place-items: center; padding: var(--gap-group); background: var(--band); }
.login-card { width: min(377px, 100%); background: var(--surface); border: var(--stroke-hairline) solid var(--rule); border-radius: var(--corner-dialog); padding: var(--gap-section) var(--inset-card) var(--inset-card); display: grid; gap: var(--gap-related); }
.login-card > p.muted { margin: 0 0 var(--gap-inline); }
.login-card label { display: grid; gap: var(--gap-pair); color: var(--ink); font: 500 13px/21px var(--font-text); }
input, select, textarea { background: var(--surface); border: var(--stroke-hairline) solid var(--boundary); border-radius: var(--corner-control); padding: 6px 12px; min-width: 0; min-height: var(--control-s); }
.login-card input { min-height: var(--control-m); font-size: 15px; line-height: 24px; }
input[type=checkbox], input[type=radio] { min-height: 0; accent-color: var(--accent); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 0; border-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible, .chip:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }

/* buttons: convex ( )-like ends — an elliptical radius (depth 0.35 × height, full height), so the ends curve like the brackets and no corner is sharp */
.btn { --bh: var(--control-m); --qz-fill: var(--surface); --qz-edge: var(--boundary);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-inline);
  height: var(--bh); padding: 0 var(--gap-group); border: var(--stroke-hairline) solid var(--qz-edge); border-radius: calc(var(--bh) * 0.35) / 50%;
  background: var(--qz-fill); color: var(--ink); font: 500 13px/21px var(--font-text); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur-press) var(--ease-press), border-color var(--dur-press) var(--ease-press); }
.btn:hover { --qz-fill: var(--accent-surface); }
.btn.primary { --qz-fill: var(--accent); --qz-edge: var(--accent); color: var(--on-accent); }
.btn.primary:hover { --qz-fill: var(--accent-hover); --qz-edge: var(--accent-hover); }
.btn.ghost { --qz-fill: transparent; --qz-edge: transparent; }
.btn.ghost:hover { --qz-fill: var(--accent-surface); --qz-edge: var(--accent-surface); }
.btn.small { --bh: var(--control-s); padding: 0 var(--inset-control); font-size: 13px; }
.btn.on { --qz-fill: var(--accent-surface); --qz-edge: var(--accent); color: var(--ink); }
.btn:disabled { --qz-fill: var(--rule); --qz-edge: var(--rule); color: var(--ink-2); cursor: not-allowed; }
.icon-btn { background: none; border: none; cursor: pointer; font-size: 16px; min-width: var(--control-s); min-height: var(--control-s); padding: 0 6px; color: var(--ink-2); border-radius: var(--corner-control); }
.icon-btn:hover { background: var(--accent-surface); color: var(--ink); }

/* top bar */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--gap-group); height: var(--bar); padding: 0 var(--inset-card); background: var(--ground); border-bottom: var(--stroke-hairline) solid var(--rule); }
.tabs { display: flex; gap: 2px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.tabs a { display: inline-flex; align-items: center; height: var(--control-s); padding: 0 var(--inset-control); border-radius: var(--corner-control); text-decoration: none; color: var(--ink-2); white-space: nowrap; font: 500 13px/21px var(--font-text); transition: background-color var(--dur-press) var(--ease-press), color var(--dur-press) var(--ease-press); }
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--nav-active); font-weight: 600; }
.tabs a .count { margin-left: var(--gap-pair); font: 600 11px/18px var(--font-text); padding: 0 6px; border-radius: var(--corner-badge); background: var(--danger); color: var(--surface); font-variant-numeric: tabular-nums; }
.nav-toggle { display: none; }
/* theme switch: the moon offers dark, the sun offers light */
.theme-btn { display: inline-grid; place-items: center; }
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
.topbar-right { display: flex; align-items: center; gap: var(--gap-related); }
/* the live signal is the one place the beam appears */
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--boundary); }
.live-dot.on { background: var(--beam); }
.live-dot.off { background: var(--danger); }

.status-strip { display: flex; flex-wrap: wrap; gap: var(--gap-inline) var(--gap-group); padding: var(--gap-inline) var(--inset-card); background: var(--ground); border-bottom: var(--stroke-hairline) solid var(--rule); font: 400 12px/19px var(--font-text); letter-spacing: 0.16px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.status-strip b { color: var(--ink); font-weight: 600; }
.status-strip .stacked b { color: var(--danger); }
.status-strip a { text-decoration: none; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--gap-pair); vertical-align: 1px; }
.banner { margin: var(--gap-inline) var(--inset-card) 0; padding: var(--gap-inline) var(--inset-control); border-radius: var(--corner-control); background: var(--amber-bg); color: var(--ink); border: var(--stroke-hairline) solid color-mix(in srgb, var(--warning) 40%, transparent); }

.view { padding: var(--gap-group) var(--inset-card) 89px; max-width: 1500px; margin: 0 auto; }
.view.dim { opacity: .55; }

/* filter bar */
.filters { background: var(--surface); border: var(--stroke-hairline) solid var(--rule); border-radius: var(--corner-card); padding: var(--inset-control) var(--inset-card); margin-bottom: var(--gap-group); }
.filters summary { cursor: pointer; font: 600 15px/24px var(--font-text); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.filters summary::-webkit-details-marker { display: none; }
.filter-grid { display: flex; flex-wrap: wrap; gap: var(--gap-inline) var(--gap-related); margin-top: var(--gap-related); align-items: center; }
.filter-grid label { display: inline-flex; align-items: center; gap: var(--gap-inline); font: 500 12px/19px var(--font-text); color: var(--ink-2); }
.filter-grid select, .filter-grid input { padding: 4px 8px; font-size: 13px; }
.filter-grid input[type=search] { width: 200px; }
.filter-grid input[type=number] { width: 70px; }
.chipset { display: inline-flex; gap: var(--gap-pair); flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; font: 500 12px/19px var(--font-text); min-height: var(--control-s); padding: 0 var(--inset-control); border-radius: var(--corner-pill); border: var(--stroke-hairline) solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; user-select: none; transition: background-color var(--dur-press) var(--ease-press); }
.chip:hover { background: var(--band); }
.chip.on { border-color: var(--accent); background: var(--accent-surface); color: var(--ink); }

/* sections */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-group); }
.section { background: var(--surface); border: var(--stroke-hairline) solid var(--rule); border-radius: var(--corner-card); margin-bottom: var(--gap-group); overflow: hidden; }
.section > h2 { margin: 0; font: 600 18px/23px var(--font-display); letter-spacing: -0.24px; padding: var(--inset-control) var(--inset-card); border-bottom: var(--stroke-hairline) solid var(--rule); display: flex; align-items: center; gap: var(--gap-inline); flex-wrap: wrap; }
.section > h2 .n { font: 400 12px/19px var(--font-text); letter-spacing: 0.16px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.section.stacked { border-color: color-mix(in srgb, var(--danger) 45%, var(--rule)); }
.section.stacked > h2 { color: var(--danger); }
.empty { padding: var(--gap-group) var(--inset-card); color: var(--ink-2); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--gap-related); padding: var(--gap-related); }
.card { border: var(--stroke-hairline) solid var(--rule); background: var(--surface); border-radius: var(--corner-card); padding: var(--inset-control); cursor: pointer; display: grid; gap: var(--gap-inline); transition: border-color var(--dur-press) var(--ease-press); }
.card:hover, tr.row:hover, .card.sel, tr.row.sel { background: var(--accent-surface); }
.card .top { display: flex; justify-content: space-between; gap: var(--gap-inline); align-items: center; }
.card .teams { font: 500 15px/24px var(--font-text); }
.card .meta { font: 400 12px/19px var(--font-text); letter-spacing: 0.16px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px var(--gap-related); }
.card .best { display: flex; align-items: center; gap: var(--gap-related); font-size: 13px; flex-wrap: wrap; }
.card .actions { display: flex; gap: var(--gap-pair); flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; font: 600 11px/18px var(--font-text); padding: var(--inset-mark) var(--inset-badge); min-height: 24px; border-radius: var(--corner-badge); letter-spacing: 0.99px; text-transform: uppercase; white-space: nowrap; background: var(--band); color: var(--ink-2); }
.badge.stacked { background: var(--danger); color: var(--surface); }
.badge.signal { background: var(--amber-bg); color: var(--warning); }
.badge.context { background: var(--band); color: var(--ink-2); }
.badge.tier { background: var(--band); color: var(--ink-2); }
.badge.blocked { background: var(--band); color: var(--warning); }
.badge.dead { background: var(--band); color: var(--danger); }
.badge.live { background: var(--positive-surface); color: var(--positive); }
.sig { font: 500 11px/18px var(--font-text); padding: 0 6px; border-radius: var(--corner-badge); border: var(--stroke-hairline) solid var(--rule); white-space: nowrap; }
.sig.red { border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--danger); background: var(--red-bg); }
.sig.yellow { border-color: color-mix(in srgb, var(--warning) 55%, transparent); color: var(--warning); background: var(--amber-bg); }
.sig.green, .sig.context { color: var(--ink-2); }
.short { color: var(--danger); font-weight: 600; } .drift { color: var(--accent); font-weight: 600; }
.ko-soon { color: var(--danger); font-weight: 600; }

/* tables */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 21px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: var(--gap-inline) var(--inset-control); border-bottom: var(--stroke-hairline) solid var(--rule); white-space: nowrap; }
th { font: 600 11px/18px var(--font-text); text-transform: uppercase; letter-spacing: 0.99px; color: var(--ink-2); position: sticky; top: 0; background: var(--surface); }
tbody tr:last-child td { border-bottom: 0; }
td.wrap { white-space: normal; min-width: 180px; }
tr.row { cursor: pointer; }
td.r, th.r { text-align: right; }
.more { padding: var(--gap-inline) var(--inset-card); }

/* drawer */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100vw); background: var(--surface); border-left: var(--stroke-hairline) solid var(--rule); z-index: 40; overflow-y: auto; box-shadow: var(--shadow-menu); }
.drawer-inner { padding: var(--inset-card) var(--inset-card) var(--gap-region); }
.backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: 30; }
.drawer h3 { margin: var(--gap-group) 0 var(--gap-inline); font: 600 11px/18px var(--font-text); text-transform: uppercase; letter-spacing: 0.99px; color: var(--ink-2); }
.dhead { display: flex; justify-content: space-between; gap: var(--gap-related); align-items: flex-start; }
.dhead h2 { margin: 0; font: 600 22px/28px var(--font-display); letter-spacing: -0.29px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--gap-related); font: 400 12px/19px var(--font-text); letter-spacing: 0.16px; }
.kv dt { color: var(--ink-2); } .kv dd { margin: 0; }
.timeline { display: grid; gap: var(--gap-inline); }
.tl-item { border: var(--stroke-hairline) solid var(--rule); border-radius: var(--corner-control); padding: var(--gap-inline) var(--inset-control); background: var(--band); }
.tl-item.resolved { opacity: .55; }
.chart-box { position: relative; height: 280px; background: var(--surface); border: var(--stroke-hairline) solid var(--rule); border-radius: var(--corner-card); padding: var(--gap-inline); }
.seg { display: inline-flex; border: var(--stroke-hairline) solid var(--boundary); border-radius: var(--corner-control); overflow: hidden; }
.seg button { border: 0; background: transparent; min-height: var(--control-s); padding: 0 var(--inset-control); cursor: pointer; font: 500 12px/19px var(--font-text); color: var(--ink-2); }
.seg button.on { background: var(--accent-surface); color: var(--ink); }

/* modal + toast */
.modal { position: fixed; inset: 0; background: var(--scrim); z-index: 50; display: grid; place-items: center; padding: var(--gap-group); }
.modal-inner { background: var(--surface); border: var(--stroke-hairline) solid var(--rule); border-radius: var(--corner-dialog); width: min(820px, 100%); max-height: 88vh; overflow-y: auto; padding: var(--inset-card); box-shadow: var(--shadow-menu); }
.modal-inner h2, .modal-inner h3 { font-family: var(--font-display); letter-spacing: -0.24px; }
.toast { position: fixed; bottom: var(--gap-group); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--ground); padding: var(--gap-inline) var(--inset-control); border-radius: var(--corner-control); z-index: 60; box-shadow: var(--shadow-menu); font: 500 13px/21px var(--font-text); }
.liv-strip { display: flex; gap: 2px; flex-wrap: wrap; }
.liv-strip span { width: 8px; height: 21px; border-radius: var(--corner-mark); background: var(--boundary); }
.liv-strip .live { background: var(--positive); } .liv-strip .blocked { background: var(--warning); }
.liv-strip .dead_dns, .liv-strip .dead_conn, .liv-strip .timeout, .liv-strip .parked, .liv-strip .for_sale, .liv-strip .redirect_foreign { background: var(--danger); }
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap-related); margin-bottom: var(--gap-group); }
.stat { background: var(--surface); border: var(--stroke-hairline) solid var(--rule); border-radius: var(--corner-card); padding: var(--inset-control) var(--inset-card); display: grid; gap: var(--gap-pair); }
.stat .v { font: 600 22px/28px var(--font-display); letter-spacing: -0.29px; font-variant-numeric: tabular-nums; }
.stat .l { order: 2; color: var(--ink-2); font: 600 11px/18px var(--font-text); letter-spacing: 0.99px; text-transform: uppercase; }
.bar { height: 4px; background: var(--rule); border-radius: var(--corner-mark); overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--accent); }
pre.ev { font: 400 12px/19px var(--font-mono); background: var(--band); padding: var(--gap-inline); border-radius: var(--corner-control); overflow-x: auto; margin: var(--gap-pair) 0 0; }
.form-row { display: flex; gap: var(--gap-inline); flex-wrap: wrap; align-items: center; margin: var(--gap-pair) 0; }

/* Cut-ring brackets (qz7x4 Brackets, T 18 / S 3): the logo and the live signal. Geometry from the guide's bundle. */
:root {
  --ring-w: 11.16px; --ring-h: 22.34px;
  --ring-live-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.16' height='22.34' viewBox='0 0 11.16 22.34'%3E%3Cdefs%3E%3CclipPath id='t'%3E%3Crect x='-99' y='-99' width='999' height='108.17'/%3E%3C/clipPath%3E%3CclipPath id='m'%3E%3Crect x='-99' y='9.17' width='999' height='2.0'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Crect x='-99' y='11.17' width='999' height='999'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M5.22 22.34 A14.56 14.56 0 0 1 5.22 0.0 L7.15 2.3 A11.56 11.56 0 0 0 7.15 20.04 Z' clip-path='url%28%23t%29' fill='%236a55ee'/%3E%3Cpath d='M5.22 22.34 A14.56 14.56 0 0 1 5.22 0.0 L7.15 2.3 A11.56 11.56 0 0 0 7.15 20.04 Z' clip-path='url%28%23m%29' fill='%23ff5a1f'/%3E%3Cpath d='M5.22 22.34 A14.56 14.56 0 0 1 5.22 0.0 L7.15 2.3 A11.56 11.56 0 0 0 7.15 20.04 Z' clip-path='url%28%23b%29' fill='%238076fa'/%3E%3C/svg%3E");
  --ring-live-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.16' height='22.34' viewBox='0 0 11.16 22.34'%3E%3Cdefs%3E%3CclipPath id='t'%3E%3Crect x='-99' y='-99' width='999' height='108.17'/%3E%3C/clipPath%3E%3CclipPath id='m'%3E%3Crect x='-99' y='9.17' width='999' height='2.0'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Crect x='-99' y='11.17' width='999' height='999'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M5.94 0.0 A14.56 14.56 0 0 1 5.94 22.34 L4.01 20.04 A11.56 11.56 0 0 0 4.01 2.3 Z' clip-path='url%28%23t%29' fill='%235d6ff5'/%3E%3Cpath d='M5.94 0.0 A14.56 14.56 0 0 1 5.94 22.34 L4.01 20.04 A11.56 11.56 0 0 0 4.01 2.3 Z' clip-path='url%28%23m%29' fill='%23ff5a1f'/%3E%3Cpath d='M5.94 0.0 A14.56 14.56 0 0 1 5.94 22.34 L4.01 20.04 A11.56 11.56 0 0 0 4.01 2.3 Z' clip-path='url%28%23b%29' fill='%238860ea'/%3E%3C/svg%3E");
}
/* LiveMark: shown only while the live stream is connected */
.live-dot.on { width: auto; height: auto; border-radius: 0; background: none; display: inline-flex; align-items: center; }
.live-dot.on::before, .live-dot.on::after { content: ""; width: var(--ring-w); height: var(--ring-h); background: var(--ring-live-l) center / contain no-repeat; }
.live-dot.on::after { background-image: var(--ring-live-r); }
.live-dot.on > .live-label { display: inline; }
.live-label { display: none; padding-inline: var(--inset-mark); font: 600 11px/18px var(--font-text); letter-spacing: 0.99px; text-transform: uppercase;
  background: linear-gradient(var(--ink) 0 38.9%, var(--beam) 38.9% 50%, var(--ink) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

@media (prefers-reduced-motion: reduce) { .btn, .chip, .card, .tabs a { transition: none; } }
@media (max-width: 1099px) { .grid2 { grid-template-columns: 1fr; } }
@media (max-width: 699px) {
  .topbar { padding: 0 16px; gap: var(--gap-inline); }
  /* phones: the nav becomes a full-width menu under the bar, opened by the Menu button */
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .tabs { display: none; position: fixed; top: var(--bar); left: 0; right: 0; z-index: 25; flex-direction: column; gap: 2px;
    max-height: calc(100dvh - var(--bar)); overflow-y: auto; padding: var(--gap-inline) 16px var(--gap-related);
    background: var(--ground); border-bottom: var(--stroke-hairline) solid var(--rule); box-shadow: var(--shadow-menu); }
  body.nav-open .tabs { display: flex; }
  .tabs a { height: var(--control-l); font-size: 15px; padding: 0 var(--inset-control); border-radius: var(--corner-control); }
  .tabs a.active { background: var(--positive-surface); }
  .topbar-right { gap: var(--gap-inline); }
  .me-chip span:not(.avatar) { display: none; }
  #whoami { display: none; }
  .view { padding: var(--gap-related) 16px var(--gap-region); }
  .cards { grid-template-columns: 1fr; padding: var(--gap-inline); }
  .filter-grid input[type=search] { width: 100%; }
  .status-strip { padding: var(--gap-inline) 16px; }
  .brand.big { font-size: 34px; line-height: 38px; }
}

/* sortable, searchable tables (tables.js) */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th.sorted { color: var(--ink); }
th.sorted::after { content: " " attr(data-dir); color: var(--accent); }
.tbl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-inline) var(--gap-related); padding: var(--gap-inline) var(--inset-card); }
.tbl-search { flex: 1 1 260px; max-width: 420px; }
.tbl-sort { display: none; }
@media (max-width: 699px) { .tbl-sort { display: inline-block; } .tbl-tools { padding: var(--gap-inline) var(--inset-control); } }