/* SPDX-License-Identifier: Apache-2.0
 * SPDX-FileCopyrightText: 2026 T-Systems International GmbH
 * SPDX-FileContributor: Stefan Othmer
 *
 * Maintained by the HCS Platform Engineering team.
 *
 * The shell's styles: design tokens, layout, navigation and the components
 * every page uses. Moved out of index.html on 2026-10-08, in document order
 * (the cascade depends on it); page-specific styles are in css/pages/.
 */
  :root{
    --bg:#f6f7f9; --surface:#ffffff; --surface-2:#fbfcfd;
    --border:#e4e8ee; --border-2:#eef1f5;
    --ink:#14181f; --ink-2:#586173; --ink-3:#8b93a2;
    /* --ink-1 IS THE PRIMARY INK, and for a long time it was nothing at all:
       113 declarations read var(--ink-1) and no block ever defined it. For an
       inherited property that is not an error anybody sees -- `color` simply
       falls back to the inherited value -- so every one of those elements
       took whatever its parent happened to be, which in the dark theme is
       usually right by accident and in the light theme is not. Defined as an
       alias so it re-values with the theme and the 113 stay one declaration. */
    --ink-1:var(--ink);
    --brand:#e20074; --brand-ink:#b3005c; --brand-wash:#fbe7f2;
    --ok:#1f7a34; --ok-bg:#e6f3e9; --ok-bd:#bfe0c8;
    --warn:#8a5d00; --warn-bg:#fbf0d2; --warn-bd:#ecd79a;
    --crit:#bf2626; --crit-bg:#fbe5e5; --crit-bd:#f0c2c2;
    --focus:#3b5bdb;
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
    --shadow:0 1px 2px rgba(20,24,31,.04),0 6px 20px rgba(20,24,31,.06);
    --shadow-lg:0 10px 40px rgba(20,24,31,.18);
  }
  /* Dark theme: same tokens, re-valued. Neutrals carry a slight cool bias so
     they read as chosen, not a flat grey; magenta stays the single accent. */
  :root[data-theme="dark"]{
    --bg:#0e1014; --surface:#171a21; --surface-2:#1d212a;
    --border:#282e39; --border-2:#20252e;
    --ink:#e7eaf0; --ink-2:#a3adbd; --ink-3:#6b7482;
    --brand:#ec1a86; --brand-ink:#ff67b0; --brand-wash:#2a0f1f;
    --ok:#5cc47c; --ok-bg:#13251a; --ok-bd:#274a33;
    --warn:#e0b155; --warn-bg:#2a2412; --warn-bd:#4c3f1c;
    --crit:#f08a82; --crit-bg:#2a1616; --crit-bd:#4d2828;
    --focus:#6c8cff;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 20px rgba(0,0,0,.45);
    --shadow-lg:0 10px 40px rgba(0,0,0,.6);
  }
  *{box-sizing:border-box}
  body{transition:background-color .2s ease,color .2s ease}
  html,body{margin:0}
  body{
    background:var(--bg);color:var(--ink);font-family:var(--sans);
    font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
  }
  /* One cosmos, one app: in the dark theme every page floats on the same calm
     starfield the sidenav and the universe live in -- very sparse stars, a
     whisper of brand nebula, an almost imperceptible drift. Pure CSS, zero
     runtime cost; the light theme stays clean. Content cards stay opaque. */
  :root[data-theme="dark"] body{background:transparent}
  :root[data-theme="dark"] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background-color:#0e1014;
    background-image:
      radial-gradient(1.3px 1.3px at 11% 16%,rgba(220,235,255,.40) 50%,transparent 51%),
      radial-gradient(1px 1px at 27% 64%,rgba(207,226,255,.28) 50%,transparent 51%),
      radial-gradient(1.5px 1.5px at 41% 32%,rgba(235,244,255,.34) 50%,transparent 51%),
      radial-gradient(1px 1px at 58% 78%,rgba(255,233,208,.25) 50%,transparent 51%),
      radial-gradient(1.2px 1.2px at 69% 12%,rgba(207,226,255,.32) 50%,transparent 51%),
      radial-gradient(1px 1px at 82% 51%,rgba(220,235,255,.26) 50%,transparent 51%),
      radial-gradient(1.4px 1.4px at 91% 85%,rgba(235,244,255,.30) 50%,transparent 51%),
      radial-gradient(1px 1px at 18% 89%,rgba(255,233,208,.22) 50%,transparent 51%),
      radial-gradient(1px 1px at 49% 6%,rgba(207,226,255,.24) 50%,transparent 51%),
      radial-gradient(1.2px 1.2px at 75% 33%,rgba(220,235,255,.26) 50%,transparent 51%),
      radial-gradient(120% 70% at 88% -12%,rgba(236,26,134,.045) 0%,transparent 60%),
      radial-gradient(140% 85% at -5% 112%,rgba(90,110,220,.05) 0%,transparent 60%),
      linear-gradient(180deg,#10121a 0%,#0d0f15 50%,#0b0d12 100%);
    animation:cosDrift 360s linear infinite alternate;}
  @keyframes cosDrift{from{background-position:0 0}to{background-position:-70px -34px}}
  /* The starfield above is a FIXED, full-viewport layer. Chrome paints it over
     every page element that does not sit in a layer of its own, however the
     z-index reads -- so cards lost their background, their headings and their
     numbers, while the few children that happen to carry `position:relative`
     (.sc-sli, .sc-tier, the status dot) still came through. That is what "the
     SLA page is not fully displayed" was, and the maintenance page with it.
     Nothing was wrong with the markup, the data or the CSS of the cards
     themselves; proven by rendering the live page headless and removing this
     one pseudo-element, which brought the whole page back.
     The content column gets its own stacking context, once, here. The sidenav
     (25), the top bars (20) and every overlay (60+) already sit above it. */
  main{position:relative;z-index:1}
  @media (prefers-reduced-motion:reduce){:root[data-theme="dark"] body::before{animation:none}}
  .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  a{color:var(--brand-ink);text-decoration:none}
  a:hover{text-decoration:underline}
  :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}

  /* App bar + automation strip stick together as one header block */
  /* Icon side-rail: quick jumps to real sections (not a page router) */
  .sidenav{position:fixed;left:0;top:0;bottom:0;width:216px;z-index:25;
    display:flex;flex-direction:column;gap:1px;padding:16px 12px;overflow-y:auto;
    background:var(--surface);
    /* A hard border between two different darks reads as a black bar down the
       screen. A soft edge lets the panel sit ON the page instead of beside it. */
    border-right:0;box-shadow:1px 0 0 color-mix(in srgb,var(--border) 45%,transparent),
                              14px 0 28px -18px rgba(0,0,0,.55);
    transition:opacity .45s ease, transform .45s ease}
  /* Horizon is an immersive foresight view: the left menu glides away and comes
     back when you leave it (or log out). */
  .sidenav.nav-hidden{opacity:0;transform:translateX(-110%);pointer-events:none}
  body.nav-hidden{margin-left:0}
  /* Universe mode: the sidenav does not leave -- it gently fades to a ghost
     floating over the cosmos and returns to full opacity on hover */
  .sidenav.nav-ghost{opacity:.14;transition:opacity .6s ease}
  .sidenav.nav-ghost:hover,.sidenav.nav-ghost:focus-within{opacity:.97}
  /* the sidebar always wears the universe: deep space + faint stars */
  .sidenav{background-color:#0e1014;background-image:radial-gradient(1.6px 1.6px at 18% 8%,rgba(220,235,255,.9) 50%,transparent 51%),radial-gradient(1px 1px at 62% 13%,rgba(255,233,208,.7) 50%,transparent 51%),radial-gradient(1.3px 1.3px at 84% 21%,rgba(207,226,255,.8) 50%,transparent 51%),radial-gradient(1px 1px at 35% 27%,rgba(207,226,255,.6) 50%,transparent 51%),radial-gradient(2px 2px at 74% 36%,rgba(255,244,225,.85) 50%,transparent 51%),radial-gradient(1px 1px at 12% 41%,rgba(207,226,255,.65) 50%,transparent 51%),radial-gradient(1.4px 1.4px at 52% 49%,rgba(220,235,255,.8) 50%,transparent 51%),radial-gradient(1px 1px at 88% 56%,rgba(255,233,208,.6) 50%,transparent 51%),radial-gradient(1px 1px at 28% 63%,rgba(207,226,255,.7) 50%,transparent 51%),radial-gradient(1.7px 1.7px at 66% 72%,rgba(235,244,255,.9) 50%,transparent 51%),radial-gradient(1px 1px at 15% 79%,rgba(255,233,208,.6) 50%,transparent 51%),radial-gradient(1.2px 1.2px at 80% 87%,rgba(207,226,255,.75) 50%,transparent 51%),radial-gradient(1px 1px at 45% 94%,rgba(220,235,255,.65) 50%,transparent 51%),radial-gradient(120% 60% at 50% 0%,rgba(236,26,134,.08) 0%,transparent 60%),radial-gradient(150% 80% at 20% 100%,rgba(90,110,220,.07) 0%,transparent 60%),linear-gradient(180deg,#10121b 0%,#0c0e15 45%,#090b10 100%)}
  .sidenav::-webkit-scrollbar{width:0}
  /* The mark above the first item is gone: the Argus eye already sits in the
     app bar, and one eye per screen is enough. */
  .sidenav .sn-logo{display:none}
  /* Item = full-width row: icon + label. Clean, readable, modern. */
  .sidenav button{all:unset;box-sizing:border-box;width:100%;border-radius:10px;
    display:flex;flex-direction:row;align-items:center;gap:12px;cursor:pointer;
    color:var(--ink-2);position:relative;padding:7px 12px;
    font:550 13px/1 inherit;transition:background .15s ease,color .15s ease}
  .sidenav button svg{width:19px;height:19px;flex:none;transition:transform .16s ease}
  .sidenav button[hidden]{display:none}
  .sidenav button:hover{background:var(--surface-2);color:var(--ink)}
  .sidenav button:active{background:color-mix(in srgb,var(--brand) 12%,var(--surface-2))}
  .sidenav button[aria-current="true"]{background:var(--brand-wash);color:var(--brand);font-weight:650}
  .sidenav button[aria-current="true"]::before{content:"";position:absolute;left:0;top:50%;
    transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--brand)}
  .sidenav button:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
  .sidenav .sn-tip{font-size:13px;font-weight:inherit;line-height:1;color:inherit;white-space:nowrap}
  .sidenav .sn-badge{position:static;margin-left:auto;box-shadow:none}
  .sidenav .sn-spacer{flex:1;min-height:8px}
  @media (prefers-reduced-motion:reduce){.sidenav button svg{transition:none}}
  /* Section = a subtle uppercase label + its rows; no boxes, one continuous panel */
  .sidenav .sn-group{display:flex;flex-direction:column;gap:1px;width:100%;margin-top:9px}
  .sidenav .sn-group.allhidden{display:none}
  .sidenav button.sn-gh{width:100%;justify-content:flex-start;gap:0;padding:4px 12px 5px;
    cursor:default;pointer-events:none;background:none}
  /* The chevron was hidden and the header did nothing -- six labels over a
     flat list of twenty-three. It collapses now, and remembers. */
  .sidenav .sn-gh .sn-tip{display:none}
  .sidenav .sn-gh{cursor:pointer;display:flex;align-items:center;justify-content:space-between}
  .sidenav .sn-gh:hover .sn-gh-lbl{color:var(--ink-1)}
  .sidenav .sn-gh-ch{display:inline-block;font-size:13px;line-height:1;color:var(--ink-3);
    transform:rotate(90deg);transition:transform .16s}
  .sidenav .sn-gh[aria-expanded="false"] .sn-gh-ch{transform:rotate(0deg)}
  .sidenav .sn-items{display:flex;flex-direction:column;overflow:hidden;transition:max-height .18s ease}
  .sidenav .sn-items[hidden]{display:none}
  /* A collapsed group still has to show that something inside it needs
     attention -- otherwise collapsing hides the alert that made you look. */
  .sidenav .sn-gh .sn-gh-dot{width:6px;height:6px;border-radius:50%;background:#ff5c8a;
    margin-left:7px;display:none}
  .sidenav .sn-gh[aria-expanded="false"] .sn-gh-dot.on{display:inline-block}
  /* Collapsed rail: groups are labels again, nothing to click into a void. */
  .sidenav.nav-mini .sn-gh-ch{display:none}
  .sidenav .sn-gh-lbl{font-size:10px;font-weight:800;letter-spacing:.13em;line-height:1;
    text-transform:uppercase;color:var(--ink-3);opacity:.8}
  .sidenav .sn-items{display:flex;flex-direction:column;gap:1px;width:100%}
  body{margin-left:216px;transition:margin-left .45s ease}
  /* Phones/tablets: the sidenav becomes an off-canvas drawer. Never hide the
     navigation without an opener -- the fixed burger toggles it, the scrim or
     tapping a nav item closes it. */
  .sn-burger{display:none;position:fixed;top:10px;left:10px;z-index:27;width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(8px);color:var(--ink);font-size:17px;line-height:1;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.35)}
  .sn-scrim{display:none;position:fixed;inset:0;z-index:24;background:rgba(0,0,0,.45);backdrop-filter:blur(2px)}
  @media (max-width:900px){
    .sidenav{transform:translateX(-110%);transition:transform .32s ease;box-shadow:24px 0 80px rgba(0,0,0,.55)}
    .sidenav.mobile-open{transform:translateX(0)}
    body{margin-left:0}
    .sn-burger{display:flex}
    .sn-scrim.on{display:block}
    /* when the app itself hides the nav (cinema/universe), hide the burger too */
    body:has(.sidenav.nav-hidden) .sn-burger{display:none}
    /* on phones the drawer pattern wins: no ghosting when it is opened */
    .sidenav.nav-ghost{opacity:1}
  }
  @media print{.sidenav,.sn-burger,.sn-scrim{display:none}body{margin-left:0!important}}

  .topbars{position:sticky;top:0;z-index:20}
  .appbar{
    position:relative;display:flex;align-items:center;gap:20px;
    /* space-between with a SINGLE child puts that child on the LEFT -- which is
       why the bar's controls sat at the left edge no matter what order they were
       in. They belong in the top-right corner, so: flex-end. */
    justify-content:flex-end;padding:14px 28px;background:var(--surface);
    border-bottom:1px solid var(--border);
  }
  .brand{display:flex;align-items:center;gap:11px;font-weight:650;letter-spacing:-.01em}
  /* In the sidebar the brand IS the header: a 216px column, so the emblem comes
     down a size and the two lines stack tightly under it rather than beside a
     40px mark that would eat half the width. */
  /* Pinned: the eye stays put while the list below it scrolls, so the rail
     always identifies itself no matter where you are in the menu. */
  .sidenav .sn-brand{gap:10px;padding:6px 6px 14px;margin:-6px 0 0;
    position:sticky;top:-16px;z-index:3;
    background:linear-gradient(180deg,#0e1014 0%,#0e1014 68%,rgba(14,16,20,0) 100%)}
  .sidenav .sn-brand .mark{width:30px;height:30px}
  .sidenav .sn-brand .wm{font-size:15px;letter-spacing:.16em}
  .sidenav .sn-brand small{font-size:10px;letter-spacing:.04em;margin-top:1px}
  /* Light theme: the rail follows the switch. The starfield above is dark-only
     -- on a light page it read as a black slab whose grey labels and pale-pink
     active row were tuned for the other theme. Universe ghost mode keeps the
     cosmos, since there the rail floats over deep space either way. */
  :root[data-theme="light"] .sidenav:not(.nav-ghost){
    background-color:var(--surface);
    background-image:radial-gradient(120% 50% at 50% 0%,color-mix(in srgb,var(--brand) 5%,transparent) 0%,transparent 60%);
    box-shadow:1px 0 0 var(--border),10px 0 24px -20px rgba(20,24,31,.25)}
  :root[data-theme="light"] .sidenav:not(.nav-ghost) .sn-brand{
    background:linear-gradient(180deg,var(--surface) 0%,var(--surface) 68%,color-mix(in srgb,var(--surface) 0%,transparent) 100%)}
  :root[data-theme="light"] .sidenav:not(.nav-ghost) button:not([aria-current="true"]):not(.sn-gh):hover{background:var(--bg)}
  :root[data-theme="light"] .sidenav:not(.nav-ghost):hover,
  :root[data-theme="light"] .sidenav:not(.nav-ghost):focus-within{scrollbar-color:rgba(20,24,31,.18) transparent}
  /* A rail taller than the window used to cut its last entries off in silence:
     the scrollbar is hidden, so there was nothing to see and nothing to grab.
     Now nothing shrinks, a slim bar appears while the pointer is over the rail,
     and the bottom edge fades whenever there is more below. */
  .sidenav>*{flex:none}
  .sidenav .sn-spacer{flex:1 1 auto;min-height:8px}
  .sidenav{scrollbar-width:none;overscroll-behavior:contain}
  .sidenav:hover,.sidenav:focus-within{scrollbar-width:thin;
    scrollbar-color:rgba(150,170,200,.30) transparent}
  .sidenav:hover::-webkit-scrollbar,.sidenav:focus-within::-webkit-scrollbar{width:6px}
  .sidenav:hover::-webkit-scrollbar-thumb,.sidenav:focus-within::-webkit-scrollbar-thumb{
    background:rgba(150,170,200,.30);border-radius:3px}
  .sidenav.sn-more{mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 26px),transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
  /* Argus Panoptes emblem: eye in a reticle, three watcher-eyes patrolling the
     ring. Colors ride the theme vars; the glow is dark-mode only. */
  .brand .mark{width:40px;height:40px;flex:none;display:block;overflow:visible}
  .brand .mark .ring{stroke:color-mix(in srgb,var(--ink-3) 55%,transparent);stroke-width:2}
  .brand .mark .ticks{stroke:color-mix(in srgb,var(--ink-3) 75%,transparent);stroke-width:2.5}
  .brand .mark .orbit{fill:var(--brand);transform-origin:32px 32px;
    animation:argus-orbit 26s linear infinite}
  .brand .mark .eye{transform-origin:32px 32px;animation:argus-blink 7s ease-in-out infinite}
  .brand .mark .pupil{fill:#10131a}
  .brand .mark .glint{fill:#fff;opacity:.9}
  :root[data-theme="dark"] .brand .mark .iris{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--brand) 55%,transparent))}
  @keyframes argus-orbit{to{transform:rotate(360deg)}}
  /* a quick two-frame blink every 7s -- the watcher never sleeps for long */
  @keyframes argus-blink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.12)}97%{transform:scaleY(1)}}
  @media (prefers-reduced-motion:reduce){
    .brand .mark .orbit,.brand .mark .eye{animation:none}
  }
  .brand .wm{font-weight:700;letter-spacing:.14em}
  .brand small{display:block;font-weight:500;color:var(--ink-3);font-size:11px;
    letter-spacing:.02em;margin-top:1px}
  .appbar-right{display:flex;align-items:center;gap:14px;margin-left:auto}
  .search{display:flex;align-items:center;gap:8px;background:var(--surface-2);
    border:1px solid var(--border);border-radius:8px;padding:7px 11px;min-width:230px;color:var(--ink-3)}
  .search input{border:0;background:transparent;font:inherit;color:var(--ink);width:100%;outline:none}
  .sync{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);
    background:var(--ok-bg);border:1px solid var(--ok-bd);padding:6px 11px;border-radius:999px;white-space:nowrap}
  .sync .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}

  /* Layout: a wide, fluid canvas (mission-control data grid) with a sane cap */
  .wrap{max-width:1760px;margin:0 auto;padding:26px 28px 60px}
  .pagehead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
  .pagehead h1{font-size:21px;margin:0;letter-spacing:-.02em;text-wrap:balance}
  .pagehead p{margin:3px 0 0;color:var(--ink-2)}

  /* Domain tabs (Classic VMs vs Kubernetes) */
  .tabs{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--border)}
  .tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;
    padding:9px 14px;font:inherit;font-weight:560;font-size:14px;color:var(--ink-2);
    cursor:pointer;margin-bottom:-1px;display:inline-flex;align-items:center;gap:7px}
  .tab:hover{color:var(--ink)}
  .tab[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand)}
  .tab .tc{font-size:11.5px;font-weight:600;color:var(--ink-3);background:var(--surface-2);
    border:1px solid var(--border);border-radius:999px;padding:0 7px;line-height:17px;font-variant-numeric:tabular-nums}
  .tab[aria-selected="true"] .tc{color:var(--brand);border-color:var(--brand)}
  /* KPI row */
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:22px}
  .kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;
    padding:15px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
  .kpi .num{font-size:27px;font-weight:680;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
  .kpi .lbl{color:var(--ink-2);font-size:12.5px;margin-top:2px}
  .kpi.crit .num{color:var(--crit)} .kpi.warn .num{color:var(--warn)} .kpi.ok .num{color:var(--ok)}
  .kpi .stripe{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--border)}
  .kpi.crit .stripe{background:var(--crit)} .kpi.warn .stripe{background:var(--warn)}
  .kpi.ok .stripe{background:var(--ok)} .kpi.brand .stripe{background:var(--brand)}

  /* Fleet risk hero: a dominant score gauge (spanning the left, full height)
     with the trend headlining the top-right and the three supporting cards
     (factors / risky assets / MTTR) beneath it. */
  /* ---- MigOps workspace -------------------------------------------------
     A working surface, not a report viewer: pick the project, then move
     between what it costs, what it becomes, how it is wired, which drones
     flew and what came out. Dark, magenta, and deliberately quiet -- the only
     loud things on the page are the number and the open decisions. */
  .mg-wrap{max-width:1180px}
  .mg-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
  .mg-scopes{display:flex;gap:8px;flex-wrap:wrap}
  /* The process band: seven phases of a migration, the agents in each, and
     what each has cost -- the shape of the work, read from the records. */
  .mp{margin:0 0 18px}
  .mg-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto}
  .mg-tab{font:inherit;font-size:12.5px;padding:9px 15px;cursor:pointer;background:none;border:0;
    color:var(--ink-3);border-bottom:2px solid transparent;white-space:nowrap}
  .mg-tab:hover{color:var(--ink-1)}
  .mg-tab[aria-selected="true"]{color:#E20074;border-bottom-color:#E20074}
  .mg-panel[hidden]{display:none!important}

  /* the hero number */
  .mg-hero{display:grid;gap:16px;grid-template-columns:minmax(260px,1.1fr) minmax(260px,1fr);
    margin-bottom:16px}
  @media (max-width:820px){.mg-hero{grid-template-columns:1fr}}
  .mg-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;
    padding:17px 18px;box-shadow:var(--shadow);min-width:0}
  .mg-card h3{margin:0 0 12px;font-size:11.5px;font-weight:600;color:var(--ink-3);
    text-transform:uppercase;letter-spacing:.06em}
  .mg-big{font-size:42px;font-weight:700;line-height:1;letter-spacing:-.02em;
    background:linear-gradient(135deg,#fff 30%,#E20074);-webkit-background-clip:text;
    background-clip:text;color:transparent}
  .mg-big small{font-size:13px;font-weight:500;color:var(--ink-3);-webkit-text-fill-color:var(--ink-3)}
  .mg-sub{font-size:12px;color:var(--ink-3);margin-top:6px}
  .mg-kv{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;font-size:12.5px;color:var(--ink-2)}
  .mg-kv span{display:block;color:var(--ink-3);font-size:11px}
  .mg-kv b{font-weight:600}

  .mg-open{padding:13px 15px;border-radius:12px;margin-bottom:16px;
    background:linear-gradient(135deg,rgba(226,0,116,.12),rgba(226,0,116,.04));
    border:1px solid rgba(226,0,116,.3)}
  .mg-open b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
    color:#E20074;margin-bottom:7px}
  .mg-open ul{margin:0;padding-left:17px;font-size:12.5px}
  .mg-open li{margin:3px 0}

  .mg-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
  .mg-btn{font:inherit;font-size:12px;padding:8px 14px;border-radius:9px;cursor:pointer;
    border:1px solid var(--border);background:transparent;color:var(--ink-1);text-decoration:none;
    display:inline-block;transition:.15s}
  .mg-btn:hover{border-color:#E20074;color:#E20074}
  .mg-btn.prim{background:#E20074;border-color:#E20074;color:#fff}
  .mg-btn.prim:hover{filter:brightness(1.1);color:#fff}
  .mg-note{font-size:11.5px;color:var(--ink-3);margin-top:10px;line-height:1.6}
  .mg-form{display:grid;gap:10px;max-width:520px}
  .mg-form label{font-size:11.5px;color:var(--ink-3);display:block;margin-bottom:4px}
  .mg-form input,.mg-form select{font:inherit;font-size:13px;width:100%;box-sizing:border-box;padding:9px 11px;
    border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--ink-1)}
  .mg-form input:focus,.mg-form select:focus{outline:none;border-color:#E20074}
  .mg-form select option{background:var(--surface-2);color:var(--ink-1)}
  .mg-empty{padding:34px 4px;text-align:center;color:var(--ink-3);font-size:13px}
  .mg-empty code{background:var(--border);padding:2px 6px;border-radius:5px}

  /* People: the chip in the app bar, the sign-in sheet, the settings wizard
     and the user management table. Same surfaces and magenta as MigOps. */
  .usr-wrap{position:relative;flex:none}
  .usr-chip{all:unset;display:inline-flex;align-items:center;gap:9px;cursor:pointer;
    padding:4px 10px 4px 4px;border-radius:999px;border:1px solid var(--border);
    background:var(--surface-2);color:var(--ink-1);font-size:12.5px;line-height:1;transition:.15s}
  .usr-chip:hover{border-color:#E20074}
  .usr-chip .u-av{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;
    justify-content:center;font-size:11px;font-weight:700;color:#fff;
    background:linear-gradient(135deg,#E20074,#7a1fa2)}
  .usr-chip .u-av.out{background:var(--border);color:var(--ink-3)}
  .usr-chip .u-role{font-size:10.5px;padding:1px 7px;border-radius:20px;border:1px solid rgba(226,0,116,.5);color:#E20074}
  .usr-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;z-index:95;
    background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);
    padding:8px}
  .usr-menu[hidden]{display:none}
  .usr-menu .m-who{padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;font-size:12px;color:var(--ink-3)}
  .usr-menu .m-who b{display:block;color:var(--ink-1);font-size:13px;margin-bottom:2px}
  .usr-menu button{all:unset;display:block;width:100%;box-sizing:border-box;cursor:pointer;
    padding:8px 10px;border-radius:8px;font-size:12.5px;color:var(--ink-1)}
  .usr-menu button:hover{background:var(--surface-2);color:#E20074}
  /* The login scene: a full-screen dark field with slow aurora, one glass
     card, one primary way in. Everything else folds away under "more". */
  .login{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px 16px;overflow:auto;
    background:#07080d;color:#f4f5f8;color-scheme:dark}
  .login[hidden]{display:none}
  .login-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
  .login-bg i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
  .login-bg .a1{width:56vmax;height:56vmax;left:-18vmax;top:-22vmax;background:radial-gradient(circle,#E20074 0%,rgba(226,0,116,0) 62%);animation:login-drift 26s ease-in-out infinite alternate}
  .login-bg .a2{width:48vmax;height:48vmax;right:-16vmax;bottom:-20vmax;background:radial-gradient(circle,#4c1d95 0%,rgba(76,29,149,0) 62%);animation:login-drift 32s ease-in-out infinite alternate-reverse}
  .login-bg .a3{width:34vmax;height:34vmax;left:38vw;top:52vh;background:radial-gradient(circle,#0e7490 0%,rgba(14,116,144,0) 62%);opacity:.32;animation:login-drift 40s ease-in-out infinite alternate}
  .login-bg::after{content:"";position:absolute;inset:0;background:
    radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.55),transparent 55%),
    radial-gradient(1px 1px at 70% 32%,rgba(255,255,255,.45),transparent 55%),
    radial-gradient(1.5px 1.5px at 84% 74%,rgba(255,255,255,.5),transparent 55%),
    radial-gradient(1px 1px at 28% 78%,rgba(255,255,255,.4),transparent 55%),
    radial-gradient(1px 1px at 52% 12%,rgba(255,255,255,.35),transparent 55%),
    radial-gradient(1px 1px at 92% 22%,rgba(255,255,255,.3),transparent 55%)}
  @keyframes login-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9vmax,6vmax,0) scale(1.12)}}
  .login-card{position:relative;width:min(440px,100%);box-sizing:border-box;padding:36px 36px 28px;border-radius:24px;
    background:rgba(14,17,24,.66);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
    border:1px solid rgba(255,255,255,.09);
    box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 0 1px rgba(226,0,116,.12),inset 0 1px 0 rgba(255,255,255,.06);
    animation:login-in .55s cubic-bezier(.2,.8,.2,1) both}
  @keyframes login-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
  .login-close{all:unset;position:absolute;right:14px;top:12px;cursor:pointer;font-size:20px;line-height:1;padding:6px 9px;
    border-radius:8px;color:rgba(255,255,255,.55)}
  .login-close:hover{color:#fff;background:rgba(255,255,255,.06)}
  .login-brand{display:flex;align-items:center;gap:14px;margin-bottom:22px}
  .login-brand .mark{width:58px;height:58px;flex:none;display:block;overflow:visible;filter:drop-shadow(0 0 16px rgba(226,0,116,.5))}
  .login-brand .mark .ring{stroke:rgba(255,255,255,.28);stroke-width:2}
  .login-brand .mark .ticks{stroke:rgba(255,255,255,.4);stroke-width:2.5}
  .login-brand .mark .orbit{fill:#E20074;transform-origin:32px 32px;animation:argus-orbit 18s linear infinite}
  .login-brand .mark .eye{transform-origin:32px 32px;animation:argus-blink 7s ease-in-out infinite}
  .login-brand .mark .pupil{fill:#10131a}.login-brand .mark .glint{fill:#fff;opacity:.9}
  .login-brand .wm{display:block;font-size:20px;font-weight:800;letter-spacing:.22em}
  .login-brand small{display:block;font-size:11.5px;color:rgba(255,255,255,.55);margin-top:2px;letter-spacing:.02em}
  .login-card h1{margin:0 0 6px;font-size:26px;font-weight:700;letter-spacing:-.02em}
  .login-lead{margin:0 0 20px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.62)}
  /* The one way in, quietly: a glass button, the tanuki in magenta, the
     colour arriving only on hover. */
  .login-gl{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
    height:48px;border-radius:13px;cursor:pointer;font-size:14px;font-weight:600;color:#fff;
    background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:border-color .18s,background .18s,box-shadow .18s,transform .15s}
  .login-gl:hover{border-color:rgba(226,0,116,.7);background:rgba(226,0,116,.1);box-shadow:0 8px 28px rgba(226,0,116,.22)}
  .login-gl:active{transform:translateY(1px)}
  .login-gl:disabled{opacity:.6;cursor:progress;transform:none}
  .login-gl svg{width:20px;height:20px;flex:none;color:#E20074}
  .login-hint{font-size:11.5px;color:rgba(255,255,255,.5);margin:10px 2px 0;line-height:1.55}
  .login-hint b{color:rgba(255,255,255,.8);font-weight:600}
  .login-or{display:flex;align-items:center;gap:12px;margin:18px 0 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.35)}
  .login-or::before,.login-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.1)}
  .login-more{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:0 14px;background:rgba(255,255,255,.02)}
  .login-more+.login-more{margin-top:8px}
  .login-more summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:12px 0;font-size:13px;color:rgba(255,255,255,.8)}
  .login-more summary::-webkit-details-marker{display:none}
  .login-more summary::after{content:"›";margin-left:auto;transition:transform .2s;color:rgba(255,255,255,.4)}
  .login-more[open] summary::after{transform:rotate(90deg)}
  .login-more summary small{color:rgba(255,255,255,.4);font-size:11.5px}
  .login-more .mg-form{padding:0 0 14px;max-width:none}
  .login-more .mg-form input{background:rgba(0,0,0,.25);border-color:rgba(255,255,255,.12);color:#fff}
  .login-more .mg-form input:focus{border-color:#E20074}
  .login-more .mg-form label{color:rgba(255,255,255,.5)}
  .login-more .mg-btn{border-color:rgba(255,255,255,.16);color:#fff}
  .login-more .mg-note{color:rgba(255,255,255,.42)}
  .login-trust{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
  .login-trust span{font-size:10.5px;padding:3px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.55);
    display:inline-flex;align-items:center;gap:5px}
  .login-trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:#45d99b;box-shadow:0 0 6px #45d99b}
  .login-foot{margin:14px 0 0;font-size:11px;line-height:1.55;color:rgba(255,255,255,.38)}
  .login .usr-msg.err{background:rgba(255,80,80,.12);border-color:rgba(255,80,80,.45);color:#ff8a8a}
  /* Gated: signed out means the login and nothing else -- Argus stays visible
     behind it, blurred, so the room is there but nothing in it can be read. */
  .login.gated{background:rgba(7,8,13,.58);backdrop-filter:blur(18px) saturate(.7);-webkit-backdrop-filter:blur(18px) saturate(.7)}
  .login.gated .login-bg i{opacity:.32}
  .login.gated .login-close{display:none}
  body.gated{overflow:hidden}
  /* People: a stacked, full-width layout -- a KPI strip, the people table,
     the groups as cards with toggle pills, then the matrix and the trail. */
  .pp{display:flex;flex-direction:column;gap:16px}
  /* Waiting at the door: the first thing an admin sees on this page, because
     somebody who signed in and cannot get in will ask, and the answer should
     already be here. */
  .pd{border:1px solid rgba(245,184,74,.45);border-radius:16px;padding:14px 16px;margin-bottom:16px;
    background:linear-gradient(160deg,rgba(245,184,74,.08),transparent 60%),var(--surface)}
  .pd h3{margin:0 0 4px;font-size:14px;color:#f5b84a}
  .pd .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:11px 0;border-top:1px solid var(--border)}
  .pd .row:first-of-type{border-top:0}
  .pd .who{flex:1;min-width:200px}
  .pd .who b{font-size:13.5px}
  .pd .who small{display:block;color:var(--ink-3);font-size:11.5px;margin-top:2px}
  .pd select,.pd input{font:inherit;font-size:12.5px;padding:7px 10px;border-radius:9px;
    border:1px solid var(--border);background:var(--surface-2);color:var(--ink-1)}
  .pp-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
  .pp-head h3{margin:0}
  .pp-head .sp{flex:1}
  .pp-head input[type=search]{font:inherit;font-size:12.5px;padding:7px 11px;border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--ink-1);min-width:220px}
  .grp{border:1px solid var(--border);border-radius:14px;padding:14px 16px;background:var(--surface);display:flex;flex-direction:column;gap:2px}
  .grp.everyone{border-color:rgba(226,0,116,.35);background:linear-gradient(160deg,rgba(226,0,116,.05),transparent 60%),var(--surface)}
  .grp .g-sec{margin:9px 0 5px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
  @media (prefers-reduced-motion:reduce){.login-bg i,.login-card,.login-brand .mark .orbit,.login-brand .mark .eye{animation:none}}
  @media (max-width:480px){.login-card{padding:28px 22px 22px;border-radius:18px}}
  .usr-msg{font-size:12.5px;margin-top:10px;padding:9px 12px;border-radius:9px;line-height:1.5}
  .usr-msg.err{background:rgba(255,80,80,.1);border:1px solid rgba(255,80,80,.4);color:#ff7b7b}
  .usr-msg.ok{background:rgba(69,217,155,.1);border:1px solid rgba(69,217,155,.4);color:#45d99b}
  .usr-msg.info{background:rgba(226,0,116,.08);border:1px solid rgba(226,0,116,.35);color:var(--ink-1)}
  .usr-msg[hidden]{display:none}
  /* wizard */
  .wz{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px}
  @media (max-width:820px){.wz{grid-template-columns:1fr}}
  .wz-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
  .wz-steps li{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;font-size:12.5px;
    color:var(--ink-3);cursor:pointer}
  .wz-steps li:hover{background:var(--surface-2)}
  .wz-steps li.cur{background:var(--brand-wash);color:var(--ink-1);font-weight:600}
  .wz-steps .n{width:24px;height:24px;border-radius:50%;border:1px solid var(--border);display:inline-flex;
    align-items:center;justify-content:center;font-size:11px;flex:none;color:var(--ink-3)}
  .wz-steps li.cur .n{border-color:#E20074;color:#E20074}
  .wz-steps li.done .n{background:#45d99b;border-color:#45d99b;color:#05130c}
  .wz-steps small{display:block;font-size:10.5px;color:var(--ink-3);font-weight:400;margin-top:2px}
  .wz-pane h2{margin:0 0 6px;font-size:18px;font-weight:650;letter-spacing:-.01em}
  .wz-pane .lead{font-size:13px;color:var(--ink-2);line-height:1.6;margin:0 0 14px}
  .wz-state{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;padding:3px 10px;border-radius:20px;
    border:1px solid var(--border);color:var(--ink-3);margin-bottom:12px}
  .wz-sum{display:grid;gap:8px;margin:6px 0 14px}
  .wz-sum div{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:8px 10px;border-radius:9px;border:1px solid var(--border)}
  .wz-sum small{color:var(--ink-3);margin-left:auto}
  /* the specialists workbench */
  .sp{display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr);gap:16px;align-items:start}
  @media (max-width:900px){.sp{grid-template-columns:1fr}}
  .sp-think{font-size:12.5px;color:var(--ink-3);padding:14px 0}
  .cp{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--border-2)}
  .cp:last-of-type{border-bottom:0}
  .cp>div{flex:1;min-width:0}
  .cp b{font-size:12.5px}
  .cp small{display:block;color:var(--ink-3);font-size:11px;line-height:1.5;margin-top:2px}
  .cp .mg-btn{flex:none}
  /* language, next to the theme toggle */
  .langsw{display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden;height:30px;align-items:stretch}
  .langsw button{all:unset;box-sizing:border-box;cursor:pointer;padding:0 10px;display:grid;place-items:center;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--ink-3);transition:background .14s,color .14s}
  .langsw button:hover{color:var(--ink-1)}
  .langsw button.on{background:#E20074;color:#fff}
  .langsw[hidden]{display:none}
  /* Training a specialist: the level, the curriculum, the exam, the gaps */
  .tr-top{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
  .tr-ring{width:78px;height:78px;border-radius:50%;flex:none;display:grid;place-items:center;position:relative;
    background:conic-gradient(#E20074 calc(var(--p) * 1%), var(--surface-2) 0)}
  .tr-ring::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--surface)}
  /* the ::after disc is generated last, so the number needs its own layer or
     it is painted over -- the same trap as every overlay in this file */
  .tr-ring>div{position:relative;z-index:1;text-align:center}
  .tr-ring b{position:relative;font-size:19px;font-weight:800;line-height:1}
  .tr-ring small{position:relative;display:block;text-align:center;font-size:9px;color:var(--ink-3);letter-spacing:.06em}
  .tr-name{font-size:15px;font-weight:800;text-transform:capitalize}
  .tr-what{color:var(--ink-2);font-size:12.5px;max-width:52ch;line-height:1.55;margin-top:2px}
  .tr-marks{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  .tr-mark{font-size:10.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--border);color:var(--ink-3)}
  .tr-mark.on{border-color:rgba(76,201,150,.5);color:#5fd9a8;background:rgba(76,201,150,.08)}
  .tr-next{margin-top:10px;padding:9px 12px;border-radius:11px;border:1px dashed var(--border);background:var(--surface-2)}
  .tr-next li{font-size:12px;color:var(--ink-2);line-height:1.6;margin-left:14px}
  .tr-mod{border:1px solid var(--border);border-radius:13px;margin-top:10px;overflow:hidden;background:var(--surface-2)}
  .tr-mod>summary{cursor:pointer;padding:10px 13px;display:flex;gap:10px;align-items:center;list-style:none;font-size:13px}
  .tr-mod>summary::-webkit-details-marker{display:none}
  .tr-mod>summary b{flex:1}
  .tr-mod .body{padding:2px 13px 13px}
  .tr-pill{font-size:10.5px;padding:2px 8px;border-radius:999px;border:1px solid var(--border);color:var(--ink-3);white-space:nowrap}
  .tr-pill.ok{border-color:rgba(76,201,150,.5);color:#5fd9a8}
  .tr-pill.bad{border-color:rgba(255,120,120,.5);color:#ff8a8a}
  /* Not red: an unmarked question is not a failure. Amber says
     "incomplete, look again", which is what it is. */
  .tr-pill.warn{border-color:rgba(230,170,70,.55);color:#e6aa46}
  .tr-src{display:flex;gap:9px;align-items:flex-start;padding:6px 0;border-top:1px solid var(--border);font-size:12px}
  .tr-src:first-child{border-top:0}
  .tr-src i{font-style:normal;width:16px;flex:none;text-align:center}
  .tr-src small{display:block;color:var(--ink-3);font-size:11px;line-height:1.5}
  .tr-q{border-top:1px solid var(--border);padding:9px 0}
  .tr-q .qh{display:flex;gap:9px;align-items:flex-start}
  .tr-q .qh b{flex:1;font-weight:600;font-size:12.5px;line-height:1.55}
  .tr-facts{margin:7px 0 0 4px}
  .tr-facts div{font-size:11.5px;color:var(--ink-2);line-height:1.6;display:flex;gap:7px}
  .tr-facts i{font-style:normal;flex:none}
  .tr-facts .no{color:var(--ink-3)}
  .tr-why{margin-top:6px;font-size:11.5px;color:#f5b84a;line-height:1.55}
  .tr-run{margin-top:12px;padding:11px 13px;border-radius:12px;border:1px solid rgba(226,0,116,.35);background:var(--surface-2)}
  .tr-bar{height:6px;border-radius:99px;background:var(--surface);overflow:hidden;margin-top:8px}
  .tr-bar span{display:block;height:100%;background:#E20074;transition:width .4s}
  .tr-log{margin-top:8px;max-height:132px;overflow:auto;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--ink-3);line-height:1.7}
  .tr-gap{border:1px solid rgba(245,184,74,.35);border-radius:12px;padding:10px 13px;margin-top:9px;background:var(--surface-2)}
  .tr-gap b{font-size:12.5px;font-weight:600;line-height:1.55;display:block}
  .tr-gap small{display:block;color:var(--ink-3);font-size:11.5px;line-height:1.55;margin-top:4px}
  .tr-gap .acts{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
  .pw{margin:14px 0 4px;border:1px solid rgba(226,0,116,.4);border-radius:18px;background:var(--surface);
    box-shadow:0 18px 50px rgba(0,0,0,.28);overflow:hidden}
  .pw-ans{margin-top:12px;border:1px solid var(--border);border-radius:13px;padding:13px 15px;background:var(--surface-2);
    font-size:13px;line-height:1.7}
  .pw-ans h1,.pw-ans h2,.pw-ans h3{font-size:13.5px;margin:12px 0 5px}
  .pw-ans table{width:100%;border-collapse:collapse;margin:8px 0;font-size:12px}
  .pw-ans th,.pw-ans td{border:1px solid var(--border);padding:5px 8px;text-align:left}
  .pw-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--ink-3);margin-top:8px}
  /* Known, not admitted: one page that says so, and nothing behind it. */
  .pend{max-width:560px;margin:14vh auto;padding:30px 34px;border:1px solid rgba(245,184,74,.4);border-radius:20px;
    background:var(--surface);box-shadow:0 24px 70px rgba(0,0,0,.35);text-align:center}
  .pend .i{font-size:30px;line-height:1}
  .pend h2{margin:12px 0 6px;font-size:19px;letter-spacing:-.015em}
  .pend p{margin:0 auto;max-width:44ch;font-size:13px;line-height:1.7;color:var(--ink-2)}
  .pend .who{margin-top:16px;font-size:12px;color:var(--ink-3)}
  .pend .who b{color:var(--ink-1)}
  body.pending .sidenav,body.pending .aibar,body.pending .chat-fab,body.pending .chat-panel,
  body.pending main>section:not(#pendBox),body.pending .appbar-right .btn,body.pending .search{display:none!important}
  /* looking inside an agent */
  .st-open{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
  .st-own{margin-top:10px;padding:11px 13px;border:1px dashed var(--border);border-radius:12px;background:var(--surface-2);
    font-size:11.5px;color:var(--ink-2);line-height:1.65}
  .st-own b{color:var(--ink-1)}
  .st-own code{font-size:11px}
  /* The Agent Studio. A specialist reasons and can be wrong; a tool is
     deterministic. The grid leads with that difference because everything
     else -- checks, budgets, peers -- follows from it. */
  .stu-tabs,.stu-dtabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
  .stu-h{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin:22px 0 10px}
  .s-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ink-3)}
  .s-dot.on{background:#45d99b;box-shadow:0 0 0 3px rgba(69,217,155,.16)}
  .s-dot.off{background:#ff5c8a}
  /* The drawer: role, tools, knowledge, checks, talk */
  .stu-dw{width:min(860px,100%)}
  .stu-dh h2{margin:0;font-size:19px}
  .stu-dh code{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-right:8px}
  .gr{all:unset;box-sizing:border-box;cursor:pointer;display:grid;
    grid-template-columns:26px 1fr auto 78px;align-items:center;gap:12px;
    padding:9px 14px;background:var(--surface);transition:background .12s}
  .gr:hover{background:var(--surface-2)}
  .gr[disabled]{cursor:default;opacity:.75}
  .gr.on{background:color-mix(in srgb,#45d99b 7%,var(--surface));box-shadow:inset 2px 0 0 #45d99b}
  @media(max-width:700px){
    .gr{grid-template-columns:22px 1fr auto;gap:9px}
  }
  .df input[type=text],.df input[type=number],.df select,.df textarea.df-in{font:inherit;font-size:13px;width:100%;box-sizing:border-box;
    padding:8px 10px;border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--ink-1)}
  .df select option{background:var(--surface-2)}
  .df input:focus,.df select:focus,.df textarea:focus{outline:none;border-color:#E20074}

  /* ==== Agent Studio · Mission Control ===================================
     One look for the whole studio: a command header with live numbers, the
     tabs as four groups on a fixed bar, an agent introduced before its tabs,
     and every number in mono. Scoped to #pageStudio; the heavy atmosphere
     (glow, gradients) only under the dark theme, so light mode stays calm. */
  #pageStudio{--sx-glow:color-mix(in srgb,var(--brand) 42%,transparent)}
  .sx-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:start;
    padding:22px 24px 18px;margin:0 0 6px;border:1px solid var(--border);border-radius:16px;overflow:hidden;
    background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 7%,var(--surface)) 0%,var(--surface) 60%)}
  .sx-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
    background-image:radial-gradient(color-mix(in srgb,var(--ink) 10%,transparent) 1px,transparent 1.2px);
    background-size:14px 14px;-webkit-mask-image:linear-gradient(100deg,transparent 35%,#000 90%);
    mask-image:linear-gradient(100deg,transparent 35%,#000 90%)}
  .sx-hero>*{position:relative;z-index:1}
  .sx-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
  .sx-hero h1{margin:5px 0 6px;font-size:27px;letter-spacing:-.015em}
  .sx-hero p{margin:0;color:var(--ink-2);font-size:13px;max-width:620px;line-height:1.6}
  .sx-hero-r{display:flex;align-items:flex-start;justify-content:flex-end}
  .sx-kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}

  /* the tabs: four groups on one fixed bar */
  #pageStudio .sx-nav{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 26px;padding:10px 6px 0;margin:0 0 18px;
    border-bottom:1px solid var(--border);background:var(--bg)}
  /* Below the sticky app bar, not under it: top:0 slid the group labels behind it. */
  #pageStudio .stu-tabs.sx-nav{position:sticky;top:var(--topbars-h,0px);z-index:6}

  /* section headings: mono caps with a hairline */
  #pageStudio .stu-h,#pageStudio h4.stu-sh{display:flex;align-items:center;gap:12px;font-family:var(--mono);
    font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
  #pageStudio .stu-h::after,#pageStudio h4.stu-sh::after{content:"";flex:1;height:1px;
    background:linear-gradient(90deg,var(--border),transparent)}

  /* panels, tiles and numbers inside the studio */
  #pageStudio .mg-card{border-radius:14px}
  #pageStudio .ops-t b,#pageStudio .stu-tally b,#pageStudio .mg-num b{font-family:var(--mono);font-variant-numeric:tabular-nums}

  :root[data-theme="dark"] .sx-hero{border-color:color-mix(in srgb,var(--brand) 22%,var(--border));
    background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--brand) 20%,transparent) 0%,transparent 55%),
      linear-gradient(180deg,rgba(255,255,255,.02),transparent 40%),var(--surface);
    box-shadow:0 0 0 1px rgba(242,24,140,.06),0 24px 70px -40px var(--sx-glow)}
  :root[data-theme="dark"] #pageStudio .mg-card{background-image:linear-gradient(180deg,rgba(255,255,255,.022),transparent 38%)}

  @media (max-width:760px){
    .sx-hero{grid-template-columns:1fr;padding:18px 16px}
    .sx-hero-r{justify-content:flex-start}
    .sx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
    #pageStudio .sx-nav{flex-wrap:nowrap;overflow-x:auto}
  }
  .ln{margin-bottom:10px} .ln small{font-size:11px;color:var(--ink-3)}
  .pb{margin-bottom:14px}
  .pb .pp-head{gap:12px}
  .cv{display:grid;gap:3px;margin:0 0 12px;padding:12px 16px;border-radius:12px;border:1px solid var(--border);
    border-left:4px solid var(--ink-3);background:var(--surface-2)}
  .cv b{font-size:14px;color:var(--ink)} .cv span{font-size:12.5px;color:var(--ink-2)} .cv small{font-size:11px;color:var(--ink-3)}
  .cv.ok{border-left-color:var(--ok)} .cv.ok b{color:var(--ok)}
  .cv.bad{border-left-color:var(--crit)} .cv.bad b{color:var(--crit)}
  .cv.wait{border-left-color:var(--warn)}
  .mx td,.mx th{white-space:nowrap}
  .mx .mx-h{max-width:150px;overflow:hidden;text-overflow:ellipsis;font-size:10px}
  .mx td b{font-family:var(--mono)}
  .rec{display:grid;gap:10px}
  .stu-chips{display:flex;gap:7px;flex-wrap:wrap}
  .stu-pats{display:flex;gap:7px;flex-wrap:wrap}
  .stu-pat{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;padding:3px 6px 3px 11px;
    border-radius:999px;border:1px solid var(--border)}
  .stu-pat code{font-family:var(--mono);font-size:11px;color:var(--ink-1)}
  .stu-pat button{all:unset;cursor:pointer;color:var(--ink-3);font-size:15px;line-height:1;padding:0 5px}
  .stu-pat button:hover{color:#ff7ba6}
  .stu-docs{display:flex;flex-direction:column;gap:5px}
  .stu-docs>div{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:6px 11px;
    border-radius:9px;background:var(--surface-2)}
  .stu-docs code{font-family:var(--mono);font-size:11.5px}
  .stu-docs span{color:var(--ink-3);font-size:11px;flex:none}

  /* THE CASE AS A ROOM. A round table with everyone who is in it, and behind
     each chair that specialist's own board. */
  /* Table and board side by side: who is in the case, and what the one you
     are reading said -- without scrolling between the two. */
  .rm{margin-top:14px;border:1px solid var(--border);border-radius:16px;
    background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);
    overflow:hidden;display:grid;grid-template-columns:minmax(340px,430px) minmax(0,1fr)}
  .dfc-sev{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
    color:#ef8e84;border:1px solid rgba(224,87,74,.45);border-radius:999px;padding:2px 8px}
  .dfc-sev.adv{color:var(--ink-3);border-color:var(--border)}
  .dfc-why{margin-top:7px;font-size:11px;line-height:1.6;color:var(--ink-3)}
  .dfc-task{margin-top:9px;font-size:11.5px;line-height:1.6;color:var(--ink-2);
    border-left:2px solid #E20074;padding-left:10px}
  .dfc-task span{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;
    color:var(--ink-3);margin-bottom:2px}
  .dfc-l{margin-top:9px}
  .dfc-l span{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
  .dfc-l.bad span{color:#ef8e84}
  .dfc-l ul{margin:4px 0 0;padding-left:18px;font-size:11px;line-height:1.6;color:var(--ink-2)}
  .dfc-l li{margin-bottom:3px}
  /* WHAT ACTUALLY HAPPENED, beside what is allowed to. */
  .tw{margin:0 0 4px;border:1px solid var(--border);border-radius:14px;background:var(--surface);
    overflow:hidden}

  /* THE HARNESS AS A LINE. One square a day, oldest on the left. */
  .hw{margin:12px 0;border:1px solid var(--border);border-radius:14px;background:var(--surface);
    overflow:hidden}
  /* THE BLUEPRINT. The same three columns the case map uses -- who hands in,
     the specialist, what it reaches -- drawn before anything has happened. */
  .bp{margin:14px 0;border:1px solid var(--border);border-radius:14px;background:var(--surface);
    overflow:hidden}
  /* THE CASE AS A FLOW. Agents left to right in the order they worked, and
     under each the servers THIS case made it reach for. Scrolls rather than
     wraps: a flow that wraps to a second line stops reading as one. */
  .cm{margin-top:12px;border:1px solid var(--border);border-radius:14px;
    background:var(--surface);overflow:hidden}
  .tbl.soon{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:9px;
    padding:8px 12px;border:1px dashed var(--border);border-radius:10px;background:var(--surface-2)}
  .tbl.soon b{font-size:11.5px}
  .tbl.soon span{font-size:11px;color:var(--ink-3);line-height:1.5;flex:1 1 220px;min-width:0}
  .dc{border:1px solid var(--border);border-radius:11px;padding:10px 13px;background:var(--surface-2)}
  .dc.pend{border-style:dashed}
  .dc.bad{border-color:#e0574a}
  .dc-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--ink-3)}
  .dc-h b{font-size:12.5px;color:var(--ink-1);overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;max-width:36ch}
  .dc-h .sp{flex:1}
  .cf{border:1px solid var(--border);border-radius:11px;padding:10px 14px;background:var(--surface)}
  .cf.risky{border-color:#e0a44a;background:rgba(224,164,74,.06)}
  .cf.bare{opacity:.78;border-style:dashed}
  @media (max-width:860px){
    .cp-row{grid-template-columns:1fr 1fr;gap:12px 20px}
    .cp-cell.wide{grid-column:1 / -1}
  }
  /* Narrow: the table goes back above the board -- two columns of 150px
     each is neither one thing nor the other. */
  @media (max-width:900px){
    .rm{grid-template-columns:1fr}
    .rm-board{border-left:0;border-top:1px solid var(--border);max-height:none}
    .rm-table{height:262px;max-width:520px;margin:12px auto 0}
  }

  /* THE TABLE. Who is in the room, whose turn it is, and what was said.
     Serious rather than playful: the motion exists to answer "is anything
     happening" during two minutes of work, and it stops when the table
     closes. */
  .tbl{margin-top:12px;border:1px solid var(--border);border-radius:14px;
    background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);
    overflow:hidden}
  /* Asked not to animate: the same information, held still. */
  @media (prefers-reduced-motion: reduce){
    .tbl-seat{animation:none}
    .tbl-seat.live .tbl-av::after,.tbl-mid i{animation:none}
    .tbl-mid i{opacity:.8}
  }

  /* Unsaved changes to a specialist. Sticky at the bottom of the panel,
     because the model sits above the prompt and the prompt fills the screen:
     wherever you changed something, the way to keep it is in view. */
  .st-dirty{position:sticky;bottom:12px;z-index:3;display:flex;align-items:center;gap:14px;
    margin-top:14px;padding:12px 16px;border-radius:12px;
    border:1px solid #E20074;background:var(--surface);
    box-shadow:0 10px 30px rgba(0,0,0,.45)}
  .st-dirty-n{flex:none;width:26px;height:26px;border-radius:50%;background:#E20074;color:#fff;
    font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
  .st-dirty-t{flex:1;min-width:0;font-size:12.5px;color:var(--ink-1);line-height:1.5}
  .st-dirty-t b{color:#E20074}
  .st-dirty-t small{display:block;margin-top:2px;font-size:10.5px;color:var(--ink-3);line-height:1.5}
  .st-dirty-b{flex:none}
  /* Saved, and waiting on a merge. Not "done" -- the agent is still running
     what it was running -- so it stays on screen, green rather than pink. */
  .st-dirty.done{border-color:#3d7a5a}
  .st-dirty.done .st-dirty-n{background:#3d7a5a}
  .st-dirty.done .st-dirty-t b{color:#6fc79a}
  .st-dirty.done a{flex:none;text-decoration:none}
  .st-save{align-items:flex-end}
  @media (max-width:760px){
    .st-dirty{flex-wrap:wrap}
    .st-dirty-b{width:100%}
  }
  /* Asking before something irreversible, in this product's voice rather than
     the browser's. */
  /* The top-level bar sticks: a case or a specialist runs for several screens
     and the way out must not be something you scroll back up to find. */
  .stu-tabs{position:sticky;top:0;z-index:5;background:var(--bg);
    padding:8px 0 10px;margin-bottom:2px}
  .as-back{margin-bottom:10px}
  .ag-ask{position:fixed;inset:0;z-index:60;background:rgba(6,8,12,.62);
    display:flex;align-items:center;justify-content:center;padding:20px}
  .ag-ask-box{background:var(--surface);border:1px solid var(--border);border-radius:14px;
    padding:20px 22px;max-width:460px;width:100%;box-shadow:0 18px 50px rgba(0,0,0,.45)}
  .ag-ask-box h3{margin:0 0 8px;font-size:15px}
  .ag-ask-box p{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-2)}
  .ag-ask-acts{display:flex;gap:9px;justify-content:flex-end;margin-top:18px}
  .mg-btn.danger{border-color:#e0574a;color:#e0574a}
  .mg-btn.danger:hover{background:#e0574a;color:#fff}
  .mg-btn.hot{border-color:#E20074;color:#E20074}
  .mg-btn.hot:hover{background:rgba(226,0,116,.1)}
  .flw-sel{width:100%;max-width:320px;font:inherit;font-size:12.5px;padding:8px 10px;border-radius:9px;
    border:1px solid var(--border);background:var(--surface-2);color:var(--ink-1);margin-top:5px}
  .cfg{display:flex;flex-direction:column;gap:1px;border:1px solid var(--border);
    border-radius:11px;overflow:hidden;background:var(--border);margin-top:12px}
  /* The bench at a glance. Pass/fail/never differ in SHAPE as well as colour
     -- tick, cross, dot -- so the grid reads without relying on hue. */
  .hx{display:flex;flex-direction:column;gap:1px;border:1px solid var(--border);
    border-radius:11px;overflow:hidden;background:var(--border);margin-top:12px}
  /* Phone-first corrections. The studio is read on a phone as often as on a
     desk, and every one of these was broken there: tab rows wider than the
     screen with no way to reach the last tab, a fixed three-column grid, and
     prose running under the floating chat. */
  .stu-tabs,.stu-dtabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px}
  .stu-tabs::-webkit-scrollbar,.stu-dtabs::-webkit-scrollbar{display:none}
  @media(max-width:700px){
    .st-grid,.c-kvs,.as-pat{grid-template-columns:1fr 1fr}
    .stu-dh h2{font-size:17px}
    .usr-table,.lines{font-size:11.5px}
    /* the floating assistant covers the bottom-right corner on a phone */
    #stuBody,#asBody,#cveList{padding-bottom:110px}
  }
  @media(max-width:420px){
    .st-grid,.c-kvs,.as-pat{grid-template-columns:1fr}
  }
  /* A panel that covers the page needs an obvious way out, not a glyph
     in a corner. Escape and a backdrop click work too. */
  /* top:0, not a negative offset -- with -26px the bar scrolled out of view
     and the panel became the trap it was supposed to stop being. The negative
     margins let it span the drawer's padding so nothing shows through. */
  .stu-dwbar{display:flex;gap:8px;justify-content:flex-end;position:sticky;top:0;z-index:5;
    margin:-26px -30px 10px;padding:14px 30px 10px;background:var(--surface);
    border-bottom:1px solid var(--border)}
  .stu-dwbar .mg-btn{font-size:12px}
  body.stu-wide .stu-dw{width:100%;max-width:none}
  body.stu-wide .cve-drawer{background:var(--surface)}
  /* Long prose and unbroken identifiers must wrap, not run off the edge --
     the curriculum's "what it is missing" lines are full sentences. */
  .stu-dw,.cve-dw{overflow-wrap:anywhere}
  .stu-docs>div{flex-wrap:wrap}
  .stu-docs span{flex:1 1 auto;min-width:0;text-align:right}
  .stu-docs code{flex:0 1 auto;min-width:0;overflow-wrap:anywhere}
  /* The floating chat sits bottom-right; leave room so the action buttons at
     the end of a tab are never underneath it. */
  .stu-dw>div:last-child{padding-bottom:96px}
  /* One asset, in full: the page the drawer links to. */
  .as-back{all:unset;cursor:pointer;font-size:12px;color:var(--ink-3);margin-bottom:6px;display:inline-block}
  .as-back:hover{color:#E20074}
  .as-open{all:unset;cursor:pointer;font-size:11.5px;color:#ff8ac4;margin-top:7px;display:inline-block}
  .as-open:hover{text-decoration:underline}
  .ws-up input[type=text]{flex:1;min-width:200px;font:inherit;font-size:12.5px;padding:8px 11px;
    border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--ink-1)}
  /* Vulnerabilities. The row leads with the id and what is known about
     exploitation, because that is what decides the order -- the score is a
     supporting number here, not the headline. */
  .cve-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
  .cve-bar input[type=search]{flex:1;min-width:240px;font:inherit;font-size:13px;padding:9px 13px;
    border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink-1)}
  .cve-bar input[type=search]:focus{outline:none;border-color:#E20074}
  .cve-chips{display:flex;gap:7px;flex-wrap:wrap}
  .c-tag{font-size:10px;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;
    border:1px solid var(--border);color:var(--ink-3)}
  .c-tag.kev{border-color:rgba(255,92,138,.6);color:#ff7ba6;font-weight:700}
  .c-tag.ran{border-color:rgba(245,184,74,.6);color:#f5b84a}
  .c-tag.host{border-color:rgba(226,0,116,.45);color:#ff8ac4}
  .c-tag.none{opacity:.65}
  .c-pill{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;padding:2px 9px;border-radius:999px;
    border:1px solid var(--border);color:var(--ink-3)}
  .c-pill.crit{border-color:rgba(255,92,138,.55);color:#ff7ba6}
  .c-pill.warn{border-color:rgba(245,184,74,.55);color:#f5b84a}
  .c-pill.med{border-color:rgba(142,163,196,.5);color:#8ea3c4}
  .c-pill.ok{border-color:rgba(69,217,155,.5);color:#5fd9a8}
  .cve-drawer{position:fixed;inset:0;z-index:96;background:rgba(4,6,10,.72);backdrop-filter:blur(5px);
    display:flex;justify-content:flex-end}
  .cve-drawer[hidden]{display:none!important}
  .cve-dw{width:min(720px,100%);height:100%;overflow-y:auto;background:var(--surface);
    border-left:1px solid var(--border);padding:26px 30px;position:relative}
  .cve-x{all:unset;cursor:pointer;position:absolute;top:18px;right:22px;font-size:24px;color:var(--ink-3);line-height:1}
  .cve-x:hover{color:var(--ink-1)}
  .c-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px;padding-right:34px}
  .c-head code{font-family:var(--mono);font-size:17px;color:var(--ink-1)}
  .c-head b{font-size:17px}
  .c-desc{font-size:13px;line-height:1.7;color:var(--ink-2);margin:0 0 16px}
  .c-block{border-top:1px solid var(--border);padding-top:13px;margin-top:14px}
  .c-block h4{margin:0 0 9px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
  .c-block ul{margin:0;padding-left:18px;font-size:12.5px;line-height:1.7;color:var(--ink-2)}
  .c-kvs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px}
  .c-kv span{display:block;font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
  .c-kv b{font-size:13px;font-weight:600}
  .c-kv small{font-weight:400;color:var(--ink-3)}
  .c-note{font-size:12px;line-height:1.65;color:var(--ink-3);margin-top:9px;padding:9px 12px;
    border-radius:9px;border:1px dashed var(--border)}
  .c-prods{display:flex;flex-direction:column;gap:5px;margin-top:10px}
  .c-prods>div{display:flex;gap:10px;justify-content:space-between;font-size:12px;padding:5px 10px;
    border-radius:8px;background:var(--surface-2)}
  .c-prods code{font-family:var(--mono);font-size:11.5px}
  .c-prods span{color:var(--ink-3);font-family:var(--mono);font-size:11px}
  .c-hosts{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
  .c-hosts span{font-size:11px;font-family:var(--mono);padding:2px 8px;border-radius:999px;
    border:1px solid var(--border);color:var(--ink-3)}
  .c-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px;padding-top:14px;
    border-top:1px solid var(--border)}
  .c-links a{font-size:12.5px;color:#ff8ac4;text-decoration:none;padding:6px 12px;border-radius:9px;
    border:1px solid var(--border)}
  .c-links a:hover{border-color:#E20074}
  /* The harness: the criteria a specialist is measured against, and what the
     last run said. A draft run is always shown against the deployed one --
     "better or worse" is the only question worth asking before a merge. */
  .hn{margin-top:14px;border:1px solid var(--border);border-radius:13px;padding:13px 15px;background:var(--surface-2)}
  .hn>h4{margin:0 0 3px;font-size:12.5px}
  /* The comparison: what the deployed prompt answered next to what the draft
     answered. The verdict difference is stated first in words, because "it no
     longer names a storage class" is the sentence somebody acts on -- a score
     dropping from 100 to 75 only says that something got worse. */
  /* THE CHECK EDITOR. It shipped with no stylesheet at all -- every rule
     below is new -- so the browser's own controls landed in a flex-less
     column: labels overlapping fields, textareas at their default 20 columns
     next to full-width inputs, and the two line-hints colliding with the
     boxes they described. It was not a design that needed improving, it was
     markup nobody had ever looked at. */
  /* What is known about the check AS A MEASURE. A verdict is worth only as
     much as the criterion behind it. */
  .hs{margin-top:9px;padding:9px 13px;border-radius:10px;font-size:11px;line-height:1.6;
    border:1px solid var(--border);background:var(--surface-2)}
  .hs b{display:block;font-size:11.5px}
  .hs span{display:block;color:var(--ink-3);font-size:10.5px;margin-top:1px}
  .hs.ok{border-color:rgba(95,217,168,.4)}
  .hs.ok b{color:#5fd9a8}
  .hs.bad{border-color:rgba(224,87,74,.45);background:rgba(224,87,74,.06)}
  .hs.bad b{color:#ef8e84}
  .hs ul{margin:7px 0 0;padding-left:18px;color:var(--ink-2)}
  .hs li{margin-bottom:3px}
  .hs small{display:block;margin-top:7px;color:var(--ink-3);font-size:10.5px;line-height:1.6}
  .st-prompt{font:inherit;font-family:var(--mono);font-size:11.5px;line-height:1.55;width:100%;box-sizing:border-box;min-height:260px;max-height:520px;padding:10px 12px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink-1)}
  .st-prompt:focus{outline:none;border-color:#E20074}
  .st-prompt[readonly]{opacity:.8}
  /* the overview, made of buttons */
  .mg-kv.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
  .mg-num{all:unset;box-sizing:border-box;cursor:pointer;display:block;padding:8px 10px;border-radius:10px;border:1px solid transparent;transition:border-color .14s,background .14s}
  .mg-num:hover{border-color:rgba(226,0,116,.45);background:rgba(226,0,116,.06)}
  .mg-num span{display:block;font-size:11px;color:var(--ink-3)}
  .mg-num b{display:block;font-size:15px;margin-top:2px}
  .mg-btn.ai{border-color:rgba(167,139,250,.5);color:#c9a6ff}
  .dc{border:1px solid var(--border);border-radius:12px;padding:11px 13px;margin-top:10px;background:var(--surface-2)}
  .dc.done{border-color:rgba(69,217,155,.4);background:rgba(69,217,155,.06)}
  .dc-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .dc-h i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;flex:none;background:var(--surface);color:var(--ink-3)}
  .dc.done .dc-h i{background:rgba(69,217,155,.18);color:#45d99b}
  .dc-h b{font-size:12.5px;flex:1;min-width:180px}
  /* the project workspace */
  .ws{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:16px;align-items:start}
  .ws-up{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:12px}
  .ws-up input[type=text]{flex:1;min-width:220px;font:inherit;font-size:12.5px;padding:8px 11px;border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--ink-1)}
  .ws-up select{font:inherit;font-size:12.5px;padding:8px 10px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--ink-1)}
  .ws-up label.mg-btn{display:inline-flex;align-items:center}
  .wl-q{padding:6px 0 2px 46px}
  .wl-q label{display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:7px}
  .wl-chips{display:flex;flex-wrap:wrap;gap:7px}
  .wl-chip{all:unset;cursor:pointer;font-size:12.5px;padding:6px 12px;border-radius:999px;border:1px solid var(--border);
    color:var(--ink-1);transition:.15s}
  .wl-chip:hover{border-color:#E20074;color:#E20074}
  .wl-chip[aria-pressed="true"]{background:#E20074;border-color:#E20074;color:#fff}
  .wl-q textarea{font:inherit;font-size:13px;width:100%;box-sizing:border-box;min-height:64px;padding:9px 11px;border-radius:9px;
    border:1px solid var(--border);background:transparent;color:var(--ink-1);resize:vertical}
  .wl-q textarea:focus{outline:none;border-color:#E20074}
  .kb-where{position:fixed;inset:0;z-index:95;background:rgba(4,6,10,.7);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px}
  .kb-where[hidden]{display:none}
  .kb-where .w-card{width:min(560px,100%);background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 24px;box-shadow:var(--shadow)}
  .kb-where h2{margin:0 0 4px;font-size:17px}
  .kb-where p{margin:0 0 14px;font-size:12.5px;color:var(--ink-3)}
  .kb-where .w-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .kb-where .w-opt{all:unset;cursor:pointer;display:block;padding:14px;border-radius:12px;border:1px solid var(--border);transition:.15s}
  .kb-where .w-opt:hover{border-color:#E20074;background:rgba(226,0,116,.06)}
  .kb-where .w-opt b{display:block;font-size:13.5px;margin-bottom:4px}
  .kb-where .w-opt small{font-size:11.5px;color:var(--ink-3);line-height:1.5;display:block}
  .kb-where .w-opt.priv{border-color:rgba(226,0,116,.4)}
  .kb-priv{margin-top:14px;padding:12px 14px;border-radius:12px;border:1px solid rgba(226,0,116,.3);background:rgba(226,0,116,.05)}
  .kb-priv .p-head{display:flex;align-items:center;gap:8px;font-size:12.5px}
  .kb-priv .p-head b{font-size:13px}
  .kb-priv .p-bar{height:6px;border-radius:4px;background:var(--border);overflow:hidden;margin:8px 0 4px}
  .kb-priv .p-bar i{display:block;height:100%;background:linear-gradient(90deg,#E20074,#ff4fa6)}
  .kb-priv .p-sub{font-size:11px;color:var(--ink-3)}
  /* private knowledge */
  .kb-private{display:flex;align-items:flex-start;gap:10px;margin:10px 0 4px;padding:10px 12px;border-radius:10px;
    border:1px solid rgba(226,0,116,.3);background:rgba(226,0,116,.06);font-size:12px;cursor:pointer}
  .kb-private[hidden]{display:none}
  .kb-private input{margin-top:2px}
  .kb-private b{display:block;font-size:12.5px}
  .kb-private span{color:var(--ink-3);font-size:11.5px;line-height:1.5}
  .kb-lock{font-size:10.5px;padding:1px 7px;border-radius:20px;border:1px solid rgba(226,0,116,.5);color:#E20074;margin-left:6px;vertical-align:1px}
  .ai-bars{display:flex;align-items:flex-end;gap:3px;height:70px;padding:6px 0 0}
  .ai-bars i{flex:1;min-width:3px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#ff4fa6,#E20074);opacity:.85}
  .ai-bars i:hover{opacity:1}
  /* users table */
  .usr-table{width:100%;border-collapse:collapse;font-size:12.5px}
  .usr-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
    font-weight:600;padding:6px 10px;border-bottom:1px solid var(--border)}
  .usr-table td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
  .usr-table tr:last-child td{border-bottom:0}
  .usr-table .t-name{display:flex;align-items:center;gap:9px}
  .usr-table .t-name .u-av{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;
    justify-content:center;font-size:10.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,#E20074,#7a1fa2)}
  .usr-table .t-name small{display:block;color:var(--ink-3);font-size:11px}
  .usr-table select,.usr-form select{font:inherit;font-size:12px;padding:6px 9px;border-radius:8px;
    border:1px solid var(--border);background:var(--surface);color:var(--ink-1)}
  .usr-table select:disabled{opacity:.55}
  .usr-tag{font-size:10.5px;padding:1px 7px;border-radius:20px;border:1px solid var(--border);color:var(--ink-3);white-space:nowrap}
  .usr-tag.lock{border-color:rgba(226,0,116,.5);color:#E20074}
  .usr-tag.on{border-color:rgba(69,217,155,.5);color:#45d99b}
  .usr-form{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin-top:14px}
  .usr-form label{font-size:11px;color:var(--ink-3);display:block;margin-bottom:4px}
  .usr-form input{font:inherit;font-size:12.5px;padding:7px 10px;border-radius:8px;border:1px solid var(--border);
    background:transparent;color:var(--ink-1);min-width:180px}
  .usr-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px}
  .ac-chips{display:flex;flex-wrap:wrap;gap:6px}
  @media (max-width:980px){.usr-grid{grid-template-columns:1fr}}

  .riskhero{display:grid;gap:14px;margin-bottom:22px;
    grid-template-columns:minmax(260px,320px) 1fr 1fr 1fr;
    grid-template-areas:
      "gauge trend   trend  trend"
      "gauge factors assets mttr"}
  .gaugecard{grid-area:gauge} .trendcard{grid-area:trend}
  .factorcard{grid-area:factors} .assetcard{grid-area:assets} .mttrcard{grid-area:mttr}
  .riskcard{background:var(--surface);border:1px solid var(--border);border-radius:12px;
    padding:15px 16px;box-shadow:var(--shadow);min-width:0}
  .riskcard h3{margin:0 0 10px;font-size:12.5px;font-weight:600;color:var(--ink-2);
    text-transform:uppercase;letter-spacing:.06em}
  .riskcard h3 small{font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink-3)}
  /* hero gauge card: the score is the focal point of the whole page, so the
     card centres a large ring vertically and sits on a faint band-tinted glow */
  .gaugecard{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    padding:18px 18px 20px;position:relative;overflow:hidden}
  .gaugecard h3{align-self:flex-start}
  .gaugecard .g-wrap{margin-top:auto}
  .gaugecard .g-foot{margin-top:auto;width:100%}
  /* gauge: a progress ring colored by band, score in the middle */
  .g-wrap{position:relative;width:200px;margin:6px auto 14px}
  .gauge{display:block;width:200px;height:200px;transform:rotate(-90deg)}
  .gauge .g-track{fill:none;stroke:var(--border-2);stroke-width:8}
  .gauge .g-val{fill:none;stroke:var(--ok);stroke-width:8;stroke-linecap:round;
    stroke-dasharray:314.16;stroke-dashoffset:314.16;transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.3,1),stroke .4s}
  .g-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
  .g-num{font-size:54px;font-weight:760;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:.9}
  .g-band{font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.1em;
    padding:3px 11px;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 40%,transparent);
    background:color-mix(in srgb,currentColor 13%,transparent)}
  .riskhero[data-band="guarded"] .g-val,.riskhero[data-band="guarded"] .g-band{stroke:var(--ok);color:var(--ok)}
  .riskhero[data-band="elevated"] .g-val,.riskhero[data-band="elevated"] .g-band{stroke:var(--warn);color:var(--warn)}
  .riskhero[data-band="high"] .g-val,.riskhero[data-band="high"] .g-band{stroke:#e8720c;color:#e8720c}
  .riskhero[data-band="critical"] .g-val,.riskhero[data-band="critical"] .g-band{stroke:var(--crit);color:var(--crit)}
  .g-foot{display:flex;justify-content:space-between;align-items:baseline;color:var(--ink-3);font-size:11.5px}
  .g-foot #riskDelta{font-weight:600;font-variant-numeric:tabular-nums}
  .g-foot #riskDelta.up{color:var(--crit)} .g-foot #riskDelta.down{color:var(--ok)}
  /* trend: an area chart drawn into the svg by JS; in the hero it fills the
     taller row beside the big gauge instead of leaving empty space */
  .trendcard{display:flex;flex-direction:column}
  .trendcard svg{width:100%;flex:1 1 auto;height:auto;min-height:132px;display:block}
  .trendcard .t-area{fill:var(--brand);opacity:.13}
  .trendcard .t-line{fill:none;stroke:var(--brand);stroke-width:2}
  .trendcard .t-dot{fill:var(--brand)}
  .trendcard .t-grid{stroke:var(--border-2);stroke-width:1}
  .trendcard .t-txt{fill:var(--ink-3);font-size:10px}
  /* factors: label + count rows */
  .factors{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
  .factors li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px}
  .factors b{font-variant-numeric:tabular-nums;font-size:15px}
  .factors li.crit b{color:var(--crit)} .factors li.warn b{color:var(--warn)}
  .factors li.zero{color:var(--ink-3)} .factors li.zero b{color:var(--ink-3)}
  /* assets: ranked hosts/clusters with a score pill */
  /* Two-line rows so the hostname always shows: line 1 = rank + host + score,
     line 2 = kind + owner tag + top product (never crowds out the name). */
  .rassets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
  .rassets li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;column-gap:8px;
    align-items:baseline;font-size:13px}
  .rassets .rrank{color:var(--ink-3);font-size:10.5px;font-variant-numeric:tabular-nums;text-align:center}
  .rassets .rhost{font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .rassets .rhost:hover{color:var(--brand)}
  .rassets .rmeta{grid-column:2/4;display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:3px}
  .rassets .rkind{flex:none;font-size:10px;color:var(--ink-3);border:1px solid var(--border);
    border-radius:4px;padding:1px 5px;text-transform:uppercase;letter-spacing:.04em}
  .rassets .rtop{color:var(--ink-3);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .rassets .rscore{flex:none;align-self:center;font-weight:650;font-variant-numeric:tabular-nums;
    font-size:12px;border-radius:999px;padding:2px 9px;border:1px solid var(--border)}
  .rassets .rscore.guarded{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-bd)}
  .rassets .rscore.elevated{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-bd)}
  .rassets .rscore.high{color:#e8720c}
  .rassets .rscore.critical{color:var(--crit);background:var(--crit-bg);border-color:var(--crit-bd)}
  /* MTTR card: two headline stats (avg remediation time, oldest open critical) */
  .mttrcard .m-stats{display:flex;flex-direction:column;gap:10px}
  .mttrcard .m-stat{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
  .mttrcard .m-num{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .mttrcard .m-lbl{font-size:11.5px;color:var(--ink-3)}
  .mttrcard .m-num.warn{color:var(--warn)} .mttrcard .m-num.crit{color:var(--crit)}
  .mttrcard .m-sub{font-size:11px;color:var(--ink-3);margin-top:1px}
  /* keep the gauge dominant on the left; fold the supporting cards under it */
  @media (max-width:1200px){.riskhero{
    grid-template-columns:minmax(240px,300px) 1fr 1fr;
    grid-template-areas:"gauge trend trend" "gauge factors assets" "gauge mttr mttr"}}
  @media (max-width:820px){.riskhero{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"gauge trend" "factors assets" "mttr mttr"}
    .gaugecard .g-wrap{margin-top:8px}}
  @media (max-width:560px){.riskhero{grid-template-columns:1fr;
    grid-template-areas:"gauge" "trend" "factors" "assets" "mttr"}}

  /* Trending threats: newest DCERT advisories across the estate, as a card grid */
  .threats{margin-bottom:22px}
  .threats-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
  .threats-head h2{font-size:15px;margin:0}
  .threats-head .th-src{font-size:11.5px;color:var(--ink-3)}
  .threats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
  .threat{background:var(--surface);border:1px solid var(--border);border-radius:12px;
    box-shadow:var(--shadow);padding:13px 15px;display:flex;flex-direction:column;gap:7px;
    text-decoration:none;color:inherit;border-left:3px solid var(--border);transition:border-color .12s,transform .12s}
  .threat:hover{transform:translateY(-1px)}
  .threat.critical{border-left-color:var(--crit)} .threat.high{border-left-color:#e8720c}
  .threat.medium{border-left-color:var(--warn)} .threat.low,.threat.unknown{border-left-color:var(--ink-3)}
  .threat-top{display:flex;align-items:center;gap:8px}
  .threat .t-sev{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    padding:1px 7px;border-radius:20px;border:1px solid transparent;flex:none}
  .threat .t-sev.critical{color:#fff;background:var(--crit);border-color:var(--crit)}
  .threat .t-sev.high{color:#e8720c;background:color-mix(in srgb,#e8720c 12%,transparent);border-color:color-mix(in srgb,#e8720c 40%,transparent)}
  .threat .t-sev.medium{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-bd)}
  .threat .t-sev.low,.threat .t-sev.unknown{color:var(--ink-2);background:var(--surface-2);border-color:var(--border)}
  .threat .t-date{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;margin-left:auto}
  .threat .t-title{font-size:13px;font-weight:600;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .threat .t-prods{font-size:11.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:4px}
  .threat .t-prods b{color:var(--ink-2);font-weight:600}
  .threats-empty{color:var(--ink-3);font-size:13px;padding:8px 0}

  /* Patch plan */
  .ppwrap{padding:18px 18px 6px}
  .pp-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:12px}
  .pp-domtabs{display:flex;gap:6px}
  .pp-domtabs button{all:unset;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink-3);
    padding:6px 12px;border-radius:8px;border:1px solid transparent}
  .pp-domtabs button:hover{background:var(--surface-2);color:var(--ink)}
  .pp-domtabs button[aria-selected="true"]{background:var(--brand-wash);color:var(--brand);border-color:transparent}
  .pp-domtabs .tc{font-variant-numeric:tabular-nums;opacity:.75;margin-left:4px}
  .pp-counts{display:flex;gap:8px;flex-wrap:wrap;flex:none}
  .pp-counts span{font-size:11.5px;font-weight:650;border-radius:999px;padding:3px 10px;
    border:1px solid var(--border);color:var(--ink-2);white-space:nowrap}
  .pp-counts .pc-overdue{color:var(--crit);background:var(--crit-bg);border-color:var(--crit-bd)}
  .pp-counts .pc-open{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-bd)}
  .ppwrap .toolbar{padding:0 0 12px}
  .pp-table-wrap{overflow-x:auto;margin:0 -18px}
  .pp-table{width:100%;border-collapse:collapse;min-width:820px}
  .pp-table tbody tr{cursor:default}
  .pp-table .ppname{font-weight:600;cursor:pointer}
  .pp-table .ppname:hover{color:var(--brand-ink);text-decoration:underline}
  .pp-table td{font-size:13px}
  .ppdue{font-variant-numeric:tabular-nums;font-weight:600}
  .ppdue.overdue{color:var(--crit)} .ppdue.soon{color:var(--warn)} .ppdue.ok{color:var(--ink-2)}
  .ppage{color:var(--ink-3);font-size:11.5px;display:block;margin-top:1px}
  .ppfix{font-size:11px;color:var(--ok)}
  .ppstatus{font-size:11px;font-weight:650;border-radius:999px;padding:2px 9px;border:1px solid var(--border);
    white-space:nowrap;text-transform:uppercase;letter-spacing:.03em}
  .ppstatus.planned{color:var(--ink-2)}
  .ppstatus.in_progress{color:var(--brand-ink);background:var(--brand-wash);border-color:transparent}
  .ppstatus.done{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-bd)}
  .ppstatus.risk_accepted{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-bd)}
  .ppstatus.reopened{color:var(--crit);background:var(--crit-bg);border-color:var(--crit-bd)}
  .pp-counts .pc-reopened{color:var(--crit);background:var(--crit-bg);border-color:var(--crit-bd)}
  .ppedit-btn{all:unset;cursor:pointer;color:var(--ink-3);font-size:12px;padding:3px 8px;border-radius:6px}
  .ppedit-btn:hover{background:var(--surface-2);color:var(--ink)}
  .ppeditrow td{background:var(--surface-2);padding:12px 14px}
  .ppeditform{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .ppeditform select,.ppeditform input[type=date],.ppeditform input[type=text]{
    font:inherit;font-size:12.5px;border:1px solid var(--border);background:var(--surface);
    color:var(--ink);border-radius:7px;padding:6px 9px}
  .ppeditform input[type=text]{flex:1;min-width:160px}
  .ppeditform .ppsave{border:1px solid var(--brand);background:var(--brand);color:#fff;
    border-radius:7px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer}
  .ppeditform .ppsave:hover{filter:brightness(1.06)}
  .ppempty{padding:22px;text-align:center;color:var(--ink-3);font-size:13px}

  /* Toolbar */
  .toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
  .chips{display:flex;gap:7px;flex-wrap:wrap}
  .chip{border:1px solid var(--border);background:var(--surface);color:var(--ink-2);
    padding:6px 13px;border-radius:999px;font-size:13px;cursor:pointer;font-weight:500;
    display:inline-flex;align-items:center;gap:7px}
  .chip:hover{border-color:var(--ink-3)}
  .chip[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
  .chip .c{font-variant-numeric:tabular-nums;opacity:.65;font-size:12px}
  .chip[aria-pressed="true"] .c{opacity:.8}
  .toolbar .spacer{flex:1}
  .result-count{color:var(--ink-3);font-size:12.5px}

  /* Content grid */
  .content{display:grid;grid-template-columns:1fr 312px;gap:20px;align-items:start}

  /* Table */
  .card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
  .table-wrap{overflow-x:auto}
  table{width:100%;border-collapse:collapse;min-width:720px}
  thead th{position:sticky;top:0;background:var(--surface-2);text-align:left;
    font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
    font-weight:600;padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
  thead th.num,tbody td.num{text-align:left}
  tbody td{padding:12px 14px;border-bottom:1px solid var(--border-2);vertical-align:middle}
  tbody tr{cursor:pointer}
  tbody tr:hover{background:var(--surface-2)}
  tbody tr:last-child td{border-bottom:0}
  tbody tr.dim{opacity:.5}
  .prod{display:flex;align-items:center;gap:10px}
  .prod .pname{font-weight:600}
  .prod .pvendor{color:var(--ink-3);font-size:12px}
  .indot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;margin-top:1px}
  .indot.off{background:var(--border);}
  .cat{display:inline-block;font-size:11.5px;color:var(--ink-2);background:var(--surface-2);
    border:1px solid var(--border);padding:2px 9px;border-radius:6px;white-space:nowrap}
  .lic{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;white-space:nowrap;
    color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border)}
  .lic.permissive{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
  .lic.copyleft{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
  .lic.network-copyleft{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 50%,transparent)}
  .lic.proprietary{color:var(--ink-2);border-color:var(--border)}
  .lic.mixed{color:var(--ink-3);border-color:var(--border)}
  /* CVE / security badge (OSV.dev) */
  .cve{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:20px;
    letter-spacing:.01em;border:1px solid transparent;white-space:nowrap}
  .cve.critical{color:#fff;background:var(--crit);border-color:var(--crit)}
  .cve.high{color:var(--crit);background:var(--crit-bg);border-color:var(--crit-bd)}
  .cve.medium{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-bd)}
  .cve.low,.cve.unknown{color:var(--ink-2);background:var(--surface-2);border-color:var(--border)}
  .cvesum{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
  .cvelist{display:flex;flex-direction:column;margin-bottom:6px}
  .cverow{display:grid;grid-template-columns:10px 116px 1fr auto;gap:9px;align-items:center;
    padding:8px 0;border-top:1px solid var(--border-2);color:var(--ink);text-decoration:none}
  .cverow:first-child{border-top:0}
  .cverow:hover .cvid{color:var(--brand-ink);text-decoration:underline}
  .cverow .sevdot{width:8px;height:8px;border-radius:50%}
  .sevdot.critical{background:var(--crit)} .sevdot.high{background:var(--crit);opacity:.65}
  .sevdot.medium{background:var(--warn)} .sevdot.low,.sevdot.unknown{background:var(--ink-3)}
  .cverow .cvid{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
  .cverow .cvsum{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cverow .cvfix{font-size:11px;color:var(--ok);white-space:nowrap;background:var(--ok-bg);
    border:1px solid var(--ok-bd);border-radius:5px;padding:2px 7px;font-variant-numeric:tabular-nums}
  .cvefoot{font-size:11.5px;color:var(--ink-3);margin-top:2px}
  .usn-hint{font-size:12px;color:var(--ink-2);background:var(--warn-bg);border:1px solid var(--warn-bd);
    border-radius:8px;padding:8px 11px;margin-bottom:10px;line-height:1.45}
  .usn-hint b{color:var(--warn);font-variant-numeric:tabular-nums}
  /* DCERT / Telekom CTI advisory markers */
  .dcrow{margin-top:5px}
  .matchtag{font-size:9.5px;font-weight:600;color:var(--ink-3);border:1px solid var(--border);
    border-radius:4px;padding:0 4px;margin-left:4px;vertical-align:1px}
  .src-dt{font-size:10px;font-weight:600;color:var(--brand-ink);background:var(--brand-wash);
    border-radius:5px;padding:1px 6px;margin-left:4px;letter-spacing:.02em;vertical-align:1px}
  .btag{display:inline-block;font-size:10px;font-weight:600;color:var(--brand-ink);background:var(--brand-wash);
    border-radius:5px;padding:1px 6px;margin-left:7px;vertical-align:1px;letter-spacing:.01em}
  td .ver{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px}
  td .ver.dimv{color:var(--ink-3)}

  /* status pill */
  .pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;
    font-size:12.5px;font-weight:600;border:1px solid transparent;white-space:nowrap}
  .pill .g{font-size:10px;line-height:1}
  /* Connected-VMs list */
  .vm{display:flex;flex-direction:column;gap:2px;padding:9px 0;border-bottom:1px solid var(--border)}
  .vm:last-child{border-bottom:0}
  .vm-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .vm-host{font-weight:600;font-size:13.5px;word-break:break-all}
  .vm-meta{color:var(--ink-3);font-size:12px;font-variant-numeric:tabular-nums}
  .vm-stale .vm-host{color:var(--ink-2)}
  .vm-empty{color:var(--ink-3);font-size:13px;padding:4px 0}
  .vm-risks{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
  .vm-risk{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:20px;border:1px solid transparent;
    display:inline-block;font-variant-numeric:tabular-nums}
  .vm-risk.eol{color:var(--crit);background:var(--crit-bg);border-color:var(--crit-bd)}
  .vm-risk.clean{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-bd)}
  /* Ownership / criticality tag (opt-in, set from the host drawer) */
  .own-tag{font-size:10.5px;font-weight:650;padding:1px 7px;border-radius:20px;border:1px solid var(--border);
    color:var(--ink-3);background:var(--surface-2);white-space:nowrap}
  .own-tag.crit-low{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-bd)}
  .own-tag.crit-medium{color:var(--ink-2)}
  .own-tag.crit-high{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-bd)}
  .own-tag.crit-critical{color:var(--crit);background:var(--crit-bg);border-color:var(--crit-bd)}
  .rassets .rown{flex:none}
  .vm-click{cursor:pointer;margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:8px;
    transition:background .12s ease}
  .vm-click:hover,.vm-click:focus-visible{background:var(--surface-2);outline:none}
  .pill.ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-bd)}
  .pill.warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-bd)}
  .pill.crit{color:var(--crit);background:var(--crit-bg);border-color:var(--crit-bd)}
  .pill.none{color:var(--ink-3);background:var(--surface-2);border-color:var(--border)}
  .eol-date{font-variant-numeric:tabular-nums;white-space:nowrap}
  .eol-date .tag{display:block;font-size:11px;margin-top:1px}
  .eol-date.soon .tag{color:var(--warn)} .eol-date.over .tag{color:var(--crit)}
  .verified{color:var(--ink-2);font-size:12.5px;white-space:nowrap}
  .verified .ai{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.04em;
    color:var(--brand-ink);background:var(--brand-wash);padding:1px 5px;border-radius:4px;margin-left:6px;vertical-align:1px}

  /* Right rail */
  .rail{display:flex;flex-direction:column;gap:18px;position:sticky;top:118px}
  .rail h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
    margin:0 0 2px;font-weight:650}
  .rail .card{padding:16px}
  .up-item{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--border-2)}
  .up-item:last-child{border-bottom:0;padding-bottom:0}
  .up-item:first-of-type{padding-top:6px}
  .up-date{font-family:var(--mono);font-size:12px;color:var(--ink-2);white-space:nowrap;padding-top:1px;min-width:52px}
  .up-date.over{color:var(--crit)}
  .up-body{font-size:13px}
  .up-body b{font-weight:600}
  .up-body span{color:var(--ink-3);display:block;font-size:12px}
  .legend{display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--ink-2)}
  .legend div{display:flex;align-items:center;gap:9px}

  /* Drawer */
  .backdrop{position:fixed;inset:0;background:rgba(20,24,31,.34);opacity:0;visibility:hidden;
    transition:opacity .22s ease;z-index:40}
  .backdrop.open{opacity:1;visibility:visible}
  .drawer{position:fixed;top:0;right:0;height:100%;width:472px;max-width:94vw;background:var(--surface);
    box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
    z-index:50;display:flex;flex-direction:column}
  .drawer.open{transform:none}
  .drawer-head{padding:20px 22px 16px;border-bottom:1px solid var(--border)}
  .drawer-head .top{display:flex;justify-content:space-between;align-items:start;gap:12px}
  .drawer-head h2{margin:0;font-size:19px;letter-spacing:-.01em}
  .drawer-head .sub{color:var(--ink-3);font-size:12.5px;margin-top:2px}
  .xbtn{border:1px solid var(--border);background:var(--surface);border-radius:8px;width:32px;height:32px;
    font-size:17px;color:var(--ink-2);cursor:pointer;flex:none;line-height:1}
  .xbtn:hover{background:var(--surface-2)}
  .drawer-body{padding:20px 22px 30px;overflow-y:auto}
  .callout{display:flex;gap:14px;flex-wrap:wrap;background:var(--surface-2);border:1px solid var(--border);
    border-radius:10px;padding:13px 15px;margin-bottom:20px}
  .callout .box{flex:1;min-width:120px}
  .callout .k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
  .callout .v{font-family:var(--mono);font-size:15px;font-weight:600;margin-top:3px}
  .sect{margin-bottom:22px}
  .sect > h4{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
    margin:0 0 10px;font-weight:650}
  .lines{width:100%;border-collapse:collapse;min-width:0}
  .lines th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;
    color:var(--ink-3);font-weight:600;padding:0 10px 7px 0}
  .lines td{padding:7px 10px 7px 0;border-top:1px solid var(--border-2);font-size:13px}
  .lines tr.here td{background:var(--brand-wash)}
  .lines .lv{font-family:var(--mono);font-variant-numeric:tabular-nums}
  .mini{font-size:11px;font-weight:600;padding:1px 7px;border-radius:6px;display:inline-block}
  .mini.ok{color:var(--ok);background:var(--ok-bg)} .mini.warn{color:var(--warn);background:var(--warn-bg)}
  .mini.crit{color:var(--crit);background:var(--crit-bg)} .mini.sec{color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border)}
  .prov{font-size:13px;color:var(--ink-2);display:flex;flex-direction:column;gap:7px}
  .prov .row{display:flex;justify-content:space-between;gap:12px}
  .hist{display:flex;flex-direction:column;gap:0}
  .hist .h{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-2)}
  .hist .h:last-child{border-bottom:0}
  .hist .hd{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap;min-width:74px;padding-top:1px}
  .hist .ht{font-size:13px}
  .hist .ht span{color:var(--ink-3);font-size:12px}
  .note{font-size:12.5px;color:var(--ink-2);background:var(--surface-2);border-left:3px solid var(--brand);
    padding:9px 12px;border-radius:0 8px 8px 0}

  @media (max-width:960px){
    .content{grid-template-columns:1fr}
    .rail{position:static;flex-direction:row;flex-wrap:wrap}
    .rail>section{flex:1;min-width:260px}
    .kpis{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:560px){.kpis{grid-template-columns:1fr 1fr}.wrap{padding:20px 16px 50px}.appbar{padding:12px 16px}.search,.sync{display:none}}
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}

  /* Buttons and the add/edit form */
  .btn{font:inherit;font-size:13px;font-weight:600;border:1px solid var(--border);background:var(--surface);
    color:var(--ink);border-radius:9px;padding:8px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;line-height:1}
  .btn:hover{border-color:var(--ink-3)}
  .btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
  .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
  .btn.primary:hover{filter:brightness(1.06)}
  .btn.danger{color:var(--crit)}
  .btn.danger:hover{border-color:var(--crit);background:var(--crit-bg)}
  .drawer-actions{display:flex;gap:8px;margin:14px 0 4px;flex-wrap:wrap}
  .editor{display:flex;flex-direction:column;gap:14px}
  .editor .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .field{display:flex;flex-direction:column;gap:4px}
  .field.full{grid-column:1/-1}
  .field label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
  .field input,.field select,.field textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--surface-2);
    border:1px solid var(--border);border-radius:8px;padding:8px 10px;outline:none;width:100%}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand)}
  .field textarea{min-height:60px;resize:vertical}
  .field .mono{font-family:var(--mono)}
  .checkline{flex-direction:row;align-items:center;gap:8px}
  .checkline input{width:auto}
  .checkline label{text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--ink)}
  .lines-editor{display:flex;flex-direction:column;gap:8px}
  .lrow{display:grid;grid-template-columns:.8fr 1.1fr 1.1fr .9fr auto;gap:6px;align-items:center}
  .lrow input,.lrow select{font:inherit;font-size:13px;padding:6px 8px;background:var(--surface-2);
    border:1px solid var(--border);border-radius:7px;color:var(--ink);width:100%}
  .lhdr{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
  .iconbtn{border:1px solid var(--border);background:var(--surface);border-radius:7px;cursor:pointer;
    color:var(--ink-2);padding:6px 9px;font:inherit;line-height:1}
  .iconbtn:hover{color:var(--crit);border-color:var(--crit)}
  .err{color:var(--crit);font-size:13px;min-height:1em}
  .themebtn{border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);border-radius:8px;
    width:34px;height:34px;cursor:pointer;font-size:15px;line-height:1;flex:none;
    display:inline-flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s}
  .themebtn:hover{color:var(--ink);border-color:var(--ink-3)}
  .authbtn{border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);border-radius:8px;
    height:34px;padding:0 12px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;flex:none;
    display:inline-flex;align-items:center;gap:5px;white-space:nowrap;transition:color .15s,border-color .15s}
  .authbtn:hover{color:var(--ink);border-color:var(--ink-3)}
  .authbtn.in{color:var(--ok);border-color:var(--ok-bd);background:var(--ok-bg)}
  .sync-err{color:var(--crit)}
  .sync-err .dot{background:var(--crit)}
  .aitag{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:600;color:var(--brand-ink);
    background:var(--brand-wash);border:1px solid var(--brand);border-radius:20px;padding:1px 7px;vertical-align:middle}
  .aiprop{border:1px solid var(--brand);background:var(--brand-wash);border-radius:12px;padding:14px 16px;margin-bottom:18px}
  :root[data-theme="dark"] .aiprop{background:var(--surface-2)}
  .aiprop-h{font-weight:650;display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .aiprop-h .conf{font-size:11px;font-weight:600;color:var(--brand-ink);background:var(--surface);
    border:1px solid var(--brand);border-radius:20px;padding:1px 8px}
  .aiprop-body{font-size:13px;color:var(--ink);display:flex;flex-direction:column;gap:4px}
  .aiprop-body b{font-family:var(--mono)}
  .aiprop-notes{color:var(--ink-2);font-size:12.5px;margin-top:2px}
  .aiprop-src{margin-top:4px;font-size:12px;display:flex;flex-wrap:wrap;gap:8px}

  /* ─── Enterprise polish ──────────────────────────────────────────────
     A cohesive refinement layer: sharper typography, a magenta accent moment,
     card/KPI elevation, a denser-yet-calmer table, a provenance footer and
     print output. Additive — later source order wins ties, nothing removed. */
  html{scroll-behavior:smooth}
  body{font-feature-settings:"kern","liga","cv11";text-rendering:optimizeLegibility;
    letter-spacing:-.005em}
  ::selection{background:var(--brand-wash);color:var(--brand-ink)}
  /* App bar: thin magenta hairline + translucent blur that reads as "product" */
  .appbar{background:color-mix(in srgb,var(--surface) 86%,transparent);
    backdrop-filter:saturate(1.15) blur(10px);-webkit-backdrop-filter:saturate(1.15) blur(10px)}
  .appbar::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
    background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 35%,transparent) 70%,transparent)}
  .brand .mark{box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 45%,transparent)}
  /* Page heading a touch more editorial */
  .pagehead h1{font-size:22px;font-weight:700}
  .pagehead p{max-width:70ch;line-height:1.55}
  /* Cards & KPIs lift subtly on hover — makes the surface feel interactive */
  .card,.kpi{transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease}
  .kpi{cursor:default}
  .kpi:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
  .kpi .num{line-height:1.04;font-size:28px}
  .kpi .lbl{font-weight:500}
  /* Table: zebra + sticky-header elevation + calmer row rhythm (main table only) */
  .table-wrap thead th{box-shadow:inset 0 -1px 0 var(--border)}
  .table-wrap tbody tr{transition:background .12s ease}
  .table-wrap tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
  .table-wrap tbody tr:hover{background:var(--brand-wash)}
  :root[data-theme="dark"] .table-wrap tbody tr:hover{background:var(--surface-2)}
  .prod .pname{letter-spacing:-.01em}
  /* Layout: fit the table into the available width so there is no horizontal
     scrollbar (the License column had pushed it past its old 720px min-width).
     minmax(0,1fr) lets the column shrink; dropping the table min-width plus
     tighter cells and a slightly narrower rail make the 7 columns fit. The
     wrap keeps overflow-x:auto only as a last resort on very narrow screens. */
  .content{grid-template-columns:minmax(0,1fr) 288px;gap:18px}
  .table-wrap{min-width:0}
  .table-wrap table{min-width:0}
  .table-wrap thead th,.table-wrap tbody td{padding-left:10px;padding-right:10px}
  .table-wrap thead th{font-size:10.5px;letter-spacing:.05em}
  td .ver{font-size:12.5px}
  /* Unify pill/badge weight for a crisper, more deliberate look */
  .cat,.lic{font-weight:600}
  .pill{box-shadow:0 1px 0 rgba(0,0,0,.02)}
  /* Chips: active state gets the brand, not flat ink — more on-brand */
  .chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
  .chip[aria-pressed="true"] .c{opacity:.85}
  /* Provenance footer — enterprise credibility */
  .foot{max-width:1760px;margin:8px auto 0;padding:22px 28px 46px;color:var(--ink-3);
    font-size:12.5px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--border)}
  .foot b{color:var(--ink-2);font-weight:650}
  .foot a{color:var(--ink-2)}
  .foot .sep{opacity:.45}
  .foot .spacer{flex:1}
  /* Print: a clean tabular report of the catalog */
  @media print{
    .appbar,.aibar,.rail,.toolbar,.tabs,.themebtn,.search,.sync,#addBtn,.drawer,.backdrop,.foot .spacer{display:none!important}
    /* print the software inventory (the tabular catalog) regardless of page */
    #pageOverview,#pagePatchPlan{display:none!important} #pageInventory{display:block!important}
    body{background:#fff;color:#000}
    .wrap{max-width:none;padding:0}
    .content{grid-template-columns:1fr;gap:0}
    .card{box-shadow:none;border:1px solid #ccc}
    .table-wrap tbody tr:nth-child(even){background:#f4f4f4}
    a[href]::after{content:""}
  }

  /* ─── Mission Control ────────────────────────────────────────────────
     Dark-first ops aesthetic for Argus: a deep space ground with a faint
     magenta aurora, a console dot-matrix, glowing accents, mono digits and
     calm ambient motion. Structural upgrades (mono KPIs, severity bars,
     row entrance) apply to both themes; the heavy atmosphere is scoped to
     the dark theme so light mode keeps its clean enterprise look. */
  /* Deeper, cooler dark ground; a touch more voltage on the accent */
  :root[data-theme="dark"]{
    --bg:#090b11; --surface:#11141c; --surface-2:#171b25;
    --border:#232936; --border-2:#1c212c;
    --brand:#f2188c; --brand-ink:#ff6fb5; --brand-wash:#2c0e20;
  }
  :root[data-theme="dark"] body{
    background:
      radial-gradient(1100px 520px at 82% -12%,rgba(226,0,116,.14),transparent 60%),
      radial-gradient(950px 640px at -12% 112%,rgba(76,98,255,.09),transparent 55%),
      var(--bg);
    background-attachment:fixed}
  /* Faint dot matrix over the whole viewport — reads as "console" */
  :root[data-theme="dark"] body::before{content:"";position:fixed;inset:0;z-index:0;
    pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);
    background-size:26px 26px}
  :root[data-theme="dark"] .appbar{background:color-mix(in srgb,var(--bg) 74%,transparent)}
  /* The hairline sweeps slowly across the top — the watchman never sleeps */
  .appbar::before{background:linear-gradient(90deg,transparent,var(--brand) 30%,
      color-mix(in srgb,var(--brand) 30%,transparent) 65%,transparent);
    background-size:220% 100%;animation:sweep 10s linear infinite}
  @keyframes sweep{from{background-position:200% 0}to{background-position:-200% 0}}
  .brand .mark{animation:watch 5.5s ease-in-out infinite}
  @keyframes watch{0%,100%{box-shadow:0 0 6px color-mix(in srgb,var(--brand) 40%,transparent)}
    50%{box-shadow:0 0 16px 3px color-mix(in srgb,var(--brand) 60%,transparent)}}
  :root[data-theme="dark"] .brand .wm{text-shadow:0 0 20px color-mix(in srgb,var(--brand) 55%,transparent)}
  .sync .dot{animation:beat 2.4s ease-in-out infinite}
  @keyframes beat{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 50%,transparent)}
    55%{box-shadow:0 0 0 5px transparent}}
  /* KPIs: mono digits, state glow, dimmed zeros, a breathing critical stripe */
  .kpi .num{font-family:var(--mono);letter-spacing:-.01em}
  :root[data-theme="dark"] .kpi{background:linear-gradient(180deg,
    color-mix(in srgb,var(--surface-2) 65%,transparent),var(--surface))}
  :root[data-theme="dark"] .kpi.crit .num{text-shadow:0 0 18px color-mix(in srgb,var(--crit) 50%,transparent)}
  :root[data-theme="dark"] .kpi.warn .num{text-shadow:0 0 18px color-mix(in srgb,var(--warn) 40%,transparent)}
  :root[data-theme="dark"] .kpi.ok .num{text-shadow:0 0 18px color-mix(in srgb,var(--ok) 40%,transparent)}
  :root[data-theme="dark"] .kpi.brand .num{text-shadow:0 0 18px color-mix(in srgb,var(--brand) 40%,transparent)}
  .kpi.zero .num{color:var(--ink-3);text-shadow:none}
  .kpi.crit:not(.zero) .stripe{animation:breathe 2.8s ease-in-out infinite}
  @keyframes breathe{0%,100%{opacity:1}50%{opacity:.35}}
  /* Severity mini-bar below the CVE badge (critical→low, proportional) —
     always on its own line so rows read identically at any column width */
  .sevbar{display:flex;gap:1px;width:44px;height:4px;border-radius:2px;overflow:hidden;
    margin:5px 0 0 2px;background:var(--border-2)}
  .sevbar .sb{display:block;height:100%;min-width:2px}
  .sevbar .c{background:var(--crit)}
  .sevbar .h{background:color-mix(in srgb,var(--crit) 62%,var(--warn))}
  .sevbar .m{background:var(--warn)}
  .sevbar .l{background:var(--ink-3)}
  /* Rows rise in softly, top-first */
  @keyframes rowin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
  #rows tr{animation:rowin .32s cubic-bezier(.2,.7,.3,1) both}
  #rows tr:nth-child(2){animation-delay:.03s} #rows tr:nth-child(3){animation-delay:.06s}
  #rows tr:nth-child(4){animation-delay:.09s} #rows tr:nth-child(5){animation-delay:.12s}
  #rows tr:nth-child(6){animation-delay:.15s} #rows tr:nth-child(7){animation-delay:.18s}
  #rows tr:nth-child(8){animation-delay:.21s} #rows tr:nth-child(9){animation-delay:.24s}
  #rows tr:nth-child(n+10){animation-delay:.27s}
  /* Row hover: a magenta cursor line on the left edge */
  .table-wrap tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--brand)}
  :root[data-theme="dark"] thead th{background:color-mix(in srgb,var(--surface) 55%,var(--bg))}
  :root[data-theme="dark"] .chip[aria-pressed="true"]{box-shadow:0 0 14px color-mix(in srgb,var(--brand) 30%,transparent)}
  .backdrop{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
  :root[data-theme="dark"] .drawer{border-left:1px solid var(--border)}
  :root[data-theme="dark"] ::selection{background:color-mix(in srgb,var(--brand) 35%,transparent);color:#fff}
  /* AI & automation bar: a second fixed strip under the app bar hosting the
     sync status and the on-demand job triggers with inline status. */
  .aibar{display:flex;align-items:center;gap:11px;padding:8px 28px;flex-wrap:wrap;row-gap:6px;
    background:color-mix(in srgb,var(--surface) 86%,transparent);
    backdrop-filter:saturate(1.15) blur(10px);-webkit-backdrop-filter:saturate(1.15) blur(10px);
    border-bottom:1px solid var(--border);font-size:12.5px}
  :root[data-theme="dark"] .aibar{background:color-mix(in srgb,var(--bg) 72%,transparent)}
  .aibar-l{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);
    font-weight:650;white-space:nowrap}
  .aibar .sep{width:1px;align-self:stretch;background:var(--border)}
  .aibtn{font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--surface);
    border:1px solid var(--border);border-radius:999px;padding:5px 13px;cursor:pointer;
    display:inline-flex;align-items:center;gap:7px;line-height:1.3;white-space:nowrap;
    transition:color .12s,border-color .12s,box-shadow .12s}
  .aibtn .pg{color:var(--brand);font-size:9px}
  .aibtn:hover{color:var(--ink);border-color:var(--brand)}
  :root[data-theme="dark"] .aibtn:hover{box-shadow:0 0 10px color-mix(in srgb,var(--brand) 25%,transparent)}
  .aibtn:disabled{opacity:.55;cursor:default;box-shadow:none}
  .aistat{font-style:normal;font-size:11.5px;font-weight:600;color:var(--ink-3);
    font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:-4px}
  .aistat:empty{display:none}
  .aistat.runy{color:var(--brand-ink)}
  .aistat.runy::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
    background:var(--brand);margin-right:5px;vertical-align:1px;animation:breathe 1.4s ease-in-out infinite}
  .aistat.rok{color:var(--ok)}
  .aistat.rerr{color:var(--crit);max-width:150px;overflow:hidden;text-overflow:ellipsis}
  .aibar .spacer{flex:1}
  .aibar-hint{color:var(--ink-3);font-size:11.5px;white-space:nowrap}
  @media (max-width:900px){.aibar-hint{display:none}}
  @media (max-width:560px){.aibar{padding:8px 16px}}
  /* Wide screens: let the data grid breathe — wider rail, roomier gutters.
     Lives at the end of the sheet so it wins over the base rules above. */
  @media (min-width:1500px){
    .wrap{padding:32px 44px 70px}
    .appbar{padding:14px 44px}
    .aibar{padding:8px 44px}
    .foot{padding-left:44px;padding-right:44px}
    .content{grid-template-columns:minmax(0,1fr) 340px;gap:26px}
    .kpis{gap:18px}
    .table-wrap thead th,.table-wrap tbody td{padding-left:14px;padding-right:14px}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none!important}}

  /* Ask Argus: floating assistant — a persona with the all-seeing eye */
  /* --- Service SLA / SLO overview --- */
  .sla-head-ctl{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:2px}
  .seg-b{all:unset;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink-3);padding:6px 13px;border-radius:8px;transition:background .12s,color .12s}
  .seg-b.active{background:var(--brand);color:#fff}
  .sla-target{font-size:12px;color:var(--ink-3)}.sla-target b{color:var(--ink)}
  .sla-meta{color:var(--ink-3);font-size:12px}
  .sla-loading{color:var(--ink-3);font-size:13px;padding:30px 4px}
  .sla-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
  .sc-status{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:20px;white-space:nowrap}
  .sc-status .ldot{width:9px;height:9px;border-radius:50%;background:currentColor;position:relative}
  .sc-status.ok{color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-bd)}
  .sc-status.warn{color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-bd)}
  .sc-status.crit{color:var(--crit);background:var(--crit-bg);border:1px solid var(--crit-bd)}
  .sc-status.na{color:var(--ink-3);background:var(--surface-2);border:1px solid var(--border)}
  .sc-status.ok .ldot::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;animation:slaPulse 2s ease-out infinite}
  @keyframes slaPulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.6);opacity:0}}
  @media (prefers-reduced-motion:reduce){.sc-status .ldot::after{animation:none}}
  .sla-summary{display:flex;gap:12px;flex-wrap:wrap;margin:4px 0 18px}
  .sla-stat{flex:1;min-width:150px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 15px}
  .sla-stat .s-num{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
  .sla-stat .s-lbl{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
  .sla-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:16px}
  .sla-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:13px}
  .sc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
  .sc-proj{font-size:17px;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
  .sc-sub{font-size:11px;color:var(--ink-3);margin-top:2px}
  .sc-chip{font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap}
  .sc-chip.ok{color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-bd)}
  .sc-chip.warn{color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-bd)}
  .sc-chip.crit{color:var(--crit);background:var(--crit-bg);border:1px solid var(--crit-bd)}
  .sc-hero{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .sc-sla{font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
  .sc-sla.ok{color:var(--ok)}.sc-sla.good{color:var(--ok)}.sc-sla.warn{color:var(--warn)}.sc-sla.crit{color:var(--crit)}.sc-sla.na{color:var(--ink-3)}
  .sc-vs{font-size:12px;color:var(--ink-3)}
  .sc-budget{display:flex;flex-direction:column;gap:5px}
  /* Compliance report — a light 'paper' document that prints cleanly */
  /* the report sheet sits on a subtle themed "desk" so the white page reads as
     deliberately placed on the dark UI (a thin neon hairline above it) */
  .rpt-desk{position:relative;padding:20px 0 8px}
  .rpt-desk::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(960px,100%);height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--brand),transparent);opacity:.55}
  .rpt-paper{position:relative;background:#fff;color:#1a2230;border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 50px -24px rgba(0,0,0,.5);padding:40px 44px;max-width:960px;margin:0 auto;font-size:13px;line-height:1.5}
  .rpt-paper h2{font-size:22px;font-weight:800;margin:0;color:#0b1220;letter-spacing:-.01em}
  .rpt-paper h3{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#e20074;margin:26px 0 10px;padding-bottom:6px;border-bottom:2px solid #f0e0ea}
  @media print{
    body *{visibility:hidden!important}
    #pageReport,#pageReport *{visibility:visible!important}
    .pagehead,.sidenav,.appbar,.foot,.chat-fab,.chat-panel,.aibar{display:none!important}
    #pageReport{position:absolute;left:0;top:0;width:100%;display:block!important}
    .rpt-desk{padding:0}.rpt-desk::before{display:none}
    .rpt-paper{box-shadow:none;border:0;border-radius:0;max-width:100%;padding:0;margin:0}
    h3{break-after:avoid}tr{break-inside:avoid}
    @page{margin:16mm}
  }
  /* Remediation / AutoFix */
  .rmd-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
  .rmd-chip{all:unset;cursor:pointer;font-size:12px;font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:6px 13px;display:inline-flex;align-items:center;gap:7px;transition:border-color .12s,color .12s,background .12s}
  .rmd-chip:hover{border-color:var(--brand);color:var(--ink)}
  .rmd-chip.active{background:var(--brand);color:#fff;border-color:var(--brand)}
  .rmd-chip .ct{font-variant-numeric:tabular-nums;opacity:.85}
  .rmd-fix{all:unset;cursor:pointer;font-size:12px;font-weight:700;color:#fff;background:var(--brand);border-radius:9px;padding:8px 13px;white-space:nowrap;flex:none;transition:filter .12s}
  .rmd-fix:hover{filter:brightness(1.08)}
  .rmd-fix.plan{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)}
  .rmd-empty{color:var(--ok);font-size:14px;padding:30px 4px;text-align:center}
  .rmd-loading{color:var(--ink-3);font-size:13px;padding:30px 4px}
  /* toolbar: scope filters + grouping + snoozed toggle */
  .rmd-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 14px}
  .rmd-tools select{font:inherit;font-size:12px;padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer}
  .rmd-tools select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)}
  .rmd-snztoggle{all:unset;cursor:pointer;font-size:12px;font-weight:600;color:var(--ink-2);border:1px solid var(--border);border-radius:8px;padding:6px 11px}
  .rmd-snztoggle.on{color:var(--brand-ink);border-color:color-mix(in srgb,var(--brand) 40%,transparent);background:var(--brand-wash)}
  /* toolbar actions: fix-in-filter + CSV export */
  .rmd-act{all:unset;cursor:pointer;font-size:12px;font-weight:700;color:#fff;background:var(--brand);border-radius:8px;padding:6px 12px;white-space:nowrap;display:inline-flex;gap:7px;align-items:center;transition:filter .12s,border-color .12s,color .12s}
  .rmd-act:hover{filter:brightness(1.08)}
  .rmd-act .ct{font-variant-numeric:tabular-nums;background:rgba(255,255,255,.22);border-radius:10px;padding:0 6px;font-weight:800}
  .rmd-act.ghost{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)}
  .rmd-act.ghost:hover{border-color:var(--brand);color:var(--ink);filter:none}
  .rmd-act[aria-disabled=true]{opacity:.4;cursor:default;filter:none;pointer-events:none}
  /* schedule-update calendar modal (patch items -> pick a window, then hand to Argus) */
  .cal-overlay{position:fixed;inset:0;z-index:80;background:rgba(4,6,10,.72);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding:44px 16px;overflow:auto}
  .cal-overlay[hidden]{display:none}
  .cal-panel{position:relative;background:linear-gradient(160deg,#0b0e15,#070a10);border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border));border-radius:16px;width:min(430px,100%);box-shadow:0 30px 80px -20px rgba(0,0,0,.8);padding:20px 22px 22px}
  .cal-close{all:unset;cursor:pointer;position:absolute;top:12px;right:14px;color:var(--ink-3);font-size:15px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:7px}
  .cal-close:hover{background:var(--surface-2);color:var(--ink)}
  .cal-title{font-size:16px;font-weight:800;color:var(--ink);padding-right:26px}
  .cal-sub{font-size:12px;color:var(--ink-3);margin-top:3px;margin-bottom:15px}
  .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .cal-mon{font-weight:700;font-size:13.5px;color:var(--ink)}
  .cal-nav{all:unset;cursor:pointer;color:var(--ink-2);padding:4px 9px;border-radius:6px;font-size:12px}
  .cal-nav:hover{background:var(--surface-2);color:var(--ink)}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
  .cal-dow{text-align:center;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);padding:3px 0}
  .cal-day{all:unset;cursor:pointer;text-align:center;font-size:12.5px;padding:8px 0;border-radius:8px;color:var(--ink-2);font-variant-numeric:tabular-nums;border:1px solid transparent}
  .cal-day:hover{background:var(--surface-2);color:var(--ink)}
  .cal-day.om{visibility:hidden;pointer-events:none}
  .cal-day.today{border-color:color-mix(in srgb,var(--brand) 45%,transparent);color:var(--ink)}
  .cal-day.sel{background:var(--brand);color:#fff;font-weight:800;border-color:var(--brand)}
  .cal-day.past{opacity:.32;pointer-events:none}
  .cal-presets{display:flex;gap:6px;flex-wrap:wrap;margin:13px 0 2px}
  .cal-preset{all:unset;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:5px 10px}
  .cal-preset:hover{border-color:var(--brand);color:var(--ink)}
  .cal-preset.now{color:var(--brand-ink);border-color:color-mix(in srgb,var(--brand) 40%,transparent)}
  .cal-preset.on{background:var(--brand);color:#fff;border-color:var(--brand)}
  .cal-row{display:flex;gap:12px;margin-top:13px}
  .cal-lbl{display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);flex:1}
  .cal-lbl-full{margin-top:12px}
  .cal-lbl input,.cal-lbl select{font:inherit;font-size:13px;font-weight:400;text-transform:none;letter-spacing:0;padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--ink)}
  .cal-lbl input:focus,.cal-lbl select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)}
  .cal-note{font-size:11.5px;color:var(--ink-3);margin-top:13px;display:flex;gap:6px;align-items:flex-start;line-height:1.4}
  .cal-btns{display:flex;align-items:center;gap:10px;margin-top:16px}
  .cal-msg{flex:1;font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
  /* schedule row inside a chat confirm card (reboot/patch) */
  .ca-sched{margin-top:9px;font-size:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--ink-2)}
  .ca-sched .ca-when{font-weight:700;color:var(--ink)}
  .ca-pick{all:unset;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--brand-ink);border:1px solid color-mix(in srgb,var(--brand) 40%,transparent);border-radius:7px;padding:4px 9px}
  .ca-pick:hover{background:var(--brand-wash)}
  /* Agent activity dashboard */
  .agt-gw{margin:6px 0 2px;border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border));border-radius:14px;padding:13px 16px;background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 6%,var(--surface)),var(--surface))}
  .agt-gw h3{margin:0 0 3px;font-size:12.5px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:7px}
  .agt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
  @media(max-width:800px){.agt-grid{grid-template-columns:1fr}}
  .agt-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px}
  .agt-card h3{margin:0 0 11px;font-size:12px;font-weight:700;color:var(--ink-2)}
  .agt-h{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin:18px 0 9px}
  .agt-spark{display:flex;align-items:flex-end;gap:3px;height:120px}
  /* Component dashboard overlay */
  .dash-overlay{position:fixed;inset:0;z-index:70;background:rgba(4,6,10,.72);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow:auto}
  .dash-overlay[hidden]{display:none}
  .dash-panel{position:relative;background:linear-gradient(160deg,#0b0e15,#070a10);border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border));border-radius:18px;width:min(1180px,100%);box-shadow:0 30px 80px -20px rgba(0,0,0,.8);padding:18px 20px 22px}
  .dash-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
  .dash-title{font-size:18px;font-weight:800;background:linear-gradient(92deg,var(--ink),#ff5ca8 65%,#a78bfa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .dash-sub{font-size:12px;color:var(--ink-3);margin-top:3px}
  .dash-head-ctl{display:flex;align-items:center;gap:12px}
  .dash-body{display:flex;flex-direction:column;gap:16px}
  .dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px}
  .dash-stat{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:11px 13px;border-left:3px solid var(--ink-3)}
  .dash-stat.ok{border-left-color:var(--ok)} .dash-stat.warn{border-left-color:var(--warn)} .dash-stat.crit{border-left-color:var(--crit)} .dash-stat.na{border-left-color:var(--border)}
  .dash-stat .v{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
  .dash-stat.ok .v{color:var(--ok)} .dash-stat.warn .v{color:var(--warn)} .dash-stat.crit .v{color:var(--crit)}
  .dash-stat .v small{font-size:11px;font-weight:600;color:var(--ink-3);margin-left:2px}
  .dash-stat .k{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin-top:3px}
  .dash-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .dash-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px}
  .dash-card h4{margin:0 0 8px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
  .dash-chart{width:100%;height:150px;display:block;overflow:visible}
  .dash-leg{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px}
  .dash-leg span{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums}
  .dash-leg i{width:9px;height:9px;border-radius:2px}
  .dash-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
  .dash-tbl th{text-align:left;color:var(--ink-3);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;padding:6px 8px;border-bottom:1px solid var(--border)}
  .dash-tbl td{padding:7px 8px;border-bottom:1px solid var(--border-2);font-variant-numeric:tabular-nums}
  .dash-tbl .up{color:var(--ok)} .dash-tbl .dn{color:var(--crit)}
  .dash-tbl tr.drill{cursor:pointer;transition:background .1s}
  .dash-tbl tr.drill:hover td{background:color-mix(in srgb,var(--brand) 9%,transparent)}
  .dash-tbl tr.drill td:first-child::after{content:" ↗";color:var(--brand-ink);opacity:.6;font-size:11px}
  @media (max-width:820px){.dash-charts{grid-template-columns:1fr}}
  .sla-sec-head{display:flex;align-items:baseline;gap:12px;margin:26px 0 14px;flex-wrap:wrap}
  .sla-sec-head h2{font-size:16px;font-weight:800;margin:0}
  .sla-sec-head span{font-size:12px;color:var(--ink-3)}
  .sc-kicon{width:30px;height:30px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:15px;flex:none}
  /* SLA tier detail modal */
  .sla-overlay{position:fixed;inset:0;z-index:60;background:rgba(6,8,12,.62);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:40px 16px}
  .sla-overlay[hidden]{display:none}
  .sla-panel{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;width:min(460px,100%);max-height:86vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.5);padding:20px 22px;animation:iaPop .18s cubic-bezier(.2,.8,.3,1)}
  .sla-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border:0;border-radius:8px;background:var(--surface-2);color:var(--ink-2);cursor:pointer;font-size:14px;line-height:1}
  .sla-close:hover{background:var(--border);color:var(--ink)}
  .sc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--border);padding-top:11px}
  .sc-ask{all:unset;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--brand-ink)}
  .sc-ask:hover{text-decoration:underline}
  .sla-plat-card{cursor:pointer;transition:border-color .15s,transform .1s}
  .sla-plat-card:hover{border-color:var(--brand)}
  .sla-plat-card:active{transform:translateY(1px)}
  .sla-plat-desc{margin:12px 0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
  .chat-fab{position:fixed;right:22px;bottom:22px;z-index:40;width:56px;height:56px;border-radius:50%;
    border:none;cursor:pointer;color:#fff;background:radial-gradient(circle at 35% 30%,#ff5ca8,var(--brand) 72%);
    box-shadow:0 8px 24px rgba(226,0,116,.4);display:flex;align-items:center;justify-content:center;
    transition:transform .15s,box-shadow .15s;animation:chat-pop .3s ease}
  .chat-fab svg{width:26px;height:26px}
  .chat-fab:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 10px 30px rgba(226,0,116,.5)}
  .chat-fab::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--brand);
    opacity:.5;animation:chat-ring 2.6s ease-out infinite;pointer-events:none}
  @keyframes chat-ring{0%{transform:scale(1);opacity:.45}100%{transform:scale(1.4);opacity:0}}
  @keyframes chat-pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
  .chat-panel{position:fixed;right:22px;bottom:22px;z-index:41;width:min(410px,calc(100vw - 32px));
    height:min(600px,calc(100vh - 90px));background:var(--surface);border:1px solid var(--border);
    border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.42);display:flex;flex-direction:column;
    overflow:hidden;animation:chat-in .22s cubic-bezier(.2,.8,.3,1);transition:height .2s,width .2s}
  @keyframes chat-in{from{transform:translateY(16px) scale(.97);opacity:0}to{transform:none;opacity:1}}
  .chat-panel.big{width:min(580px,calc(100vw - 32px));height:min(800px,calc(100vh - 56px))}
  .chat-panel.min{height:58px!important}
  .chat-panel.min .chat-log,.chat-panel.min .chat-form{display:none}
  .chat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;
    border-bottom:1px solid var(--border);cursor:grab;
    background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 15%,var(--surface)),var(--surface))}
  .chat-head .chat-hbtn,.chat-head .chat-ident{cursor:default}
  .chat-panel.dragging{cursor:grabbing;user-select:none;transition:none;animation:none}
  .chat-panel.dragging .chat-head{cursor:grabbing}
  /* popped out into a Document Picture-in-Picture window: fill it */
  .chat-panel.pip{position:static;inset:auto;right:auto;bottom:auto;left:auto;top:auto;
    width:100%;height:100vh;max-height:none;border:0;border-radius:0;box-shadow:none;animation:none}
  /* --- popped out: dress it up as a standalone, super-modern chat app --- */
  .chat-panel.pip{background:
    radial-gradient(125% 80% at 15% -12%, color-mix(in srgb,var(--brand) 17%,transparent), transparent 55%),
    radial-gradient(95% 70% at 112% 116%, color-mix(in srgb,#2dd4bf 11%,transparent), transparent 55%),
    linear-gradient(180deg,#0b0e15,#070910)}
  .chat-panel.pip .chat-head{padding:15px 17px;border-bottom:1px solid color-mix(in srgb,var(--brand) 20%,var(--border));
    background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 10%,transparent),transparent)}
  .chat-panel.pip .chat-av{width:40px;height:40px;box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 45%,transparent),0 0 24px -6px var(--brand)}
  .chat-panel.pip .chat-name{font-size:15.5px;font-weight:800;letter-spacing:-.015em}
  .chat-panel.pip .chat-status{font-size:11px}
  .chat-panel.pip .chat-hbtn:not(#chatKb){display:none}          /* OS window handles close/size */
  .chat-panel.pip .chat-log{padding:20px 18px;gap:16px}
  .chat-panel.pip .chat-row{align-items:flex-end}
  .chat-panel.pip .chat-av.sm{width:27px;height:27px;flex:none;box-shadow:0 0 16px -6px var(--brand)}
  .chat-panel.pip .chat-msg{max-width:82%;font-size:13.5px;line-height:1.58;padding:11px 14px;border-radius:19px}
  .chat-panel.pip .chat-msg.user{background:linear-gradient(135deg,#ff5ca8,var(--brand));color:#fff;
    border-bottom-right-radius:6px;box-shadow:0 12px 28px -14px var(--brand)}
  .chat-panel.pip .chat-msg.bot{background:color-mix(in srgb,var(--surface-2) 78%,transparent);
    border:1px solid color-mix(in srgb,var(--brand) 12%,var(--border));backdrop-filter:blur(7px);
    border-bottom-left-radius:6px;box-shadow:0 12px 30px -20px rgba(0,0,0,.8)}
  .chat-panel.pip .chat-typing{padding:12px 15px;border-radius:16px;background:color-mix(in srgb,var(--surface-2) 78%,transparent)}
  .chat-panel.pip .chat-typing i{width:7px;height:7px}
  .chat-panel.pip .chat-greet{font-size:13.5px;line-height:1.6;padding:8px 4px 2px}
  .chat-panel.pip .chat-sugg button{border-radius:20px;padding:9px 14px;background:color-mix(in srgb,var(--surface-2) 70%,transparent);
    border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border))}
  .chat-panel.pip .chat-sugg button:hover{border-color:var(--brand);background:var(--brand-wash)}
  /* z-index above the later .chat-log sibling (.pip>* gives every child its own
     stacking context at z-index:1) -- otherwise the role drop-down opens BELOW
     the log and cannot be clicked in the popped-out widget. */
  .chat-panel.pip .chat-modelbar{background:transparent;border-bottom:0;padding:9px 16px 2px;justify-content:flex-end;gap:6px;z-index:2}
  .chat-panel.pip .chat-modelbar .cm-label{display:none}
  .chat-panel.pip .chat-model{flex:0 0 auto;width:auto;font-size:11px;color:var(--ink-2);
    background:color-mix(in srgb,var(--surface-2) 55%,transparent);
    border:1px solid color-mix(in srgb,var(--brand) 24%,var(--border));border-radius:20px;padding:5px 13px 5px 12px;
    -webkit-appearance:none;appearance:none;backdrop-filter:blur(6px);
    background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%,var(--ink-3) 60%,transparent 60%);
    background-position:right 11px center;background-size:9px 9px;background-repeat:no-repeat;padding-right:26px}
  .chat-panel.pip .chat-model:hover{border-color:var(--brand);color:var(--ink)}
  /* header depth + soft neon underline */
  .chat-panel.pip .chat-head{box-shadow:0 1px 0 color-mix(in srgb,var(--brand) 22%,transparent),0 14px 30px -26px #000}
  .chat-panel.pip .chat-name{background:linear-gradient(92deg,var(--ink),#ff9dcb 120%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  /* composer: floating glass bar with a bit more presence */
  .chat-panel.pip .chat-form{background:linear-gradient(0deg,#070910 72%,transparent)}
  .chat-panel.pip .chat-form input{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 30px -18px #000,0 0 0 0 transparent}
  .chat-panel.pip .chat-form button{box-shadow:0 10px 24px -8px var(--brand),0 0 0 1px color-mix(in srgb,#fff 12%,transparent) inset}
  .chat-panel.pip .chat-form{align-items:center;gap:10px;padding:14px 16px 18px;border-top:0;
    background:linear-gradient(0deg,#070910 60%,transparent)}
  .chat-panel.pip .chat-form input{border-radius:24px;padding:13px 17px;font-size:13.5px;
    background:color-mix(in srgb,var(--surface) 82%,transparent);
    border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 10px 26px -18px rgba(0,0,0,.9)}
  .chat-panel.pip .chat-form input:focus{border-color:var(--brand);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent),0 0 28px -12px var(--brand)}
  .chat-panel.pip .chat-form button{width:46px;height:46px;border-radius:50%;flex:none;font-size:16px;
    background:linear-gradient(135deg,#ff5ca8,var(--brand));box-shadow:0 10px 24px -8px var(--brand)}
  .chat-panel.pip .chat-form button:hover{filter:brightness(1.07)}
  /* --- "mega modern AI operator" console (popped out) --- */
  .chat-panel.pip{position:relative;overflow:hidden}
  .chat-panel.pip>*{position:relative;z-index:1}
  .chat-panel.pip::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
    background:radial-gradient(38% 30% at 22% 12%, color-mix(in srgb,var(--brand) 24%,transparent), transparent 60%),
               radial-gradient(34% 26% at 86% 88%, color-mix(in srgb,#7c5cff 20%,transparent), transparent 60%),
               radial-gradient(30% 24% at 60% 50%, color-mix(in srgb,#2dd4bf 12%,transparent), transparent 60%);
    filter:blur(10px);animation:opAmbient 20s ease-in-out infinite alternate}
  @keyframes opAmbient{0%{transform:translate3d(-4%,-3%,0) scale(1.05) rotate(0deg)}100%{transform:translate3d(5%,4%,0) scale(1.18) rotate(6deg)}}
  .chat-panel.pip::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
    background-image:linear-gradient(color-mix(in srgb,var(--brand) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--brand) 8%,transparent) 1px,transparent 1px);
    background-size:44px 44px;-webkit-mask-image:radial-gradient(120% 90% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(120% 90% at 50% 30%,#000,transparent 75%)}
  @media (prefers-reduced-motion:reduce){.chat-panel.pip::before{animation:none}}
  .chat-eyebrow{display:none}
  .chat-panel.pip .chat-eyebrow{display:block;font-size:8.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
    color:transparent;background:linear-gradient(90deg,#ff8fc4,var(--brand),#a78bfa);-webkit-background-clip:text;background-clip:text;margin-bottom:1px}
  .chat-panel.pip .chat-head .chat-av::after{content:"";position:absolute;inset:-4px;border-radius:50%;
    border:1.5px solid color-mix(in srgb,var(--brand) 55%,transparent);animation:opRing 2.6s ease-out infinite}
  @keyframes opRing{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.55);opacity:0}}
  .chat-panel.pip.thinking .chat-head .chat-av::after{animation-duration:1s;border-color:color-mix(in srgb,#a78bfa 70%,transparent)}
  .chat-panel.pip .chat-status{font-variant-numeric:tabular-nums}
  .chat-panel.pip .chat-row{animation:opRise .34s cubic-bezier(.2,.8,.3,1)}
  @keyframes opRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
  .chat-quick{display:none}
  .chat-panel.pip .chat-quick{display:flex;gap:7px;flex-wrap:wrap;padding:2px 17px 6px}
  .chat-panel.pip .chat-quick button{all:unset;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--ink-2);
    background:color-mix(in srgb,var(--surface-2) 66%,transparent);border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border));
    border-radius:20px;padding:6px 12px;transition:border-color .12s,color .12s,background .12s}
  .chat-panel.pip .chat-quick button:hover{border-color:var(--brand);color:var(--ink);background:var(--brand-wash)}
  .chat-cmds{position:absolute;left:16px;right:16px;bottom:72px;z-index:6;max-height:220px;overflow:auto;
    background:linear-gradient(160deg,#0b0e15,#070a10);border:1px solid color-mix(in srgb,var(--brand) 26%,var(--border));
    border-radius:12px;box-shadow:0 22px 54px -18px rgba(0,0,0,.85)}
  .chat-cmds[hidden]{display:none}
  .chat-cmd{display:flex;gap:9px;align-items:baseline;padding:9px 13px;cursor:pointer}
  .chat-cmd:hover,.chat-cmd.sel{background:var(--brand-wash)}
  .chat-cmd b{font-family:var(--mono);font-size:12px;color:var(--brand-ink);font-weight:700}
  .chat-cmd span{font-size:11px;color:var(--ink-3)}
  /* proactive robot reports (problems the operator flags itself) */
  .chat-msg.robot{border-left:2.5px solid var(--brand)}
  .chat-panel.pip .chat-msg.robot{background:color-mix(in srgb,var(--brand) 13%,transparent);
    border:1px solid color-mix(in srgb,var(--brand) 30%,var(--border));border-left:2.5px solid var(--brand);
    box-shadow:0 0 22px -14px var(--brand)}
  /* calm 15-min pulse / all-clear */
  .chat-panel.pip .chat-msg.heartbeat{background:color-mix(in srgb,var(--surface-2) 50%,transparent);
    border:1px dashed color-mix(in srgb,var(--ink-3) 45%,transparent);color:var(--ink-2);font-size:12px;opacity:.92;box-shadow:none}
  .chat-panel.pip .chat-msg.heartbeat b{color:var(--ink)}
  /* installed "AI Operator" app: full-window operator, the dashboard chrome is hidden */
  body.op-app{overflow:hidden}
  body.op-app .sidenav,body.op-app .topbars,body.op-app main,body.op-app .chat-fab,body.op-app .toast-wrap{display:none!important}
  body.op-app .chat-panel{display:flex!important;position:fixed;inset:0;width:100vw;height:100vh;max-height:none;margin:0;border:0;border-radius:0;z-index:5}
  body.op-app .chat-panel.pip{position:fixed;inset:0}
  .op-full{display:none;position:fixed;top:11px;right:13px;z-index:9;cursor:pointer;font-size:11px;font-weight:700;
    color:var(--ink-2);background:color-mix(in srgb,var(--surface-2) 55%,transparent);border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border));
    border-radius:20px;padding:6px 12px}
  body.op-app .op-full{display:inline-block}
  .op-tray{right:104px}.op-tray:hover{color:var(--brand);border-color:var(--brand)}
  .chat-tray-btn{display:none!important}
  body.op-app .chat-tray-btn,body.in-tauri .chat-tray-btn{display:inline-flex!important}
  .op-full:hover{border-color:var(--brand);color:var(--ink)}
  .chat-panel.min .chat-head{cursor:pointer;border-bottom:0}
  /* install-as-app button (PWA) */
  /* proactive notifications: bell, panel + toasts */
  .ntf-wrap{position:relative}
  .ntf-bell{all:unset;cursor:pointer;position:relative;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--ink-2);border:1px solid var(--border);background:var(--surface)}
  .ntf-bell:hover{color:var(--ink);border-color:var(--brand)}
  .ntf-bell svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .ntf-bell.ring svg{animation:ntfring .7s ease}
  @keyframes ntfring{0%,100%{transform:rotate(0)}15%{transform:rotate(15deg)}30%{transform:rotate(-11deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}75%{transform:rotate(2deg)}}
  .ntf-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--crit);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--surface)}
  .ntf-panel{position:absolute;right:0;top:46px;width:344px;max-height:64vh;overflow:auto;z-index:60;background:linear-gradient(160deg,#0b0e15,#070a10);border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border));border-radius:14px;box-shadow:0 24px 60px -20px rgba(0,0,0,.8);padding:4px}
  .ntf-panel[hidden]{display:none}
  .ntf-head{display:flex;align-items:center;gap:10px;padding:9px 11px;border-bottom:1px solid var(--border-2)}
  .ntf-head b{font-size:13px;color:var(--ink);flex:1}
  .ntf-toggle{font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:5px;cursor:pointer}
  .ntf-clear{all:unset;cursor:pointer;font-size:11px;color:var(--brand-ink)}
  .ntf-clear:hover{text-decoration:underline}
  .ntf-list{display:flex;flex-direction:column;gap:5px;padding:6px}
  .ntf-item{display:flex;gap:9px;align-items:flex-start;padding:8px 9px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--ink-3);cursor:pointer}
  .ntf-item:hover{border-color:var(--brand)}
  .ntf-item.critical{border-left-color:var(--crit)} .ntf-item.high,.ntf-item.major{border-left-color:#e0842c} .ntf-item.warning,.ntf-item.minor{border-left-color:var(--warn)} .ntf-item.anomaly{border-left-color:#a78bfa}
  .ntf-ic{font-size:14px;flex:none}
  .ntf-b{flex:1;min-width:0}
  .ntf-t{font-size:12.5px;font-weight:700;color:var(--ink)}
  .ntf-s{font-size:11px;color:var(--ink-3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ntf-when{font-size:10px;color:var(--ink-3);flex:none;white-space:nowrap;opacity:.8}
  .ntf-empty{color:var(--ink-3);font-size:12px;padding:18px;text-align:center}
  .toast-wrap{position:fixed;top:16px;right:16px;z-index:120;display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 24px));pointer-events:none}
  .toast{pointer-events:auto;cursor:pointer;display:flex;gap:11px;align-items:flex-start;padding:12px 13px;border-radius:13px;background:linear-gradient(150deg,color-mix(in srgb,#0b0e15 90%,transparent),#070a10);border:1px solid color-mix(in srgb,var(--brand) 26%,var(--border));border-left:3px solid var(--crit);box-shadow:0 18px 46px -16px rgba(0,0,0,.75),0 0 26px -16px var(--crit);backdrop-filter:blur(7px);animation:toastin .32s cubic-bezier(.2,.8,.3,1);transition:opacity .25s,transform .25s}
  .toast.critical{border-left-color:var(--crit)} .toast.high,.toast.major{border-left-color:#e0842c} .toast.warning,.toast.minor{border-left-color:var(--warn)} .toast.anomaly{border-left-color:#a78bfa}
  .toast.out{opacity:0;transform:translateX(24px)}
  @keyframes toastin{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
  .toast .ti{font-size:17px;flex:none;line-height:1.15}
  .toast .tb{flex:1;min-width:0}
  .toast .tt{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
  .toast .ts{font-size:11.5px;color:var(--ink-2);margin-top:2px;line-height:1.35}
  .toast .tx{all:unset;cursor:pointer;color:var(--ink-3);font-size:13px;flex:none;padding:0 2px}
  .toast .tx:hover{color:var(--ink)}
  .chat-ident{display:flex;align-items:center;gap:10px;min-width:0}
  .chat-av{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle at 36% 32%,#ff5ca8,var(--brand) 72%);
    box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 30%,transparent)}
  .chat-av svg{width:20px;height:20px;color:#fff}
  .chat-av.sm{width:26px;height:26px}.chat-av.sm svg{width:15px;height:15px}
  /* the little guardian's eye — winks now and then */
  /* the little guardian robot — blinks, its antenna pulses, gently bobs */
  .chat-bot .bot-g{transform-origin:12px 12px;animation:bot-bob 4s ease-in-out infinite}
  .chat-bot .bot-eyes{transform-origin:12px 10.6px;animation:bot-blink 4.2s ease-in-out infinite}
  .chat-bot .bot-ant{transform-origin:12px 2px;animation:bot-ant 2.4s ease-in-out infinite}
  .chat-fab .chat-bot .bot-eyes{animation-duration:5.4s}
  @keyframes bot-blink{0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.1)}96%{transform:scaleY(1)}}
  @keyframes bot-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.5px)}}
  @keyframes bot-ant{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
  @media (prefers-reduced-motion:reduce){.chat-bot *{animation:none!important}}
  .chat-name{font-weight:700;font-size:14px;line-height:1.1}
  .chat-status{font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:5px;margin-top:1px}
  .chat-status .chat-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 7px var(--ok);animation:breathe 2s ease-in-out infinite}
  .chat-status .chat-dot.bad{background:var(--crit);box-shadow:0 0 7px var(--crit);animation:none}
  .chat-head-btns{display:flex;gap:1px;flex:none}
  .chat-hbtn{all:unset;cursor:pointer;color:var(--ink-3);font-size:13px;width:28px;height:28px;border-radius:7px;
    display:flex;align-items:center;justify-content:center}
  .chat-hbtn:hover{background:color-mix(in srgb,var(--ink-3) 16%,transparent);color:var(--ink)}
  .chat-modelbar{position:relative;display:flex;align-items:center;gap:8px;padding:7px 13px;border-bottom:1px solid var(--border);background:var(--surface)}
  .chat-modelbar[hidden]{display:none}
  .chat-panel.min .chat-modelbar{display:none!important}
  .chat-modelbar .cm-label{color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-size:10px;flex:none}
  .chat-model{flex:0 1 auto;max-width:150px;font:inherit;font-size:12px;color:var(--ink);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:5px 8px;cursor:pointer;outline:none}
  /* --- Focus-role switcher: a quiet drop-down; every role carries its own
     accent colour (--rc), the active one tints the panel via --role-c --- */
  .role-menu-wrap{position:relative;margin-left:auto}
  .role-btn{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 inherit;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:6px 11px;cursor:pointer;white-space:nowrap;transition:border-color .16s,color .16s,background .16s}
  .role-btn:hover,.role-btn[aria-expanded="true"]{border-color:color-mix(in srgb,var(--role-c,var(--brand)) 45%,var(--border));color:var(--ink)}
  .role-btn .rb-ic{font-size:13px;line-height:1}
  .role-btn .rb-tx{font-weight:700;color:color-mix(in srgb,var(--role-c,var(--brand)) 70%,var(--ink))}
  .role-btn .rb-car{font-size:8px;color:var(--ink-3);transition:transform .18s}
  .role-btn[aria-expanded="true"] .rb-car{transform:rotate(180deg)}
  .role-btn .rb-bd,.role-mi .mi-bd{min-width:15px;padding:1px 5px;border-radius:8px;background:var(--surface-2);border:1px solid color-mix(in srgb,var(--rc,var(--role-c,var(--brand))) 45%,transparent);color:color-mix(in srgb,var(--rc,var(--role-c,var(--brand))) 80%,var(--ink));font-size:9px;font-weight:800;line-height:1.3;text-align:center;font-variant-numeric:tabular-nums}
  .role-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:238px;max-width:290px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:5px;display:flex;flex-direction:column;gap:1px;animation:criIn .16s ease}
  .role-menu[hidden]{display:none}
  .role-mi{display:flex;align-items:flex-start;gap:8px;padding:7px 9px;border-radius:9px;cursor:pointer;border:0;background:none;font:inherit;text-align:left;color:var(--ink);width:100%}
  .role-mi:hover{background:color-mix(in srgb,var(--rc,var(--brand)) 8%,var(--surface-2))}
  .role-mi.on{background:color-mix(in srgb,var(--rc,var(--brand)) 11%,var(--surface-2))}
  .role-mi.on .mi-nm{color:color-mix(in srgb,var(--rc,var(--brand)) 75%,var(--ink))}
  .role-mi .mi-ic{font-size:14px;line-height:1.3;flex:none}
  .role-mi .mi-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .role-mi .mi-nm{font-size:12px;font-weight:700;line-height:1.25}
  .role-mi .mi-tip{font-size:10.5px;color:var(--ink-3);line-height:1.35}
  .role-mi .mi-rt{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none;padding-top:1px}
  .role-mi .mi-ck{font-size:11px;color:color-mix(in srgb,var(--rc,var(--brand)) 75%,var(--ink))}
  /* Active-role accent: the chat visibly "wears" the current lens */
  .chat-modelbar::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--role-c,var(--brand)) 55%,transparent),transparent 70%);opacity:.55;transition:background .3s;pointer-events:none}
  .chat-role-tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:650;line-height:1;color:color-mix(in srgb,var(--role-c,var(--brand)) 75%,var(--ink));border:1px solid color-mix(in srgb,var(--role-c,var(--brand)) 32%,transparent);border-radius:10px;padding:3px 7px;margin-left:6px;vertical-align:2px;white-space:nowrap;transition:color .3s,border-color .3s}
  .chat-role-tag[hidden]{display:none}
  /* Role-switch intro card in the log: live counts + one-click briefing */
  .chat-roleintro{border:1px solid color-mix(in srgb,var(--rc,var(--brand)) 28%,var(--border));border-left:2px solid color-mix(in srgb,var(--rc,var(--brand)) 70%,transparent);background:color-mix(in srgb,var(--rc,var(--brand)) 5%,var(--surface-2));border-radius:12px;padding:10px 12px;animation:criIn .3s ease}
  @keyframes criIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .chat-roleintro .cri-hd{display:flex;align-items:center;gap:6px;font-size:12.5px;flex-wrap:wrap}
  .chat-roleintro .cri-hd i{margin-left:auto;font-style:normal;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
  .chat-roleintro .cri-tip{font-size:11.5px;color:var(--ink-2);margin:5px 0 9px}
  .chat-roleintro .cri-brief{font:650 11.5px/1 inherit;color:color-mix(in srgb,var(--rc,var(--brand)) 75%,var(--ink));background:transparent;border:1px solid color-mix(in srgb,var(--rc,var(--brand)) 40%,transparent);border-radius:16px;padding:7px 12px;cursor:pointer;transition:background .15s,border-color .15s}
  .chat-roleintro .cri-brief:hover{background:color-mix(in srgb,var(--rc,var(--brand)) 10%,transparent);border-color:color-mix(in srgb,var(--rc,var(--brand)) 60%,transparent)}
  /* Operator write-token gate (X-Argus-Token) */
  .tok-overlay{position:fixed;inset:0;z-index:130;display:grid;place-items:center;background:color-mix(in srgb,#000 55%,transparent);backdrop-filter:blur(3px)}
  .tok-overlay[hidden]{display:none}
  .tok-panel{width:min(420px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);padding:18px}
  .tok-panel b{font-size:14px}
  .tok-panel p{font-size:12px;color:var(--ink-2);margin:8px 0 12px;line-height:1.5}
  .tok-panel code{font-family:var(--mono);font-size:11px;background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 5px}
  .tok-panel input{width:100%;margin-top:8px;font:inherit;font-size:13px;color:var(--ink);background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:9px 11px;outline:none}
  .tok-panel input:focus{border-color:var(--brand)}
  .tok-build{font-family:var(--mono);font-size:9.5px;color:var(--ink-3);margin-top:8px;text-align:right}
  .tok-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
  .tok-btns button{font:600 12px/1 inherit;border-radius:9px;padding:9px 13px;cursor:pointer;border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2)}
  .tok-btns button.pri{background:var(--brand);border-color:var(--brand);color:#fff}
  .tok-btns button:hover{border-color:var(--brand);color:var(--ink)} .tok-btns button.pri:hover{color:#fff;filter:brightness(1.08)}
  @media (prefers-reduced-motion:reduce){.chat-roleintro{animation:none!important}}
  .chat-model:focus{border-color:var(--brand)}
  .chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
  .chat-row{display:flex;gap:8px;align-items:flex-end;max-width:100%}
  .chat-row.user{flex-direction:row-reverse}
  .chat-msg{max-width:80%;font-size:13px;line-height:1.5;padding:9px 12px;border-radius:14px;overflow-wrap:anywhere}
  .chat-msg.user{background:var(--brand);color:#fff;border-bottom-right-radius:5px}
  .chat-msg.bot{background:var(--surface-2);border:1px solid var(--border);border-bottom-left-radius:5px}
  .chat-msg.bot.err{color:var(--crit);border-color:var(--crit-bd);background:var(--crit-bg)}
  .chat-msg p{margin:0 0 6px}.chat-msg p:last-child{margin:0}
  .chat-msg ul{margin:4px 0;padding-left:17px}.chat-msg li{margin:2px 0}
  .chat-msg code{font-family:var(--mono);font-size:11.5px;background:color-mix(in srgb,var(--ink-3) 18%,transparent);padding:1px 5px;border-radius:5px}
  .chat-msg.user code{background:rgba(255,255,255,.22)}
  .chat-msg a{color:var(--brand-ink);text-decoration:underline}.chat-msg.user a{color:#fff}
  .chat-msg ol{margin:5px 0;padding-left:20px}.chat-msg ol li{margin:2px 0}
  .chat-msg i{font-style:italic}.chat-msg s{opacity:.7}
  .chat-msg .chat-h{margin:11px 0 5px;line-height:1.3;font-weight:700}.chat-msg .chat-h:first-child{margin-top:0}
  .chat-msg h1.chat-h{font-size:1.28em}.chat-msg h2.chat-h{font-size:1.16em}
  .chat-msg h3.chat-h{font-size:1.06em}.chat-msg h4.chat-h{font-size:1em;color:var(--ink-2);text-transform:uppercase;letter-spacing:.03em}
  .chat-msg .chat-hr{border:0;border-top:1px solid var(--border);margin:10px 0}
  .chat-msg .chat-bq{margin:7px 0;padding:5px 11px;border-left:3px solid var(--brand);background:color-mix(in srgb,var(--brand) 8%,transparent);border-radius:0 7px 7px 0;color:var(--ink-2)}
  .chat-msg .chat-pre{margin:7px 0;padding:10px 12px;background:color-mix(in srgb,var(--ink-3) 13%,transparent);border:1px solid var(--border);border-radius:9px;overflow-x:auto}
  .chat-msg .chat-pre code{background:none;padding:0;font-size:11.5px;line-height:1.55;white-space:pre;color:var(--ink)}
  .chat-msg .chat-mermaid{margin:8px 0}
  .chat-msg .chat-mermaid .mmd-out{display:flex;justify-content:center;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px;overflow-x:auto}
  .chat-msg .chat-mermaid .mmd-out:empty{display:none}
  .chat-msg .chat-mermaid .mmd-out svg{max-width:100%;height:auto}
  .chat-msg .mmd-err{font-size:11.5px;color:var(--crit);margin-top:5px}
  .chat-msg .chat-tablewrap{overflow-x:auto;margin:8px 0;border:1px solid var(--border);border-radius:9px}
  .chat-msg .chat-table{border-collapse:collapse;font-size:12px;width:100%}
  .chat-msg .chat-table th,.chat-msg .chat-table td{padding:6px 10px;text-align:left;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
  .chat-msg .chat-table th:last-child,.chat-msg .chat-table td:last-child{border-right:0}
  .chat-msg .chat-table tbody tr:last-child td{border-bottom:0}
  .chat-msg .chat-table thead th{background:color-mix(in srgb,var(--ink-3) 14%,transparent);font-weight:600;color:var(--ink)}
  .chat-msg .chat-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--ink-3) 6%,transparent)}
  .chat-panel.pip .chat-msg .chat-table{font-size:12.5px}.chat-panel.pip .chat-msg .chat-pre code{font-size:12px}
  .chat-greet{color:var(--ink-2);font-size:13px;line-height:1.55;padding:6px 2px 2px}
  .chat-greet b{color:var(--ink)}
  .chat-sugg{display:flex;flex-direction:column;gap:7px;padding:4px 0}
  .chat-chip{text-align:left;font:inherit;font-size:12.5px;color:var(--ink-2);background:var(--surface-2);
    border:1px solid var(--border);border-radius:10px;padding:9px 12px;cursor:pointer;transition:border-color .12s,color .12s}
  .chat-chip:hover{border-color:var(--brand);color:var(--ink)}
  .chat-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 13px;background:var(--surface-2);
    border:1px solid var(--border);border-radius:14px;border-bottom-left-radius:5px}
  .chat-typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:chat-bounce 1.2s infinite}
  .chat-typing i:nth-child(2){animation-delay:.15s}.chat-typing i:nth-child(3){animation-delay:.3s}
  @keyframes chat-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
  .chat-actions{align-self:flex-start;max-width:90%;display:flex;flex-direction:column;gap:7px}
  .chat-action{background:var(--surface-2);border:1px solid var(--brand);border-radius:12px;padding:10px 12px;font-size:12.5px}
  .chat-dl{display:flex;align-items:center;gap:11px;text-decoration:none;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:10px 13px;transition:border-color .12s,filter .12s}
  .chat-dl:hover{border-color:var(--brand);filter:brightness(1.03)}
  .chat-dl .dl-ico{font-size:22px;line-height:1}
  .chat-dl .dl-meta{display:flex;flex-direction:column;min-width:0}
  .chat-dl .dl-name{font-weight:700;color:var(--ink);word-break:break-all;font-size:13px}
  .chat-dl .dl-sub{color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.02em}
  .chat-dl .dl-arrow{margin-left:auto;color:var(--brand-ink);font-size:17px;flex:none}
  .chat-action .ca-desc{color:var(--ink-2);margin-bottom:8px}
  /* inline maintenance widget in the chat */
  .chat-mnt{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:11px 12px;font-size:12.5px;min-width:min(340px,86vw)}
  .chat-action .ca-desc b{color:var(--ink)}
  .chat-action button{font:inherit;font-size:12px;font-weight:600;border-radius:8px;padding:5px 13px;cursor:pointer;margin-right:6px}
  .chat-action .ca-yes{border:1px solid var(--brand);background:var(--brand);color:#fff}
  .chat-action .ca-no{border:1px solid var(--border);background:var(--surface);color:var(--ink-2)}
  .chat-action.done{border-color:var(--ok-bd);background:var(--ok-bg)}
  .chat-action.done .ca-state{color:var(--ok);font-weight:600}
  .ca-mail{margin-top:7px;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--surface)}
  .ca-mail .ca-subj{font-weight:600;color:var(--ink);padding:6px 9px;border-bottom:1px solid var(--border-2);font-size:12px}
  .ca-mail .ca-body{padding:7px 9px;font-size:11.5px;color:var(--ink-2);white-space:pre-wrap;max-height:120px;overflow:auto;line-height:1.45}
  .chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);background:var(--surface)}
  .chat-form input{flex:1;font:inherit;font-size:13px;border:1px solid var(--border);background:var(--bg);
    color:var(--ink);border-radius:11px;padding:10px 13px;outline:none;transition:border-color .12s,box-shadow .12s}
  .chat-form input:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 15%,transparent)}
  .chat-form button{all:unset;cursor:pointer;color:#fff;width:40px;border-radius:11px;font-size:15px;
    background:radial-gradient(circle at 35% 30%,#ff5ca8,var(--brand) 75%);
    display:flex;align-items:center;justify-content:center}
  .chat-form button:disabled{opacity:.5;cursor:default}
  /* 🧠 brain (capture wish/experience) */
  .chat-form button.chat-brain{background:var(--surface-2);border:1px solid var(--border);color:inherit;font-size:16px;filter:grayscale(.15)}
  .chat-form button.chat-brain:hover{border-color:var(--brand);filter:none;transform:translateY(-1px)}
  .chat-brainbox{margin:0 12px 12px;padding:11px 12px;border:1px solid color-mix(in srgb,#7c5cff 34%,var(--border));border-radius:12px;
    background:color-mix(in srgb,#7c5cff 7%,var(--surface));animation:mntPop .16s ease}
  .chat-brainbox[hidden]{display:none}
  .cbx-hd{font-size:12px;font-weight:800;display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
  .cbx-hd span{font-weight:500;font-size:10.5px;color:var(--ink-3)}
  .cbx-kinds{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
  .cbx-kinds button{all:unset;cursor:pointer;font:700 11px/1 inherit;color:var(--ink-2);border:1px solid var(--border);border-radius:20px;padding:5px 10px}
  .cbx-kinds button.on{background:linear-gradient(135deg,#ff5ca8,#7c5cff);color:#fff;border-color:transparent}
  .chat-brainbox textarea{width:100%;box-sizing:border-box;font:inherit;font-size:12.5px;border:1px solid var(--border);background:var(--bg);color:var(--ink);border-radius:9px;padding:8px 10px;outline:none;resize:vertical}
  .chat-brainbox textarea:focus{border-color:var(--brand)}
  .cbx-acts{display:flex;align-items:center;gap:8px;margin-top:8px}
  .cbx-msg{margin-right:auto;font-size:11px;color:var(--ink-3)}
  .cbx-acts button{all:unset;cursor:pointer;font:700 12px/1 inherit;border-radius:9px;padding:8px 13px}
  #cbxCancel{color:var(--ink-2);border:1px solid var(--border)}
  #cbxSave{color:#fff;background:linear-gradient(135deg,#ff5ca8,#7c5cff)}
  /* Knowledge base drawer (RAG document upload) */
  .chat-kb{position:absolute;left:0;right:0;top:57px;bottom:0;background:var(--surface);z-index:2;
    display:flex;flex-direction:column;animation:chat-in .18s ease}
  .chat-kb[hidden]{display:none}
  .chat-panel.min .chat-kb{display:none!important}
  .chat-kb-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
  .chat-kb-hd b{font-size:13px}
  .chat-kb-hd .kb-sub{font-size:11px;color:var(--ink-3);margin-top:2px}
  .chat-kb-body{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:9px}
  .kb-drop{display:block;border:1.5px dashed var(--border);border-radius:12px;padding:15px;text-align:center;
    color:var(--ink-2);font-size:12.5px;line-height:1.5;cursor:pointer;transition:border-color .12s,background .12s}
  .kb-drop:hover,.kb-drop.drag{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 7%,transparent)}
  .kb-drop b{color:var(--brand-ink)}
  .kb-hint{font-size:11px;color:var(--ink-3);margin-top:5px}
  .kb-status{font-size:12px;color:var(--ink-2);min-height:15px;line-height:1.4}
  .kb-status.err{color:var(--crit)}
  .kb-strat{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 2px}
  .kb-strat>label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
  .kb-strat select{font:inherit;font-size:12px;padding:5px 9px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer}
  .kb-strat select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)}
  .kb-strat-hint{font-size:11px;color:var(--ink-3);flex:1;min-width:0}
  /* Upload queue progress: one row per file with a live status pill */
  .kb-jobs{display:flex;flex-direction:column;gap:6px;margin:6px 0}
  .kb-jobs:empty{margin:0}
  .kb-job{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:7px 10px;font-size:12px}
  .kb-job .kj-ic{flex:none;font-size:14px;width:16px;text-align:center}
  .kb-job .kj-fn{min-width:0;flex:1;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kb-job .kj-st{flex:none;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 8px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
  .kb-job .kj-st.queued{color:var(--ink-2);background:color-mix(in srgb,var(--ink-3) 14%,transparent);border-color:var(--border)}
  .kb-job .kj-st.embedding{color:var(--brand-ink);background:var(--brand-wash);border-color:color-mix(in srgb,var(--brand) 40%,transparent)}
  .kb-job .kj-st.done{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-bd)}
  .kb-job .kj-st.dup{color:var(--ink-2);background:var(--surface-2);border-color:var(--border)}
  .kb-job .kj-st.error{color:var(--crit);background:var(--crit-bg);border-color:var(--crit-bd)}
  .kb-job .kj-st .spin{display:inline-block;width:8px;height:8px;margin-right:5px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-1px;animation:kjspin .7s linear infinite}
  @keyframes kjspin{to{transform:rotate(360deg)}}
  @media(prefers-reduced-motion:reduce){.kb-job .kj-st .spin{animation:none}}
  .kb-doc{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
  .kb-doc .kb-ic{flex:none;font-size:15px}
  .kb-doc .kb-meta{min-width:0;flex:1}
  .kb-doc .kb-fn{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kb-doc .kb-sm{font-size:11px;color:var(--ink-3);margin-top:1px}
  .kb-doc .kb-del{all:unset;cursor:pointer;color:var(--ink-3);font-size:12px;width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex:none}
  .kb-doc .kb-del:hover{background:var(--crit-bg);color:var(--crit)}
  .kb-empty{color:var(--ink-3);font-size:12.5px;text-align:center;padding:12px 6px;line-height:1.55}
  /* Long-term memory section (what Argus learned) */
  .kb-mem{margin-top:6px;border-top:1px solid var(--border-2);padding-top:10px;display:flex;flex-direction:column;gap:7px}
  .kb-mem[hidden]{display:none}
  .kb-mem-hd{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .kb-mem-hd b{font-size:12.5px}
  .kb-mem-hd span{font-size:10.5px;color:var(--ink-3)}
  .mem-row{display:flex;align-items:flex-start;gap:8px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
  .mem-ic{font-size:14px;line-height:1.3;flex:none}
  .mem-tx{flex:1;min-width:0;cursor:pointer}
  .mem-t{font-size:12px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
  .mem-t .mem-ok{color:var(--ok);font-weight:800}
  .mem-s{font-size:10.5px;color:var(--ink-3);margin-top:1px;font-variant-numeric:tabular-nums}
  .mem-b{font-size:11.5px;color:var(--ink-2);margin-top:6px;line-height:1.5;white-space:pre-wrap;border-top:1px dashed var(--border);padding-top:6px}
  .mem-b[hidden]{display:none}
  .mem-act{all:unset;box-sizing:border-box;cursor:pointer;font-size:12px;color:var(--ink-3);width:24px;height:24px;border-radius:6px;display:grid;place-items:center;flex:none}
  .mem-act:hover{background:color-mix(in srgb,var(--ink-3) 16%,transparent);color:var(--ink)}
  .mem-ver.on{color:var(--ok)}
  @media print{.chat-fab,.chat-panel{display:none!important}}

  /* ---- Optics polish -------------------------------------------------------
     Unify the older pages (overview/inventory/patch-plan/alerts/logs) onto the
     Mission-Control glass/neon surface language already used by the newer pages
     (architecture/SLA/host cards). Purely additive -- tune or drop it here
     without touching the base rules above. Dark-first: dark gets the glass
     gradient + neon depth, light gets a crisper, elevated card. -------------- */
  .card,.kpi,.riskcard,.threat,.al-tile,.al-grp{
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
  /* light: give the flat cards real elevation + a hairline that reads as chosen */
  .kpi,.riskcard,.threat,.al-tile{box-shadow:var(--shadow)}
  /* dark: frosted diagonal glass (same gradient as the host cards) + inset edge */
  :root[data-theme="dark"] .card,
  :root[data-theme="dark"] .kpi,
  :root[data-theme="dark"] .riskcard,
  :root[data-theme="dark"] .threat,
  :root[data-theme="dark"] .al-tile,
  :root[data-theme="dark"] .al-grp{
    background:linear-gradient(160deg,color-mix(in srgb,var(--surface-2) 92%,transparent),color-mix(in srgb,var(--surface) 94%,transparent));
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    border-color:color-mix(in srgb,var(--border) 82%,var(--ink-3));
    box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent),0 12px 30px -20px rgba(0,0,0,.85)}
  /* interactive cards lift on hover with a faint brand edge-glow */
  .threat:hover,.al-tile:hover,.kpi:hover{transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--brand) 30%,var(--border))}
  :root[data-theme="dark"] .threat:hover,
  :root[data-theme="dark"] .al-tile:hover,
  :root[data-theme="dark"] .kpi:hover{
    box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 26%,transparent),0 16px 36px -20px rgba(0,0,0,.92)}
  /* severity accents glow so risk reads at a glance (dark only) */
  :root[data-theme="dark"] .al-tile.crit::before{box-shadow:0 0 12px var(--crit)}
  :root[data-theme="dark"] .al-tile.major::before{box-shadow:0 0 12px #e0842c}
  :root[data-theme="dark"] .al-tile.warn::before{box-shadow:0 0 11px var(--warn)}
  :root[data-theme="dark"] .al-tile.ok::before{box-shadow:0 0 11px var(--ok)}
  /* page-title hairline: a thin brand underline gives the older heads rhythm */
  .pagehead h1{position:relative;padding-bottom:9px}
  .pagehead h1::after{content:"";position:absolute;left:0;bottom:0;width:38px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 10%,transparent))}
  :root[data-theme="dark"] .pagehead h1::after{box-shadow:0 0 10px color-mix(in srgb,var(--brand) 55%,transparent)}
  /* section sub-heads (rail / risk cards): quiet uppercase micro-label */
  .rail h3,.riskcard h3{text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--ink-2)}

  /* --- consistent selection accents so every page speaks one accent language.
         Inventory tabs, filter chips and patch-plan domtabs all resolve to the
         same brand-wash "active" pill (matching the SLA/alerts chips), and in
         dark they carry a soft brand glow. ------------------------------------ */
  .chip[aria-pressed="true"]{background:var(--brand-wash);color:var(--brand-ink);
    border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
  .chip[aria-pressed="true"] .c{opacity:.85}
  :root[data-theme="dark"] .chip[aria-pressed="true"]{color:var(--ink);
    box-shadow:0 0 14px color-mix(in srgb,var(--brand) 28%,transparent)}
  :root[data-theme="dark"] .tab[aria-selected="true"]{box-shadow:0 3px 10px -4px var(--brand)}
  :root[data-theme="dark"] .pp-domtabs button[aria-selected="true"]{
    box-shadow:0 0 14px color-mix(in srgb,var(--brand) 26%,transparent)}
  /* KPI severity stripes glow in dark so the number's band reads instantly */
  :root[data-theme="dark"] .kpi.crit .stripe{box-shadow:0 0 10px var(--crit)}
  :root[data-theme="dark"] .kpi.warn .stripe{box-shadow:0 0 10px var(--warn)}
  :root[data-theme="dark"] .kpi.ok .stripe{box-shadow:0 0 10px var(--ok)}
  :root[data-theme="dark"] .kpi.brand .stripe{box-shadow:0 0 10px var(--brand)}
  /* Trending-threat cards: reuse their existing 3px border-left as the severity
     accent and give it a neon glow in dark, matching alert groups / host cards. */
  :root[data-theme="dark"] .threat.critical{box-shadow:inset 3px 0 0 var(--crit),inset 5px 0 12px -4px var(--crit),var(--shadow)}
  :root[data-theme="dark"] .threat.high{box-shadow:inset 3px 0 0 #e8720c,inset 5px 0 12px -4px #e8720c,var(--shadow)}
  :root[data-theme="dark"] .threat.medium{box-shadow:inset 3px 0 0 var(--warn),inset 5px 0 11px -4px var(--warn),var(--shadow)}
  /* Overview hero: the fleet-risk gauge ring gets a band-coloured neon glow */
  :root[data-theme="dark"] .riskhero[data-band="guarded"] .g-val{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ok) 65%,transparent))}
  :root[data-theme="dark"] .riskhero[data-band="elevated"] .g-val{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--warn) 65%,transparent))}
  :root[data-theme="dark"] .riskhero[data-band="high"] .g-val{filter:drop-shadow(0 0 6px color-mix(in srgb,#e8720c 65%,transparent))}
  :root[data-theme="dark"] .riskhero[data-band="critical"] .g-val{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--crit) 70%,transparent))}
  :root[data-theme="dark"] .g-num{text-shadow:0 0 18px color-mix(in srgb,var(--ink) 30%,transparent)}
  /* faint band-tinted radial glow behind the hero gauge (layered over the glass) */
  :root[data-theme="dark"] .riskhero[data-band="guarded"] .gaugecard{background:radial-gradient(130% 74% at 50% 60%,color-mix(in srgb,var(--ok) 9%,transparent),transparent 68%),linear-gradient(160deg,color-mix(in srgb,var(--surface-2) 92%,transparent),color-mix(in srgb,var(--surface) 94%,transparent))}
  :root[data-theme="dark"] .riskhero[data-band="elevated"] .gaugecard{background:radial-gradient(130% 74% at 50% 60%,color-mix(in srgb,var(--warn) 11%,transparent),transparent 68%),linear-gradient(160deg,color-mix(in srgb,var(--surface-2) 92%,transparent),color-mix(in srgb,var(--surface) 94%,transparent))}
  :root[data-theme="dark"] .riskhero[data-band="high"] .gaugecard{background:radial-gradient(130% 74% at 50% 60%,color-mix(in srgb,#e8720c 12%,transparent),transparent 68%),linear-gradient(160deg,color-mix(in srgb,var(--surface-2) 92%,transparent),color-mix(in srgb,var(--surface) 94%,transparent))}
  :root[data-theme="dark"] .riskhero[data-band="critical"] .gaugecard{background:radial-gradient(130% 74% at 50% 60%,color-mix(in srgb,var(--crit) 14%,transparent),transparent 68%),linear-gradient(160deg,color-mix(in srgb,var(--surface-2) 92%,transparent),color-mix(in srgb,var(--surface) 94%,transparent))}
  /* sticky table headers read as a distinct frosted band in dark */
  :root[data-theme="dark"] thead th{background:color-mix(in srgb,var(--surface-2) 88%,transparent);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  /* ------------------------------------------------------------------ */
  /* The app bar, quieted down (2026-09-28).                            */
  /*                                                                    */
  /* It had five control heights, four corner radii and three different */
  /* uses of magenta competing in one strip: a filled brand button, a   */
  /* filled language toggle, a gradient avatar and a two-pixel brand    */
  /* rule across the top. Enterprise software is not duller, it is just */
  /* quieter about the things that are not the work: ONE height, ONE    */
  /* radius, ONE accent, and the accent reserved for what is actually   */
  /* happening -- an unread count, the active language, the page you    */
  /* are on. Everything else is a neutral surface with a hairline.      */
  /* ------------------------------------------------------------------ */
  .appbar{padding:0 24px;min-height:56px;gap:10px}
  /* The brand rule becomes a hairline. A 2px magenta bar across the top
     of every page reads as a warning strip, not as a product. */
  .appbar::before{height:1px;
    background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 55%,transparent),
      color-mix(in srgb,var(--brand) 12%,transparent) 42%,transparent 78%)}
  .appbar-right{gap:8px}
  /* One control size for everything in the bar. */
  .appbar-right .btn,.appbar-right .authbtn,.themebtn,.ntf-bell,.langsw,.usr-chip,.search{
    height:32px;border-radius:8px;box-sizing:border-box}
  .themebtn,.ntf-bell{width:32px;border-radius:8px;background:transparent;border-color:transparent;color:var(--ink-3)}
  .themebtn:hover,.ntf-bell:hover{background:var(--surface-2);border-color:var(--border);color:var(--ink-1)}
  .ntf-bell svg{width:16px;height:16px}
  /* The search is the widest thing up there and the least urgent: give it a
     neutral ground and let it recede until it is used. */
  .search{background:transparent;border-color:transparent;min-width:210px;padding:0 10px;
    transition:background .15s,border-color .15s}
  .search:hover{background:var(--surface-2);border-color:var(--border)}
  .search:focus-within{background:var(--surface-2);border-color:var(--ink-3)}
  .search span{opacity:.55}
  /* "Add software" is one action among several and does not need to be the
     brightest object on the screen. It keeps the accent as an outline. */
  .appbar-right .btn.primary{background:transparent;color:var(--brand);
    border-color:color-mix(in srgb,var(--brand) 45%,transparent);font-weight:600}
  .appbar-right .btn.primary:hover{background:color-mix(in srgb,var(--brand) 10%,transparent);
    border-color:var(--brand);filter:none}
  /* The account: initials on a flat disc, the role as plain text. A magenta
     gradient portrait is a consumer app's idea of identity. */
  .usr-chip{padding:0 10px 0 3px;gap:8px;background:transparent;border-color:transparent}
  .usr-chip:hover{background:var(--surface-2);border-color:var(--border)}
  .usr-chip .u-av{width:24px;height:24px;font-size:10px;font-weight:650;
    background:var(--surface-2);border:1px solid var(--border);color:var(--ink-2)}
  .usr-chip .u-role{border:0;padding:0;color:var(--ink-3);font-size:10.5px;letter-spacing:.04em;
    text-transform:uppercase}
  /* Language: the active one is simply legible, the other one is not. No fill. */
  .langsw{border-color:var(--border);border-radius:8px;height:32px}
  .langsw button{padding:0 9px;font-size:10.5px;font-weight:700;color:var(--ink-3)}
  .langsw button.on{background:var(--surface-2);color:var(--ink-1)}
  .langsw button.on::after{content:"";position:absolute;left:8px;right:8px;bottom:5px;height:1.5px;
    border-radius:2px;background:var(--brand)}
  .langsw button{position:relative}
  /* The unread count is the one place a filled accent earns its keep. */
  .ntf-badge{font-weight:700;letter-spacing:0}
  /* A hairline between the tools and the account, so the strip reads as two
     groups rather than seven loose objects. */
  .appbar-right .usr-wrap::before{content:"";display:block;position:absolute;left:-5px;top:8px;bottom:8px;
    width:1px;background:var(--border)}
  @media (max-width:900px){.appbar-right .usr-wrap::before{display:none}}

  .sidenav button{position:relative}
  .sn-badge{position:absolute;top:4px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--crit);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 0 2px var(--bg)}
  .al-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:4px 0 18px}
  .al-tile{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;position:relative;overflow:hidden}
  .al-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ink-3);opacity:.6}
  .al-tile.crit::before{background:var(--crit)}.al-tile.major::before{background:#e0842c}
  .al-tile.warn::before{background:var(--warn)}.al-tile.ok::before{background:var(--ok)}
  .al-tile .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
  .al-tile .n{font-size:34px;font-weight:800;line-height:1.05;margin-top:6px;font-variant-numeric:tabular-nums;color:var(--ink)}
  .al-tile .s{font-size:12px;color:var(--ink-2);margin-top:4px}
  .al-tile .spark{position:absolute;right:12px;bottom:10px;width:82px;height:34px;opacity:.85}
  .al-card{margin-bottom:18px}
  .al-cardhead{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap}
  .al-cardhead h2{font-size:15px;font-weight:700;margin:0}
  .al-sub{font-size:12px;color:var(--ink-3)}
  .al-updated{font-size:12px;color:var(--ink-3);align-self:center;white-space:nowrap}
  .al-headright{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
  .al-otel-btn{cursor:pointer;font:600 12.5px/1 inherit;color:var(--ink-1);background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:8px 12px;white-space:nowrap;transition:border-color .15s,background .15s}
  .al-otel-btn:hover{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--surface-2))}
  .al-trendwrap{width:100%;overflow-x:auto}
  .al-trendwrap svg{display:block;width:100%;height:auto;min-width:520px}
  .al-heatwrap{overflow-x:auto}
  .sev{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;border:1px solid transparent;white-space:nowrap}
  .sev::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  .sev.critical{color:var(--crit);background:var(--crit-bg);border-color:var(--crit-bd)}
  .sev.major{color:#c9701f;background:color-mix(in srgb,#e0842c 15%,transparent);border-color:color-mix(in srgb,#e0842c 38%,transparent)}
  .sev.high{color:#c9701f;background:color-mix(in srgb,#e0842c 15%,transparent);border-color:color-mix(in srgb,#e0842c 38%,transparent)}
  .sev.warning,.sev.minor{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-bd)}
  .sev.info,.sev.none,.sev.unknown{color:var(--ink-2);background:color-mix(in srgb,var(--ink-3) 12%,transparent);border-color:color-mix(in srgb,var(--ink-3) 26%,transparent)}
  html.dark .sev.major,html.dark .sev.high{color:#e59a52}
  .prio{display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;letter-spacing:.02em;padding:2px 7px;border-radius:6px;color:#fff;min-width:30px;border:1px solid transparent;line-height:1.4}
  .prio.p4{background:#2f6fd6}.prio.p5{background:#6b7280}
  .al-priowrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:2px}
  .al-priobar{display:flex;height:12px;flex:1;min-width:180px;border-radius:7px;overflow:hidden;background:var(--surface-2);border:1px solid var(--border-2)}
  .al-priobar i{display:block;height:100%}
  .al-priobar i.p4{background:#2f6fd6}.al-priobar i.p5{background:#6b7280}
  .al-priolegend{display:flex;gap:6px;flex-wrap:wrap}
  .al-pchip{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid var(--border);color:var(--ink-2);background:var(--surface)}
  .al-pchip .sw{width:8px;height:8px;border-radius:2px}
  .al-pchip.on{border-color:var(--brand);color:var(--ink);background:var(--brand-wash)}
  .al-pchip:hover{border-color:var(--ink-3)}
  .al-pchip .ct{color:var(--ink-3);font-variant-numeric:tabular-nums}
  .al-toolbar{display:flex;justify-content:flex-end;margin:-2px 0 12px}
  .al-seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:3px;gap:2px}
  .dom{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:5px;border:1px solid transparent;white-space:nowrap}
  .dom.k8s{color:#3b74d8;background:color-mix(in srgb,#3b74d8 12%,transparent);border-color:color-mix(in srgb,#3b74d8 30%,transparent)}
  .dom.cls{color:#8a6d3b;background:color-mix(in srgb,#b8863b 14%,transparent);border-color:color-mix(in srgb,#b8863b 32%,transparent)}
  .dom.sm{padding:0 3px;font-size:11px;border:0;background:transparent}
  html.dark .dom.cls{color:#d1a75a}
  .al-ask{all:unset;cursor:pointer;font-size:12px;font-weight:600;color:var(--brand-ink);padding:4px 10px;border-radius:8px;border:1px solid color-mix(in srgb,var(--brand) 40%,transparent);display:inline-flex;align-items:center;gap:5px}
  .al-ask:hover{background:var(--brand-wash)}
  .al-loglink{all:unset;cursor:pointer;color:var(--brand-ink);font-weight:600;font-size:11px}
  .al-loglink:hover{text-decoration:underline}
  .al-empty{text-align:center;color:var(--ink-2);padding:40px;font-size:14px}
  .al-empty .big{font-size:34px;display:block;margin-bottom:8px}

  .ht-wrap{overflow-x:auto}
  .ht-table{width:100%;border-collapse:collapse;font-size:13px;min-width:660px}
  .ht-table th{text-align:left;font-size:11px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;padding:8px 10px;border-bottom:1px solid var(--border)}
  .ht-table td{padding:9px 10px;border-bottom:1px solid var(--border-2);vertical-align:middle}
  .ht-table tr:last-child td{border-bottom:0}
  .ht-table tbody tr:hover td{background:var(--surface-2)}
  .ht-host{font-weight:600;color:var(--ink)}
  .ht-ps{font-size:12px;color:var(--ink-3);white-space:nowrap}
  .ht-os{color:var(--ink-2)}
  .ht-kernel{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--ink-3);white-space:nowrap}
  .eolc{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
  .eolc::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
  .eolc.eol{color:var(--crit);background:var(--crit-bg);border-color:var(--crit-bd)}
  .eolc.soon{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-bd)}
  .eolc.ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-bd)}
  .eolc.unknown{color:var(--ink-2);background:color-mix(in srgb,var(--ink-3) 12%,transparent);border-color:color-mix(in srgb,var(--ink-3) 26%,transparent)}
  .ht-up{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;text-transform:capitalize}
  .ht-up .d{width:8px;height:8px;border-radius:50%}
  .ht-up.up{color:var(--ok)}.ht-up.up .d{background:var(--ok);box-shadow:0 0 6px var(--ok)}
  .ht-up.down{color:var(--crit)}.ht-up.down .d{background:var(--crit)}
  .ht-filters{display:flex;flex-wrap:wrap;gap:14px 26px;margin-bottom:16px}
  .ht-fgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .ht-flabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
  .hg{margin-bottom:14px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}
  .hc{position:relative;border:1px solid var(--border-2);border-radius:11px;padding:11px 12px 12px 15px;background:var(--surface-2)}
  .hc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:11px 0 0 11px;background:var(--ok)}
  .hc.eol::before{background:var(--crit)}.hc.soon::before{background:var(--warn)}.hc.unknown::before{background:var(--ink-3)}
  .az-pill{display:inline-flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:.03em;padding:2px 6px;border-radius:5px;white-space:nowrap;line-height:1.4}
  .az-pill.azA{background:#9dc0ff;color:#0b0e15}
  .az-pill.azB{background:#ffd28a;color:#0b0e15}
  .az-pill.azz{background:#5b6b86;color:#fff}
  .az-pill.risk{box-shadow:0 0 0 1.5px var(--crit);font-weight:800}
  .ht-azrisk{margin:2px 0 14px;border:1px solid var(--crit-bd);background:var(--crit-bg);border-radius:12px;padding:12px 14px}
  .stg{display:inline-flex;align-items:center;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:5px;color:#fff;white-space:nowrap}
  .hc{cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:linear-gradient(160deg,color-mix(in srgb,var(--surface-2) 90%,transparent),color-mix(in srgb,var(--surface) 92%,transparent))}
  .hc:hover{border-color:var(--pc,var(--brand));transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(0,0,0,.6),0 0 20px -8px var(--pc,var(--brand))}
  .hc:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
  /* attention hosts stand out */
  .hc.alerting{box-shadow:0 0 0 1px color-mix(in srgb,var(--crit) 40%,transparent),0 0 18px -6px var(--crit)}
  .hc.alerting::before{background:var(--crit);box-shadow:0 0 12px var(--crit)}
  .hc.anomaly:not(.alerting)::before{background:#e0842c;box-shadow:0 0 12px #e0842c}
  .hd-overlay{position:fixed;inset:0;z-index:60;background:rgba(6,8,12,.62);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
  .hd-overlay[hidden]{display:none}
  .hd-overlay{align-items:center}
  .hd-panel{background:linear-gradient(165deg,color-mix(in srgb,var(--surface) 96%,#12161f),var(--surface));border:1px solid color-mix(in srgb,var(--brand) 20%,var(--border));border-radius:18px;width:min(1440px,96vw);max-height:92vh;box-shadow:0 30px 80px -20px rgba(0,0,0,.75);overflow:hidden;display:flex;flex-direction:column}
  .hd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 20px;border-bottom:1px solid var(--border-2);background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 12%,var(--surface-2)),var(--surface-2));flex:none}
  .hd-title{font-weight:800;font-size:17px;color:var(--ink);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .hd-body{padding:18px 20px 20px;overflow:auto}
  .hd-sec{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:-7px}
  /* ===== Argus Sync, mission control ===== */
  #pageSync{--ys-ok:#45d99b;--ys-warn:#f5b84a;--ys-crit:#ff5f6d;--ys-go:#5b9bff}
  .ys-hero{position:relative;border:1px solid color-mix(in srgb,var(--brand) 32%,var(--border));border-radius:20px;padding:24px 26px 20px;margin-bottom:18px;
    background:radial-gradient(90% 140% at 0% 0%,rgba(226,0,116,.16),transparent 55%),radial-gradient(70% 120% at 100% 0%,rgba(91,155,255,.10),transparent 60%),var(--surface);
    box-shadow:0 24px 60px -36px rgba(226,0,116,.55)}
  .ys-hero-top{display:flex;gap:20px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
  .ys-kicker{font:600 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#ff8ac4}
  .ys-hero h1{margin:6px 0 6px;font-size:30px;font-weight:750;letter-spacing:-.02em}
  .ys-hero p{margin:0;max-width:720px;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
  .ys-hero-r{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
  .ys-btn{font:inherit;font-size:13px;font-weight:650;border-radius:11px;padding:9px 16px;cursor:pointer;border:1px solid var(--border);background:var(--surface-2);color:var(--ink)}
  .ys-btn.prim{background:linear-gradient(135deg,#ff2d95,#E20074);border-color:#E20074;color:#fff;box-shadow:0 10px 24px -10px rgba(226,0,116,.8)}
  .ys-btn.prim:hover{filter:brightness(1.08)} .ys-btn:disabled{opacity:.55;cursor:default}
  .ys-btn.danger{background:linear-gradient(135deg,#ff5f6d,#c9303f);border-color:#c9303f;color:#fff}
  .ys-live{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3)}
  .ys-pulse{width:8px;height:8px;border-radius:50%;background:var(--ys-ok);box-shadow:0 0 0 0 rgba(69,217,155,.6);animation:ysPulse 2s infinite}
  @keyframes ysPulse{70%{box-shadow:0 0 0 8px rgba(69,217,155,0)}100%{box-shadow:0 0 0 0 rgba(69,217,155,0)}}
  .ys-refresh{all:unset;cursor:pointer;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--border);color:var(--ink-2)}
  .ys-refresh:hover{color:var(--ink);border-color:var(--ink-3)} .ys-refresh.spin{animation:ysSpin .6s linear}
  @keyframes ysSpin{to{transform:rotate(360deg)}}
  .ys-pipe{display:flex;align-items:stretch;gap:0;margin:20px 0 16px;overflow-x:auto;padding-bottom:2px}
  .ys-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
  .ys-kpi{position:relative;padding:14px 16px 12px;border-radius:14px;border:1px solid var(--border);background:var(--surface-2);display:flex;flex-direction:column;gap:2px;overflow:hidden}
  .ys-kpi .k{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
  .ys-kpi b{font-size:28px;font-weight:750;line-height:1.15;font-variant-numeric:tabular-nums}
  .ys-kpi small{font-size:11.5px;color:var(--ink-3)}
  .ys-kpi.ok b{color:var(--ys-ok)} .ys-kpi.warn b{color:var(--ys-warn)} .ys-kpi.crit b{color:var(--ys-crit)} .ys-kpi.go b{color:var(--ys-go)}
  .ys-kpi.warn{border-color:color-mix(in srgb,var(--ys-warn) 40%,var(--border))} .ys-kpi.crit{border-color:color-mix(in srgb,var(--ys-crit) 45%,var(--border))}
  .ys-meter{display:block;height:4px;border-radius:3px;background:var(--border);margin-top:8px;overflow:hidden}
  .ys-meter i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#3d7ad9,var(--ys-ok))}
  .ys-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
  .ys-search{flex:1 1 260px;max-width:420px}
  .ys-search input{width:100%;box-sizing:border-box;font:inherit;font-size:13px;padding:9px 13px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--ink)}
  .ys-search input:focus{outline:none;border-color:#E20074;box-shadow:0 0 0 3px rgba(226,0,116,.15)}
  .ys-chipset{display:flex;gap:14px;flex-wrap:wrap}
  .ys-sec{display:flex;align-items:center;gap:8px;margin:18px 2px 10px;font:600 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
  .ys-sec i{font-style:normal;padding:1px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);letter-spacing:0}
  .ys-sec small{font:11px var(--sans,inherit);letter-spacing:0;text-transform:none;color:var(--ink-3)}
  .ys-sec.crit{color:var(--ys-crit)} .ys-sec.ok{color:var(--ys-ok)} .ys-sec.go{color:var(--ys-go)}
  .ys-onbwrap{margin-bottom:6px} .ys-onbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px}
  .ys-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:rgba(6,8,12,.62);backdrop-filter:blur(6px)}
  .ys-modal[hidden]{display:none}
  .ys-dlg{width:min(680px,100%);max-height:calc(100vh - 48px);overflow:auto;border-radius:20px;border:1px solid color-mix(in srgb,#E20074 35%,var(--border));
    background:radial-gradient(90% 100% at 0% 0%,rgba(226,0,116,.12),transparent 55%),var(--surface);box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
  .ys-dlg header{display:flex;justify-content:space-between;align-items:flex-start;padding:22px 24px 6px}
  .ys-dlg h2{margin:4px 0 0;font-size:22px;font-weight:720}
  .ys-x{all:unset;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;border-radius:9px;color:var(--ink-2)} .ys-x:hover{background:var(--surface-2);color:var(--ink)}
  .ys-steps{display:flex;gap:6px;padding:6px 24px 0;flex-wrap:wrap}
  .ys-steps span{font-size:11px;padding:3px 10px;border-radius:999px;border:1px solid var(--border);color:var(--ink-3)}
  .ys-steps span.on{color:#ff8ac4;border-color:rgba(226,0,116,.5);background:rgba(226,0,116,.08)}
  .ys-dlg-body{padding:16px 24px 22px;display:flex;flex-direction:column;gap:12px}
  .ys-btn{text-decoration:none;display:inline-flex;align-items:center}
  /* --- onboarding tiles (VmOnboarding progress) --- */
  #syncOnboardings{display:flex;flex-direction:column;gap:11px}
  .sy-vmact{display:inline-flex;align-items:center;gap:7px;margin-right:8px}
  .sy-vmnote{font-size:11px;color:#5b9bff;margin-right:2px}
  .sy-remove{all:unset;cursor:pointer;font-size:11px;font-weight:700;color:var(--ink-3);border:1px solid var(--border);border-radius:7px;padding:4px 9px;margin-right:8px}
  .sy-remove:hover{color:var(--crit);border-color:var(--crit-bd)}
  .sy-remove[disabled]{opacity:.5;cursor:default}
  /* ---- Argus Sync · "future GitOps for classic VMs" look (scoped) ---- */
  #pageSync .pagehead h1{font-size:26px;letter-spacing:-.02em}
  #pageSync .pagehead h1 span{background:linear-gradient(90deg,#5b9bff,#2f6fd6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .sy-hero{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:2px 0 4px;padding:10px 14px;border-radius:14px;
    background:linear-gradient(120deg,color-mix(in srgb,#2f6fd6 14%,var(--surface)),color-mix(in srgb,#5b9bff 6%,var(--surface)));
    border:1px solid color-mix(in srgb,#2f6fd6 30%,var(--border))}
  .sy-flow{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--ink-2)}
  .sy-flow .node{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--border);white-space:nowrap}
  .sy-flow .node b{color:var(--ink)}
  .sy-flow .arr{color:#5b9bff;font-weight:900;animation:syFlow 1.6s ease-in-out infinite}
  .sy-flow .arr:nth-of-type(2){animation-delay:.25s}
  .sy-flow .arr:nth-of-type(3){animation-delay:.5s}
  @keyframes syFlow{0%,100%{opacity:.35;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}}
  @media (prefers-reduced-motion:reduce){.sy-flow .arr{animation:none;opacity:.8}}
  .sy-cadence{display:inline-flex;align-items:center;gap:7px;margin-left:auto;font-size:11.5px;color:var(--ink-2);font-weight:600}
  .sy-live{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 70%,transparent);animation:syPulse 2s infinite}
  @keyframes syPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
  .sy-cadence b{color:var(--ink)}
  .sy-flow .node.git{border-color:color-mix(in srgb,#f1502f 40%,var(--border))}
  .sy-flow .node.argo{border-color:color-mix(in srgb,#ef7b4d 40%,var(--border))}
  .sy-flow .node.vm{border-color:color-mix(in srgb,#2f6fd6 40%,var(--border))}
  .sy-hero .tag{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5b9bff;opacity:.9}
  /* stat tiles pop */
  #pageSync .al-stats .al-tile{background:linear-gradient(160deg,color-mix(in srgb,var(--surface-2) 92%,#12161f),var(--surface));border:1px solid var(--border);transition:transform .12s,border-color .12s}
  #pageSync .al-stats .al-tile:hover{transform:translateY(-2px)}
  #pageSync .al-tile.crit{box-shadow:0 0 0 1px var(--crit-bd),0 8px 30px -14px color-mix(in srgb,var(--crit) 60%,transparent)}
  #pageSync .al-tile .n{font-size:30px;font-weight:800}
  /* VM cards: glassy with a status accent glow */
  #pageSync .hg{background:linear-gradient(165deg,color-mix(in srgb,var(--surface) 94%,#12161f),var(--surface));border-radius:15px;border:1px solid var(--border);overflow:hidden;transition:border-color .15s,box-shadow .15s}
  #pageSync .hg:hover{border-color:color-mix(in srgb,var(--pc,#2f6fd6) 45%,var(--border));box-shadow:0 14px 40px -22px color-mix(in srgb,var(--pc,#2f6fd6) 70%,transparent)}
  .sy-files{display:flex;flex-direction:column;gap:6px;padding:2px 2px 4px}
  .sy-vmcard .files .fr{gap:8px;padding:5px 0;border-bottom:1px solid color-mix(in srgb,var(--border) 45%,transparent)}
  .sy-vmcard .files .fr:last-of-type{border-bottom:0}
  .sy-vmcard .files .fr .p{flex:1;min-width:0;word-break:break-word;line-height:1.35}
  .sy-vmcard .files .fr .p .d{color:var(--ink-3)}
  .sy-vmcard .files .fr .p .b{color:var(--ink);font-weight:700;white-space:nowrap}
  .sy-vmcard .files .fr.agent{border-bottom:0}
  /* next-sync countdown pill + refresh */
  #pageSync .sy-next{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ink-2);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-variant-numeric:tabular-nums;white-space:nowrap}
  #pageSync .sy-next b{color:var(--ink)}
  #pageSync .sy-next.soon{border-color:color-mix(in srgb,var(--ok) 45%,var(--border))}
  #pageSync .sy-next.soon b{color:var(--ok)}
  #pageSync .sy-next.paused{opacity:.7}
  #pageSync .sy-refresh{all:unset;cursor:pointer;color:var(--ink-3);font-size:13px;line-height:1;padding:2px 4px;border-radius:6px}
  #pageSync .sy-refresh:hover{color:var(--ink);background:var(--surface)}
  #pageSync .sy-refresh.spin{animation:syspin .7s linear infinite;pointer-events:none}
  @keyframes syspin{to{transform:rotate(360deg)}}
  /* fully-synced VMs collapse into compact cards */
  .sy-synced{margin-top:16px}
  .sy-synced-h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:0 2px 9px}
  .sy-synced-h .c{color:var(--ok)}
  .sy-synced-h .ln{flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--ok) 30%,transparent),transparent)}
  .sy-vmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:12px}
  .sy-vmcard{position:relative;background:linear-gradient(162deg,color-mix(in srgb,var(--ok) 9%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--ok) 28%,var(--border));border-radius:14px;padding:13px 15px;cursor:pointer;transition:transform .13s,border-color .13s,box-shadow .13s}
  .sy-vmcard::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--ok);opacity:.85}
  .sy-vmcard:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--ok) 52%,var(--border));box-shadow:0 14px 38px -20px color-mix(in srgb,var(--ok) 60%,transparent)}
  .sy-vmcard .top{display:flex;align-items:center;gap:9px}
  .sy-vmcard .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 70%,transparent);animation:syPulse 2.4s infinite;flex:none}
  .sy-vmcard .host{flex:1;min-width:0;font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sy-vmcard .chev{color:var(--ink-3);font-size:10px;transition:transform .16s;flex:none}
  .sy-vmcard.open .chev{transform:rotate(90deg)}
  .sy-vmcard .meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:9px;font-size:11px;color:var(--ink-2)}
  .sy-vmcard .pill{font-size:10px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--ink-2)}
  .sy-vmcard .cnt{margin-left:auto;font-weight:800;color:var(--ok);font-variant-numeric:tabular-nums}
  .sy-vmcard .files{display:none;margin-top:11px;padding-top:10px;border-top:1px solid var(--border)}
  .sy-vmcard.open .files{display:block}
  .sy-vmcard .files .fhd{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:6px}
  .sy-vmcard .files .fr{display:flex;align-items:center;gap:7px;font-size:11px;padding:3px 0;color:var(--ink-2)}
  .sy-vmcard .files .fr .ck{color:var(--ok);flex:none}
  .sy-vmcard .files .fr .p{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
  .sy-vmcard .cardact{margin-top:11px;display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
  /* per-VM sync-mode (reconcile cadence) badge */
  .sy-mode{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;letter-spacing:.02em;padding:2px 9px;border-radius:999px;white-space:nowrap;border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);cursor:pointer;font-family:inherit;line-height:1.5;transition:filter .1s,transform .1s}
  .sy-mode:hover{filter:brightness(1.12);transform:translateY(-1px)}
  .sy-mode:active{transform:translateY(0)}
  .sy-mode[disabled]{opacity:.7;cursor:default}
  /* mode cadence caption */
  .sy-cad{margin-top:8px;font-size:10.5px;color:var(--ink-3);line-height:1.45}
  .sy-cad b{color:var(--ink-2);font-weight:800}
  .sy-cad.plus b{color:#5b9bff}
  .sy-cad.active b{color:var(--warn)}
  #pageSync .hg .sy-cad{margin:2px 14px 8px}
  /* visual wait-time: bar fills over the reconcile cadence */
  .sy-syncbar{position:relative;height:17px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);overflow:hidden;margin-top:8px}
  .sy-syncbar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,color-mix(in srgb,#2f6fd6 45%,transparent),color-mix(in srgb,#5b9bff 62%,transparent));animation:syFill linear infinite}
  @keyframes syFill{from{width:0}to{width:100%}}
  .sy-syncbar.active i{background:linear-gradient(90deg,color-mix(in srgb,var(--warn) 45%,transparent),color-mix(in srgb,var(--warn) 68%,transparent))}
  .sy-syncbar .lbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800;color:var(--ink);letter-spacing:.02em;text-shadow:0 1px 3px color-mix(in srgb,#000 45%,transparent)}
  @media (prefers-reduced-motion:reduce){.sy-syncbar i{animation:none;width:45%;opacity:.55}}
  #pageSync .hg .sy-syncbar{margin:2px 14px 10px}
  /* MR link toast */
  .sy-toast{position:fixed;right:20px;bottom:20px;z-index:9999;max-width:400px;background:var(--surface);border:1px solid color-mix(in srgb,#2f6fd6 34%,var(--border));border-radius:12px;padding:13px 16px;font-size:13px;color:var(--ink);box-shadow:0 20px 55px -18px rgba(0,0,0,.65);transform:translateY(24px);opacity:0;pointer-events:none;transition:transform .22s,opacity .22s}
  .sy-toast.show{transform:translateY(0);opacity:1;pointer-events:auto;cursor:pointer}
  .sy-toast a{color:#5b9bff;font-weight:800;text-decoration:none}
  .sy-toast a:hover{text-decoration:underline}
  /* Argus agent (reporter) files — de-emphasised */
  .sy-vmcard .files .fr.agent{color:var(--ink-3);font-style:italic;margin-top:3px;gap:5px}
  /* ---- Argus Sync · enterprise control-plane elevation ---- */
  #pageSync .pagehead h1{font-size:28px}
  #pageSync .pagehead h1::after{content:"CONTROL PLANE";margin-left:12px;font-size:9px;font-weight:800;letter-spacing:.18em;color:var(--ink-3);vertical-align:middle;border:1px solid var(--border);border-radius:5px;padding:3px 7px}
  .sy-hero{position:relative;overflow:hidden;box-shadow:0 20px 60px -40px color-mix(in srgb,#2f6fd6 80%,transparent)}
  .sy-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in srgb,#5b9bff 10%,transparent),transparent);background-size:220% 100%;animation:syScan 7s linear infinite;opacity:.6}
  @keyframes syScan{0%{background-position:210% 0}100%{background-position:-210% 0}}
  @media (prefers-reduced-motion:reduce){.sy-hero::after{animation:none;opacity:0}}
  .sy-flow .node{box-shadow:0 3px 14px -7px color-mix(in srgb,#2f6fd6 55%,transparent);backdrop-filter:blur(3px)}
  #pageSync .al-stats .al-tile .n{text-shadow:0 0 24px color-mix(in srgb,var(--ok) 32%,transparent);font-variant-numeric:tabular-nums}
  #pageSync .al-tile.crit .n{text-shadow:0 0 24px color-mix(in srgb,var(--crit) 45%,transparent)}
  #pageSync .al-card{border:1px solid var(--border);background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 60%,var(--surface)),var(--surface))}
  #pageSync .al-cardhead h2{letter-spacing:-.01em}
  #pageSync .al-cardhead h2::before{content:"◧ ";color:#5b9bff}
  .sy-synced-h .c{text-shadow:0 0 14px color-mix(in srgb,var(--ok) 40%,transparent)}
  .sy-mode.plus{color:#5b9bff;border-color:color-mix(in srgb,#2f6fd6 42%,var(--border));background:color-mix(in srgb,#2f6fd6 10%,transparent)}
  .sy-mode.active{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 44%,var(--border));background:color-mix(in srgb,var(--warn) 12%,transparent)}
  .hd-close{all:unset;cursor:pointer;font-size:16px;color:var(--ink-3);padding:4px 8px;border-radius:8px}
  .hd-close:hover{color:var(--ink);background:var(--surface-2)}
  /* The host as a page: the page scrolls, nothing inside it does. Boxes
     with their own scroll height were sized for an overlay; on a page they
     cut lists short and slid over the next section's heading. */
  #pageHost .hp-head{margin-bottom:14px}
  #pageHost .hd-title{font-size:26px;font-weight:750;margin:4px 0 0;letter-spacing:-.01em}
  #pageHost .hp-body div[style*="max-height"],#pageHost .hd-fswrap{max-height:none!important;overflow:visible!important}
  #pageHost thead th{position:static}
  #pageHost{--ys-ok:#45d99b;--ys-warn:#f5b84a;--ys-crit:#ff5f6d;--ys-go:#5b9bff}
  /* ===== Hosts, mission control ===== */
  #pageHosts{--ys-ok:#45d99b;--ys-warn:#f5b84a;--ys-crit:#ff5f6d;--ys-go:#5b9bff}
  .ht-hero .ys-hero-r{align-items:stretch;min-width:min(420px,100%)}
  .ht-search{max-width:none;flex:none}  /* flex-basis would be a HEIGHT in this column */
  .ht-hero .ys-hero-l{flex:1 1 460px}
  .ht-kpis{margin:18px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
  #pageHosts .al-tile{border-radius:14px;border:1px solid var(--border);background:var(--surface-2);padding:14px 16px 12px;box-shadow:none}
  #pageHosts .al-tile::before{display:none}
  #pageHosts .al-tile .k{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
  #pageHosts .al-tile .n{font-size:28px;font-weight:750;line-height:1.15;margin-top:2px;font-variant-numeric:tabular-nums}
  #pageHosts .al-tile .s{font-size:11.5px;color:var(--ink-3)}
  #pageHosts .al-tile.ok .n{color:var(--ys-ok)} #pageHosts .al-tile.major .n{color:var(--ys-warn)} #pageHosts .al-tile.crit .n{color:var(--ys-crit)}
  #pageHosts .al-tile.major{border-color:color-mix(in srgb,var(--ys-warn) 40%,var(--border))}
  #pageHosts .al-tile.crit{border-color:color-mix(in srgb,var(--ys-crit) 45%,var(--border))}
  #pageHosts>.al-card{background:transparent;border:0;box-shadow:none;padding:0}
  #pageHosts .al-cardhead{margin:0 2px 10px}
  #pageHosts .al-cardhead h2{font:600 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
  #pageHosts .ht-filters{display:flex;flex-wrap:wrap;gap:10px 22px;padding:12px 16px;margin-bottom:16px;border-radius:16px;border:1px solid var(--border);background:var(--surface)}
  #pageHosts .ht-fgroup[hidden]{display:none}
  #pageHosts .ht-flabel{font:600 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
  #pageHosts .al-pchip{border-radius:999px;padding:5px 11px;font-size:12px;border:1px solid var(--border);background:transparent;color:var(--ink-2)}
  #pageHosts .al-pchip:hover{border-color:var(--ink-3);color:var(--ink)}
  #pageHosts .al-pchip.on{border-color:#E20074;background:rgba(226,0,116,.12);color:var(--ink)}
  #pageHosts .hg{border-radius:18px;border:1px solid var(--border);margin-bottom:16px;overflow:hidden;
    background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 9%,transparent),transparent 120px),var(--surface)}
  #pageHosts .hc{border-radius:14px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 50%),var(--surface-2);
    padding:13px 14px;transition:transform .14s,border-color .14s,box-shadow .14s;box-shadow:none}
  #pageHosts .hc:hover{transform:translateY(-2px);border-color:color-mix(in srgb,#E20074 45%,var(--border));box-shadow:0 16px 36px -24px rgba(226,0,116,.65)}
  #pageHosts .hc.alerting{border-color:rgba(255,95,109,.55);box-shadow:inset 3px 0 0 var(--ys-crit),0 0 0 1px rgba(255,95,109,.15)}
  #pageHosts .hc.anomaly{box-shadow:inset 3px 0 0 var(--ys-warn)}
  #pageHosts .hc.eol{box-shadow:inset 3px 0 0 var(--ys-crit)}
  #pageHost .ys-meter.warn i{background:linear-gradient(90deg,#e0a44a,var(--ys-warn))} #pageHost .ys-meter.crit i{background:linear-gradient(90deg,#e0574a,var(--ys-crit))}
  #pageHost .hd-sec{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
  .patch{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;border:1px solid transparent;white-space:nowrap}
  .patch.crit{color:var(--crit);background:var(--crit-bg);border-color:var(--crit-bd)}
  .patch.imp{color:#c9701f;background:color-mix(in srgb,#e0842c 14%,transparent);border-color:color-mix(in srgb,#e0842c 34%,transparent)}
  html.dark .patch.imp{color:#e59a52}
  .patch.none{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-bd)}
  .patch.reboot{color:#2f6fd6;background:color-mix(in srgb,#2f6fd6 12%,transparent);border-color:color-mix(in srgb,#2f6fd6 32%,transparent)}
  .hd-schedrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}
  .hd-slbl{display:flex;flex-direction:column;gap:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
  .hd-slbl select,.hd-slbl input{font:inherit;font-size:13px;font-weight:500;text-transform:none;letter-spacing:0;padding:6px 8px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--ink)}
  .role{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:1px 7px;border-radius:5px;color:var(--rc);background:color-mix(in srgb,var(--rc) 15%,transparent);border:1px solid color-mix(in srgb,var(--rc) 36%,transparent);white-space:nowrap}
  .sw-chip{font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;color:#fff;background:var(--sc);white-space:nowrap}
  .hc.alerting{border-color:color-mix(in srgb,var(--crit) 48%,var(--border-2))}
  .hc.anomaly{border-color:color-mix(in srgb,#e0842c 55%,var(--border-2))}
  .cve{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;padding:1px 6px;border-radius:4px;background:color-mix(in srgb,var(--crit) 12%,transparent);color:var(--crit);border:1px solid color-mix(in srgb,var(--crit) 26%,transparent);margin:0 3px 3px 0}
  html.dark .cve{color:var(--crit)}

  .lg-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
  .lg-search{flex:1;min-width:240px;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:0 13px}
  .lg-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)}
  .lg-search svg{width:16px;height:16px;color:var(--ink-3);flex:none}
  .lg-search input{flex:1;border:0;background:transparent;color:var(--ink);font:inherit;font-size:13px;padding:10px 0;outline:none}
  .lg-srcin{width:170px;font:inherit;font-size:13px;padding:10px 12px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--ink)}
  .lg-sel{font:inherit;font-size:13px;padding:10px 12px;border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;max-width:150px}
  .lg-sel:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)}
  .lg-seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:3px}
  .lg-seg button{all:unset;cursor:pointer;font-size:12px;font-weight:600;color:var(--ink-2);padding:7px 12px;border-radius:8px}
  .lg-seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.22)}
  .lg-auto{all:unset;cursor:pointer;font-size:11px;font-weight:700;color:var(--ink-3);border:1px solid var(--border);border-radius:9px;padding:8px 11px;display:inline-flex;gap:6px;align-items:center}
  .lg-auto.on{color:var(--ok);border-color:var(--ok-bd);background:var(--ok-bg)}
  .lg-live{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--ink-3);font-weight:600;align-self:center}
  .lg-live .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:breathe 2s ease-in-out infinite}
  .lg-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
  .lg-levelbar{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--surface-2);border:1px solid var(--border-2);margin-bottom:14px}
  .lg-levelbar i{display:block;height:100%}
  .lg-topbars{display:flex;flex-direction:column;gap:10px}
  .lg-console{background:var(--bg);border:1px solid var(--border-2);border-radius:12px;overflow:auto;max-height:600px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  .lg-line{display:grid;grid-template-columns:70px 52px 150px 1fr;gap:11px;padding:6px 13px;border-left:3px solid transparent;font-size:12px;align-items:start;min-width:600px}
  .lg-line+.lg-line{border-top:1px solid color-mix(in srgb,var(--ink-3) 9%,transparent)}
  .lg-line:hover{background:color-mix(in srgb,var(--ink-3) 8%,transparent)}
  .lg-line .t{color:var(--ink-3);white-space:nowrap}
  .lg-line .src{color:var(--ink-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
  .lg-line .src:hover{color:var(--brand-ink)}
  .lg-line .msg{color:var(--ink);word-break:break-word;white-space:pre-wrap}
  .lg-line.err{border-left-color:var(--crit)}.lg-line.err .msg{color:var(--crit)}
  .lg-line.warn{border-left-color:var(--warn)}
  .lg-lvl{display:inline-block;font-size:9px;font-weight:800;text-transform:uppercase;padding:1px 5px;border-radius:4px;color:#fff;white-space:nowrap;text-align:center;min-width:40px}
  /* quick-filter chips (one-click common queries) */
  .lg-quick{display:flex;flex-wrap:wrap;gap:7px;margin:-4px 0 14px}
  /* alerting-source bell + clickable log line */
  .lg-line{cursor:pointer}
  .lg-bell{color:#e0842c;margin-left:6px;font-size:11px}
  .lg-diag{white-space:nowrap;margin-left:8px}
  /* log-detail drawer */
  .lgd-overlay{position:fixed;inset:0;z-index:60;background:rgba(6,8,12,.62);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
  .lgd-overlay[hidden]{display:none}
  .lgd-panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;width:min(920px,96vw);max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);overflow:hidden}
  .lgd-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
  .lgd-head .lgd-src{font-weight:700;font-size:15px;color:var(--ink)}
  .lgd-head .lgd-time{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
  .lgd-head .grow{flex:1}
  .lgd-close{all:unset;cursor:pointer;color:var(--ink-3);font-size:16px;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center}
  .lgd-close:hover{background:var(--surface-2);color:var(--ink)}
  .lgd-body{padding:16px 18px;overflow-y:auto}
  @media(max-width:700px){.lg-line{grid-template-columns:1fr;gap:2px;min-width:0}}

/* A page whose module is still loading (openPage in index.html): hidden, not
   unstyled. */
[id^="page"][aria-busy="true"]{visibility:hidden}