/* Shields Up Monitor – app.css (FRONTEND). CSP-clean: no inline styles anywhere; JS only sets custom properties via CSSOM. */
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }

/* Site themes (display.theme, set on <html data-theme>): each one only swaps the surface tokens below. Every surface
   colour in this file goes through them (rgba(var(--ink-rgb),.5) etc.), so a theme repaints the whole app. They live on
   :root because the derived tokens (--surface, --glass …) are computed there. */
:root {
  --ink-rgb: 6,11,20; --panel-rgb: 10,21,36; --panel2-rgb: 14,26,44; --glass-rgb: 17,31,52; --line-rgb: 148,190,230;
  --text:#E8F0F8; --muted:#9DB0C6; --faint:#7088A5; --deco:#5F738C;
}
:root[data-theme="graphite"] { --ink-rgb: 9,10,12; --panel-rgb: 19,20,23; --panel2-rgb: 26,27,31; --glass-rgb: 33,35,40; --line-rgb: 196,202,212; --muted:#A9AFBA; --faint:#7E8591; --deco:#646B76; }
:root[data-theme="ocean"]    { --ink-rgb: 2,14,22; --panel-rgb: 5,26,38; --panel2-rgb: 8,34,50; --glass-rgb: 11,44,62; --line-rgb: 120,205,235; --muted:#97B9C9; --faint:#6A91A4; --deco:#557B8D; }
:root[data-theme="forest"]   { --ink-rgb: 4,13,9; --panel-rgb: 9,25,18; --panel2-rgb: 13,33,24; --glass-rgb: 17,42,31; --line-rgb: 150,215,180; --muted:#9DBDAB; --faint:#6F9580; --deco:#5A7D6A; }
:root[data-theme="plum"]     { --ink-rgb: 12,8,20; --panel-rgb: 23,15,36; --panel2-rgb: 30,20,46; --glass-rgb: 39,26,58; --line-rgb: 200,172,240; --muted:#B3A6C9; --faint:#8A7CA3; --deco:#73668C; }
:root[data-theme="ember"]    { --ink-rgb: 15,9,7; --panel-rgb: 29,17,13; --panel2-rgb: 38,22,17; --glass-rgb: 48,28,22; --line-rgb: 238,190,160; --muted:#C4AA9C; --faint:#9A7F71; --deco:#81685B; }
:root[data-theme="slate"]    { --ink-rgb: 17,22,30; --panel-rgb: 27,34,45; --panel2-rgb: 34,42,55; --glass-rgb: 42,52,67; --line-rgb: 180,198,222; --muted:#AEBACB; --faint:#8492A6; --deco:#6C798C; }
:root {
  --ink: rgb(var(--ink-rgb)); --panel: rgb(var(--panel-rgb)); --glass: rgba(var(--glass-rgb),.62);
  --line: rgba(var(--line-rgb),.14); --line-strong: rgba(var(--line-rgb),.28);
  --panel-max: rgb(var(--panel2-rgb));
  --up:#5EEAD4; --info:#38BDF8; --paused:#A78BFA; --warn:#FBBF24; --down:#F87171; --unknown:#9DB0C6; --sky:#7FA4FB;
  --accent: var(--up);
  --grad: linear-gradient(90deg,#5EEAD4,#38BDF8 50%,#A78BFA);
  --ph-dns:#38BDF8; --ph-connect:#5EEAD4; --ph-tls:#A78BFA; --ph-ttfb:#7FA4FB; --ph-transfer:#9DB0C6; --ph-redirect:#7088A5;
  --font: "Schibsted Grotesk", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  --r-sm:8px; --r:14px; --r-lg:20px; --row: 56px;
  /* derived */
  --surface: rgba(var(--panel-rgb),.86);
  --surface-2: rgba(var(--panel2-rgb),.92);
  --hi: inset 0 1px 0 rgba(255,255,255,.045);
  --shadow: 0 18px 50px -20px rgba(0,0,0,.75);
  --hdr: 56px;
  --gutter: 24px;
  --blur: blur(12px);
  --ease: cubic-bezier(.2,.8,.2,1);
  color-scheme: dark;
}
body[data-accent="cyan"] { --accent: var(--info); }
body[data-accent="violet"] { --accent: var(--paused); }
body[data-accent="blue"] { --accent: var(--sky); }
body[data-accent="green"] { --accent: #86EFAC; }
body[data-accent="pink"] { --accent: #F9A8D4; }
body[data-accent="orange"] { --accent: #FDBA74; }
body[data-density="comfortable"] { --row: 56px; }
body[data-density="compact"] { --row: 36px; }
body[data-density="ultra"] { --row: 24px; }

/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ink); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--ink); color: var(--text);
  font: 400 15px/1.5 var(--font); letter-spacing: .005em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* aurora (≤ .35 opacity, brightest stop ≤ rgba(56,189,248,.18)) */
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none; opacity: .35;
  background:
    radial-gradient(40vmax 30vmax at 18% 12%, rgba(56,189,248,.18), transparent 70%),
    radial-gradient(36vmax 28vmax at 82% 20%, rgba(167,139,250,.14), transparent 70%),
    radial-gradient(44vmax 32vmax at 55% 92%, rgba(94,234,212,.12), transparent 70%);
  animation: aurora 40s ease-in-out infinite alternate;
  will-change: transform;
}
/* faint hex grid (data URI, ~4 %) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 L56 16.2 V48.5 L28 64.7 L0 48.5 V16.2 Z M28 64.7 V97 M0 48.5 L-28 64.7 M56 48.5 L84 64.7' fill='none' stroke='%239DB0C6' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 97px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 60%, transparent 100%);
}
@keyframes aurora { 0% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(3vmax,-2vmax,0) rotate(4deg); } 100% { transform: translate3d(-3vmax,2vmax,0) rotate(-3deg); } }

a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
code { font-family: var(--mono); font-size: .9em; background: rgba(var(--line-rgb),.08); border: 1px solid var(--line); padding: 0 .35em; border-radius: 5px; }
kbd {
  font: 600 11px/1 var(--mono); color: var(--muted); padding: 3px 6px 3px; min-width: 20px; text-align: center;
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; background: rgba(var(--line-rgb),.06); display: inline-block;
}
::selection { background: rgba(56,189,248,.35); color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.num small, small.u { color: var(--muted); font-size: .78em; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; line-height: 1.45; }
.grow { flex: 1 1 auto; }
.ico { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle; }
.ico-s { width: 14px; height: 14px; }
.ico-xs { width: 11px; height: 11px; }
.gl { width: 14px; height: 14px; flex: none; display: inline-block; vertical-align: -2px; overflow: visible; }
.gl-up { color: var(--up); } .gl-degraded { color: var(--warn); } .gl-down { color: var(--down); } .gl-paused { color: var(--paused); } .gl-unknown { color: var(--unknown); }
.dot-sep { color: var(--faint); margin: 0 .5em; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line-strong); }
.skip:focus-visible { top: 12px; }

/* ---------------- panels ---------------- */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--hi), var(--shadow);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}

/* ---------------- controls ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(var(--line-rgb),.06); color: var(--text);
  font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; user-select: none;
  transition: background-color .15s, border-color .15s, transform .15s var(--ease), opacity .15s;
}
.btn:hover { background: rgba(var(--line-rgb),.12); border-color: rgba(var(--line-rgb),.4); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn .ico { width: 16px; height: 16px; }
.btn-sm { min-height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; gap: 6px; }
.btn-sm .ico { width: 15px; height: 15px; }
.btn-lg { min-height: 48px; padding: 0 20px; font-size: 15.5px; border-radius: 12px; }
.btn-block { width: 100%; }
.btn-primary {
  color: #04121A; border-color: transparent;
  background: linear-gradient(135deg, #6EF0DB, #38BDF8 60%, #7FA4FB);
  box-shadow: 0 8px 24px -10px rgba(56,189,248,.7), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover { background: linear-gradient(135deg, #86F4E2, #52C8FA 60%, #93B3FC); border-color: transparent; }
.btn-danger { background: rgba(248,113,113,.16); border-color: rgba(248,113,113,.5); color: #FFD9D9; }
.btn-danger:hover { background: rgba(248,113,113,.26); border-color: var(--down); }
.btn-danger-ghost { color: #FCA5A5; }
.btn-danger-ghost:hover { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.5); }
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 8px; }
.btn-ghost:hover { color: var(--text); background: rgba(var(--line-rgb),.08); }
.btn-ghost.btn-sm { min-height: 30px; font-size: 13px; padding: 0 10px; }
.icon-btn { width: 34px; min-width: 34px; padding: 0; justify-content: center; }
.btn.icon-btn { padding: 0; width: 30px; min-width: 30px; }
.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.is-busy > * { opacity: 0; }
.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid rgba(232,240,248,.25); border-top-color: var(--text); animation: spin .8s linear infinite; }
.btn-primary.is-busy::after { border-color: rgba(4,18,26,.25); border-top-color: #04121A; }
.linkish { background: none; border: 0; padding: 0; color: var(--info); cursor: pointer; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.linkish:hover { text-decoration: underline; text-underline-offset: 3px; }
.linkish:disabled { color: var(--faint); cursor: default; text-decoration: none; }
.back { margin: 0 0 14px; color: var(--muted); }
.back-ico { transform: rotate(180deg); }

.inp {
  width: 100%; min-height: 40px; padding: 8px 12px; border-radius: 10px;
  background: rgba(var(--ink-rgb),.6); color: var(--text); border: 1px solid var(--line-strong);
  font: 400 14.5px/1.4 var(--font); transition: border-color .15s, box-shadow .15s;
}
.inp::placeholder { color: var(--faint); }
.inp:hover { border-color: rgba(var(--line-rgb),.4); }
.inp:focus { border-color: var(--info); box-shadow: 0 0 0 3px rgba(56,189,248,.18); outline: none; }
.inp[aria-invalid="true"] { border-color: var(--down); box-shadow: 0 0 0 3px rgba(248,113,113,.15); }
.inp.num { font-family: var(--mono); }
.inp-lg { min-height: 48px; font-size: 16px; padding: 10px 14px; border-radius: 12px; }
.inp-s { width: 90px; }
select.inp { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 10 L12 14 L16 10' fill='none' stroke='%239DB0C6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; }
select.inp option { background: var(--panel); color: var(--text); }
textarea.inp { resize: vertical; min-height: 90px; }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld-l { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.fld-h { font-size: 12.5px; color: var(--faint); }
.fld-err, .form-err { color: #FCA5A5; font-size: 13px; display: flex; gap: 6px; align-items: flex-start; }
.form-err { padding: 8px 12px; border-radius: 10px; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.3); }
.form-a { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.span2 { grid-column: 1 / -1; }
.chk { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 14px; line-height: 1.4; }
.chk input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--info); flex: none; }
.chk-h { display: block; color: var(--faint); font-size: 12.5px; margin-top: 2px; }
.chks { display: flex; flex-direction: column; gap: 8px; }
.chks-sites { max-height: 260px; overflow: auto; padding: 4px 2px; }
.fs { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0; min-width: 0; }
.fs legend { padding: 0 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.inl { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; }

/* segmented */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px; background: rgba(var(--ink-rgb),.55); border: 1px solid var(--line); }
.seg-b {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; min-width: 30px; padding: 0 10px;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.seg-b:hover { color: var(--text); background: rgba(var(--line-rgb),.07); }
.seg-b.is-on { color: var(--text); background: linear-gradient(180deg, rgba(56,189,248,.22), rgba(56,189,248,.1)); box-shadow: inset 0 0 0 1px rgba(56,189,248,.38); }
.seg-b .ico { width: 16px; height: 16px; }
.seg-wrap { flex-wrap: wrap; }
.seg-sm .seg-b { min-height: 26px; font-size: 12.5px; }

/* switch */
.switch { position: relative; width: 42px; height: 24px; flex: none; border-radius: 99px; border: 1px solid var(--line-strong); background: rgba(var(--ink-rgb),.7); cursor: pointer; padding: 0; transition: background-color .2s, border-color .2s; }
.switch-k { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .2s var(--ease), background-color .2s; }
.switch[aria-checked="true"] { background: rgba(94,234,212,.22); border-color: rgba(94,234,212,.6); }
.switch[aria-checked="true"] .switch-k { transform: translateX(18px); background: var(--up); }
.sw-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; background: rgba(var(--ink-rgb),.35); }
.sw-row > span:first-child { font-weight: 600; }

/* chips + tags */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--muted); border: 1px solid var(--line-strong); background: rgba(var(--line-rgb),.05); white-space: nowrap; }
.chip-btn { cursor: pointer; }
.chip-btn:hover { color: var(--text); border-color: rgba(56,189,248,.5); }
.chip-on { cursor: pointer; color: var(--text); border-color: rgba(56,189,248,.55); background: rgba(56,189,248,.12); }
.chip-ok { color: var(--up); border-color: rgba(94,234,212,.4); background: rgba(94,234,212,.08); }
.chip-off { color: var(--faint); border-style: dashed; background: transparent; }
.chip-warn { color: var(--warn); border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.08); }
.chip-stale, .chip-def { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font: 600 11px/1 var(--mono); }
.chip-stale { color: var(--warn); border: 1px dashed rgba(251,191,36,.6); background: repeating-linear-gradient(135deg, rgba(251,191,36,.12) 0 4px, transparent 4px 8px); }
.chip-def { color: var(--warn); border: 1px solid rgba(251,191,36,.5); background: rgba(251,191,36,.08); }
.tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); background: rgba(var(--line-rgb),.08); border: 1px solid var(--line); }
.tag-x button { border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0; display: inline-flex; }
.tag-x button:hover { color: var(--text); }
.tagin { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; cursor: text; min-height: 40px; }
.tagin-l { display: contents; }
.tagin-i { flex: 1 1 100px; min-width: 80px; border: 0; background: transparent; color: var(--text); font: inherit; outline: none; padding: 2px 0; }

/* spinner */
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(56,189,248,.25); border-top-color: var(--info); display: inline-block; flex: none; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* skeletons */
.skel { border-radius: 12px; background: linear-gradient(90deg, rgba(var(--line-rgb),.05) 0%, rgba(var(--line-rgb),.11) 40%, rgba(var(--line-rgb),.05) 80%); background-size: 300% 100%; animation: skel 1.6s ease-in-out infinite; }
.skel-hero { width: min(420px, 80vw); height: 260px; margin: 0 auto 18px; clip-path: path("M110 6 L180 24 Q190 27 190 36 V116 C190 168 156 208 110 232 C64 208 30 168 30 116 V36 Q30 27 40 24 Z"); }
.skel-chart { height: 150px; }
.skel-wf { height: 56px; margin: 14px 0; }
.skel-list { height: 120px; margin: 10px 0; }
@keyframes skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---------------- app shell ---------------- */
.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.main { flex: 1 0 auto; width: 100%; max-width: 1680px; margin: 0 auto; padding: 18px var(--gutter) 28px; }
.main:focus { outline: none; }

/* boot */
.boot { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.boot-logo { width: 64px; height: 64px; animation: breathe 2.4s ease-in-out infinite; }
.boot-title { font-size: 20px; letter-spacing: .02em; }
.boot-sub { color: var(--muted); font-size: 14px; }
.dots::after { content: "…"; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }

/* header */
.hdr {
  position: sticky; top: 0; z-index: 30; height: var(--hdr);
  background: var(--glass); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  overflow: hidden;
}
.hdr-in { height: 100%; max-width: 1680px; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; }
.brand { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px 6px 4px 0; cursor: pointer; border-radius: 10px; flex: none; }
.brand-logo { width: 30px; height: 30px; filter: drop-shadow(0 0 10px rgba(56,189,248,.35)); }
.wm { display: inline-flex; flex-direction: column; line-height: 1.05; text-align: left; }
.wm-a { font-weight: 800; font-size: 15px; letter-spacing: .01em; }
.wm-b { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hdr-counts { flex: none; }
.hdr-mid { flex: 1 1 auto; display: flex; align-items: center; gap: 14px; justify-content: flex-end; min-width: 0; }
.hdr-right { display: flex; align-items: center; gap: 8px; flex: none; }
.kbtn { gap: 8px; padding: 0 6px 0 10px; border: 1px solid var(--line); background: rgba(var(--ink-rgb),.35); height: 34px; }
.kbtn .ico { width: 16px; height: 16px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(56,189,248,.45); cursor: pointer; font: 700 12.5px/1 var(--font); letter-spacing: .04em; color: #04121A;
  background: linear-gradient(135deg, #6EF0DB, #38BDF8 55%, #A78BFA); box-shadow: 0 0 0 3px rgba(56,189,248,.12); }
.counts { display: inline-flex; gap: 4px; align-items: center; }
.cnt { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border-radius: 9px; border: 1px solid transparent; background: transparent; cursor: pointer; font-size: 14px; color: var(--text); transition: background-color .15s, border-color .15s; }
.cnt:hover { background: rgba(var(--line-rgb),.08); }
.cnt:disabled { cursor: default; }
.cnt.is-zero { color: var(--faint); }
.cnt.is-zero .gl { opacity: .45; }
.cnt.is-on { border-color: rgba(56,189,248,.5); background: rgba(56,189,248,.12); }
.cnt-down:not(.is-zero) { color: #FFD3D3; }
.cnt-down:not(.is-zero) .num { font-weight: 700; }
.counts-lg .cnt { height: 34px; font-size: 15px; padding: 0 11px; background: rgba(var(--ink-rgb),.4); border-color: var(--line); }
.counts-lg .gl { width: 15px; height: 15px; }
.echip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.ec-ico { width: 15px; height: 15px; color: var(--up); }
.ec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--unknown); flex: none; display: inline-block; }
.ec-ok .num, .ec-ok span { font-variant-numeric: tabular-nums; }
.ec-wait { color: var(--info); } .ec-wait .ec-dot { background: var(--info); animation: pulse 1.6s ease-in-out infinite; }
.ec-stale { color: var(--warn); } .ec-stale .ec-dot { background: var(--warn); }
.ec-impaired { color: var(--paused); } .ec-impaired .ec-dot { background: var(--paused); }
.ec-lg { font-size: 13.5px; }
.probe { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--faint); padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; white-space: nowrap; }
.probe-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 3px rgba(94,234,212,.15); }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }

/* sensor sweep */
.sweep { position: sticky; top: var(--hdr); z-index: 29; height: 2px; background: rgba(var(--line-rgb),.08); overflow: hidden; --sweep: 0; }
.sweep-fill { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(94,234,212,.05), rgba(56,189,248,.28)); transform-origin: 0 50%; transform: scaleX(var(--sweep)); transition: transform 1s linear; }
.sweep-head { position: absolute; inset: 0; transform: translateX(calc((var(--sweep) - 1) * 100%)); transition: transform 1s linear; }
.sweep-head::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 160px; background: linear-gradient(90deg, transparent, #5EEAD4 55%, #38BDF8 85%, #E8F0F8); box-shadow: 0 0 12px rgba(56,189,248,.8); }
.sweep-flash { position: absolute; right: 0; top: 0; bottom: 0; width: 80px; background: linear-gradient(90deg, transparent, #A78BFA, #fff); opacity: 0; transform-origin: 100% 50%; }
.sweep.is-sweeping .sweep-head, .sweep.is-sweeping .sweep-fill { opacity: 0; }
.sweep.is-sweeping::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(56,189,248,.9), transparent); animation: shimmer-x 1.2s ease-in-out infinite; }
@keyframes shimmer-x { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }

/* banners */
.banners { position: relative; z-index: 2; }
.banner { display: flex; align-items: center; gap: 10px; justify-content: center; text-align: center; padding: 9px var(--gutter); font-size: 13.5px; font-weight: 600; border-bottom: 1px solid; }
.b-stale { color: #FDE7A6; background: repeating-linear-gradient(135deg, rgba(251,191,36,.16) 0 10px, rgba(251,191,36,.08) 10px 20px); border-color: rgba(251,191,36,.35); }
.b-stale .ec-dot { background: var(--warn); animation: pulse 2s ease-in-out infinite; }
.b-impaired { color: #DDD3FF; background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.35); }
.b-impaired .ec-dot { background: var(--paused); }

/* footer */
.ftr { border-top: 1px solid var(--line); color: var(--faint); font-size: 12.5px; background: rgba(var(--ink-rgb),.5); }
.ftr-in { max-width: 1680px; margin: 0 auto; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ftr .linkish { font-size: 12.5px; color: var(--muted); }
.ftr-keys { display: inline-flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.ftr-keys kbd { font-size: 10.5px; padding: 2px 5px; }

/* red alert */
body.red-alert .hdr { border-bottom-color: rgba(248,113,113,.5); box-shadow: 0 1px 0 rgba(248,113,113,.35), 0 10px 30px -18px rgba(248,113,113,.7); }
body.red-alert .hdr::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(248,113,113,.14), rgba(248,113,113,.04)); pointer-events: none; }
body.red-alert .hdr::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(248,113,113,.32) 45%, rgba(251,113,133,.42) 55%, transparent);
  animation: redsweep 6s cubic-bezier(.45,.05,.55,.95) infinite;
}
body.red-alert .brand-logo { filter: drop-shadow(0 0 10px rgba(248,113,113,.55)); }
@keyframes redsweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(290%); } }
body.red-alert[data-motion="calm"] .hdr::after { display: none; }
body.red-alert[data-motion="off"] .hdr::after, body.red-alert[data-motion="off"] .hdr::before { display: none; }
body.red-alert[data-motion="off"] .hdr { box-shadow: inset 0 2px 0 var(--down); }

/* ---------------- shared state colours ---------------- */
.s-up { --c: var(--up); } .s-degraded { --c: var(--warn); } .s-down { --c: var(--down); } .s-paused { --c: var(--paused); } .s-unknown { --c: var(--unknown); }

/* orb + sentence */
.orb { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; position: relative; background: var(--oc, var(--unknown)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--oc, var(--unknown)) 18%, transparent), 0 0 18px color-mix(in srgb, var(--oc, var(--unknown)) 60%, transparent); }
.orb-up { --oc: var(--up); } .orb-down { --oc: var(--down); } .orb-degraded { --oc: var(--warn); } .orb-stale { --oc: var(--warn); } .orb-paused { --oc: var(--paused); } .orb-unknown, .orb-none { --oc: var(--unknown); }
body[data-motion="full"] .orb { animation: breathe 4s ease-in-out infinite; }
.fs-sent { display: flex; align-items: center; gap: 12px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.fs-sent.fs-down { color: #FFD9D9; }
.fs-sent.fs-degraded, .fs-sent.fs-stale { color: #FDE7A6; }

/* fleet stats */
.fstats { display: flex; gap: 6px 20px; flex-wrap: wrap; }
.fstat { display: flex; flex-direction: column-reverse; gap: 1px; }
.fstat dt { font-size: 11.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.fstat dd { font-size: 18px; font-weight: 600; color: var(--text); }
.fs-down dd { color: var(--down); } .fs-warn dd { color: var(--warn); }

/* integrity ring */
.iring { position: relative; display: inline-grid; place-items: center; flex: none; }
.ring { display: block; overflow: visible; }
.ring-track { fill: none; stroke: rgba(var(--line-rgb),.12); }
.ring-arc { fill: none; stroke: var(--rc, var(--up)); stroke-linecap: round; transition: stroke-dasharray .8s var(--ease); }
.ring-tick { stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; opacity: .7; }
.integrity .ring-arc { stroke: url(#grad-brand-v); }
.integrity.is-bad .ring-arc { stroke: var(--down); }
.integrity.is-bad .ring-track { stroke: rgba(248,113,113,.35); }
.integrity.is-none .ring-track { stroke-dasharray: 2 4; }
.iring-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1px; padding: 14%; }
.iring-v { font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.iring-v small { font-size: .55em; margin-left: 1px; }
.iring.is-bad .iring-v { color: var(--down); }
.iring-cap { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); font-weight: 700; margin-top: 4px; }
.iring-w { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.iring-sub { font-size: 12px; color: var(--muted); line-height: 1.25; text-align: center; white-space: nowrap; }
.r-up { --rc: var(--up); } .r-warn { --rc: var(--warn); } .r-down { --rc: var(--down); } .r-unknown { --rc: var(--unknown); }
.tlsring { position: relative; display: inline-grid; place-items: center; flex: none; }
.tlsring-v { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.tlsring-v small { font-size: .7em; color: var(--muted); margin-left: 1px; }
.tl-warn .tlsring-v, .c-tls.tl-warn, .tvt-tls.tl-warn { color: var(--warn); }
.tl-down .tlsring-v, .c-tls.tl-down, .tvt-tls.tl-down { color: var(--down); }
.tlsring-x { font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.tl-problem .r-down { animation: none; }
.tlsg.is-problem { border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.07); }
.tlsg-e { font-size: 11px; color: var(--down); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- toolbar ---------------- */
.tbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 12px; }
.vtabs { display: flex; gap: 4px; align-items: center; min-width: 0; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; }
.vtabs::-webkit-scrollbar { display: none; }
.vtab { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--muted); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; position: relative; }
.vtab:hover { color: var(--text); background: rgba(var(--line-rgb),.06); }
.vtab.is-on { color: var(--text); background: rgba(var(--line-rgb),.08); border-color: var(--line); }
.vtab.is-on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--grad); }
.vtab-n { font-size: 11.5px; padding: 1px 7px; border-radius: 99px; background: rgba(var(--line-rgb),.1); color: var(--muted); }
.vtab-n.is-bad { background: rgba(248,113,113,.18); color: #FFC9C9; }
.vtab-add { width: 34px; padding: 0; justify-content: center; }
.vtab-add .ico { width: 16px; height: 16px; }
.tbar-r { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.tchips { display: flex; gap: 6px; }
.qf-wrap { position: relative; display: inline-flex; align-items: center; }
.qf-ico { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--faint); pointer-events: none; }
.qf { width: 220px; height: 34px; padding: 0 34px 0 34px; border-radius: 10px; border: 1px solid var(--line); background: rgba(var(--ink-rgb),.5); color: var(--text); font: inherit; font-size: 14px; transition: border-color .15s, width .2s var(--ease); }
.qf::placeholder { color: var(--faint); }
.qf:focus { border-color: var(--info); outline: none; box-shadow: 0 0 0 3px rgba(56,189,248,.15); }
.qf::-webkit-search-cancel-button { filter: invert(.7); }
.qf-k { position: absolute; right: 8px; pointer-events: none; }
.qf:focus + .qf-k { opacity: 0; }
.btn-add { height: 34px; }

/* ---------------- console ---------------- */
.console { display: flex; flex-direction: column; }
.fstrip { display: grid; grid-template-columns: auto auto 1fr; gap: 26px; align-items: center; padding: 14px 22px; position: relative; overflow: hidden; }
.fstrip::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 160px at 8% 50%, rgba(56,189,248,.09), transparent 70%); pointer-events: none; }
.fs-mini { width: 108px; height: 108px; display: grid; place-items: center; position: relative; }
.fs-ring { display: grid; place-items: center; }
.fs-txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fs-sub { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.cbody.has-pane { grid-template-columns: minmax(0, 1fr) minmax(400px, 460px); }
.cpane { display: none; }
.cbody.has-pane .cpane { display: block; position: sticky; top: calc(var(--hdr) + 14px); max-height: calc(100vh - var(--hdr) - 28px); overflow: auto; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--hi), var(--shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); scrollbar-width: thin; scrollbar-color: rgba(var(--line-rgb),.25) transparent; }
.clist { padding: 6px 0; overflow: hidden; }
.chead, .row { display: grid; grid-template-columns: var(--cols); column-gap: 14px; align-items: center; padding: 0 16px 0 8px; }
.chead { height: 34px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--line); }
.chead .col-latency, .chead .col-uptime, .chead .col-age, .chead .col-tls, .chead .col-code, .chead .col-interval { text-align: right; }
.rows { position: relative; }
.row-li { position: relative; border-bottom: 1px solid rgba(var(--line-rgb),.07); }
.row-li:last-child { border-bottom: 0; }
.row { height: var(--row); cursor: pointer; position: relative; transition: background-color .15s; border-radius: 0; }
.row::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c, transparent); opacity: 0; transition: opacity .2s; }
.row:hover { background: rgba(var(--line-rgb),.05); }
.row:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; border-radius: 8px; }
.row-li.is-sel .row { background: linear-gradient(90deg, rgba(56,189,248,.12), rgba(56,189,248,.03) 60%, transparent); }
.row-li.is-sel .row::before { opacity: 1; background: var(--info); }
.row-li.s-down .row::before { opacity: 1; }
.row-li.s-down .row { background: linear-gradient(90deg, rgba(248,113,113,.10), transparent 45%); }
.row-li.s-down.is-sel .row { background: linear-gradient(90deg, rgba(248,113,113,.16), rgba(56,189,248,.05) 60%, transparent); }
.row-li.pinged .row::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent 40%); animation: ping .7s ease-out forwards; }
@keyframes ping { from { opacity: 1; } to { opacity: 0; } }
.row-li.is-stale .row > .cell:not(.col-name):not(.col-age):not(.col-status) { opacity: .55; filter: saturate(.4); }
.row-li.is-stale .row { background-image: repeating-linear-gradient(135deg, rgba(251,191,36,.04) 0 6px, transparent 6px 12px); }
.row-li.is-dragging { opacity: .35; }
.ghost { position: fixed; left: var(--gx); top: var(--gy); width: var(--gw); z-index: 80; pointer-events: none; background: var(--surface-2); border: 1px solid rgba(56,189,248,.5); border-radius: 12px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.9), 0 0 0 4px rgba(56,189,248,.1); list-style: none; }
.row > .cell, .chead > .cell { min-width: 0; display: flex; align-items: center; }
.c-grip { display: flex; align-items: center; justify-content: center; }
.grip { width: 20px; height: 28px; border: 0; background: none; color: var(--faint); cursor: grab; padding: 0; display: inline-flex; align-items: center; justify-content: center; opacity: 0; border-radius: 6px; touch-action: none; }
.grip .ico { width: 16px; height: 16px; }
.can-drag .row:hover .grip, .can-drag .row:focus-within .grip { opacity: 1; }
.grip:hover { color: var(--muted); background: rgba(var(--line-rgb),.08); }
.clist:not(.can-drag) .grip { display: none; }
.c-st { position: relative; width: 20px; height: 20px; display: grid; place-items: center; }
.c-st .gl { width: 14px; height: 14px; position: relative; z-index: 1; }
.st-ring { position: absolute; inset: -1px; border-radius: 50%; }
.st-ring.ph-suspect { border: 1.5px solid var(--warn); animation: ring-pulse 1.6s ease-out infinite; }
.st-ring.ph-recovering { border: 1.5px solid transparent; border-top-color: var(--up); border-right-color: var(--up); animation: spin 1.4s linear infinite; }
.st-ring.ph-down { background: radial-gradient(circle, rgba(248,113,113,.35), transparent 70%); animation: pulse 2s ease-in-out infinite; }
@keyframes ring-pulse { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.c-nm { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.nm-l { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; }
.star { color: var(--warn); font-size: 12px; flex: none; }
.host { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); }
.col-heartbeat { overflow: hidden; }
.hb { width: 100%; height: 22px; display: block; overflow: visible; }
.hb-ok { fill: var(--up); opacity: .82; }
.hb-deg { fill: var(--warn); }
.hb-fail { fill: var(--down); }
.hb-unk { fill: url(#hatch); }
.hb-dot { fill: var(--deco); opacity: .55; }
.row:hover .hb-ok { opacity: 1; }
.col-spark { position: relative; }
.spark { width: 100%; height: 24px; display: block; overflow: visible; }
.spark-band { fill: rgba(56,189,248,.18); }
.spark-line { fill: none; stroke: var(--info); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.spark-dot { fill: var(--text); }
.spark-empty, .empty-line line { stroke: var(--deco); stroke-width: 1.2; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.collect { position: absolute; left: 0; bottom: -2px; font-size: 10px; color: var(--faint); letter-spacing: .05em; }
.col-latency, .col-uptime, .col-age, .col-tls, .col-code, .col-interval { justify-content: flex-end; text-align: right; }
.c-lat { font-size: 14px; font-weight: 600; white-space: nowrap; }
.c-lat small { color: var(--muted); font-weight: 400; }
.c-lat.is-slow { color: var(--warn); }
.bars { width: 100%; height: 20px; display: block; }
.b-up { fill: var(--up); opacity: .9; } .b-up60 { fill: var(--up); opacity: .55; } .b-warn { fill: var(--warn); } .b-down { fill: var(--down); }
.b-nodata { fill: var(--deco); opacity: .45; } .b-cap { fill: var(--warn); } .b-pre { fill: var(--deco); opacity: .6; }
.c-up { font-size: 14px; font-weight: 600; white-space: nowrap; display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.c-up > span:first-child::after { content: ""; }
.c-up small { color: var(--muted); font-weight: 400; }
.c-up.is-warn { color: var(--warn); } .c-up.is-bad { color: var(--down); }
.since { font-size: 10.5px; font-weight: 400; color: var(--faint); font-family: var(--font); }
.c-up { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; column-gap: 1px; }
.c-up .since { flex-basis: 100%; text-align: right; }
.c-tls { font-size: 13px; white-space: nowrap; font-weight: 600; }
.c-tls small { color: var(--faint); font-weight: 500; font-size: 10.5px; }
.c-age { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.c-code { font-size: 13px; color: var(--muted); }
.c-code.is-bad { color: var(--down); font-weight: 700; }
.c-int { font-size: 12.5px; color: var(--muted); }
body[data-density="compact"] .nm { font-size: 13.5px; }
body[data-density="compact"] .host, body[data-density="ultra"] .host { display: none; }
body[data-density="compact"] .bars { height: 14px; }
body[data-density="compact"] .hb { height: 16px; }
body[data-density="ultra"] .nm { font-size: 13px; }
body[data-density="ultra"] .c-up .since { display: none; }
body[data-density="ultra"] .c-up, body[data-density="ultra"] .c-lat { font-size: 12.5px; }
body[data-density="ultra"] .row { column-gap: 10px; }
body[data-density="ultra"] .row-li { border-bottom-color: rgba(var(--line-rgb),.05); }
body[data-density="ultra"] .c-st .gl { width: 11px; height: 11px; }
body[data-density="ultra"] .grip { height: 20px; }
.grp-li { padding: 10px 8px 4px; }
.grp-li + .row-li, .grp-li:first-child { border-top: 0; }
.grp { display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; padding: 0 8px; border: 0; background: none; cursor: pointer; border-radius: 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.grp:hover:not(:disabled) { background: rgba(var(--line-rgb),.05); color: var(--text); }
.grp:disabled { cursor: default; }
.grp .chev { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.grp:disabled .chev { opacity: .3; }
.grp-li.is-collapsed .chev { transform: rotate(-90deg); }
.grp-n { position: relative; padding-left: 14px; }
.grp-n::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 3px; transform: rotate(45deg); background: var(--gc, var(--muted)); }
.grp-teal { --gc: var(--up); } .grp-cyan { --gc: var(--info); } .grp-violet { --gc: var(--paused); } .grp-amber { --gc: var(--warn); } .grp-muted { --gc: var(--deco); }
.grp-c { font-size: 11px; color: var(--faint); letter-spacing: 0; }
.grp-gl { display: flex; gap: 10px; margin-left: auto; letter-spacing: 0; }
.mini-c { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; text-transform: none; }
.mini-c .gl { width: 11px; height: 11px; }
.rows-empty { padding: 40px 20px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.reorder-hint { padding: 10px 16px; font-size: 12.5px; color: var(--faint); border-top: 1px solid var(--line); }
.full-detail { padding: 18px 22px; max-width: 980px; margin: 0 auto; }

/* ---------------- shield ---------------- */
.shieldv { display: flex; flex-direction: column; }
.sv-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.sv-left { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sv-hero { position: relative; }
.shield { position: relative; display: flex; flex-direction: column; align-items: center; }
.sh-stage { position: relative; width: 100%; max-width: 640px; margin: 0 auto; }
.sh-stage::before { content: ""; position: absolute; inset: 6% 8% 2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(56,189,248,.12), rgba(94,234,212,.04) 60%, transparent); pointer-events: none; }
.sh-svg { width: 100%; height: auto; display: block; overflow: visible; position: relative; }
.sh-core { opacity: .9; }
.sh-glow { fill: none; stroke: rgba(56,189,248,.10); stroke-width: 18; stroke-linejoin: round; }
.sh-body { fill: url(#grad-shield-fill); stroke: url(#grad-brand-v); stroke-width: 2.4; stroke-linejoin: round; stroke-opacity: .75; }
.sh-inner { fill: none; stroke: rgba(var(--line-rgb),.18); stroke-width: 1; stroke-dasharray: 2 6; }
.sh-seam { clip-path: url(#sh-clip640); fill: none; stroke: url(#grad-brand); stroke-width: 1.4; opacity: .28; stroke-linecap: round; pointer-events: none; }
.shield-mini .sh-seam { opacity: .2; }
.sh-cells .cell { cursor: pointer; color: var(--c, var(--deco)); }
.sh-cells .cell.is-idle { cursor: default; --c: var(--deco); }
.cell-in { transform-box: view-box; transform-origin: 0 0; }
.cell .hex { fill: var(--c); fill-opacity: .18; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; transition: fill-opacity .25s, stroke-width .2s; }
.cell.is-idle .hex { fill: var(--accent); fill-opacity: .04; stroke: var(--deco); stroke-width: 1.2; stroke-opacity: .55; }
.cell .hex-star { fill: none; stroke: var(--c); stroke-width: 1; opacity: 0; }
.cell.is-star .hex-star { opacity: .75; }
.cell .hex-hatch { fill: url(#hatch-stale); opacity: 0; pointer-events: none; }
.cell.is-stale .hex-hatch { opacity: 1; }
.cell .hex-flash { fill: #fff; opacity: 0; pointer-events: none; }
.cell-gl { color: var(--c); pointer-events: none; }
.cell.is-idle .cell-gl { display: none; }
.cell-lbl { fill: var(--text); font-family: var(--font); font-weight: 600; pointer-events: none; letter-spacing: .01em; paint-order: stroke; stroke: rgba(var(--ink-rgb),.75); stroke-width: 3px; }
.cell .crack { fill: none; stroke: #FFE1E1; stroke-width: 1.6; stroke-linecap: round; opacity: 0; pointer-events: none; }
.cell.is-hit .crack { opacity: .8; }
.cell .scan-arc { fill: none; stroke: var(--info); stroke-width: 3; stroke-linecap: round; opacity: 0; transform-box: view-box; transform-origin: 0 0; pointer-events: none; }
.cell.is-scan .scan-arc, .cell.is-scan-idle .scan-arc { opacity: 1; animation: spin 1.1s linear infinite; }
.cell.is-scan-idle .hex { stroke: var(--info); stroke-opacity: .9; stroke-width: 2; fill: var(--info); fill-opacity: .08; }
.cell:not(.is-idle):hover .hex { fill-opacity: .3; stroke-width: 3; }
.cell.is-sel .hex, .cell.is-focus .hex { stroke: var(--text); stroke-width: 3.2; }
.cell.is-focus .hex { stroke: var(--info); stroke-dasharray: none; }
.cell.is-dim { opacity: .22; }
.cell.s-down .hex { fill-opacity: .26; stroke-width: 2.6; }
.ripple { fill: none; stroke-width: 2; transform-box: view-box; transform-origin: 0 0; pointer-events: none; vector-effect: non-scaling-stroke; }
.r-down.ripple { stroke: var(--down); }
.r-up.ripple { stroke: var(--up); }
/* motion: idle pulse, shimmer, degraded flicker */
body[data-motion="full"] .cell.is-idle .hex { animation: idle-pulse 8s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -1); }
body[data-motion="full"] .shimmer .cell.s-up .cell-in { animation: shimmer 6s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -1); }
body[data-motion="full"] .cell.s-degraded .hex { animation: flicker 2s ease-in-out infinite; }
body[data-motion="full"] .cell.s-down .hex { animation: down-beat 2.4s ease-in-out infinite; }
@keyframes idle-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .55; } }
@keyframes shimmer { 0%, 100% { opacity: 1; } 50% { opacity: .85; } }
@keyframes flicker { 0%, 100% { fill-opacity: .18; } 45% { fill-opacity: .32; } 55% { fill-opacity: .14; } }
@keyframes down-beat { 0%, 100% { fill-opacity: .22; } 50% { fill-opacity: .4; } }
.sh-caption { display: flex; align-items: center; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; color: var(--muted); font-size: 13.5px; }
.sh-cap-t b { color: var(--text); font-weight: 700; }
.sh-card { position: absolute; left: 0; top: 0; transform: translate(var(--x, 0), var(--y, 0)); z-index: 5; width: 240px; padding: 12px 14px; border-radius: 12px; pointer-events: none; background: var(--surface-2); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px -16px rgba(0,0,0,.9); }
.shc-h { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.shc-h strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shc-host { font: 12px var(--mono); color: var(--faint); margin: 2px 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shc-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 12.5px; }
.shc-dl dt { color: var(--faint); }
.shc-dl dd { text-align: right; color: var(--text); }
/* hidden panel list → visible list view */
.sh-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sh-list:focus-within { clip-path: none; width: 1px; height: 1px; }
.shield.is-list .sh-stage { display: none; }
.shield.is-list .sh-list { position: static; width: 100%; height: auto; clip-path: none; white-space: normal; overflow: visible; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-top: 14px; }
.sh-li { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; }
.sh-li:hover { border-color: var(--line-strong); background: var(--surface-2); }
.gl-wrap { display: grid; place-items: center; }
.sh-li-n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-li-s { font-size: 12.5px; color: var(--muted); }
.sh-li-ms { font-size: 12.5px; color: var(--text); }
.shield-mini { width: 108px; }
.shield-mini .sh-svg { width: 108px; height: 108px; }
.shield-mini .sh-glow { stroke-width: 26; stroke: rgba(56,189,248,.08); }
.shield-mini .sh-body { stroke-width: 6; }
.shield-mini .sh-inner { display: none; }
.shield-mini .cell .hex { stroke-width: 3; }
.shield-mini .cell.is-idle .hex { stroke-width: 2; }
/* side column */
.sv-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--hdr) + 14px); }
.sv-card { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.sv-card:first-child { align-items: center; text-align: center; }
.sv-card:first-child .fs-sent { justify-content: center; font-size: 19px; }
.sv-card:first-child .fstats { justify-content: center; }
.sv-ring { margin-top: 2px; }
.sv-eng { display: flex; justify-content: center; }
.sv-h { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.att { display: flex; flex-direction: column; gap: 4px; }
.att-b { width: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; border: 1px solid transparent; background: rgba(var(--ink-rgb),.35); cursor: pointer; text-align: left; font-size: 14px; }
.att-b:hover { border-color: var(--line-strong); }
.att-b.s-down { background: linear-gradient(90deg, rgba(248,113,113,.14), rgba(var(--ink-rgb),.35)); }
.att-n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-s { font-size: 12.5px; color: var(--muted); }
.s-down .att-s { color: #FCA5A5; } .s-degraded .att-s { color: var(--warn); }
.hexstrips { display: flex; flex-direction: column; gap: 18px; }
.hexgroup-t { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.hexstrip { display: flex; flex-wrap: wrap; gap: 4px; }
.hx { width: 40px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--c); }
.hx svg { width: 100%; height: 100%; overflow: visible; }
.hx .hex { fill: var(--c); fill-opacity: .18; stroke: var(--c); stroke-width: 1; }
.hx:hover .hex { fill-opacity: .35; }

/* first-check line + coach */
.fc-slot:empty, .coach-slot:empty { display: none; }
.fc-wrap { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); max-width: 640px; width: 100%; margin: 0 auto; }
.fc { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.fc .gl { width: 16px; height: 16px; }
.fc-checking { color: var(--info); }
.fc-online { color: var(--text); }
.fc-online b { color: var(--up); }
.fc-verifying { color: var(--warn); }
.fc-t { display: flex; flex-direction: column; }
.fc-e { color: var(--muted); font-weight: 400; font-size: 13px; }
.coach { display: flex; align-items: center; gap: 14px; padding: 12px 16px; max-width: 640px; margin: 0 auto; width: 100%; border-color: rgba(56,189,248,.3); background: linear-gradient(90deg, rgba(56,189,248,.1), var(--surface) 60%); }
.coach-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(56,189,248,.15); color: var(--info); flex: none; }
.coach-t { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--muted); flex: 1; }
.coach-t strong { color: var(--text); }
.coach-t kbd { font-size: 10.5px; padding: 2px 5px; }

/* onboarding */
.onb { display: grid; grid-template-columns: minmax(280px, 520px) minmax(0, 560px); gap: 48px; align-items: center; justify-content: center; min-height: calc(100vh - var(--hdr) - 140px); padding: 20px 0; }
.onb-hero { position: relative; }
.onb-hero .sh-caption { display: none; }
.onb-copy { display: flex; flex-direction: column; gap: 16px; }
.eyebrow { font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--info); }
.onb-t { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -.025em; font-weight: 800; }
.onb-t { background: linear-gradient(180deg, #F4F8FC, #B9CADD); -webkit-background-clip: text; background-clip: text; color: transparent; }
.onb-p { color: var(--muted); font-size: 16.5px; line-height: 1.55; max-width: 48ch; }
.onb-form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.onb-row { display: flex; gap: 10px; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--hi), 0 20px 50px -24px rgba(56,189,248,.45); }
.onb-row .inp { border-color: transparent; background: transparent; }
.onb-row .inp:focus { box-shadow: none; }
.onb-row:focus-within { border-color: rgba(56,189,248,.6); }
.onb-chips { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.onb-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.onb-feat li { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--panel-rgb),.6); font-size: 13px; color: var(--muted); line-height: 1.4; }
.onb-feat .ico { color: var(--accent); width: 20px; height: 20px; }

/* ---------------- deck ---------------- */
.deck-slot:empty { display: none; }
.deck-wrap { margin-top: 22px; }
.deck-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.deck-t { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-right: auto; }
.deck-edit { color: var(--faint); }
.deck { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 80px; gap: 14px; grid-auto-flow: row dense; }
.w { grid-column: span var(--w, 6); grid-row: span var(--h, 3); display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; position: relative; }
/* Snap grid (12 columns): explicit positions from the saved layout (deck.js / grid.js). Narrower screens keep the flow. */
@media (min-width: 1024px) {
  .deck.is-grid { grid-auto-flow: row; }
  .deck.is-grid > .w, .deck.is-grid > .w-ghost { grid-column: var(--c, auto) / span var(--w, 6); grid-row: var(--r, auto) / span var(--h, 3); }
}
.w-ghost { border: 2px dashed rgba(94,234,212,.7); border-radius: var(--r); background: rgba(94,234,212,.07); box-shadow: inset 0 0 28px rgba(94,234,212,.12); pointer-events: none; }
.deck.is-edit { background-image: linear-gradient(rgba(var(--line-rgb),.05) 1px, transparent 1px); background-size: 100% calc(80px + 14px); border-radius: var(--r); }
.deck.is-edit .w-h { cursor: grab; user-select: none; touch-action: none; }
.deck.is-edit .w-h:active { cursor: grabbing; }
.w.is-dragging { position: fixed; z-index: 60; opacity: .92; box-shadow: 0 24px 60px -10px rgba(0,0,0,.75), 0 0 0 1px rgba(94,234,212,.5); pointer-events: none; transform: rotate(-.6deg); }
.w.is-sorting { opacity: .5; }
.w.is-resizing { outline: 2px solid rgba(94,234,212,.7) !important; z-index: 5; }
.w-rs { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; z-index: 3;
  background: linear-gradient(135deg, transparent 50%, rgba(94,234,212,.75) 50%, rgba(94,234,212,.75) 60%, transparent 60%, transparent 72%, rgba(94,234,212,.75) 72%, rgba(94,234,212,.75) 82%, transparent 82%); border-radius: 0 0 var(--r) 0; }
@media (max-width: 1023px) { .w-rs { display: none; } }
.w-x:hover { color: #FCA5A5; }
/* hideable fixed sections while customising */
.is-hideable { position: relative; outline: 1px dashed rgba(56,189,248,.45); outline-offset: 3px; }
.hide-sec { position: absolute; top: 8px; right: 8px; z-index: 6; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: 600 12px var(--font); color: var(--text); background: rgba(var(--ink-rgb),.88); border: 1px solid var(--line-strong); cursor: pointer; }
.hide-sec:hover, .hide-sec:focus-visible { color: #fff; border-color: rgba(94,234,212,.7); }
.hide-sec .ico { width: 14px; height: 14px; }
.sv-main.no-side { grid-template-columns: minmax(0, 1fr); }
/* floating customise bar */
.deck-wrap.is-edit { padding-bottom: 84px; }
.cust-bar { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: 16px; background: rgba(var(--panel-rgb),.94); border: 1px solid rgba(94,234,212,.45); box-shadow: 0 18px 50px -12px rgba(0,0,0,.8), 0 0 30px -10px rgba(94,234,212,.5); }
.cust-hint { margin: 0; font-size: 13px; color: var(--muted); }
.cust-hint strong { color: var(--text); }
.cust-hidden { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* TV: the user's deck below the tiles */
.tv-deck:empty { display: none; }
.tv-deck .deck-wrap { margin-top: 0; padding-bottom: 18px; }
.tv-deck .deck-head { display: none; }
.tv-body.no-tiles { grid-template-columns: minmax(0, 1fr); }
.tv-body.no-tiles .tv-side { position: static; max-width: 760px; }
.tv-body.no-tiles .tv-grid { display: none; }
.deck.is-edit .w { outline: 1px dashed rgba(56,189,248,.35); outline-offset: 3px; }
.w.is-dragging { opacity: .5; }
.w-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px 6px; }
.w-t { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-tools { display: flex; gap: 4px; align-items: center; }
.w-tools .icon-btn { width: 28px; min-width: 28px; min-height: 28px; }
.w-grip { opacity: 1; color: var(--muted); }
.w-b { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 16px 14px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: rgba(var(--line-rgb),.2) transparent; }
.w-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: var(--faint); font-size: 13.5px; padding: 12px; }
.w-calm { color: var(--muted); }
.calm-orb { width: 10px; height: 10px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 5px rgba(94,234,212,.12), 0 0 22px rgba(94,234,212,.5); display: inline-block; }
body[data-motion="full"] .calm-orb { animation: breathe 4s ease-in-out infinite; }
.deck-empty { grid-column: 1 / -1; grid-row: span 2; border: 1px dashed var(--line-strong); border-radius: var(--r); }
.w-more { align-self: flex-start; }
.w-foot { margin-top: auto; }
.w-site-l { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; min-width: 0; }
.w-site-l > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-site-l .c-up { margin-left: auto; }
.w-site-l .muted { margin-left: auto; font-weight: 400; }
.w-chart { flex: 1; min-height: 0; }
.w-fleet { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; flex: 1; }
.w-fleet .fs-sent { font-size: 17px; }
.w-cfg { display: flex; flex-direction: column; gap: 12px; }
.w-cfg-a { display: flex; gap: 8px; justify-content: flex-end; }
.pv-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
/* incident feed */
.ifeed { display: flex; flex-direction: column; position: relative; }
.ifeed::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, var(--line-strong), transparent); }
.if-i { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 8px 0; position: relative; }
.if-i + .if-i { border-top: 1px solid rgba(var(--line-rgb),.06); }
.if-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); position: relative; z-index: 1; }
.if-dot .gl { width: 11px; height: 11px; }
.if-i.is-open .if-dot { border-color: rgba(248,113,113,.6); }
.if-i.is-open.if-down .if-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--down); animation: ring-pulse 1.8s ease-out infinite; }
.if-b { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.if-site { font-weight: 600; font-size: 14px; color: var(--text); justify-content: flex-start; text-align: left; }
.if-m { font-size: 12.5px; color: var(--muted); }
.if-open { color: #FCA5A5; font-weight: 600; }
.if-c { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.if-t { font-size: 11.5px; color: var(--faint); white-space: nowrap; padding-top: 2px; }
/* tls grid */
.tlsgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.tlsg { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 12px; border: 1px solid transparent; background: rgba(var(--ink-rgb),.35); cursor: pointer; min-width: 0; }
.tlsg:hover { border-color: var(--line-strong); }
.tlsg-n { font-size: 12px; color: var(--muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* engine / sensor log */
.eng { width: 100%; height: 40px; display: block; }
.eng-ok { fill: var(--info); opacity: .65; }
.eng-bad { fill: var(--down); }
.eng-dot { fill: var(--deco); opacity: .5; }
.eng-line { font-size: 13px; color: var(--muted); }
.w-engine .w-b { flex-direction: row; align-items: center; gap: 20px; }
.w-engine .eng { flex: 1 1 60%; height: 44px; }
.w-engine .eng-line { flex: 0 1 40%; }
/* site card widget */
.scard { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 10px; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.scard-h { display: flex; align-items: center; gap: 8px; }
.scard-n { font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scard-ms { font-size: 14px; }
.scard-f { display: flex; align-items: center; gap: 12px; }
.scard-f .bars { flex: 1; height: 14px; }
/* providers */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pv { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: rgba(var(--ink-rgb),.4); border: 1px solid var(--line); border-left: 3px solid var(--c); min-width: 0; }
.pv-h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; min-width: 0; }
.pv-n { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-link { color: var(--faint); display: inline-flex; padding: 4px; border-radius: 6px; }
.pv-link:hover { color: var(--info); background: rgba(56,189,248,.1); }
.pv-s { font-size: 12.5px; color: var(--muted); }
.pv.s-degraded .pv-s { color: var(--warn); } .pv.s-down .pv-s { color: var(--down); } .pv.s-paused .pv-s { color: var(--paused); }
.pv-i { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-t { white-space: pre-wrap; color: var(--muted); font-size: 14px; }
.w-tls-list { display: flex; flex-direction: column; gap: 8px; }
.w-tl-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; align-items: center; }
.w-tl-n { display: flex; gap: 8px; align-items: center; font-size: 13px; min-width: 0; }
.w-tl-n span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addw { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.addw-b { width: 100%; display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--ink-rgb),.4); cursor: pointer; }
.addw-b:hover { border-color: rgba(56,189,248,.5); background: rgba(56,189,248,.06); }

/* ---------------- charts (detail) ---------------- */
.wf { display: flex; flex-direction: column; gap: 8px; }
.wf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wf-title { font-size: 12.5px; color: var(--muted); }
.wf-total { font-size: 20px; font-weight: 700; }
.wf-bar { width: 100%; height: 18px; display: block; border-radius: 5px; overflow: hidden; }
.wf-track { fill: rgba(var(--line-rgb),.07); }
.wf-seg { transform-box: fill-box; transform-origin: 0 50%; stroke: var(--ink); stroke-width: 1.5; }
.wf-seg.ph-dns { fill: var(--ph-dns); } .wf-seg.ph-connect { fill: var(--ph-connect); } .wf-seg.ph-tls { fill: var(--ph-tls); }
.wf-seg.ph-ttfb { fill: var(--ph-ttfb); } .wf-seg.ph-transfer { fill: var(--ph-transfer); } .wf-seg.ph-redirect { fill: var(--ph-redirect); }
.wf-seg.wf-fail { fill: url(#hatch-red); stroke: var(--down); stroke-width: 1; }
.wf-seg:hover { opacity: .85; }
.wf-x { stroke: #FFE1E1; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.wf-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--muted); }
.wf-legend li { display: inline-flex; align-items: center; gap: 6px; }
.wf-legend b { color: var(--text); font-weight: 600; }
.wf-legend .is-fail { color: #FCA5A5; }
.wf-legend .is-fail b { color: #FCA5A5; font-weight: 500; font-family: var(--font); }
.sw { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }
.sw.ph-dns { background: var(--ph-dns); } .sw.ph-connect { background: var(--ph-connect); } .sw.ph-tls { background: var(--ph-tls); }
.sw.ph-ttfb { background: var(--ph-ttfb); } .sw.ph-transfer { background: var(--ph-transfer); } .sw.ph-redirect { background: var(--ph-redirect); }
.wf-fail-sw { background: repeating-linear-gradient(135deg, var(--down) 0 2px, rgba(248,113,113,.25) 2px 4px); }
.wf-avg-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.wf-avg { width: 100%; height: 6px; display: block; border-radius: 3px; overflow: hidden; opacity: .7; }
.wf-avg .wf-seg { stroke-width: .8; }
.lchart { position: relative; }
.lc { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.lc-grid { stroke: rgba(var(--line-rgb),.09); stroke-width: 1; }
.lc { --k: 1; }
.lc-yl, .lc-xl { fill: var(--faint); font-family: var(--mono); font-size: calc(11px * var(--k)); }
.lc-band { fill: rgba(56,189,248,.16); }
.lc-line { fill: none; stroke: url(#grad-brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.lc-fail { stroke: var(--down); stroke-width: 2.4; stroke-linecap: round; }
.lc-cross { stroke: var(--line-strong); stroke-dasharray: 3 3; }
.lc-dot { fill: var(--ink); stroke: var(--info); stroke-width: 2; }
.chart-empty { position: relative; height: 110px; display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 13px; }
.chart-empty svg { position: absolute; left: 0; right: 0; bottom: 18px; width: 100%; height: 40px; }
.legend { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; color: var(--faint); margin-top: 6px; }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-left: 8px; }
.legend i:first-child { margin-left: 0; }
.lg-line { background: var(--grad); }
.lg-band { background: rgba(56,189,248,.35); height: 8px !important; }
.lg-fail { background: var(--down); width: 3px !important; height: 9px !important; }
.stl { width: 100%; height: 16px; display: block; border-radius: 4px; overflow: hidden; }
.stl-up { fill: var(--up); opacity: .55; } .stl-degraded { fill: var(--warn); } .stl-down { fill: var(--down); } .stl-nodata { fill: var(--deco); opacity: .3; }
.stl-axis { display: flex; justify-content: space-between; margin-top: 4px; }
.bars-big { height: 34px; }
.heat { display: flex; flex-direction: column; gap: 6px; }
.heat-body { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 6px; }
.heat-rows { display: grid; grid-template-rows: repeat(7, 1fr); font: 10.5px var(--mono); color: var(--faint); align-items: center; }
.heat-cv { width: 100%; height: 140px; display: block; border-radius: 6px; }
.heat-hours { position: relative; height: 14px; margin-left: 38px; font: 10.5px var(--mono); color: var(--faint); }
.heat-hours span { position: absolute; left: calc(var(--h) / 24 * 100%); }
.heat-legend { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--faint); margin-left: 38px; }
.heat-scale { width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgb(14,26,44), #5EEAD4 33%, #FBBF24 66%, #F87171); display: inline-block; }
.heat-nd { width: 12px; height: 8px; border-radius: 2px; background: rgba(157,176,198,.2); display: inline-block; margin-left: 10px; }

/* ---------------- detail ---------------- */
.detail { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.d-empty { padding: 60px 20px; text-align: center; color: var(--faint); }
.d-head { display: flex; flex-direction: column; gap: 12px; }
.d-title { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.d-gl { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--c, var(--unknown)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c, var(--unknown)) 45%, transparent); }
.d-gl .gl { width: 18px; height: 18px; }
.detail.s-down .d-gl { box-shadow: 0 0 24px -4px rgba(248,113,113,.6); }
.d-tt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.d-name { font-size: 21px; line-height: 1.2; overflow-wrap: anywhere; }
.d-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.d-url { display: inline-flex; align-items: center; gap: 5px; font: 12.5px var(--mono); color: var(--info); min-width: 0; max-width: 100%; }
.d-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-close { margin: -4px -6px 0 0; }
.d-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.d-acts .is-star { color: var(--warn); border-color: rgba(251,191,36,.45); }
.ss-wrap { display: flex; flex-direction: column; gap: 8px; }
.ssent { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; color: var(--muted); padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--c, var(--unknown)) 8%, rgba(var(--ink-rgb),.4)); border: 1px solid color-mix(in srgb, var(--c, var(--unknown)) 28%, transparent); }
.ss-main { color: var(--text); font-weight: 700; font-size: 15px; }
.ss-down .ss-main { color: #FFD9D9; }
.ss-cause { color: var(--text); flex-basis: 100%; }
.sep { color: var(--faint); }
.ss-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dsec { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.dh { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.dh-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
summary.dh { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
summary.dh::-webkit-details-marker { display: none; }
summary.dh::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s; }
details[open] > summary.dh::before { transform: rotate(45deg); }
.heat-sec .heat { margin-top: 10px; }
.locked { display: flex; align-items: center; gap: 8px; }
.cks { display: flex; flex-direction: column; gap: 2px; }
.ck { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 10px; align-items: start; font-size: 13.5px; padding: 6px 0; }
.ck + .ck { border-top: 1px solid rgba(var(--line-rgb),.06); }
.ck-ico { width: 16px; height: 16px; margin-top: 1px; }
.ck-ok .ck-ico { color: var(--up); } .ck-fail .ck-ico { color: var(--down); } .ck-warn .ck-ico { color: var(--warn); } .ck-na .ck-ico { color: var(--faint); }
.ck-na .ck-l { color: var(--faint); }
.ck-na .ck-n { color: var(--muted); font-weight: 600; }
.ck-ea { grid-column: 2; font-size: 11.5px; color: var(--text); }
.dstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dstats > div { padding: 10px 12px; border-radius: 12px; background: rgba(var(--ink-rgb),.4); border: 1px solid var(--line); display: flex; flex-direction: column-reverse; gap: 2px; min-width: 0; }
.dstats dt { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; white-space: nowrap; }
.dstats dd { font-size: 16px; font-weight: 700; white-space: nowrap; }
.dstats dt { overflow: hidden; text-overflow: ellipsis; }
.dd-since { display: block; font-size: 11px; font-weight: 600; color: var(--muted); font-family: var(--font); margin-top: 1px; }
.tls-row { display: flex; gap: 16px; align-items: center; }
.tls-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tls-days { font-weight: 700; font-size: 15px; }
.tlscard .tlsring-v { font-size: 17px; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 14px; font-size: 13px; }
.kv dt { color: var(--faint); }
.kv dd { overflow-wrap: anywhere; }
.sans summary { cursor: pointer; font-size: 12.5px; color: var(--info); }
.sans ul { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.sec { display: flex; flex-direction: column; gap: 8px; }
.sec-t { font-size: 13px; color: var(--muted); }
.sec-t b { color: var(--text); }
.sec-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sec-chips .chip { height: 24px; font-size: 11.5px; }
.rtabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: rgba(var(--ink-rgb),.5); border: 1px solid var(--line); }
.rtab { border: 0; background: none; color: var(--muted); font: 600 12px var(--mono); padding: 4px 9px; border-radius: 7px; cursor: pointer; }
.rtab:hover { color: var(--text); }
.rtab.is-on { color: var(--text); background: rgba(56,189,248,.18); }
.chain { display: flex; flex-direction: column; gap: 6px; }
.hop { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-width: 0; }
.hop-c { flex: none; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: rgba(var(--line-rgb),.1); }
.hop-u { font-family: var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.hop-ar { color: var(--faint); order: 3; }
.hop-bad .hop-u { color: #FCA5A5; }
.tbl-wrap { overflow-x: auto; margin: 0 -4px; }
.stable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.stable th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 6px 4px; border-bottom: 1px solid var(--line); }
.stable td { padding: 6px 4px; border-bottom: 1px solid rgba(var(--line-rgb),.05); white-space: nowrap; }
.stable .r { text-align: right; }
.stable td.err { color: var(--muted); white-space: normal; min-width: 120px; font-size: 12px; }
.stable tr.r-down td.err { color: #FCA5A5; }
.stable .gl { width: 11px; height: 11px; }
.d-foot { padding-top: 14px; border-top: 1px solid var(--line); }

/* ---------------- overlays ---------------- */
.layer { position: relative; z-index: 60; }
.backdrop { position: fixed; inset: 0; background: rgba(var(--ink-rgb),.6); z-index: 60; animation: fade-in .18s ease-out; }
.bd-menu { background: transparent; }
.backdrop.is-leaving { opacity: 0; transition: opacity .14s; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise-in { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
.dlg {
  position: fixed; left: 50%; top: 12vh; z-index: 61; width: min(560px, calc(100vw - 32px)); max-height: 76vh; display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(-50%); border-radius: var(--r-lg); background: var(--panel-max); border: 1px solid var(--line-strong);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,.95), var(--hi);
}
.dlg > * { animation: rise-in .22s var(--ease); }
.dlg-sm { width: min(440px, calc(100vw - 32px)); }
.dlg-keys { width: min(640px, calc(100vw - 32px)); }
.dlg-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px 6px 20px; }
.dlg-t { font-size: 17px; flex: 1; }
.dlg-b { padding: 8px 20px 20px; overflow: auto; }
.dlg-d { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.dlg-danger { border-color: rgba(248,113,113,.4); }
.confirm { display: flex; flex-direction: column; gap: 14px; }
.slide {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(520px, 100vw); display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(var(--panel2-rgb),.98), rgba(var(--panel-rgb),.98)); border-left: 1px solid var(--line-strong);
  box-shadow: -40px 0 80px -30px rgba(0,0,0,.9); animation: slide-in .24s var(--ease);
}
.slide-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px 14px 24px; border-bottom: 1px solid var(--line); }
.slide-t { font-size: 18px; flex: 1; }
.slide-b { flex: 1; overflow: auto; padding: 18px 24px 28px; scrollbar-width: thin; scrollbar-color: rgba(var(--line-rgb),.25) transparent; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(480px, 100vw); background: linear-gradient(180deg, rgba(var(--panel2-rgb),.98), rgba(var(--panel-rgb),.98)); border-left: 1px solid var(--line-strong); box-shadow: -40px 0 80px -30px rgba(0,0,0,.9); animation: slide-in .24s var(--ease); display: flex; flex-direction: column; }
.drawer-b { flex: 1; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(var(--line-rgb),.25) transparent; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; top: max(env(safe-area-inset-top), 24px); z-index: 61; display: flex; flex-direction: column; border-radius: 20px 20px 0 0; background: linear-gradient(180deg, rgba(var(--panel2-rgb),.99), rgba(var(--panel-rgb),.99)); border-top: 1px solid var(--line-strong); box-shadow: 0 -30px 80px -20px rgba(0,0,0,.9); transform: translateY(var(--drag, 0px)); animation: sheet-in .28s var(--ease); transition: transform .2s var(--ease); }
.sheet.is-dragging { transition: none; }
.grab { padding: 10px 0 6px; display: flex; justify-content: center; cursor: grab; touch-action: none; }
.grab span { width: 44px; height: 5px; border-radius: 3px; background: var(--line-strong); }
.sheet-b { flex: 1; overflow: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
.is-leaving.slide, .is-leaving.drawer { animation: none; }
.menu { position: fixed; left: var(--mx); top: var(--my); z-index: 62; width: 240px; padding: 6px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-strong); box-shadow: 0 24px 60px -20px rgba(0,0,0,.95); animation: rise-in .16s var(--ease); }
.menu-i { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; border: 0; background: none; cursor: pointer; font-size: 14px; text-align: left; color: var(--text); }
.menu-i:hover, .menu-i:focus-visible { background: rgba(var(--line-rgb),.09); outline: none; }
.menu-i .ico { width: 16px; height: 16px; color: var(--muted); }
.menu-i span { flex: 1; }
.menu-i.is-danger { color: #FCA5A5; }
.menu-i.is-danger .ico { color: #FCA5A5; }
.menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }
/* overlays are opaque: nothing behind a menu, slide-over, drawer, sheet or toast may ghost through the text */
.menu, .t, .sh-card { background: var(--panel-max); backdrop-filter: none; -webkit-backdrop-filter: none; }
.slide, .drawer { background: linear-gradient(180deg, var(--panel-max), var(--panel)); backdrop-filter: none; -webkit-backdrop-filter: none; }
.sheet { background: linear-gradient(180deg, var(--panel-max), var(--panel)); }
.dlg { background: var(--panel-max); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* TV mode shows its own delayed-monitoring band */
body.tv .banners { display: none; }
/* mobile Shield: compact status line above the array */
.sv-mstat { display: none; }
.tls-days.is-bad { color: var(--down); font-weight: 700; }
/* palette */
.pal { top: 14vh; width: min(620px, calc(100vw - 32px)); }
.pal .dlg-h { display: none; }
.pal .dlg-b { padding: 0; }
.pal-w { display: flex; flex-direction: column; max-height: 60vh; }
.pal-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--faint); }
.pal-in { flex: 1; border: 0; background: transparent; color: var(--text); font: 400 17px var(--font); outline: none; min-width: 0; }
.pal-in::placeholder { color: var(--faint); }
.pal-l { overflow: auto; padding: 6px; flex: 1; }
.pal-i { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--muted); }
.pal-i .ico { width: 16px; height: 16px; }
.pal-i.is-on { background: linear-gradient(90deg, rgba(56,189,248,.16), rgba(56,189,248,.04)); color: var(--text); box-shadow: inset 2px 0 0 var(--info); }
.pal-t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-r { font-size: 11px; color: var(--faint); }
.pal-empty { padding: 20px; color: var(--faint); text-align: center; }
.pal-f { display: flex; align-items: center; gap: 6px; padding: 10px 18px; border-top: 1px solid var(--line); }
.pal-f kbd { font-size: 10.5px; margin-left: 8px; }
.pal-f kbd:first-child { margin-left: 0; }
/* shortcuts table */
.keys { width: 100%; border-collapse: collapse; font-size: 14px; }
.keys td { padding: 8px 6px; border-bottom: 1px solid rgba(var(--line-rgb),.06); vertical-align: middle; }
.keys-k { white-space: nowrap; width: 1%; padding-right: 22px !important; }
.keys-k kbd { margin: 0 1px; }
/* toasts */
.toasts { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 70; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.t { pointer-events: auto; display: flex; align-items: center; gap: 12px; min-width: 260px; max-width: min(420px, calc(100vw - 32px)); padding: 12px 10px 12px 14px; border-radius: 14px; background: var(--panel-max); border: 1px solid var(--line-strong); box-shadow: 0 24px 60px -20px rgba(0,0,0,.9); animation: rise-in .22s var(--ease); }
.t.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.t-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: rgba(56,189,248,.14); color: var(--info); }
.t-ic .ico { width: 16px; height: 16px; }
.t-ok .t-ic { background: rgba(94,234,212,.14); color: var(--up); }
.t-ok { border-color: rgba(94,234,212,.35); }
.t-warn .t-ic, .t-err .t-ic { background: rgba(251,191,36,.14); color: var(--warn); }
.t-txt { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 14px; }
.t-txt span { color: var(--muted); font-size: 12.5px; }
.t-x { width: 28px; min-width: 28px; min-height: 28px; }
/* tooltip */
.tip { position: fixed; left: 0; top: 0; transform: translate(var(--x, 0), var(--y, 0)); z-index: 90; pointer-events: none; padding: 8px 10px; border-radius: 10px; background: rgba(var(--panel2-rgb),.97); border: 1px solid var(--line-strong); box-shadow: 0 16px 40px -14px rgba(0,0,0,.9); font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; min-width: 130px; max-width: 280px; }
.tip-t { font-weight: 700; margin-bottom: 2px; }
.tip-r { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); }
.tip-r b { color: var(--text); font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.has-modal { overflow: hidden; }

/* ---------------- editor ---------------- */
.editor { display: flex; flex-direction: column; gap: 18px; }
.adv { border: 1px solid var(--line); border-radius: 14px; padding: 0 16px; background: rgba(var(--ink-rgb),.3); }
.adv > summary { cursor: pointer; padding: 13px 0; font-weight: 600; color: var(--muted); list-style: none; display: flex; align-items: center; gap: 8px; }
.adv > summary::-webkit-details-marker { display: none; }
.adv > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s; }
.adv[open] > summary::before { transform: rotate(45deg); }
.adv[open] > summary { color: var(--text); }
.adv .grid2 { padding: 4px 0 16px; }
.kw-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px; }
.test-slot:empty { display: none; }
.test-run { display: flex; align-items: center; gap: 10px; color: var(--info); font-weight: 600; padding: 14px; border-radius: 12px; border: 1px solid rgba(56,189,248,.3); background: rgba(56,189,248,.06); }
.test-res { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 6%, rgba(var(--ink-rgb),.4)); }
.test-h { display: flex; align-items: center; gap: 10px; }
.test-h strong { flex: 1; }

/* ---------------- settings ---------------- */
.ssec { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 22px; }
.ssec + .ssec { border-top: 1px solid var(--line); padding-top: 20px; }
.ssec-t { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; }
.srow-l { display: flex; flex-direction: column; gap: 2px; min-width: 150px; flex: 1 1 160px; }
.srow-t { font-weight: 600; font-size: 14.5px; }
.srow-h { font-size: 12.5px; color: var(--faint); }
.srow-c { display: flex; justify-content: flex-end; flex: 0 1 auto; min-width: 0; }
.srow-c.col { flex: 1 1 100%; align-items: stretch; }
.srow-a { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pcard { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(var(--ink-rgb),.4); cursor: pointer; transition: border-color .15s, background-color .15s; }
.pcard:hover { border-color: var(--line-strong); }
.pcard.is-on { border-color: rgba(56,189,248,.65); background: linear-gradient(180deg, rgba(56,189,248,.12), rgba(var(--ink-rgb),.4)); box-shadow: 0 0 0 3px rgba(56,189,248,.12); }
.pcard strong { font-size: 14.5px; }
.pcard .small { line-height: 1.35; }
.pcard-art { height: 64px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 4px; border: 1px solid var(--line); background: radial-gradient(80px 50px at 50% 60%, rgba(56,189,248,.16), transparent), rgba(var(--ink-rgb),.5); }
.pcard-ico { width: 30px; height: 30px; color: var(--accent); }
.pa-console { background: repeating-linear-gradient(180deg, rgba(var(--line-rgb),.10) 0 2px, transparent 2px 12px), rgba(var(--ink-rgb),.5); background-position: 0 6px; }
.more { display: flex; flex-direction: column; gap: 4px; }
.more-b { width: 100%; display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 12px; border: 1px solid transparent; background: none; cursor: pointer; text-align: left; }
.more-b:hover { background: rgba(var(--line-rgb),.06); border-color: var(--line); }
.more-b > .ico:first-child { color: var(--accent); width: 20px; height: 20px; }
.more-t { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.more-chev { color: var(--faint); }
.tzc { display: flex; flex-direction: column; gap: 6px; width: min(300px, 100%); }
.swatches { display: flex; gap: 10px; }
.swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; background: var(--sc); box-shadow: inset 0 0 0 3px var(--panel-max); padding: 0; }
.swatch.is-on { border-color: var(--text); }
.swatches-s .swatch { width: 26px; height: 26px; }
.sw-teal { --sc: var(--up); } .sw-cyan { --sc: var(--info); } .sw-violet { --sc: var(--paused); } .sw-blue { --sc: var(--sky); } .sw-green { --sc: #86EFAC; } .sw-pink { --sc: #F9A8D4; } .sw-orange { --sc: #FDBA74; } .sw-amber { --sc: var(--warn); } .sw-muted { --sc: var(--deco); }
.vitem { border: 1px solid var(--line); border-radius: 14px; background: rgba(var(--ink-rgb),.3); }
.vitem > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.vitem > summary::-webkit-details-marker { display: none; }
.vitem-n { font-weight: 600; flex: 1; }
.vitem[open] > summary { border-bottom: 1px solid var(--line); }
.vitem-b { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.gdot { width: 10px; height: 10px; border-radius: 3px; transform: rotate(45deg); background: var(--gc, var(--deco)); }
.gd-teal { --gc: var(--up); } .gd-cyan { --gc: var(--info); } .gd-violet { --gc: var(--paused); } .gd-amber { --gc: var(--warn); } .gd-muted { --gc: var(--deco); }
.collist { display: flex; flex-direction: column; gap: 4px; }
.collist li { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.ico-up .ico { transform: rotate(180deg); }
.sess-l { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.sess-i { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--ink-rgb),.3); }
.sess-i > .ico { color: var(--muted); }
.sess-i.is-cur { border-color: rgba(94,234,212,.35); }
.sess-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.danger { padding: 14px; border-radius: 14px; border: 1px solid rgba(248,113,113,.35); background: rgba(248,113,113,.06); display: flex; flex-direction: column; gap: 12px; }
.imp-prev:empty { display: none; }
.imp-card { padding: 14px; border-radius: 14px; border: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.imp-res { font-size: 13.5px; }
.privacy { display: flex; flex-direction: column; gap: 16px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.privacy h3 { font-size: 14.5px; color: var(--text); margin-bottom: 4px; }
.privacy ul { list-style: disc; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.meter { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.meter-b { height: 4px; border-radius: 2px; background: rgba(var(--line-rgb),.12); overflow: hidden; --fill: 0; }
.meter-b span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--fill)); background: linear-gradient(90deg, var(--warn), var(--info)); transition: transform .25s var(--ease); }
.meter-b.is-ok span { background: var(--grad); }
.meter-row { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.meter-t { color: var(--text); font-weight: 600; font-family: var(--mono); font-size: 12px; }
.meter-h { color: var(--faint); }
.meter-r { list-style: disc; padding-left: 18px; color: #FCA5A5; font-size: 12.5px; }

/* ---------------- auth ---------------- */
body.is-auth .main { display: flex; align-items: center; justify-content: center; padding-top: 32px; padding-bottom: 32px; }
.auth { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 120px); min-height: calc(100dvh - 120px); }
.auth-deco { position: absolute; left: 50%; top: 50%; width: min(980px, 150vw); height: auto; transform: translate(-50%, -50%); pointer-events: none; overflow: visible; }
.auth-deco path { fill: none; stroke-linejoin: round; }
.ad-1 { stroke: url(#grad-brand-v); stroke-width: 1.4; opacity: .22; }
.ad-2 { stroke: rgba(var(--line-rgb),.16); stroke-width: 1; stroke-dasharray: 3 8; }
.ad-3 { stroke: rgba(56,189,248,.12); stroke-width: 1; }
body[data-motion="full"] .ad-2 { animation: dash-run 30s linear infinite; }
@keyframes dash-run { to { stroke-dashoffset: -440; } }
.auth-card {
  position: relative; width: min(420px, 100%); padding: 30px 30px 22px; border-radius: 24px;
  background: rgba(var(--panel-rgb),.86); border: 1px solid var(--line-strong);
  box-shadow: 0 50px 120px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.02), var(--hi);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  animation: rise-in .4s var(--ease);
}
.auth-card::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(94,234,212,.7), rgba(167,139,250,.7), transparent); }
.auth-logo { display: flex; justify-content: center; margin-bottom: 12px; }
.auth-mark { width: 64px; height: 64px; filter: drop-shadow(0 0 22px rgba(56,189,248,.45)); }
.auth-t { text-align: center; font-size: 22px; letter-spacing: -.01em; }
.auth-s { text-align: center; color: var(--muted); font-size: 14.5px; margin: 4px 0 20px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: rgba(var(--ink-rgb),.6); border: 1px solid var(--line); margin-bottom: 20px; }
.atab { height: 36px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-weight: 600; cursor: pointer; font-size: 14px; }
.atab:hover { color: var(--text); }
.atab.is-on { background: rgba(var(--line-rgb),.1); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.aform { display: flex; flex-direction: column; gap: 14px; }
.aform-l { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; text-align: center; }
.auth-legal { text-align: center; margin: 0; }
.auth-legal .linkish { font-size: inherit; }
.auth-lead { color: var(--muted); font-size: 14px; }
.auth-lead b { color: var(--text); }
.auth-note { padding: 10px 14px; border-radius: 12px; font-size: 14px; border: 1px solid var(--line-strong); background: rgba(var(--line-rgb),.06); }
.auth-note.ok { border-color: rgba(94,234,212,.4); background: rgba(94,234,212,.08); color: #CFFAF3; }
.auth-note.bad { border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.08); color: #FFD9D9; }
.auth-f { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--faint); }
.auth-f .linkish { font-size: 12.5px; color: var(--muted); }
.pw { position: relative; }
.pw .inp { padding-right: 44px; }
.pw-tog { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 34px; border: 0; background: none; color: var(--faint); cursor: pointer; border-radius: 8px; display: grid; place-items: center; }
.pw-tog:hover { color: var(--text); background: rgba(var(--line-rgb),.08); }
.pw-tog .ico { width: 18px; height: 18px; }
.sent { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.envelope { width: 120px; height: 90px; overflow: visible; margin: 2px 0 6px; }
.env-body { fill: rgba(56,189,248,.08); stroke: url(#grad-brand); stroke-width: 2; }
.env-letter { fill: rgba(var(--panel2-rgb),1); stroke: rgba(var(--line-rgb),.5); stroke-width: 1.5; }
.env-lines { stroke: rgba(var(--line-rgb),.45); stroke-width: 2; stroke-linecap: round; }
.env-flap { fill: none; stroke: url(#grad-brand); stroke-width: 2; stroke-linejoin: round; }
.env-ping { fill: var(--up); stroke: var(--ink); stroke-width: 3; }
body[data-motion="full"] .env-letter, body[data-motion="full"] .env-lines { animation: letter-in .9s var(--ease) both .15s; }
body[data-motion="full"] .env-ping { animation: ping-pop .5s var(--ease) both .9s, pulse 2.4s ease-in-out infinite 1.6s; transform-box: fill-box; transform-origin: center; }
@keyframes letter-in { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ping-pop { from { transform: scale(0); } to { transform: scale(1); } }
.sent-t { font-size: 20px; }
.sent-p { color: var(--muted); font-size: 14px; }
.sent-e { font-size: 13px; color: var(--text); padding: 4px 10px; border-radius: 8px; background: rgba(var(--line-rgb),.07); }
.code-l { color: var(--muted); font-size: 13px; margin-top: 10px; }
.code { display: grid; grid-template-columns: repeat(6, 44px); gap: 8px; justify-content: center; }
.code-b { height: 52px; width: 44px; text-align: center; font-size: 22px; font-weight: 700; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(var(--ink-rgb),.6); color: var(--text); caret-color: var(--info); padding: 0; }
.code-b:focus { border-color: var(--info); box-shadow: 0 0 0 3px rgba(56,189,248,.2); outline: none; }
.code.is-busy { opacity: .6; pointer-events: none; color: inherit !important; }
.code.is-busy > * { opacity: 1; }
.code.is-busy::after { display: none; }
.code.is-shake { animation: shake .4s ease; }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.pv-wrap .privacy { font-size: 13px; max-height: 50vh; overflow: auto; padding-right: 6px; }
/* animated logo parts */
.logo-anim { overflow: visible; }
.logo-p1, .logo-p2, .logo-p3 { transform-box: view-box; transform-origin: 32px 32px; }
body[data-motion="full"] .auth-mark .logo-p1, body[data-motion="full"] .auth-mark .logo-p3 { animation: half-l .9s var(--ease) both .1s; }
body[data-motion="full"] .auth-mark .logo-p2 { animation: half-r .9s var(--ease) both .1s; }
@keyframes half-l { from { transform: translate(-7px, -5px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes half-r { from { transform: translate(7px, 5px); opacity: 0; } to { transform: none; opacity: 1; } }

/* boot intro (≤ 1.4 s) */
.intro { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: radial-gradient(600px 400px at 50% 48%, rgba(var(--panel2-rgb),.97), rgba(var(--ink-rgb),.995)); transition: opacity .35s ease; }
.intro.is-out { opacity: 0; pointer-events: none; }
.intro-c { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.intro-logo { width: 112px; height: 112px; filter: drop-shadow(0 0 30px rgba(56,189,248,.5)); }
.intro-logo .logo-p1, .intro-logo .logo-p3 { animation: half-l .55s cubic-bezier(.3,1.4,.5,1) both; }
.intro-logo .logo-p2 { animation: half-r .55s cubic-bezier(.3,1.4,.5,1) both; }
.intro-ring { position: absolute; left: 50%; top: 56px; width: 120px; height: 138px; margin: -69px 0 0 -60px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: radial-gradient(closest-side, transparent 78%, rgba(94,234,212,.75) 90%, transparent 100%); opacity: 0; animation: hex-ripple .8s ease-out both .45s; }
@keyframes hex-ripple { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.intro-t { font-size: 15px; font-weight: 700; letter-spacing: .5em; text-transform: uppercase; padding-left: .5em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; animation: intro-t .5s ease-out both .6s; }
@keyframes intro-t { from { opacity: 0; transform: translateY(6px); letter-spacing: .8em; } to { opacity: 1; transform: none; } }

/* ---------------- TV ---------------- */
body.tv .main { max-width: none; padding: 0; }
body.tv::before { animation: none; }
body.tv .panel, body.tv .tvt { backdrop-filter: none; -webkit-backdrop-filter: none; }
body.tv-idle, body.tv-idle * { cursor: none !important; }
.tvw { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 0 28px 0; position: relative; }
body.tv .sweep { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; }
@keyframes tv-sweep { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.tv-top { display: flex; align-items: center; gap: 28px; padding: 22px 0 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tv-brand { display: flex; align-items: center; gap: 12px; }
.tv-brand .wm-a { font-size: 18px; }
.tv-sent { display: flex; align-items: center; gap: 14px; font-size: clamp(24px, 2.6vw, 40px); font-weight: 800; letter-spacing: -.02em; flex: 1; min-width: 260px; }
.tv-sent .orb { width: 16px; height: 16px; }
.tv-sent.fs-down { color: #FFD9D9; }
.tv-counts .cnt { font-size: 20px; height: 40px; padding: 0 12px; }
.tv-counts .gl { width: 18px; height: 18px; }
.tv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tv-clock { font-size: clamp(28px, 3vw, 44px); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.tv-swept { color: var(--muted); font-size: 14px; }
.tv-offline { color: #FFE1DD; background: repeating-linear-gradient(135deg, rgba(248,113,113,.22) 0 12px, rgba(248,113,113,.1) 12px 24px); border-color: rgba(248,113,113,.55); }
body.tv-stale .tv-grid, body.tv-stale .tv-side, body.tv-stale .tv-deck { opacity: .45; filter: grayscale(.7); transition: opacity .4s, filter .4s; }
.tv-band { margin: 14px 0 0; padding: 10px 16px; border-radius: 12px; font-weight: 700; color: #FDE7A6; text-align: center; background: repeating-linear-gradient(135deg, rgba(251,191,36,.2) 0 12px, rgba(251,191,36,.1) 12px 24px); border: 1px solid rgba(251,191,36,.45); }
.tv-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 22px; padding: 22px 0; align-items: start; }
.tv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-content: start; }
.tv-grid.few { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.tvt { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 16px; background: rgba(var(--panel-rgb),.9); border: 1px solid var(--line); border-top: 3px solid var(--c, var(--unknown)); position: relative; transition: border-color .3s, transform .3s var(--ease); }
.tvt.s-down { background: linear-gradient(180deg, rgba(248,113,113,.16), rgba(var(--panel-rgb),.9) 70%); border-color: rgba(248,113,113,.5); border-top-color: var(--down); }
.tvt.s-degraded { background: linear-gradient(180deg, rgba(251,191,36,.10), rgba(var(--panel-rgb),.9) 70%); }
.tvt.is-hi { border-color: rgba(56,189,248,.7); box-shadow: 0 0 0 3px rgba(56,189,248,.18), 0 20px 50px -20px rgba(56,189,248,.5); transform: translateY(-2px); }
.tvt.is-stale { background-image: repeating-linear-gradient(135deg, rgba(251,191,36,.06) 0 10px, transparent 10px 20px); }
.tvt-h { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.tvt-gl .gl { width: 20px; height: 20px; margin-top: 3px; }
.tvt-n { display: flex; flex-direction: column; min-width: 0; }
.tvt-n strong { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvt-host { font: 13px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvt-ms { font-size: 24px; font-weight: 700; }
.tvt-ms small { font-size: 13px; color: var(--muted); font-weight: 400; }
.tvt-hb .hb { height: 28px; }
.tvt-f { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; }
.tvt-bars .bars { height: 16px; }
.tvt-up { font-size: 15px; font-weight: 700; }
.tvt-tls { font-size: 13px; color: var(--muted); }
.tv-side { position: sticky; top: 16px; }
.tv-hi { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 18px; background: rgba(var(--panel-rgb),.92); border: 1px solid var(--line-strong); }
.tv-hi-h { display: flex; gap: 12px; align-items: center; }
.tv-hi-h .gl { width: 22px; height: 22px; }
.tv-hi-h strong { display: block; font-size: 20px; }
.tv-hi-h span { font: 13px var(--mono); }
.tv-tick { display: flex; align-items: center; gap: 16px; padding: 14px 0 calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); overflow: hidden; white-space: nowrap; font-size: 15px; }
.tick-l { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 700; flex: none; }
.tick { display: flex; gap: 28px; overflow: hidden; }
.tk { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.tk strong { color: var(--text); }
.tk.is-open.tk-down strong { color: #FFD9D9; }
.tk-c { color: var(--faint); }
.tv-quiet { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); }
.tv-empty { padding: 60px; color: var(--muted); text-align: center; grid-column: 1 / -1; }
.tv-corner { position: fixed; right: 18px; bottom: 60px; display: flex; gap: 6px; align-items: center; opacity: .5; transition: opacity .3s; z-index: 5; }
.tv-corner:hover, .tv-corner:focus-within { opacity: 1; }
body.tv-idle .tv-corner { opacity: 0; }
.tv-c-l { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--faint); margin-right: 6px; }
.tv-c-b { background: rgba(var(--panel-rgb),.85); border: 1px solid var(--line); }
/* "Sound is off" on wall screens: stays visible (no idle fade) – it needs someone to act */
.tv-audio { position: fixed; left: 18px; bottom: 60px; z-index: 6; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: rgba(var(--panel-rgb),.94); border: 1px solid rgba(251,191,36,.6); color: #FDE68A; font: 600 14px/1.2 var(--font); cursor: pointer; }
.tv-audio[hidden] { display: none; }
body.tv.red-alert .tvw::after { content: ""; position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 3px rgba(248,113,113,.55), inset 0 0 120px rgba(248,113,113,.18); animation: tv-alert 3s ease-in-out infinite; }
@keyframes tv-alert { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* signed out on a wall */
body.tv-out { background: #0B0A06; }
body.tv-out::before { opacity: 0; }
.tv-out-w { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; background: radial-gradient(800px 500px at 50% 45%, rgba(251,191,36,.14), transparent 70%); }
.tv-out-sh { width: min(300px, 50vw); height: auto; margin-bottom: 10px; }
.tv-out-sh path { fill: rgba(251,191,36,.08); stroke: var(--warn); stroke-width: 6; stroke-linejoin: round; stroke-dasharray: 14 10; }
.tv-out-t { font-size: clamp(26px, 3.4vw, 48px); color: #FDE7A6; letter-spacing: -.02em; }
.tv-out-at { color: var(--muted); font-size: 16px; }
.tv-out-p { color: var(--text); font-size: 17px; margin-bottom: 8px; }

/* ---------------- motion / contrast modes ---------------- */
body[data-motion="calm"] .panel, body[data-motion="off"] .panel, body[data-motion="calm"] .cbody.has-pane .cpane, body[data-motion="off"] .cbody.has-pane .cpane { backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-motion="calm"]::before { animation: none; }
body[data-motion="off"] *, body[data-motion="off"] *::before, body[data-motion="off"] *::after, body[data-motion="off"]::before { animation: none !important; transition: none !important; }
body[data-motion="off"] .spin, body[data-motion="off"] .is-busy::after { animation: spin 1.6s linear infinite !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, body::before { animation: none !important; transition: none !important; }
  .spin, .is-busy::after { animation: spin 1.6s linear infinite !important; }
  .panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
html.is-hidden *, html.is-hidden *::before, html.is-hidden *::after, html.is-hidden body::before { animation-play-state: paused !important; }
body[data-contrast="high"] { --line: rgba(var(--line-rgb),.35); --line-strong: rgba(var(--line-rgb),.55); --muted: #B9C8D9; --faint: #93A7BF; }
body[data-contrast="high"] .panel, body[data-contrast="high"] .hdr, body[data-contrast="high"] .cpane { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--panel); }
body[data-contrast="high"] .cell .hex { stroke-width: 3; }
body[data-contrast="high"] .hb-ok { opacity: 1; }
@media (prefers-contrast: more) {
  :root { --line: rgba(var(--line-rgb),.35); --line-strong: rgba(var(--line-rgb),.55); }
  .panel, .hdr { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--panel); }
}
body.no-glyphs .c-st .gl, body.no-glyphs .cnt .gl { display: none; }
body.no-glyphs .c-st::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--unknown)); }
body.no-glyphs .cnt::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--unknown)); }
.cnt-up { --c: var(--up); } .cnt-degraded { --c: var(--warn); } .cnt-down { --c: var(--down); } .cnt-paused { --c: var(--paused); } .cnt-unknown { --c: var(--unknown); }

/* ---------------- responsive ---------------- */
.show-m { display: none !important; }
@media (max-width: 1279px) {
  .sv-main { grid-template-columns: minmax(0, 1fr) 300px; }
  .tv-body { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 1023px) {
  .hide-s { display: none !important; }
  .sv-main { grid-template-columns: minmax(0, 1fr); }
  .sv-side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .onb { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 620px; margin: 0 auto; }
  .onb-hero { max-width: 380px; margin: 0 auto; width: 100%; }
  .tv-body { grid-template-columns: minmax(0, 1fr); }
  .tv-side { position: static; }
  .fstrip { grid-template-columns: auto 1fr; }
  .fs-mini { display: none; }
  .deck { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .w { grid-column: span min(var(--w, 6), 6); }
}
@media (max-width: 719px) {
  .sv-mstat { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 12px 14px; }
  .sv-mstat .fs-sent { font-size: 17px; gap: 10px; }
  :root { --gutter: 16px; --hdr: 54px; }
  .main { padding: 12px var(--gutter) 20px; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .hide-m { display: none !important; }
  .show-m { display: inline-flex !important; }
  .hdr-in { gap: 8px; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .wm { display: none; }
  .hdr-mid { display: none; }
  .hdr-counts { flex: 1; display: flex; justify-content: center; }
  .cnt { padding: 0 6px; gap: 5px; font-size: 13.5px; }
  .tbar { gap: 10px; margin: 12px 0 10px; }
  .vtabs { order: 2; flex: 1 1 100%; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .tbar-r { order: 1; width: 100%; margin-left: 0; flex-wrap: nowrap; }
  .qf-wrap { flex: 1; min-width: 0; }
  .qf { width: 100%; }
  .fstrip { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 14px; }
  .fstrip .iring .ring { width: 96px; height: 96px; }
  .fs-sent { font-size: 17px; gap: 10px; }
  .fstat dd { font-size: 15px; }
  .fstats { gap: 4px 14px; }
  .chead { display: none; }
  .clist { padding: 0; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; }
  .rows { display: flex; flex-direction: column; gap: 8px; }
  .row-li { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
  .row-li:last-child { border-bottom: 1px solid var(--line); }
  .row {
    height: auto; min-height: 44px; padding: 12px 14px; row-gap: 8px; column-gap: 10px;
    grid-template-columns: 20px minmax(0, 1fr) auto auto; grid-template-areas: "st nm lat age" "hb hb hb hb" "bars bars up tls";
  }
  .row > .c-grip, .row > .col-spark, .row > .col-code, .row > .col-tags, .row > .col-interval { display: none; }
  .row > .col-status { grid-area: st; } .row > .col-name { grid-area: nm; } .row > .col-latency { grid-area: lat; } .row > .col-age { grid-area: age; }
  .row > .col-heartbeat { grid-area: hb; } .row > .col-bars { grid-area: bars; } .row > .col-uptime { grid-area: up; } .row > .col-tls { grid-area: tls; }
  .row .hb { height: 22px; }
  .row .c-up { flex-direction: row; }
  .row .c-up .since { flex-basis: auto; margin-left: 4px; }
  body[data-density="ultra"] .row { grid-template-areas: "st nm lat age"; padding: 8px 12px; }
  body[data-density="ultra"] .row > .col-heartbeat, body[data-density="ultra"] .row > .col-bars, body[data-density="ultra"] .row > .col-uptime, body[data-density="ultra"] .row > .col-tls { display: none; }
  body[data-density="compact"] .row { padding: 9px 12px; row-gap: 6px; }
  .grp-li { padding: 8px 0 0; }
  .row-li.is-stale .row > .cell:not(.col-name):not(.col-age):not(.col-status) { opacity: .6; }
  .shield.is-list .sh-list { grid-template-columns: minmax(0, 1fr); }
  .sv-side { grid-template-columns: minmax(0, 1fr); }
  .sv-card:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr); text-align: left; align-items: center; gap: 10px 16px; }
  .sv-card:first-child .sv-ring { grid-row: span 3; }
  .sv-card:first-child .fs-sent { justify-content: flex-start; font-size: 17px; }
  .sv-card:first-child .fstats { justify-content: flex-start; grid-column: 1 / -1; }
  .sv-card:first-child .counts { flex-wrap: wrap; }
  .sv-card:first-child .sv-eng { justify-content: flex-start; }
  .sv-ring .ring { width: 112px; height: 112px; }
  .onb { padding: 0; min-height: 0; }
  .onb-hero { max-width: 260px; }
  .onb-t { font-size: 27px; }
  .onb-p { font-size: 15px; }
  .onb-row { flex-direction: column; padding: 8px; }
  .onb-row .btn { width: 100%; }
  .onb-feat { grid-template-columns: minmax(0, 1fr); }
  .onb-feat li { flex-direction: row; align-items: center; padding: 10px 12px; }
  .deck { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .w { grid-column: 1 / -1; grid-row: auto; min-height: 120px; }
  .w-b { overflow: visible; }
  .w-engine .w-b { flex-direction: column; align-items: stretch; }
  .w-tl-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .kw-row { grid-template-columns: minmax(0, 1fr); }
  .dstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail { padding: 6px 16px 22px; }
  .slide { width: 100vw; border-left: 0; }
  .slide-h { padding: 12px 12px 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); }
  .slide-b { padding: 16px 16px 28px; }
  .pcards { grid-template-columns: minmax(0, 1fr); }
  .pcard { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
  .pcard-art { grid-row: span 2; height: 52px; margin: 0; }
  .srow-c { flex: 1 1 100%; justify-content: flex-start; }
  .pal { top: 0; width: 100vw; border-radius: 0 0 20px 20px; max-height: 85vh; }
  .dlg { top: auto; bottom: 0; left: 0; transform: none; width: 100vw; border-radius: 20px 20px 0 0; max-height: 88vh; padding-bottom: env(safe-area-inset-bottom); }
  .dlg.pal { top: 0; bottom: auto; border-radius: 0 0 20px 20px; }
  .toasts { left: 16px; right: 16px; align-items: stretch; }
  .t { min-width: 0; max-width: none; }
  .auth-card { padding: 24px 18px 18px; border-radius: 20px; }
  .code { grid-template-columns: repeat(6, minmax(0, 44px)); gap: 6px; }
  .code-b { width: 100%; }
  .tvw { padding: 0 16px; }
  .tv-top { gap: 14px; }
  .tv-meta { align-items: flex-start; }
  .tv-grid, .tv-grid.few { grid-template-columns: minmax(0, 1fr); }
  .btn, .seg-b, .vtab, .cnt, .icon-btn, .menu-i, .more-b { min-height: 44px; }
  .seg-b { min-width: 44px; }
  .btn-sm { min-height: 40px; }
  .ftr-in { justify-content: center; }
}
@media (pointer: coarse) {
  .grip { opacity: 1; width: 32px; height: 40px; }
  .switch { width: 48px; height: 28px; }
  .switch-k { width: 22px; height: 22px; }
  .switch[aria-checked="true"] .switch-k { transform: translateX(20px); }
}

/* ---------------- print ---------------- */
@media print {
  body { background: #fff; color: #000; }
  body::before, body::after, .hdr, .sweep, .tbar, .deck-wrap, .ftr, .toasts, .layer, .cpane { display: none !important; }
  .panel { background: #fff; border-color: #ccc; box-shadow: none; backdrop-filter: none; }
  .host, .muted, .c-age { color: #444; }
}
.sent-e:empty { display: none; }
@media (max-width: 719px) {
  .fstrip .iring .ring { width: 104px; height: 104px; }
  .fstrip .iring-v { font-size: 19px; }
  .fstrip .iring-cap { letter-spacing: .06em; font-size: 9px; }
}

/* ---------------- invites (owner, §12.8) ---------------- */
.inv { display: flex; flex-direction: column; gap: 16px; }
.inv-mode { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--ink-rgb),.35); }
.inv-tools { display: flex; flex-direction: column; gap: 8px; }
.inv-limit { color: var(--warn); }
.inv-empty { padding: 26px 16px 6px; text-align: center; }
.inv-empty-t { font-weight: 600; font-size: 15px; color: var(--muted); }
.inv-empty + .inv-tools .srow-a { justify-content: center; }
.inv-skels { display: flex; flex-direction: column; gap: 10px; }
.inv-skel { height: 132px; }
.inv-errbox { display: flex; flex-direction: column; gap: 10px; }
.inv-list { display: flex; flex-direction: column; gap: 10px; }
.inv-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(var(--ink-rgb),.32); min-width: 0; }
.inv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.inv-t { font-size: 15px; font-weight: 650; line-height: 1.35; min-width: 0; flex: 1 1 180px; overflow-wrap: anywhere; }
.inv-t.is-untitled { color: var(--muted); font-weight: 600; font-style: italic; }
.inv-t:focus, .inv-t:focus-visible, .inv-reveal .dlg-t:focus, .inv-reveal .dlg-t:focus-visible { outline: none; }
.inv-card.is-inactive { background: rgba(var(--ink-rgb),.18); border-style: dashed; }
.inv-card.is-inactive .inv-code { color: var(--faint); }
.inv-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inv-badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; font-size: 12px; font-weight: 650; border: 1px solid var(--line-strong); white-space: nowrap; }
.inv-gl { width: 14px; height: 14px; flex: none; }
.inv-st.is-active { color: var(--up); border-color: rgba(94,234,212,.45); background: rgba(94,234,212,.08); }
.inv-st.is-used { color: var(--info); border-color: rgba(56,189,248,.45); background: rgba(56,189,248,.08); }
.inv-st.is-expired { color: var(--warn); border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.07); }
.inv-st.is-revoked { color: #FCA5A5; border-color: rgba(248,113,113,.45); background: rgba(248,113,113,.07); }
.inv-lift { color: var(--paused); border-color: rgba(167,139,250,.5); background: rgba(167,139,250,.09); }
.inv-code { font: 500 13.5px/1.3 var(--mono); letter-spacing: .06em; color: var(--muted); }
.inv-meta { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.inv-meta li { white-space: nowrap; }
.inv-sw { display: flex; flex-direction: column; gap: 3px; padding: 10px 0 2px; border-top: 1px solid var(--line); margin-top: 2px; }
.inv-form .inv-sw-form { padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-top: 0; }
.inv-sw-r { display: flex; align-items: center; gap: 12px; }
.inv-sw-l { font-weight: 600; font-size: 14px; cursor: pointer; }
.inv-sw-h { padding-left: 54px; }
.inv-sw .switch[aria-busy="true"] { opacity: .6; cursor: progress; }
.inv-err { margin-top: 2px; }
.inv-sw .inv-err { padding-left: 54px; }
.inv-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.inv-acts .grow { flex: 1; }
.inv-used-b { margin-left: -10px; }
.inv-chev { width: 16px; height: 16px; transition: transform .18s var(--ease); }
.inv-used-b[aria-expanded="false"] .inv-chev { transform: rotate(-90deg); }
.inv-used { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--ink-rgb),.4); }
.inv-used-l { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.inv-used-l li { overflow-wrap: anywhere; }
.inv-used-e { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
.inv-trunc { text-align: center; }
.inv-form { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 14px; border: 1px solid rgba(56,189,248,.35); background: rgba(56,189,248,.045); }
.inv-form-t { font-size: 15px; }
.inv-fl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.inv-count { font-size: 12px; color: var(--faint); }
.inv-count.is-max { color: var(--down); }
.inv-sw-note { margin-bottom: -6px; }
.inv-form .inv-sw-form { background: rgba(var(--ink-rgb),.45); }
.inv-sw .inv-sw-h { font-size: 12px; }
.inv-form-a { margin-top: 0; }
.inv-seg[aria-invalid="true"] { border-color: var(--down); }
.inv-form .inv-seg { align-self: flex-start; }
/* reveal dialog */
.inv-rv { display: flex; flex-direction: column; gap: 14px; }
.inv-warn { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; color: #FDE7A6; background: rgba(251,191,36,.09); border: 1px solid rgba(251,191,36,.45); font-size: 13.5px; font-weight: 600; }
.inv-warn .inv-gl { color: var(--warn); margin-top: 2px; }
.inv-rv-code { display: flex; gap: 10px; align-items: stretch; }
.inv-code-in { flex: 1; min-width: 0; min-height: 52px; text-align: center; font: 600 clamp(17px, 5.2vw, 24px)/1.2 var(--mono); letter-spacing: .08em; color: var(--text); background: rgba(var(--ink-rgb),.75); }
.inv-rv-code .inv-copy { min-height: 52px; }
.inv-text { font: 400 13.5px/1.5 var(--font); min-height: 150px; resize: vertical; white-space: pre-wrap; }
.inv-rv-a { display: flex; justify-content: flex-end; }
.inv-copy.is-done { color: var(--up); border-color: rgba(94,234,212,.55); }
.inv-copy.btn-primary.is-done { color: #04121A; }
.inv-copy-h { color: var(--warn); }
.inv-rv-lbl { overflow-wrap: anywhere; }
.inv-reveal { width: min(580px, calc(100vw - 32px)); }
@media (prefers-reduced-motion: reduce) { .inv-chev, .inv-sw .switch-k { transition: none; } }
@media (max-width: 719px) {
  .inv-card { padding: 14px; }
  /* Used by → its list → Revoke, top to bottom */
  .inv-acts { display: contents; }
  .inv-acts .grow { display: none; }
  .inv-used { order: 1; }
  .inv-revoke { order: 2; }
  .inv-card .btn-sm { min-height: 44px; }
  .inv-form .inv-seg { align-self: stretch; }
  .inv-acts .btn, .inv-tools .btn, .inv-form-a .btn, .inv-errbox .btn { width: 100%; }
  .inv-used-b { margin-left: 0; justify-content: flex-start; }
  .inv-form { padding: 14px; }
  .inv-form-a { flex-direction: column-reverse; align-items: stretch; }
  .inv-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .inv-filter .inv-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-sw-r { min-height: 44px; }
  .inv-sw-h, .inv-sw .inv-err { padding-left: 0; }
  .inv-rv-code { flex-direction: column; }
  .inv-rv-a .btn, .inv-rv .form-a .btn { width: 100%; }
  .inv-rv .form-a .grow { display: none; }
  .inv-reveal { width: 100vw; }
}
@media (max-width: 719px) {
  .inv-dlg .form-a { flex-direction: column-reverse; align-items: stretch; }
  .inv-dlg .form-a .grow { display: none; }
}

/* ---------- visual red alert (alarmfx.js): warp drop-out + red pulse for 20 s when a site goes down ---------- */
.wfx { position: fixed; inset: 0; z-index: 900; pointer-events: none; display: grid; place-items: center; animation: wfx-in .35s ease-out both; }
.wfx.is-out { animation: wfx-out .6s ease-in forwards; }
.wfx-c { position: absolute; inset: 0; width: 100%; height: 100%; }
.wfx-pulse { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(255,40,30,.05) 30%, rgba(255,35,25,.42) 100%);
  box-shadow: inset 0 0 0 4px rgba(255,80,70,.75), inset 0 0 160px rgba(255,40,30,.45); animation: wfx-pulse 1s ease-in-out infinite; }
.wfx.is-calm .wfx-pulse { animation: none; opacity: .75; }
.wfx-card { position: relative; pointer-events: auto; display: grid; gap: 8px; justify-items: center; text-align: center; min-width: min(420px, calc(100vw - 32px));
  max-width: calc(100vw - 32px); padding: 22px 28px 18px; border-radius: 18px; background: rgba(20,4,6,.82); border: 1px solid rgba(255,90,80,.7);
  box-shadow: 0 0 60px -10px rgba(255,60,50,.8), 0 30px 80px -20px rgba(0,0,0,.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wfx-k { margin: 0; font: 800 clamp(22px, 4vw, 40px)/1 var(--mono, ui-monospace, monospace); letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; color: #FF5A4E;
  text-shadow: 0 0 22px rgba(255,90,78,.9); animation: wfx-blink .5s steps(1) infinite; }
.wfx.is-calm .wfx-k { animation: none; }
.wfx-t { margin: 4px 0 0; font-weight: 800; font-size: clamp(26px, 5vw, 56px); line-height: 1.08; color: #fff; overflow-wrap: anywhere; text-shadow: 0 0 26px rgba(255,90,78,.55); }
.wfx-s { margin: 0; font: 700 13px/1 var(--mono, ui-monospace, monospace); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: #FFB4AC; }
.wfx-card.is-test .wfx-s { display: none; }
.wfx-sites[hidden] { display: none; }
.wfx-sites { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 15px; color: #FFD9D5; }
.wfx-sites li { display: inline-flex; align-items: center; gap: 6px; }
.wfx-card.is-test .wfx-t { color: #FDE68A; }
.wfx-track { display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 4px; }
.wfx-bar { display: block; height: 100%; background: #FF5A4E; transform-origin: left center; }
.wfx-x { margin-top: 4px; }
@keyframes wfx-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes wfx-blink { 50% { opacity: .35; } }
@keyframes wfx-in { from { opacity: 0; } }
@keyframes wfx-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wfx, .wfx.is-out, .wfx-pulse, .wfx-k { animation: none !important; } .wfx-pulse { opacity: .75; } }
.wfx-card.is-test .wfx-t, .kfx-dock.is-test .kfx-t { color: #FDE68A; }

/* scanner look (behaviour.alertTheme = scanner): big red sweeping light along the bottom, the down site(s) in the middle */
.kfx { position: fixed; inset: 0; z-index: 900; pointer-events: none; animation: wfx-in .35s ease-out both; }
.kfx.is-out { animation: wfx-out .6s ease-in forwards; }
.kfx-glow { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(255,30,20,.32), rgba(255,30,20,0) 55%); box-shadow: inset 0 -6px 0 rgba(255,50,40,.6); }
.kfx-dock { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(150px, 30vh, 320px); pointer-events: auto;
  background: linear-gradient(180deg, #120203, #050000 40%); border-top: 1px solid rgba(255,70,60,.55);
  box-shadow: 0 -30px 80px -20px rgba(255,30,20,.55); display: grid; place-items: center; overflow: hidden; }
.kfx-c { position: absolute; left: 2%; right: 2%; top: 50%; width: 96%; height: 46%; transform: translateY(-50%); }
.kfx-mid { position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; padding: 0 16px; max-width: min(1100px, calc(100vw - 32px)); }
.kfx-k { margin: 0; font: 800 clamp(12px, 1.4vw, 16px)/1 var(--mono, ui-monospace, monospace); letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; color: #FFB4AC; text-shadow: 0 0 8px #000, 0 0 2px #000; }
.kfx-t { margin: 0; font-weight: 900; font-size: clamp(30px, 6.5vw, 84px); line-height: 1.02; color: #fff; overflow-wrap: anywhere;
  text-shadow: 0 0 3px #000, 0 2px 14px rgba(0,0,0,.95), 0 0 40px rgba(0,0,0,.8); }
.kfx-sites { color: #FFE1DD; text-shadow: 0 0 6px #000; }
.kfx-x { position: absolute; right: 16px; top: 12px; }
.kfx-track { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; border-radius: 0; }
.kfx.is-calm .kfx-glow { box-shadow: inset 0 -6px 0 rgba(255,50,40,.6); }
@media (prefers-reduced-motion: reduce) { .kfx, .kfx.is-out { animation: none !important; } }

/* start guard (boot-guard.js): shown instead of an endless "Connecting…" */
.boot-guard { display: grid; gap: 12px; justify-items: center; max-width: 420px; margin: 0 auto; text-align: center; }
.boot-guard-t { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }

/* site theme picker (Settings → Display) – each tile previews its theme's own ink / panel / line colours */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; width: 100%; max-width: 520px; }
.theme-t { display: grid; gap: 6px; padding: 8px; border-radius: 12px; border: 2px solid var(--line); background: transparent; color: var(--text); cursor: pointer; font: 600 12.5px/1.2 var(--font); text-align: left; }
.theme-t.is-on { border-color: var(--accent); }
.theme-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-p { display: block; height: 38px; border-radius: 8px; background: linear-gradient(135deg, var(--tp) 0 50%, var(--ti) 50%); box-shadow: inset 0 0 0 1px var(--tl); }
.th-midnight { --ti: #060B14; --tp: #0E1A2C; --tl: rgba(148,190,230,.3); }
.th-graphite { --ti: #090A0C; --tp: #1A1B1F; --tl: rgba(196,202,212,.3); }
.th-slate    { --ti: #111620; --tp: #222A37; --tl: rgba(180,198,222,.3); }
.th-ocean    { --ti: #020E16; --tp: #082232; --tl: rgba(120,205,235,.3); }
.th-forest   { --ti: #040D09; --tp: #0D2118; --tl: rgba(150,215,180,.3); }
.th-plum     { --ti: #0C0814; --tp: #1E142E; --tl: rgba(200,172,240,.3); }
.th-ember    { --ti: #0F0907; --tp: #261611; --tl: rgba(238,190,160,.3); }

.dom p { margin: 4px 0; }
.hb-box { margin-top: 10px; }
.hb-line { display: flex; flex-direction: column; gap: 4px; }
.hb-line .inl { flex-wrap: nowrap; }
.hb-code { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 6px 8px; border-radius: 8px; background: rgba(var(--ink-rgb),.6); border: 1px solid var(--line); font: 12.5px/1.4 var(--mono); }
.dlg-hb { width: min(620px, calc(100vw - 32px)); }
.dlg-hb .dlg-b { overflow: auto; }
.hb-card p { margin: 6px 0; }
.dom-exp.is-warn { color: var(--warn); }
.prov-pick { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.chk-prov { font-size: 13.5px; align-items: center; }
.pair-wrap { min-height: 80vh; display: grid; place-items: center; padding: 24px; }
.pair { max-width: 640px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.pair-t { margin: 0; font-size: clamp(26px, 4vw, 40px); }
.pair-code { margin: 10px 0; font: 800 clamp(34px, 8.5vw, 120px)/1 var(--mono); letter-spacing: .06em; color: var(--accent); white-space: nowrap; }
.pair-in { font-size: 22px; letter-spacing: .1em; text-transform: uppercase; }
.act { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.act-i { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.act-i.is-warn .act-t { color: var(--warn); }
/* operations: maintenance, acknowledgement, channels, many sites */
.chip-maint { color: #DDD3FF; background: rgba(167,139,250,.14); border-color: rgba(167,139,250,.45); }
.ack { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(248,113,113,.35); background: rgba(248,113,113,.06); display: flex; flex-direction: column; gap: 8px; }
.ack.is-acked { border-color: rgba(94,234,212,.4); background: rgba(94,234,212,.06); }
.ack-t { margin: 0; display: flex; gap: 6px; align-items: center; font-size: 13.5px; }
.ack-row .inp { flex: 1 1 220px; min-width: 0; }
.mlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mli { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); }
.mli.is-on { border-color: rgba(167,139,250,.5); }
.mli-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.chan-add { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.maint .ssec-t { margin: 6px 0 0; }
.days { gap: 4px 12px; }
.chk-day { font-size: 13px; }
.bulk-ta { width: 100%; font-family: var(--mono); font-size: 13px; resize: vertical; }
.bulk-out, .bulk-pick { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.bulk-li { font-size: 13px; overflow-wrap: anywhere; }
.ok-t { color: var(--up); } .err-t { color: #FCA5A5; }
.dlg-bulk { width: min(680px, calc(100vw - 32px)); }
.dlg-bulk .dlg-b, .dlg-maint .dlg-b { overflow: auto; }
.sla-over dd { color: #FCA5A5; }

/* your own alarm sound (Settings → Behaviour) */
.snd { gap: 10px; align-items: stretch; }
.snd-card { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(var(--ink-rgb),.35); }
.snd-new { border-style: dashed; }
.snd-t { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.snd-name { overflow-wrap: anywhere; }
label.btn.is-disabled { opacity: .5; pointer-events: none; }

/* ---------- team members and roles ---------- */
.team-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.team-i { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--ink-rgb),.3); flex-wrap: wrap; }
.team-i > .ico { color: var(--muted); }
.team-i.is-invited { border-style: dashed; }
.team-t { flex: 1 1 200px; display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.team-a { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.team-f .inl { flex-wrap: wrap; }
.team-roles { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.note-role { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-strong); color: var(--muted); font-size: 13px; }
/* a viewer sees everything but no buttons that would be refused (the server refuses them anyway) */
body[data-role="viewer"] .btn-add, body[data-role="viewer"] #ack-btn, body[data-role="viewer"] .hb-hint,
body[data-role="viewer"] [data-fkey="check"], body[data-role="viewer"] [data-fkey="pause"], body[data-role="viewer"] [data-fkey="maint"],
body[data-role="viewer"] [data-fkey="edit"], body[data-role="viewer"] [data-fkey="delete"], body[data-role="viewer"] .needs-edit { display: none !important; }
.team-a select.inp { min-width: 112px; }

/* ---------- two-step sign-in ---------- */
.tf-qr { display: flex; justify-content: center; padding: 6px 0; }
.tf-qr .qr { border-radius: 10px; max-width: 100%; height: auto; }
.tf-key summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.tf-secret { font-size: 15px; letter-spacing: .06em; overflow-wrap: anywhere; margin: 8px 0 4px; user-select: all; }
.tf-in { font-size: 20px; letter-spacing: .18em; max-width: 220px; }
.tf-codes { columns: 2; column-gap: 24px; margin: 0; padding: 12px 12px 12px 34px; border-radius: 12px; border: 1px dashed var(--line-strong); font-size: 15px; letter-spacing: .04em; }
.tf-codes li { padding: 2px 0; break-inside: avoid; }
.tf-on { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0; }
.tf-low { color: var(--warn); font-weight: 600; }
@media (max-width: 420px) { .tf-codes { columns: 1; } }

/* ---------- status pages (Settings) ---------- */
.sp-linkrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sp-link { overflow-wrap: anywhere; font-size: 13.5px; }
.sp-addr { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sp-prefix { font-size: 13px; overflow-wrap: anywhere; }
.sp-slug { flex: 1 1 160px; min-width: 140px; }
.sp-sites { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sp-site { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sp-site .chk { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.sp-pub { flex: 0 1 220px; }
.sp-cur { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); border-left: 4px solid var(--accent, #5eead4); }
.sp-cur p { margin: 0 0 4px; overflow-wrap: anywhere; white-space: pre-line; }
.sp-cur-warn { border-left-color: var(--warn); }
.sp-notice-ed { margin-top: 8px; }
.sp-site { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 210px); }
@media (max-width: 420px) { .sp-site { grid-template-columns: 1fr; } }

/* public incident updates (detail) and the status badge (settings) */
.iu { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.iu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.iu-i { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 8px; }
.iu-t { grid-column: 1 / -1; margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.iu-s { font-weight: 600; font-size: 12.5px; }
.iu-investigating { color: var(--down, #f87171); } .iu-identified { color: var(--warn); } .iu-monitoring { color: var(--accent, #5eead4); } .iu-resolved { color: var(--up, #34d399); }
.iu-form { display: flex; flex-direction: column; gap: 6px; }
.iu-form textarea.inp { min-height: 60px; }
.sp-badge-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-badge { height: 20px; width: auto; }
.iu-form select.inp { min-width: 150px; }

/* passkeys */
.pk-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pk-i { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--ink-rgb),.3); flex-wrap: wrap; }
.pk-i > .ico { color: var(--muted); }
.pk-t { flex: 1 1 200px; display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.pk-btn { margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }