/* ═══════════════════════════════════════════════════════════════════════════════
   DΛREΛKT_ HOSTING APP — Design Tokens + Layout + Shared Primitives
   Shell UI is provided by atoms: ui.appbar, ui.sidebar, ui.nav, ui.theme-toggle
   Module-specific styles live in tools/modules/ui.hosting.*
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── FONTS ──────────────────────────────────────────────────────────────── */
/* Space Mono — used for system tokens (app codes, monogrammed labels).
   Self-hosted to comply with CSP font-src 'self'. */
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/space-mono-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/space-mono-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── DESIGN TOKENS ──────────────────────────────────────────────────────── */
:root {
  /* Tell the browser to render native widgets (scrollbars, native <select>
     dropdown popup, form-control accents) in the page's theme — otherwise
     they follow the OS preference and look out of place. Overridden in the
     light theme block below. */
  color-scheme: dark;
  --ha-font-token: "Space Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  /* Refined dark palette — wider surface ladder, subtle cool indigo tint,
     visible borders, dual-accent (warm gold = brand, cool cyan = live data). */
  --ha-bg:          #07080c;
  --ha-surface:     #12151e;
  --ha-surface-2:   #1c2030;
  --ha-surface-3:   #262b3d;
  --ha-border:      rgba(170, 185, 220, 0.10);
  --ha-border-hi:   rgba(170, 185, 220, 0.20);
  --ha-text:        #e4e7ee;
  --ha-text-muted:  rgba(220, 230, 250, 0.62);
  --ha-text-bright: #f7f9fc;
  --ha-accent:      #c9a84c;
  --ha-accent-dim:  rgba(201, 168, 76, 0.14);
  --ha-accent-hover:#e0c060;
  --ha-accent-cool:     #4ac8ff;
  --ha-accent-cool-dim: rgba(74, 200, 255, 0.12);
  --ha-ok:          #5fd07a;
  --ha-ok-dim:      rgba(95, 208, 122, 0.12);
  --ha-warn:        #f0b342;
  --ha-warn-dim:    rgba(240, 179, 66, 0.12);
  --ha-danger:      #ff5a5a;
  --ha-danger-dim:  rgba(255, 90, 90, 0.12);
  --ha-radius:      6px;
  --ha-radius-sm:   3px;
  --ha-transition:  0.15s ease;

  /* ── Atom token mappings ─────────────────────────────────────────────── */
  /* ui.appbar */
  --appbar-height:          44px;
  --appbar-bg:              var(--ha-surface);
  --appbar-border:          var(--ha-border-hi);
  --appbar-fg:              var(--ha-text);
  --appbar-brand-fg:        var(--ha-text-bright);
  --appbar-brand-size:      0.875rem;
  --appbar-brand-spacing:   0.1em;
  --appbar-action-bg:       transparent;
  --appbar-action-border:   var(--ha-border);
  --appbar-action-fg:       var(--ha-text);
  --appbar-action-bg-hover: transparent;
  --appbar-action-border-hover: var(--ha-danger);
  --appbar-z:               20;

  /* ui.sidebar */
  --sidebar-width:          200px;
  --sidebar-width-collapsed:0px;
  --sidebar-bg:             var(--ha-surface);
  --sidebar-border:         var(--ha-border-hi);
  --sidebar-z:              30;

  /* ui.nav */
  --nav-group-fg:           var(--ha-text-muted);
  --nav-link-fg:            rgba(255, 255, 255, 0.7);
  --nav-link-fg-active:     var(--ha-accent);
  --nav-link-bg-hover:      rgba(255, 255, 255, 0.03);
  --nav-link-bg-active:     var(--ha-accent-dim);

  /* ui.theme-toggle */
  --theme-toggle-bg:        var(--ha-surface-2);
  --theme-toggle-border:    var(--ha-border-hi);
  --theme-toggle-fg:        var(--ha-text-muted);
  --theme-toggle-bg-hover:  var(--ha-surface-2);
  --theme-toggle-opacity:   1;
  --theme-toggle-z:         50;

  /* auth.login (app mode) */
  --al-bg:          rgba(255, 255, 255, 0.03);
  --al-bd:          var(--ha-border);
  --al-fg:          var(--ha-text);
  --al-btn-bg:      var(--ha-accent);
  --al-btn-fg:      #0a0a0a;
  --al-radius:      var(--ha-radius);
}

/* ─── LIGHT THEME TOKENS ─────────────────────────────────────────────────── */
/* Cool crisp light — blue-tinted whites, strong blacks, teal+gold accents
   Fresh and modern — NOT beige, NOT gray, NOT boring                       */
[data-theme="light"] {
  color-scheme: light;
  --ha-bg:          #eef2f8;
  --ha-surface:     #ffffff;
  --ha-surface-2:   #e8edf4;
  --ha-surface-3:   #dde3ec;
  --ha-border:      rgba(0, 20, 60, 0.10);
  --ha-border-hi:   rgba(0, 20, 60, 0.18);
  --ha-text:        #0f1419;
  --ha-text-muted:  #4a5568;
  --ha-text-bright: #000000;
  --ha-accent:      #b8860b;
  --ha-accent-dim:  rgba(184, 134, 11, 0.10);
  --ha-accent-hover:#966d08;
  --ha-accent-cool:     #0a8fd2;
  --ha-accent-cool-dim: rgba(10, 143, 210, 0.10);
  --ha-card-glow:   0 1px 2px rgba(0,20,60,0.04), 0 4px 12px rgba(0,20,60,0.03);
  --ha-card-glow-hover: 0 2px 6px rgba(0,20,60,0.07), 0 8px 24px rgba(184,134,11,0.06);
  --ha-card-accent: 2px solid rgba(184,134,11,0.22);
  --ha-ok:          #0d9448;
  --ha-ok-dim:      rgba(13, 148, 72, 0.08);
  --ha-warn:        #d4920a;
  --ha-warn-dim:    rgba(212, 146, 10, 0.08);
  --ha-danger:      #dc2626;
  --ha-danger-dim:  rgba(220, 38, 38, 0.06);

  /* Appbar — crisp white */
  --appbar-bg:      #ffffff;
  --appbar-border:  rgba(0,20,60,0.10);
  --appbar-fg:      #0f1419;
  --appbar-brand-fg:#000000;
  --appbar-action-fg: #0f1419;
  --appbar-action-border: rgba(0,20,60,0.16);
  --appbar-action-border-hover: var(--ha-danger);

  /* Sidebar — cool tinted, distinct */
  --sidebar-bg:     #e6ecf2;
  --sidebar-border: rgba(0,20,60,0.10);

  /* Nav — BLACK text, vivid active, FULL opacity */
  --nav-group-fg:   #4a5a6a;
  --nav-link-fg:    #1a1a1a;
  --nav-link-fg-active: #b8860b;
  --nav-link-opacity: 1;
  --nav-link-bg-hover: rgba(0,40,100,0.06);
  --nav-link-bg-active: rgba(184,134,11,0.14);

  --al-bg:          rgba(0, 20, 60, 0.03);
}

/* ─── SCROLLBAR ──────────────────────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ha-border-hi) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--ha-border-hi);
  border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ha-text-muted); }
*::-webkit-scrollbar-corner { background: transparent; }

/* ─── RESET ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--ha-bg);
  color: var(--ha-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ─── APP LAYOUT ─────────────────────────────────────────────────────────── */
.ha {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Topbar mount — makes the appbar wrapper itself sticky to the viewport so it
   stays visible when the page scrolls. Without this, position:sticky on .ui-appbar
   has no scroll range (its content-height wrapper provides no slide context). */
#ha-topbar-mount {
  position: sticky;
  top: 0;
  z-index: 200;
}

.ha-shell {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* Apps may opt out of the side-nav (e.g. Lens — the simulator IS the app) */
.ha-shell--no-sidebar > #ha-sidebar-mount,
.ha-shell--no-sidebar > .ui-sidebar { display: none; }
.ha-shell--no-sidebar > .ha-content { flex: 1 1 100%; }

/* 2026-05-10 v3: Sidebar layout — `position: fixed` for unconditional
   always-visible behaviour. Sticky depends on parent layout (overflow,
   transform, flex sizing) and was failing in this app's flex context.
   Fixed is bulletproof: pin the sidebar to the viewport edge, give the
   content area a matching left padding so it doesn't slide under, and
   the user gets a sidebar that:
     • is always visible while scrolling any page
     • takes the full viewport height (no hard bottom mid-page)
     • has its own scrollbar for nav items that overflow
     • doesn't depend on any parent flex/overflow rule
   The placeholder slot (#ha-sidebar-mount) keeps the layout column so
   .ha-content's flex sizing is unaffected when sidebar collapses. */
.ha-shell .ui-sidebar {
  position: fixed;
  top: var(--appbar-height, 44px);
  bottom: 0;
  left: 0;
  height: auto;          /* let top + bottom define height */
  z-index: 100;
}
.ha-shell #ha-sidebar-mount {
  /* Reserve space in the flex layout so .ha-content doesn't slide under
     the fixed sidebar. Width must match .ui-sidebar's width. */
  width: var(--sidebar-width, 220px);
  flex-shrink: 0;
  transition: width 0.2s ease;
}
/* When the sidebar collapses, collapse its layout placeholder too so
   .ha-content reclaims the space. Uses :has() (Chrome 105+, FF 121+, Safari 15.4+). */
.ha-shell #ha-sidebar-mount:has(.ui-sidebar--collapsed) {
  width: var(--sidebar-width-collapsed, 0px);
}

/* ─── CONTENT AREA ───────────────────────────────────────────────────────── */
/* Width is token-driven via body[data-content-mode] (set by createApp). Modes
   resolve into --ha-content-max / --ha-content-pad which .ha-content reads.
   Body-attribute (not inline style on .ha-content) so the late Phase C inline-
   style sanitiser doesn't strip the value and collapse pages back to default.

   Default = 1200px / 1.5rem (smaller apps).
   Wide    = 1500px (command-centre apps: genesis, hosting, server, engine).
   Full    = no cap (full-bleed dashboards if ever needed).

   Apps declare via createApp({ contentMode: "wide" }). No per-app selectors. */
body                              { --ha-content-max: 1200px; --ha-content-pad: 1.5rem; }
body[data-content-mode="wide"]    { --ha-content-max: 1500px; --ha-content-pad: 1.25rem 1.5rem 3rem; }
body[data-content-mode="full"]    { --ha-content-max: none;   --ha-content-pad: 1.25rem 1.5rem 3rem; }

.ha-content {
  flex: 1;
  padding: var(--ha-content-pad);
  max-width: var(--ha-content-max);
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  /* 2026-05-10: `overflow-x: hidden` silently coerces overflow-y to `auto`
     (per CSS spec: "if one axis is non-visible, the visible one becomes auto").
     That made .ha-content its OWN scroll container — every page in every app
     showed an inner scrollbar PLUS the browser scrollbar. `overflow-x: clip`
     clips horizontal content the same way but does NOT establish a scroll
     context, so overflow-y stays visible and the body remains the single
     scroll surface. */
  overflow-x: clip;
}

/* ─── Appbar hosting-specific tweaks ─────────────────────────────────────── */
.ui-appbar {
  box-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

.ui-appbar__brand-sub {
  color: var(--ha-accent);
  text-transform: uppercase;
}

.ui-appbar__action:hover {
  color: var(--ha-danger);
  border-color: var(--ha-danger);
}

/* ─── Sidebar hosting-specific tweaks ───────────────────────────────────── */
.ha-shell .ui-sidebar {
  box-shadow: 1px 0 8px rgba(0,0,0,0.35);
}

[data-theme="light"] .ui-appbar {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

[data-theme="light"] .ha-shell .ui-sidebar {
  box-shadow: 1px 0 4px rgba(0,0,0,0.06);
}

/* Light theme — card soul: gold accent + warm gradient + shadow depth */
[data-theme="light"] .ha-section {
  background: linear-gradient(172deg, #ffffff 0%, var(--ha-surface) 100%);
  border-top: var(--ha-card-accent);
  box-shadow: var(--ha-card-glow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
[data-theme="light"] .ha-section:hover {
  box-shadow: var(--ha-card-glow-hover);
}

/* Light theme — kill all dark-mode opacity hacks */
[data-theme="light"] .ui-appbar__toggle { opacity: 0.85; }
[data-theme="light"] .ui-appbar__brand-sub { opacity: 1; }
[data-theme="light"] .ui-appbar__action { opacity: 1; }
[data-theme="light"] .ui-nav__group-header { opacity: 1; }

/* ─── Nav active link left-border accent ─────────────────────────────────── */
.ui-nav__link {
  border-left: 2px solid transparent;
  border-radius: 0;
  margin: 0;
}

.ui-nav__link--active {
  border-left-color: var(--ha-accent);
}

[data-theme="light"] .ui-nav__link--active {
  font-weight: 600;
  border-left-width: 3px;
}

/* ─── SHARED PRIMITIVES (used by hosting modules) ────────────────────────── */

/* Sections */
.ha-section {
  background: var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-radius: var(--ha-radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.ha-section__title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ha-text-muted);
  margin: 0 0 1rem;
}

/* KV Grid */
.ha-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem 1.5rem;
  margin-bottom: 1rem;
}
.ha-kv { display: flex; flex-direction: column; gap: 0.15rem; }
.ha-kv__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ha-text-muted);
}
.ha-kv__value { font-size: 0.875rem; color: var(--ha-text); }
.ha-kv__value--ok      { color: var(--ha-ok); }
.ha-kv__value--warn    { color: var(--ha-warn); }
.ha-kv__value--danger  { color: var(--ha-danger); }
.ha-kv__value--accent  { color: var(--ha-accent); font-weight: 600; }
.ha-kv__value--unknown { color: var(--ha-text-muted); }

/* Badges */
.ha-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
}
.ha-badge--ok      { background: var(--ha-ok-dim);      color: var(--ha-ok); }
.ha-badge--warn    { background: var(--ha-warn-dim);    color: var(--ha-warn); }
.ha-badge--danger  { background: var(--ha-danger-dim);  color: var(--ha-danger); }
.ha-badge--unknown { background: var(--ha-surface-2);   color: var(--ha-text-muted); }

/* Buttons */
.ha-btn {
  padding: 0.45rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--ha-radius-sm);
  cursor: pointer;
  transition: all var(--ha-transition);
  border: none;
}
.ha-btn--outline {
  background: transparent;
  border: 1px solid var(--ha-border);
  color: var(--ha-text);
}
.ha-btn--outline:hover { border-color: var(--ha-accent); color: var(--ha-accent-hover); }
.ha-btn--sm { padding: 0.3rem 0.7rem; font-size: 0.75rem; }
.ha-btn--success { background: var(--ha-ok-dim); color: var(--ha-ok); border-color: var(--ha-ok); }
.ha-btn--danger  { background: var(--ha-danger-dim); color: var(--ha-danger); border-color: var(--ha-danger); }
.ha-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* States */
.ha-loading {
  padding: 3rem;
  text-align: center;
  color: var(--ha-text-muted);
  font-size: 0.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
/* SSR'd loading state — the spinner + labelled "Loading X…" placeholder
 * shown in main content before the page module hydrates. JS-rendered
 * .ha-loading without data-ssr keeps the legacy text-only treatment so
 * intra-app transitions don't pulse a spinner on every navigation.
 */
.ha-loading[data-ssr] .ha-loading__spinner {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--ha-accent-dim, rgba(255,255,255,0.12));
  border-top-color: var(--ha-accent, rgba(255,255,255,0.45));
  animation: ha-loading-spin 0.8s linear infinite;
}
.ha-loading__spinner { display: none; }
.ha-loading__label {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
@keyframes ha-loading-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ha-loading[data-ssr] .ha-loading__spinner { animation: none; }
}
.ha-empty {
  padding: 3rem;
  text-align: center;
  color: var(--ha-text-muted);
  font-size: 0.875rem;
}
.ha-error {
  padding: 1rem;
  background: var(--ha-danger-dim);
  color: var(--ha-danger);
  border-radius: var(--ha-radius-sm);
  font-size: 0.875rem;
}

/* ─── SHARED MODAL ───────────────────────────────────────────────────────── */
.ha-modal__bg {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ha-modal__bg--open { opacity: 1; }
.ha-modal__card {
  width: 92%;
  max-width: 640px;
  max-height: 85vh;
  background: var(--ha-surface);
  border: 1px solid var(--ha-border-hi);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.ha-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--ha-border);
  background: var(--ha-surface-2);
}
.ha-modal__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ha-text-bright);
}
.ha-modal__close {
  background: none;
  border: none;
  color: var(--ha-text-muted);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0.1rem 0.4rem;
  line-height: 1;
  border-radius: 3px;
  transition: color var(--ha-transition), background var(--ha-transition);
}
.ha-modal__close:hover {
  color: var(--ha-text-bright);
  background: var(--ha-surface-3);
}
.ha-modal__body {
  padding: 1rem 1.15rem;
  overflow-y: auto;
  flex: 1;
}
.ha-modal__kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--ha-border);
  font-size: 0.8125rem;
}
.ha-modal__kv > span:first-child { color: var(--ha-text-muted); }
.ha-modal__kv > span:last-child  { color: var(--ha-text-bright); font-weight: 600; }

.ha-modal__link,
.ha-modal__link:visited,
.ha-modal__link:link {
  color: var(--ha-accent);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--ha-transition);
}
.ha-modal__link:hover { color: var(--ha-accent-hover); }

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ha-content { padding: 1rem; }
  .ha-kv-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .ha-kv-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* DAMAGE ANALYSIS HQ — shared module styling                                  */
/* ═══════════════════════════════════════════════════════════════════════════ */
.dahq {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--ha-text);
  font-family: var(--ha-font, "Inter", system-ui, sans-serif);
}
.dahq__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ha-border);
}
.dahq__title {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  color: var(--ha-text-bright);
}
.dahq__subtitle {
  font-size: 0.8125rem;
  color: var(--ha-text-muted);
  margin-top: 0.125rem;
}
.dahq__badge {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--ha-border);
  color: var(--ha-text-muted);
  background: transparent;
}
.dahq__badge--soon   { color: #c08a4a; border-color: rgba(192, 138, 74, 0.4); background: rgba(192, 138, 74, 0.06); }
.dahq__badge--ok     { color: #4ac88a; border-color: rgba(74, 200, 138, 0.4); background: rgba(74, 200, 138, 0.06); }
.dahq__badge--warn   { color: #d8a24a; border-color: rgba(216, 162, 74, 0.4); background: rgba(216, 162, 74, 0.06); }
.dahq__badge--danger { color: #ff7a6a; border-color: rgba(255, 122, 106, 0.4); background: rgba(255, 122, 106, 0.06); }
.dahq__badge--accent { color: #4ac8ff; border-color: rgba(74, 200, 255, 0.4); background: rgba(74, 200, 255, 0.06); }
.dahq__badge--muted  { color: var(--ha-text-muted); }

.dahq__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.dahq__input,
.dahq__select {
  padding: 0.4rem 0.6rem;
  background: var(--ha-bg-elev);
  border: 1px solid var(--ha-border);
  color: var(--ha-text);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.8125rem;
}
.dahq__input { min-width: 220px; }
.dahq__input:focus-visible,
.dahq__select:focus-visible {
  outline: 2px solid var(--ha-accent);
  outline-offset: 1px;
}
.dahq__btn {
  padding: 0.4rem 0.85rem;
  background: var(--ha-bg-elev);
  border: 1px solid var(--ha-border);
  color: var(--ha-text);
  font-family: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.12s;
}
.dahq__btn:hover  { border-color: var(--ha-accent); color: var(--ha-accent); }
.dahq__btn--primary { background: var(--ha-accent); border-color: var(--ha-accent); color: #fff; }
.dahq__btn--primary:hover { filter: brightness(1.1); color: #fff; }
.dahq__btn--danger  { background: rgba(255, 122, 106, 0.08); border-color: rgba(255, 122, 106, 0.4); color: #ff7a6a; }
.dahq__btn--danger:hover { background: rgba(255, 122, 106, 0.18); border-color: #ff7a6a; }

.dahq__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}
.dahq__kpi {
  background: var(--ha-bg-elev);
  border: 1px solid var(--ha-border);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.dahq__kpi-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ha-text-muted);
}
.dahq__kpi-value {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--ha-text-bright);
  line-height: 1.1;
}
.dahq__kpi-delta { font-size: 0.75rem; color: var(--ha-text-muted); }
.dahq__kpi-delta--up   { color: #4ac88a; }
.dahq__kpi-delta--down { color: #ff7a6a; }

.dahq__table-wrap {
  background: var(--ha-bg-elev);
  border: 1px solid var(--ha-border);
  border-radius: 6px;
  overflow: hidden;
}
.dahq__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.dahq__table thead th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  background: var(--ha-bg-deep, var(--ha-bg));
  color: var(--ha-text-muted);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  border-bottom: 1px solid var(--ha-border);
}
.dahq__table tbody td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--ha-border);
  color: var(--ha-text);
  vertical-align: middle;
}
.dahq__table tbody tr { cursor: pointer; transition: background 0.1s; }
.dahq__table tbody tr:hover { background: rgba(var(--ha-chr, 255, 255, 255), 0.03); }
.dahq__table tbody tr:last-child td { border-bottom: none; }
.dahq__table-strong { color: var(--ha-text-bright); font-weight: 600; }
.dahq__table-sub { font-size: 0.6875rem; color: var(--ha-text-muted); }
.dahq__table-empty { padding: 2rem; text-align: center; color: var(--ha-text-muted); font-style: italic; }

.dahq__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  background: var(--ha-bg-elev);
  border: 1px solid var(--ha-border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  font-size: 0.75rem;
  color: var(--ha-text-muted);
}

.dahq__panel {
  background: var(--ha-bg-elev);
  border: 1px solid var(--ha-border);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.dahq__panel-title {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ha-text-muted);
  margin: 0;
}
.dahq__row-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.75rem;
}
.dahq__kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0;
  font-size: 0.8125rem;
}
.dahq__kv > span:first-child  { color: var(--ha-text-muted); }
.dahq__kv > span:last-child   { color: var(--ha-text-bright); font-weight: 600; }

.dahq__meter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dahq__meter-track {
  flex: 1;
  height: 6px;
  background: rgba(var(--ha-chr, 255, 255, 255), 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.dahq__meter-fill { height: 100%; background: #4ac88a; transition: width 0.2s; }
.dahq__meter-fill--warn { background: #d8a24a; }
.dahq__meter-fill--crit { background: #ff7a6a; }
.dahq__meter-val { font-size: 0.6875rem; color: var(--ha-text-muted); min-width: 32px; text-align: right; }

.dahq__stub {
  background: var(--ha-bg-elev);
  border: 1px dashed var(--ha-border);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  color: var(--ha-text-muted);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.dahq__stub-text { margin: 0; }
.dahq__stub-endpoint {
  font-family: var(--ha-font-mono, "JetBrains Mono", monospace);
  font-size: 0.75rem;
  background: rgba(var(--ha-chr, 255, 255, 255), 0.04);
  padding: 0.35rem 0.55rem;
  border-radius: 3px;
  color: var(--ha-text);
  align-self: flex-start;
}
.dahq__pre {
  margin: 0;
  font-family: var(--ha-font-mono, "JetBrains Mono", monospace);
  font-size: 0.75rem;
  background: rgba(var(--ha-chr, 255, 255, 255), 0.03);
  padding: 0.6rem;
  border-radius: 3px;
  overflow: auto;
  max-height: 480px;
  color: var(--ha-text);
  white-space: pre-wrap;
}

.dahq__loading,
.dahq__error {
  padding: 1.25rem;
  text-align: center;
  color: var(--ha-text-muted);
  font-size: 0.8125rem;
  border: 1px dashed var(--ha-border);
  border-radius: 6px;
}
.dahq__error { color: #ff7a6a; border-color: rgba(255, 122, 106, 0.4); }

.dahq__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(var(--ha-chr, 255, 255, 255), 0.04);
  color: var(--ha-text-muted);
}
.dahq__pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dahq__pill--ok    { color: #4ac88a; }
.dahq__pill--warn  { color: #d8a24a; }
.dahq__pill--down  { color: #ff7a6a; }

.dahq__detail-head {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1.1rem;
  background: var(--ha-bg-elev);
  border: 1px solid var(--ha-border);
  border-radius: 6px;
}
.dahq__detail-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--ha-text-muted);
}

.dahq__chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  padding: 0.5rem 0;
}
.dahq__chart-bar {
  flex: 1;
  min-width: 4px;
  background: var(--ha-accent);
  opacity: 0.8;
  border-radius: 2px 2px 0 0;
  transition: opacity 0.15s;
}
.dahq__chart-bar:hover { opacity: 1; }

@media (max-width: 768px) {
  .dahq__table-wrap { overflow-x: auto; }
  .dahq__table { min-width: 600px; }
}

/* ── DA HQ utility classes (CSP-strict: no inline style attributes) ───── */
.dahq__flex            { display: flex; }
.dahq__flex-col        { display: flex; flex-direction: column; }
.dahq__flex-wrap       { flex-wrap: wrap; }
.dahq__flex-center     { align-items: center; }
.dahq__flex-between    { justify-content: space-between; }
.dahq__flex-end        { justify-content: flex-end; }
.dahq__gap-xs          { gap: 0.25rem; }
.dahq__gap-sm          { gap: 0.4rem; }
.dahq__gap-md          { gap: 0.5rem; }
.dahq__gap-lg          { gap: 0.75rem; }
.dahq__gap-xl          { gap: 1rem; }
.dahq__t-right         { text-align: right; }
.dahq__t-center        { text-align: center; }
.dahq__w-full          { width: 100%; }
.dahq__min-w-160       { min-width: 160px; }
.dahq__min-w-220       { min-width: 220px; }
.dahq__min-w-280       { min-width: 280px; }
.dahq__min-w-100p      { min-width: 100%; }
.dahq__max-w-240       { max-width: 240px; }
.dahq__mt-xs           { margin-top: 0.25rem; }
.dahq__mt-sm           { margin-top: 0.5rem; }
.dahq__resize-v        { resize: vertical; }
.dahq__danger-banner   {
  padding: 0.75rem 1rem;
  background: rgba(255, 122, 106, 0.08);
  border: 1px solid rgba(255, 122, 106, 0.3);
  border-radius: 4px;
  color: #ff7a6a;
}
.dahq__danger-banner > span { color: var(--ha-text); }
.dahq__color-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 0.4rem;
  background: var(--dahq-dot, transparent);
}
.dahq__bar-fill {
  background: var(--dahq-bar, #4ac8ff);
}
.dahq__link {
  color: var(--ha-accent);
  text-decoration: none;
}
.dahq__link:hover { text-decoration: underline; }
.dahq__panel--small  { padding: 0.6rem 0.85rem; }
.dahq__chart-axis    {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--ha-text-muted);
}
.dahq__inline-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.dahq__row-spread {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.dahq__row-meta {
  display: flex;
  flex-direction: column;
}
.dahq__mono {
  font-family: var(--ha-font-mono, "JetBrains Mono", monospace);
}


.dahq__w-90 { width: 90px; }
.dahq__danger-text { color: #ff7a6a; font-weight: 400; }

/* ── Hub tiles (section landing pages) ───────────────────────────────────── */
.dahq__hub-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.85rem;
}
.dahq__hub-tile {
  display: block;
  padding: 1rem 1.1rem;
  background: var(--ha-bg-elev);
  border: 1px solid var(--ha-border);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.dahq__hub-tile:hover {
  border-color: var(--ha-accent);
  background: var(--ha-accent-dim);
  transform: translateY(-1px);
}
.dahq__hub-tile-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ha-text-bright);
  margin-bottom: 0.3rem;
}
.dahq__hub-tile-desc {
  font-size: 0.8125rem;
  color: var(--ha-text-muted);
  line-height: 1.4;
}

/* ── Polish pass: hierarchy, spacing, focus states ──────────────────────── */
.dahq { gap: 1.25rem; }
.dahq__header {
  padding-bottom: 0.85rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--ha-border);
}
.dahq__title { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; }
.dahq__subtitle { margin-top: 0.2rem; }

.dahq__panel {
  padding: 1.1rem 1.25rem;
  gap: 0.75rem;
  border-radius: 8px;
  transition: border-color 0.12s ease;
}
.dahq__panel-title {
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.15rem;
}

.dahq__pill {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.7rem;
}
.dahq__pill::before { width: 7px; height: 7px; }

.dahq__btn {
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  transition: all 0.1s ease;
}
.dahq__btn:focus-visible {
  outline: 2px solid var(--ha-accent);
  outline-offset: 2px;
}

.dahq__kpi {
  padding: 1rem 1.15rem;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.dahq__kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--ha-accent);
  opacity: 0.5;
}
.dahq__kpi-label { font-size: 0.625rem; letter-spacing: 0.12em; }
.dahq__kpi-value { font-size: 1.65rem; letter-spacing: -0.02em; margin-top: 0.15rem; }

.dahq__hub-tile {
  padding: 1.1rem 1.25rem;
  border-radius: 8px;
  position: relative;
}
.dahq__hub-tile::after {
  content: "→";
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  color: var(--ha-text-muted);
  opacity: 0;
  transition: all 0.15s ease;
}
.dahq__hub-tile:hover::after {
  opacity: 1;
  transform: translateX(2px);
  color: var(--ha-accent);
}
.dahq__hub-tile-title { font-size: 1rem; }
.dahq__hub-tile-desc { line-height: 1.5; }

.dahq__table thead th { font-size: 0.625rem; letter-spacing: 0.1em; }
.dahq__table tbody td { padding: 0.7rem 0.85rem; }

/* ── Killswitch card states ──────────────────────────────────────────── */
.dahq__ks-card {
  position: relative;
  overflow: hidden;
}
.dahq__ks-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  transition: background 0.15s ease;
}
.dahq__ks-card--armed::before   { background: #4ac88a; opacity: 0.6; }
.dahq__ks-card--engaged::before { background: #ff7a6a; }
.dahq__ks-card--engaged {
  border-color: rgba(255, 122, 106, 0.35);
  background: linear-gradient(180deg, rgba(255, 122, 106, 0.04), transparent 40%), var(--ha-bg-elev);
}

/* ── Breadcrumb (DA HQ sub-pages) ────────────────────────────────────── */
.dahq-breadcrumb {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.85rem;
  margin-bottom: 1rem;
  background: var(--ha-bg-elev);
  border: 1px solid var(--ha-border);
  border-radius: 6px;
  font-size: 0.8125rem;
}
.dahq-breadcrumb__back {
  color: var(--ha-accent);
  text-decoration: none;
  font-weight: 500;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--ha-border);
  border-radius: 4px;
  background: transparent;
  transition: all 0.12s;
  white-space: nowrap;
}
.dahq-breadcrumb__back:hover {
  background: var(--ha-accent-dim);
  border-color: var(--ha-accent);
}
.dahq-breadcrumb__trail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  color: var(--ha-text-muted);
  font-size: 0.75rem;
}
.dahq-breadcrumb__link {
  color: var(--ha-text-muted);
  text-decoration: none;
}
.dahq-breadcrumb__link:hover {
  color: var(--ha-accent);
}
.dahq-breadcrumb__sep {
  color: var(--ha-text-muted);
  opacity: 0.5;
}
.dahq-breadcrumb__current {
  color: var(--ha-text-bright);
  font-weight: 500;
}

/* ── DA HQ Overview Hero ─────────────────────────────────────────────── */
.dahq__hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 0.5rem;
  background:
    radial-gradient(circle at 0% 0%, var(--ha-accent-dim), transparent 55%),
    linear-gradient(180deg, var(--ha-bg-elev) 0%, var(--ha-bg) 100%);
  border: 1px solid var(--ha-border-hi);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.dahq__hero::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--ha-accent);
}
.dahq__hero-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ha-accent);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.dahq__hero-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ha-text-bright);
  line-height: 1.1;
}
.dahq__hero-subtitle {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--ha-text-muted);
  max-width: 520px;
}
.dahq__hero-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
}
.dahq__hero-clock {
  font-size: 0.75rem;
  color: var(--ha-text-muted);
  font-family: var(--ha-font-mono, "JetBrains Mono", monospace);
  letter-spacing: 0.04em;
}

/* ── Section heads ───────────────────────────────────────────────────── */
.dahq__section-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1.5rem 0 0.85rem;
}
.dahq__section-title {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ha-text-muted);
}
.dahq__section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ha-border-hi), transparent);
}
.dahq__section-cta {
  font-size: 0.75rem;
  color: var(--ha-accent);
  text-decoration: none;
  font-weight: 500;
}
.dahq__section-cta:hover { text-decoration: underline; }

/* ── KPI refinement ──────────────────────────────────────────────────── */
.dahq__kpi {
  position: relative;
  padding: 1.15rem 1.25rem 1.1rem;
  border-radius: 10px;
  background:
    linear-gradient(135deg, var(--ha-bg-elev) 0%, transparent 100%),
    var(--ha-bg-elev);
  border: 1px solid var(--ha-border);
  transition: border-color 0.15s, transform 0.15s;
}
.dahq__kpi:hover {
  border-color: var(--ha-border-hi);
  transform: translateY(-1px);
}
.dahq__kpi::before {
  width: 2px;
  background: var(--ha-accent);
  opacity: 0.7;
  border-radius: 0 0 0 0;
}
.dahq__kpi-icon {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  font-size: 1.25rem;
  color: var(--ha-text-muted);
  opacity: 0.4;
  line-height: 1;
}
.dahq__kpi-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-top: 0.2rem;
}
.dahq__kpi-delta {
  font-size: 0.7rem;
  font-weight: 500;
  margin-top: 0.25rem;
}

/* ── Hub tiles refinement ────────────────────────────────────────────── */
.dahq__hub-tile {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  border-radius: 10px;
  border: 1px solid var(--ha-border);
  background:
    linear-gradient(135deg, var(--ha-bg-elev) 0%, transparent 100%),
    var(--ha-bg-elev);
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.dahq__hub-tile::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--ha-accent);
  transition: width 0.18s ease;
}
.dahq__hub-tile:hover {
  border-color: var(--ha-accent);
  background: linear-gradient(135deg, var(--ha-accent-dim) 0%, var(--ha-bg-elev) 100%);
  transform: translateY(-2px);
}
.dahq__hub-tile:hover::before { width: 3px; }
.dahq__hub-tile-icon {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ha-text-muted);
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--ha-chr, 255, 255, 255), 0.04);
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.dahq__hub-tile:hover .dahq__hub-tile-icon {
  color: var(--ha-accent);
  background: var(--ha-accent-dim);
}
.dahq__hub-tile-body { flex: 1; min-width: 0; }
.dahq__hub-tile-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ha-text-bright);
  margin-bottom: 0.3rem;
  line-height: 1.2;
}
.dahq__hub-tile-desc {
  font-size: 0.8rem;
  color: var(--ha-text-muted);
  line-height: 1.5;
}
.dahq__hub-tile::after {
  top: 1.25rem;
  right: 1.25rem;
}

/* ── Heatmap (day × hour) ────────────────────────────────────────────── */
.dahq__heatmap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0.25rem 0;
}
.dahq__heatmap-row {
  display: grid;
  grid-template-columns: 38px repeat(24, 1fr);
  gap: 3px;
  align-items: center;
}
.dahq__heatmap-axis-label {
  font-size: 0.625rem;
  color: var(--ha-text-muted);
  text-align: center;
  letter-spacing: 0.04em;
}
.dahq__heatmap-cell {
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: outline 0.1s;
  min-height: 18px;
}
.dahq__heatmap-cell:hover {
  outline: 1px solid var(--ha-accent);
}
.dahq__heatmap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 0.5rem;
  justify-content: flex-end;
}
.dahq__heatmap-legend .dahq__heatmap-cell {
  width: 14px;
  height: 14px;
  min-height: 0;
  cursor: default;
}
.dahq__heatmap-legend .dahq__heatmap-cell:hover { outline: none; }

/* ── Loading shimmer (subtle) ────────────────────────────────────────── */
.dahq__loading {
  background: linear-gradient(90deg, var(--ha-bg-elev) 0%, rgba(var(--ha-chr, 255, 255, 255), 0.04) 50%, var(--ha-bg-elev) 100%);
  background-size: 200% 100%;
  animation: dahq-shimmer 1.4s ease-in-out infinite;
  border: 1px solid var(--ha-border);
}
@keyframes dahq-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ── ui.hosting.overview utility classes (CSP-safe) ───────────────────── */
.ha-ov__center-mb   { text-align: center; margin-bottom: 1rem; }
.ha-ov__pad-1       { padding: 1rem; }
.ha-ov__bold        { font-weight: 600; }
.ha-ov__col-tight   { display: flex; flex-direction: column; gap: 0.2rem; }
.ha-ov__row-md      { display: flex; align-items: center; gap: 0.4rem; }
.ha-ov__row-lg      { display: flex; align-items: center; gap: 0.6rem; }
.ha-ov__footer-row  { display: flex; gap: 0.5rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--ha-border); }
.ha-ov__divider-top { border-top: 2px solid var(--ha-border); padding-top: 0.5rem; margin-top: 0.3rem; }
.ha-ov__text-muted  { color: var(--ha-text-muted); }
.ha-ov__text-warn   { color: var(--ha-warn); }
.ha-ov__text-danger { color: var(--ha-danger); }
.ha-ov__text-ok     { color: var(--ha-ok); }
.ha-ov__mono        { font-family: var(--ha-mono, "JetBrains Mono", monospace); }
.ha-ov__xs          { font-size: 0.72rem; }
.ha-ov__sm          { font-size: 0.75rem; }
.ha-ov__xxs         { font-size: 0.55rem; }
.ha-ov__metric-big  { font-size: 2.5rem; font-weight: 700; font-family: var(--ha-mono, "JetBrains Mono", monospace); }
.ha-ov__bar-fill    { height: 100%; transition: width 0.3s; }

/* ═══════════════════════════════════════════════════════════════════════════════
   FLEET POLISH LAYER — shared visual depth across all apps.
   No JS changes — hooks into shared .ha-* classes + per-tone data-attrs.
   Apps lean on .ha-section, .gns-kpi, .ha-ov__seccard, .ha-ov__servtile,
   .ha-badge, .ha-btn, .ha-modal__* — every one gets tinted backgrounds,
   colored left rails, and ambient glow shadows.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── .ha-section — the ubiquitous panel class ────────────────────────────── */
.ha-section {
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface);
  border-left: 3px solid var(--ha-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02),
    0 4px 14px -10px rgba(0, 0, 0, 0.5);
  transition: border-left-color 0.18s ease, box-shadow 0.18s ease;
  position: relative;
}
.ha-section:hover {
  border-left-color: var(--ha-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 10px 24px -14px rgba(0, 0, 0, 0.55);
}
/* tone-tagged sections take their colored rail */
.ha-section[data-tone="ok"]     { border-left-color: var(--ha-ok); }
.ha-section[data-tone="warn"]   { border-left-color: var(--ha-warn); }
.ha-section[data-tone="down"]   { border-left-color: var(--ha-danger); }
.ha-section[data-tone="info"]   { border-left-color: var(--ha-accent-cool); }
.ha-section[data-tone="accent"] { border-left-color: var(--ha-accent); }
/* the title gets a leading accent square so every section reads like a feature */
.ha-section__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.ha-section__title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--ha-accent);
  box-shadow: 0 0 0 3px var(--ha-accent-dim);
  transform: translateY(-1px);
  flex-shrink: 0;
}
.ha-section[data-tone="ok"]   .ha-section__title::before { background: var(--ha-ok);     box-shadow: 0 0 0 3px var(--ha-ok-dim); }
.ha-section[data-tone="warn"] .ha-section__title::before { background: var(--ha-warn);   box-shadow: 0 0 0 3px var(--ha-warn-dim); }
.ha-section[data-tone="down"] .ha-section__title::before { background: var(--ha-danger); box-shadow: 0 0 0 3px var(--ha-danger-dim); }
.ha-section[data-tone="info"] .ha-section__title::before { background: var(--ha-accent-cool); box-shadow: 0 0 0 3px var(--ha-accent-cool-dim); }

/* ─── .gns-kpi — shared KPI tile (Genesis + Hosting use it) ───────────────── */
.gns-kpi {
  background:
    linear-gradient(135deg, var(--ha-accent-dim) 0%, transparent 55%),
    var(--ha-surface);
  border-left: 3px solid var(--ha-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  position: relative;
  overflow: hidden;
  transition: border-left-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.gns-kpi--ok {
  background:
    radial-gradient(circle at 100% 100%, var(--ha-ok-dim) 0%, transparent 50%),
    var(--ha-surface);
  border-left-color: var(--ha-ok);
}
.gns-kpi--warn {
  background:
    radial-gradient(circle at 100% 0%, var(--ha-warn-dim) 0%, transparent 50%),
    repeating-linear-gradient(135deg, transparent 0 10px, var(--ha-warn-dim) 10px 11px),
    var(--ha-surface);
  border-left-color: var(--ha-warn);
}
.gns-kpi--down {
  background:
    radial-gradient(circle at 0% 100%, var(--ha-danger-dim) 0%, transparent 50%),
    repeating-linear-gradient(45deg, transparent 0 12px, var(--ha-danger-dim) 12px 13px),
    var(--ha-surface);
  border-left-color: var(--ha-danger);
}
.gns-kpi--info {
  background:
    radial-gradient(circle at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 55%),
    var(--ha-surface);
  border-left-color: var(--ha-accent-cool);
}
.gns-kpi--neutral {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 55%),
    var(--ha-surface);
}
.gns-kpi--clickable:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 22px -14px rgba(0, 0, 0, 0.5);
}
.gns-kpi__value {
  text-shadow: 0 1px 18px var(--ha-accent-dim);
}
/* turn the existing 4px ::after top-bar into a bloom-shadow so it glows */
.gns-kpi--ok::after   { box-shadow: 0 0 12px -2px var(--ha-ok); }
.gns-kpi--warn::after { box-shadow: 0 0 12px -2px var(--ha-warn); }
.gns-kpi--down::after { box-shadow: 0 0 14px -2px var(--ha-danger); }
.gns-kpi--info::after { box-shadow: 0 0 12px -2px var(--ha-accent-cool); }

/* ─── .ha-ov__seccard — hosting security/feature cards ────────────────────── */
.ha-ov__seccard {
  background:
    linear-gradient(135deg, var(--ha-accent-dim) 0%, transparent 55%),
    var(--ha-surface);
  border-left: 3px solid var(--ha-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition: border-left-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.ha-ov__seccard--ok {
  background:
    radial-gradient(circle at 100% 100%, var(--ha-ok-dim) 0%, transparent 50%),
    var(--ha-surface);
  border-left-color: var(--ha-ok);
}
.ha-ov__seccard--warn {
  background:
    radial-gradient(circle at 100% 0%, var(--ha-warn-dim) 0%, transparent 50%),
    repeating-linear-gradient(135deg, transparent 0 11px, var(--ha-warn-dim) 11px 12px),
    var(--ha-surface);
  border-left-color: var(--ha-warn);
}
.ha-ov__seccard--down {
  background:
    radial-gradient(circle at 0% 100%, var(--ha-danger-dim) 0%, transparent 50%),
    repeating-linear-gradient(45deg, transparent 0 12px, var(--ha-danger-dim) 12px 13px),
    var(--ha-surface);
  border-left-color: var(--ha-danger);
}
.ha-ov__seccard--info {
  background:
    radial-gradient(circle at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 50%),
    var(--ha-surface);
  border-left-color: var(--ha-accent-cool);
}
.ha-ov__seccard--neutral {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.015) 0%, transparent 50%),
    var(--ha-surface);
  border-left-color: var(--ha-text-muted);
}
.ha-ov__seccard:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 24px -14px rgba(0, 0, 0, 0.5);
}
/* The little 4px ::after pill at the top gets a glow */
.ha-ov__seccard--ok::after   { box-shadow: 0 0 12px -2px var(--ha-ok); }
.ha-ov__seccard--warn::after { box-shadow: 0 0 12px -2px var(--ha-warn); }
.ha-ov__seccard--down::after { box-shadow: 0 0 14px -2px var(--ha-danger); }
.ha-ov__seccard--info::after { box-shadow: 0 0 12px -2px var(--ha-accent-cool); }

/* ─── .ha-ov__servtile — hosting server-service tiles ─────────────────────── */
.ha-ov__servtile {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
    var(--ha-surface);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.ha-ov__servtile--ok {
  background:
    radial-gradient(circle at 100% 100%, var(--ha-ok-dim) 0%, transparent 50%),
    var(--ha-surface);
}
.ha-ov__servtile--down {
  background:
    radial-gradient(circle at 100% 100%, var(--ha-danger-dim) 0%, transparent 50%),
    repeating-linear-gradient(45deg, transparent 0 14px, var(--ha-danger-dim) 14px 15px),
    var(--ha-surface);
}
.ha-ov__servtile:hover {
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.5);
}
.ha-ov__servtile-dot--ok {
  box-shadow: 0 0 8px -1px var(--ha-ok);
}
.ha-ov__servtile-dot--down {
  box-shadow: 0 0 8px -1px var(--ha-danger);
}

/* ─── .ha-ov__rescomp — hosting resource composition cards ────────────────── */
.ha-ov__rescomp {
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface);
  border-left: 3px solid var(--ha-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.ha-ov__rescomp-meter-bar {
  position: relative;
  overflow: hidden;
}
.ha-ov__rescomp-meter-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
  pointer-events: none;
}

/* ─── .ha-ov__feed-row — universal feed/event rows ────────────────────────── */
.ha-ov__feed-row[data-tone="ok"]   { box-shadow: inset 3px 0 0 var(--ha-ok); }
.ha-ov__feed-row[data-tone="warn"] { box-shadow: inset 3px 0 0 var(--ha-warn); }
.ha-ov__feed-row[data-tone="down"] { box-shadow: inset 3px 0 0 var(--ha-danger); }
.ha-ov__feed-row[data-tone="info"] { box-shadow: inset 3px 0 0 var(--ha-accent-cool); }

/* ─── .ha-badge — already tone-tinted; add subtle ring + hover glow ───────── */
.ha-badge {
  border: 1px solid transparent;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.ha-badge--ok     { border-color: rgba(95, 208, 122, 0.25); }
.ha-badge--warn   { border-color: rgba(240, 179, 66, 0.25); }
.ha-badge--danger { border-color: rgba(255, 90, 90, 0.28); }
.ha-badge--ok:hover     { box-shadow: 0 0 10px -2px var(--ha-ok); }
.ha-badge--warn:hover   { box-shadow: 0 0 10px -2px var(--ha-warn); }
.ha-badge--danger:hover { box-shadow: 0 0 10px -2px var(--ha-danger); }

/* ─── .ha-btn — depth on success/danger; glow on outline hover ────────────── */
.ha-btn--success {
  background:
    linear-gradient(135deg, var(--ha-ok-dim) 0%, transparent 100%),
    var(--ha-ok-dim);
}
.ha-btn--success:hover {
  box-shadow: 0 0 14px -3px var(--ha-ok);
}
.ha-btn--danger {
  background:
    linear-gradient(135deg, var(--ha-danger-dim) 0%, transparent 100%),
    var(--ha-danger-dim);
}
.ha-btn--danger:hover {
  box-shadow: 0 0 14px -3px var(--ha-danger);
}
.ha-btn--outline:hover {
  box-shadow: 0 0 12px -3px var(--ha-accent);
}

/* ─── .ha-kv__value — depth on tone-tagged values ─────────────────────────── */
.ha-kv__value--accent { text-shadow: 0 0 14px var(--ha-accent-dim); }
.ha-kv__value--ok     { text-shadow: 0 0 12px var(--ha-ok-dim); }
.ha-kv__value--warn   { text-shadow: 0 0 12px var(--ha-warn-dim); }
.ha-kv__value--danger { text-shadow: 0 0 12px var(--ha-danger-dim); }

/* ─── .ha-modal — depth + accent rim ──────────────────────────────────────── */
.ha-modal__card,
.ha-modal__panel,
.ha-modal__content {
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 60px -30px rgba(0, 0, 0, 0.6),
    0 10px 30px -20px rgba(0, 0, 0, 0.5);
}
.ha-modal__header {
  border-bottom: 1px solid var(--ha-border);
  background: linear-gradient(180deg, var(--ha-surface-2) 0%, transparent 100%);
}

/* ─── Universal [data-tone] hooks — works for any element ─────────────────── */
[data-tone="ok"]:not(.gns-kpi):not(.ha-ov__seccard):not(.ha-section):not(.ha-ov__feed-row):not(.gns__pulse):not(.gns__brief) {
  /* opt-in glow on tone-tagged elements that aren't otherwise styled */
}

/* ─── Tables — give them a touch of depth ─────────────────────────────────── */
.ha-table,
table.ha-table,
.gns-table {
  background:
    linear-gradient(180deg, var(--ha-surface) 0%, transparent 80%),
    var(--ha-surface);
}
.ha-table tbody tr,
.gns-table tbody tr {
  transition: background 0.12s ease;
}
.ha-table tbody tr:hover,
.gns-table tbody tr:hover {
  background: var(--ha-surface-2);
}

/* ─── Loading / empty / error states — subtle gradient instead of pure flat ─ */
.ha-loading,
.ha-empty {
  background: radial-gradient(ellipse 60% 50% at 50% 50%, var(--ha-accent-dim) 0%, transparent 60%);
}
.ha-error {
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, var(--ha-danger-dim) 0%, transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 14px, var(--ha-danger-dim) 14px 15px);
}

/* ─── Light-theme softening — reduce gradient intensity ───────────────────── */
[data-theme="light"] .ha-section,
[data-theme="light"] .gns-kpi,
[data-theme="light"] .ha-ov__seccard,
[data-theme="light"] .ha-ov__servtile,
[data-theme="light"] .ha-ov__rescomp,
[data-theme="light"] .ha-modal__card {
  background-blend-mode: multiply, normal;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FLEET POLISH — Round 2 — Hosting + Genesis admin pages
   Targets the still-flat card classes the first polish pass didn't catch.
   Each class gets a per-tone gradient wash + colored left rail + bloom shadow.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── ui.statuspanel — inner Mission Status cells (Memory/Disk/CPU) ───────── */
.ui-statuspanel__cell {
  border-left: 3px solid var(--ha-border);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.015) 0%, transparent 55%),
    var(--ha-surface-2);
  transition: border-left-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  overflow: hidden;
}
/* tone inferred from the inner cell-value modifier via :has() */
.ui-statuspanel__cell:has(.ui-statuspanel__cell-value--ok) {
  background: radial-gradient(circle at 100% 100%, var(--ha-ok-dim) 0%, transparent 50%), var(--ha-surface-2);
  border-left-color: var(--ha-ok);
}
.ui-statuspanel__cell:has(.ui-statuspanel__cell-value--warn) {
  background:
    radial-gradient(circle at 100% 0%, var(--ha-warn-dim) 0%, transparent 50%),
    repeating-linear-gradient(135deg, transparent 0 10px, var(--ha-warn-dim) 10px 11px),
    var(--ha-surface-2);
  border-left-color: var(--ha-warn);
}
.ui-statuspanel__cell:has(.ui-statuspanel__cell-value--down) {
  background:
    radial-gradient(circle at 0% 100%, var(--ha-danger-dim) 0%, transparent 50%),
    repeating-linear-gradient(45deg, transparent 0 12px, var(--ha-danger-dim) 12px 13px),
    var(--ha-surface-2);
  border-left-color: var(--ha-danger);
}
.ui-statuspanel__cell:has(.ui-statuspanel__cell-value--info) {
  background: radial-gradient(circle at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 50%), var(--ha-surface-2);
  border-left-color: var(--ha-accent-cool);
}
.ui-statuspanel__cell:has(.ui-statuspanel__cell-value--accent) {
  background: radial-gradient(circle at 0% 0%, var(--ha-accent-dim) 0%, transparent 50%), var(--ha-surface-2);
  border-left-color: var(--ha-accent);
}
.ui-statuspanel__cell:hover {
  box-shadow: 0 8px 18px -14px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}

/* ─── .ha-ov__rescomp-block + meter — inner pieces of resource comp card ──── */
.ha-ov__rescomp-block {
  position: relative;
  padding: 0.85rem 1rem;
  background:
    linear-gradient(135deg, var(--ha-accent-dim) 0%, transparent 55%),
    var(--ha-surface-2);
  border-radius: var(--gns-radius, 4px);
  border-left: 2px solid var(--ha-accent);
}
.ha-ov__rescomp-meter {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.015) 0%, transparent 50%),
    var(--ha-surface-2);
  border-radius: var(--gns-radius, 4px);
  border: 1px solid var(--ha-border);
  padding: 0.6rem 0.8rem;
}

/* ─── .ha-task__card — Hosting Tasks ──────────────────────────────────────── */
.ha-task__card,
.ha-up-card,
.ha-apps__card,
.ha-mon-cron__card,
.ha-mon-feed__card,
.ha-detail__servtile,
.ha-neuron__panel,
.sh-csp__viz-card,
.sh-fw__viz-card,
.dev__card {
  background:
    linear-gradient(135deg, var(--ha-accent-dim) 0%, transparent 55%),
    var(--ha-surface);
  border-left: 3px solid var(--ha-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition: border-left-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  overflow: hidden;
}

/* ok variants */
.ha-task__card--ok,
.ha-up-card--ok,
.ha-apps__card--deployed,
.ha-mon-cron__card--ok,
.dev__card[data-state="ok"] {
  background:
    radial-gradient(circle at 100% 100%, var(--ha-ok-dim) 0%, transparent 50%),
    var(--ha-surface);
  border-left-color: var(--ha-ok);
}

/* warn variants */
.ha-task__card--warn,
.ha-up-card--warn,
.ha-apps__card--partial,
.ha-mon-cron__card--warn,
.ha-mon-feed__card--alert,
.ha-mon-feed__card--warn {
  background:
    radial-gradient(circle at 100% 0%, var(--ha-warn-dim) 0%, transparent 50%),
    repeating-linear-gradient(135deg, transparent 0 11px, var(--ha-warn-dim) 11px 12px),
    var(--ha-surface);
  border-left-color: var(--ha-warn);
}

/* down / danger variants */
.ha-task__card--down,
.ha-up-card--down,
.ha-mon-cron__card--err,
.ha-mon-feed__card--crit,
.ha-mon-feed__card--err,
.dev__card[data-state="down"] {
  background:
    radial-gradient(circle at 0% 100%, var(--ha-danger-dim) 0%, transparent 50%),
    repeating-linear-gradient(45deg, transparent 0 12px, var(--ha-danger-dim) 12px 13px),
    var(--ha-surface);
  border-left-color: var(--ha-danger);
}

/* info / neutral variants */
.ha-task__card--info,
.ha-mon-feed__card--dim {
  background:
    radial-gradient(circle at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 50%),
    var(--ha-surface);
  border-left-color: var(--ha-accent-cool);
}

/* hover bloom */
.ha-task__card:hover,
.ha-up-card:hover,
.ha-apps__card:hover,
.ha-mon-cron__card:hover,
.ha-mon-feed__card:hover,
.ha-detail__servtile:hover,
.ha-neuron__panel:hover,
.sh-csp__viz-card:hover,
.sh-fw__viz-card:hover,
.dev__card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 24px -14px rgba(0, 0, 0, 0.5);
}

/* ─── .dev__svc — service tiles in Dev Status ─────────────────────────────── */
.dev__svc {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
    var(--ha-surface);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.dev__svc--ok {
  background:
    radial-gradient(circle at 100% 100%, var(--ha-ok-dim) 0%, transparent 50%),
    var(--ha-surface);
  border-left: 3px solid var(--ha-ok);
}
.dev__svc--down {
  background:
    radial-gradient(circle at 100% 100%, var(--ha-danger-dim) 0%, transparent 50%),
    repeating-linear-gradient(45deg, transparent 0 14px, var(--ha-danger-dim) 14px 15px),
    var(--ha-surface);
  border-left: 3px solid var(--ha-danger);
}
.dev__svc--ok .dev__svc-dot   { box-shadow: 0 0 8px -1px var(--ha-ok); }
.dev__svc--down .dev__svc-dot { box-shadow: 0 0 8px -1px var(--ha-danger); }

/* ─── .ha-logs__panel + heatmap ───────────────────────────────────────────── */
.ha-logs__panel {
  background:
    linear-gradient(135deg, var(--ha-accent-dim) 0%, transparent 30%),
    var(--ha-surface);
  border-left: 3px solid var(--ha-accent-cool);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.ha-logs__heatmap {
  background:
    radial-gradient(circle at 100% 0%, var(--ha-warn-dim) 0%, transparent 35%),
    var(--ha-surface);
  border-left: 3px solid var(--ha-warn);
}

/* ─── Genesis Account page (.gns-acc__*) ──────────────────────────────────── */
.gns-acc__hero {
  background:
    radial-gradient(ellipse 70% 60% at 8% 12%, var(--ha-accent-dim) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 95% 90%, var(--ha-accent-cool-dim) 0%, transparent 55%),
    var(--ha-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 12px 32px -16px rgba(0, 0, 0, 0.5);
}
.gns-acc__hero-title {
  background: linear-gradient(135deg, var(--ha-text-bright) 0%, var(--ha-text-bright) 55%, var(--ha-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 30px var(--ha-accent-dim);
}
.gns-acc__section {
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-dim) 0%, transparent 45%),
    var(--ha-surface);
  border-left: 3px solid var(--ha-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02),
    0 6px 18px -14px rgba(0, 0, 0, 0.4);
  transition: border-left-color 0.18s ease, box-shadow 0.18s ease;
}
.gns-acc__section:hover {
  border-left-color: var(--ha-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 10px 24px -14px rgba(0, 0, 0, 0.5);
}
.gns-acc__section-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.gns-acc__section-title::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--ha-accent);
  box-shadow: 0 0 0 3px var(--ha-accent-dim);
  transform: translateY(-1px);
  flex-shrink: 0;
}
/* per-section signature (deeper differentiation across the page) */
.gns-acc__section:nth-of-type(odd) {
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 45%),
    var(--ha-surface);
}

/* ─── Universal table polish + gns- variants ──────────────────────────────── */
.gns-table thead th,
.ha-table thead th {
  background: var(--ha-surface-2);
  border-bottom: 1px solid var(--ha-border);
}

/* ─── Sidebar nav — subtle gradient + active glow ─────────────────────────── */
.ha-nav__item.is-active {
  background:
    linear-gradient(90deg, var(--ha-accent-dim) 0%, transparent 70%),
    var(--ha-surface-2);
  border-left: 3px solid var(--ha-accent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* ─── Light-theme blend for the new classes ───────────────────────────────── */
[data-theme="light"] .ui-statuspanel__cell,
[data-theme="light"] .ha-task__card,
[data-theme="light"] .ha-up-card,
[data-theme="light"] .ha-apps__card,
[data-theme="light"] .ha-mon-cron__card,
[data-theme="light"] .ha-mon-feed__card,
[data-theme="light"] .ha-detail__servtile,
[data-theme="light"] .sh-csp__viz-card,
[data-theme="light"] .sh-fw__viz-card,
[data-theme="light"] .dev__card,
[data-theme="light"] .dev__svc,
[data-theme="light"] .ha-logs__panel,
[data-theme="light"] .gns-acc__hero,
[data-theme="light"] .gns-acc__section {
  background-blend-mode: multiply, normal;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FLEET POLISH — Round 3 — deep-namespace apps
   Lens (.ln-*), Arena (.ar-*), Shield Audit (.sh-au__*), Silo (.ui-silo__*),
   Arc (.ar__*), Helm (.hm-*). Same idiom: tone-aware radial wash + colored
   left rail + bloom hover.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── LENS (.ln-*) — Overview + Console ───────────────────────────────────── */
.ln-ov__list,
.ln-ov__errors,
.ln-ov__mode,
.ln-cn__stream,
.ln-cn__inspect-section {
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 45%),
    var(--ha-surface);
  border-left: 3px solid var(--ha-accent-cool);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.ln-ov__errors {
  background:
    radial-gradient(circle at 100% 0%, var(--ha-danger-dim) 0%, transparent 50%),
    repeating-linear-gradient(135deg, transparent 0 12px, var(--ha-danger-dim) 12px 13px),
    var(--ha-surface);
  border-left-color: var(--ha-danger);
}
.ln-ov__error-row {
  border-left: 2px solid var(--ha-warn);
}
.ln-ov__error-row--fatal {
  background: radial-gradient(ellipse at 0% 50%, var(--ha-danger-dim) 0%, transparent 60%);
  border-left-color: var(--ha-danger);
}
.ln-cn__row[class*="--error"],
.ln-cn__row--error {
  background: linear-gradient(90deg, var(--ha-danger-dim) 0%, transparent 30%);
  border-left: 2px solid var(--ha-danger);
}
.ln-modes__btn {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 50%),
    var(--ha-surface);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

/* ─── ARENA (.ar-*) — Audit, Console, Config ──────────────────────────────── */
.ar-au__tablewrap,
.ar-cn__log,
.ar-cn__bar,
.ar-cf__form,
.ar-cf__safety {
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-warn-dim) 0%, transparent 40%),
    var(--ha-surface);
  border-left: 3px solid var(--ha-warn);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.ar-cf__safety {
  background:
    radial-gradient(circle at 100% 0%, var(--ha-danger-dim) 0%, transparent 50%),
    repeating-linear-gradient(135deg, transparent 0 12px, var(--ha-danger-dim) 12px 13px),
    var(--ha-surface);
  border-left-color: var(--ha-danger);
}
.ar-cn__chip--active {
  box-shadow: 0 0 10px -2px var(--ha-accent);
}

/* ─── SHIELD AUDIT (.sh-au__*) — donut, bars, action cards ────────────────── */
.sh-au__act,
.sh-au__bars,
.sh-au__donut {
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, var(--ha-danger-dim) 0%, transparent 45%),
    var(--ha-surface);
  border-left: 3px solid var(--ha-danger);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  padding-left: 1rem;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.sh-au__bars {
  background:
    radial-gradient(circle at 100% 100%, var(--ha-warn-dim) 0%, transparent 45%),
    var(--ha-surface);
  border-left-color: var(--ha-warn);
}
.sh-au__donut {
  background:
    radial-gradient(circle at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 50%),
    var(--ha-surface);
  border-left-color: var(--ha-accent-cool);
}
.sh-au__act:hover,
.sh-au__bars:hover,
.sh-au__donut:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 24px -14px rgba(0, 0, 0, 0.5);
}

/* ─── SILO (.ui-silo__*) — activity / audit / browser ─────────────────────── */
.ui-silo__activity {
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-dim) 0%, transparent 45%),
    var(--ha-surface);
  border-left: 3px solid var(--ha-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.ui-silo__audit-table-wrap {
  background:
    radial-gradient(circle at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 40%),
    var(--ha-surface);
  border-left: 3px solid var(--ha-accent-cool);
}
.ui-silo__action-bar {
  background:
    linear-gradient(135deg, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface);
  border-left: 3px solid var(--ha-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 4px 12px -8px rgba(0, 0, 0, 0.4);
}
.ui-silo__browser-head {
  background:
    linear-gradient(180deg, var(--ha-surface-2) 0%, transparent 80%),
    var(--ha-surface);
}

/* ─── ARC (.ar__*) — adhoc browser / control / form / browser-pick ────────── */
.ar__browser-pick {
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 45%),
    var(--ha-surface);
  border-left: 3px solid var(--ha-accent-cool);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.ar__adhoc-form {
  background:
    radial-gradient(ellipse 60% 40% at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 45%),
    var(--ha-surface-2);
  border-left: 2px solid var(--ha-accent-cool);
}
.ar__adhoc-results {
  background:
    linear-gradient(180deg, var(--ha-surface) 0%, transparent 80%),
    var(--ha-surface);
}
.ar__control {
  background:
    linear-gradient(135deg, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface);
}
.ar__control--ok {
  background:
    radial-gradient(circle at 100% 100%, var(--ha-ok-dim) 0%, transparent 50%),
    var(--ha-surface);
}
.ar__control--warn {
  background:
    radial-gradient(circle at 100% 0%, var(--ha-warn-dim) 0%, transparent 50%),
    repeating-linear-gradient(135deg, transparent 0 11px, var(--ha-warn-dim) 11px 12px),
    var(--ha-surface);
}
.ar__control--down {
  background:
    radial-gradient(circle at 0% 100%, var(--ha-danger-dim) 0%, transparent 50%),
    repeating-linear-gradient(45deg, transparent 0 12px, var(--ha-danger-dim) 12px 13px),
    var(--ha-surface);
}
.ar__control--info {
  background:
    radial-gradient(circle at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 50%),
    var(--ha-surface);
}

/* ─── HELM (.hm-*) — kill banner enhancement + bucket cards ───────────────── */
.hm-ov__kill-banner {
  background:
    radial-gradient(ellipse 60% 50% at 100% 50%, var(--ha-danger-dim) 0%, transparent 55%),
    repeating-linear-gradient(45deg, transparent 0 14px, var(--ha-danger-dim) 14px 15px),
    color-mix(in srgb, var(--ha-danger) 14%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 24px -6px var(--ha-danger);
}
.hm-ov__kill-title {
  text-shadow: 0 0 18px var(--ha-danger-dim);
}

/* ─── SEAL (.seal-*) — vault custom token palette ────────────────────────── */
.seal-init__primary {
  background: linear-gradient(135deg, var(--se-accent, var(--ha-accent)) 0%, var(--se-accent-2, var(--ha-accent-hover)) 100%);
  box-shadow: 0 4px 14px -4px var(--ha-accent-dim);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.seal-init__primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px var(--ha-accent);
}
.seal-chip--tier-open.seal-chip--active     { box-shadow: 0 0 10px -2px var(--ha-ok); }
.seal-chip--tier-strict.seal-chip--active   { box-shadow: 0 0 10px -2px var(--ha-warn); }
.seal-chip--tier-approved.seal-chip--active { box-shadow: 0 0 10px -2px var(--ha-danger); }

/* ─── DAMAGE HQ (.dahq*) + TAX REPORTER (.tr*) generic catch-all ─────────── */
/* Many dahq.* / taxreporter.* modules use generic .ha-section panels, which
   are already polished above. Catch any module-specific *__panel, *__card,
   *__stat that lean on --ha-surface here. */
[class*="__panel"],
[class*="__statcard"],
[class*="__metric-card"] {
  background:
    linear-gradient(135deg, var(--ha-accent-dim) 0%, transparent 60%),
    var(--ha-surface);
}

/* ─── Light-theme blend for round 3 classes ──────────────────────────────── */
[data-theme="light"] .ln-ov__list,
[data-theme="light"] .ln-ov__errors,
[data-theme="light"] .ln-cn__stream,
[data-theme="light"] .ar-au__tablewrap,
[data-theme="light"] .ar-cn__log,
[data-theme="light"] .sh-au__act,
[data-theme="light"] .sh-au__bars,
[data-theme="light"] .sh-au__donut,
[data-theme="light"] .ui-silo__activity,
[data-theme="light"] .ui-silo__audit-table-wrap,
[data-theme="light"] .ar__browser-pick,
[data-theme="light"] .ar__control,
[data-theme="light"] .hm-ov__kill-banner {
  background-blend-mode: multiply, normal;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FLEET POLISH — Round 4 — boost visibility + per-section signatures.
   User feedback: round 1-3 polish was too subtle on admin pages where every
   section had the same accent. This round (a) increases alpha so the gradients
   are actually visible against the dark surface, and (b) gives every section
   on multi-section admin pages a distinct signature colour so the page reads
   as a stack of different surfaces, not a wall of identical panels.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Shared HERO (.gns-hero) — used by Account/Audit/Notifications/DevStatus
       and many other pages. Round 1 only touched the genesis Overview hero
       (.gns__hero). This is its sibling that every other hero uses. ─────── */
.gns-hero {
  background:
    radial-gradient(ellipse 70% 60% at 8% 12%, var(--ha-accent-dim) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 95% 90%, var(--ha-accent-cool-dim) 0%, transparent 55%),
    linear-gradient(135deg, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 14px 36px -18px rgba(0, 0, 0, 0.55);
}
.gns-hero::before {
  /* widen the leading accent ribbon */
  height: 80%;
  top: 10%;
  bottom: 10%;
  box-shadow: 0 0 24px -4px var(--ha-accent);
}
.gns-hero__wordmark {
  background: linear-gradient(135deg, var(--ha-text-bright) 0%, var(--ha-text-bright) 55%, var(--ha-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 30px var(--ha-accent-dim);
}
.gns-hero__clock-time {
  text-shadow: 0 0 18px var(--ha-accent-dim);
}

/* ─── Boosted .ha-section / .gns-acc__section — make gradient much more visible
       AND tint per-section so multi-section pages have visual rhythm ──── */
.ha-section,
.gns-acc__section {
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 100% 100%, var(--ha-accent-cool-dim) 0%, transparent 55%),
    var(--ha-surface) !important;
}

/* per-section signature on Genesis Account: identity=accent, password=danger
   (security context), notifications=cool-blue (info channel) */
.gns-acc__section[data-section="identity"] {
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, var(--ha-accent-dim) 0%, transparent 45%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-accent) !important;
}
.gns-acc__section[data-section="identity"] .gns-acc__section-title::before { background: var(--ha-accent); box-shadow: 0 0 0 3px var(--ha-accent-dim); }

.gns-acc__section[data-section="password"] {
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, var(--ha-danger-dim) 0%, transparent 50%),
    repeating-linear-gradient(45deg, transparent 0 14px, var(--ha-danger-dim) 14px 15px),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-danger) !important;
}
.gns-acc__section[data-section="password"] .gns-acc__section-title::before { background: var(--ha-danger); box-shadow: 0 0 0 3px var(--ha-danger-dim); }

.gns-acc__section[data-section="notifications"] {
  background:
    radial-gradient(ellipse 70% 60% at 0% 100%, var(--ha-accent-cool-dim) 0%, transparent 50%),
    radial-gradient(circle at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 45%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-accent-cool) !important;
}
.gns-acc__section[data-section="notifications"] .gns-acc__section-title::before { background: var(--ha-accent-cool); box-shadow: 0 0 0 3px var(--ha-accent-cool-dim); }

/* generic per-position differentiation for any multi-section admin page:
   sections 1,5,9... = accent, 2,6,10... = cool, 3,7,11... = ok, 4,8,12... = warn.
   ONLY applies when section has NO data-section attribute (so explicit takes priority) */
.ha-section:not([data-section]):nth-of-type(4n + 2) {
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 50%),
    var(--ha-surface) !important;
}
.ha-section:not([data-section]):nth-of-type(4n + 3) {
  background:
    radial-gradient(ellipse 80% 60% at 0% 100%, var(--ha-ok-dim) 0%, transparent 50%),
    var(--ha-surface) !important;
}
.ha-section:not([data-section]):nth-of-type(4n) {
  background:
    radial-gradient(ellipse 80% 60% at 100% 100%, var(--ha-warn-dim) 0%, transparent 50%),
    var(--ha-surface) !important;
}

/* leading title square — make it more visible (was 6px → 10px, dual ring glow) */
.ha-section__title::before,
.gns-acc__section-title::before {
  width: 10px !important;
  height: 10px !important;
  box-shadow:
    0 0 0 3px var(--ha-accent-dim),
    0 0 16px -2px var(--ha-accent) !important;
}

/* ─── Boost .gns-kpi tile gradients — they were fading too fast ──────────── */
.gns-kpi {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 6px 18px -14px rgba(0, 0, 0, 0.5);
}
.gns-kpi--ok {
  background:
    radial-gradient(ellipse 100% 80% at 100% 100%, var(--ha-ok-dim) 0%, transparent 70%),
    radial-gradient(circle at 0% 0%, var(--ha-ok-dim) 0%, transparent 35%),
    var(--ha-surface) !important;
}
.gns-kpi--warn {
  background:
    radial-gradient(ellipse 100% 80% at 100% 0%, var(--ha-warn-dim) 0%, transparent 70%),
    repeating-linear-gradient(135deg, transparent 0 10px, var(--ha-warn-dim) 10px 11px),
    var(--ha-surface) !important;
}
.gns-kpi--down {
  background:
    radial-gradient(ellipse 100% 80% at 0% 100%, var(--ha-danger-dim) 0%, transparent 70%),
    repeating-linear-gradient(45deg, transparent 0 12px, var(--ha-danger-dim) 12px 13px),
    var(--ha-surface) !important;
}
.gns-kpi--info {
  background:
    radial-gradient(ellipse 100% 80% at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 70%),
    radial-gradient(circle at 0% 100%, var(--ha-accent-cool-dim) 0%, transparent 35%),
    var(--ha-surface) !important;
}

/* ─── Boost ALL existing card classes — wider gradient spread (was 45-50%, now 70%) */
.ha-ov__seccard,
.ha-ov__servtile,
.ha-task__card,
.ha-up-card,
.ha-apps__card,
.ha-mon-cron__card,
.ha-mon-feed__card,
.dev__card,
.ar__control,
.ln-ov__list,
.ln-ov__mode,
.ln-cn__stream,
.ln-cn__inspect-section,
.ar-au__tablewrap,
.ar-cn__log,
.ar-cn__bar,
.ar-cf__form,
.sh-au__act,
.sh-au__bars,
.sh-au__donut,
.ui-silo__activity,
.ui-silo__audit-table-wrap,
.ar__browser-pick {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 6px 18px -14px rgba(0, 0, 0, 0.5);
}

/* ─── Boost the GENESIS Overview pulse cards too — corner glow even at rest */
.gns__pulse-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 6px 18px -14px rgba(0, 0, 0, 0.5);
}
.gns__pulse-card::after {
  opacity: 0.35 !important;
}

/* ─── Inputs across the suite — add subtle accent ring on focus + gradient bg */
.gns-acc__input:focus,
.ha-input:focus {
  box-shadow: 0 0 0 3px var(--ha-accent-dim);
}

/* ─── Buttons — gradient sheen ──────────────────────────────────────────── */
.gns-acc__btn,
.gns-acc__btn--primary {
  background:
    linear-gradient(180deg, var(--ha-accent) 0%, var(--ha-accent-hover, var(--ha-accent)) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 14px -4px var(--ha-accent-dim);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.gns-acc__btn:hover,
.gns-acc__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 22px -6px var(--ha-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FLEET POLISH — Round 4.b — Dev Status per-card signatures
   The 5 dev__card tiles (PROCESS MEMORY / OS MEMORY / CPU / PROCESS / RUNTIME
   VERSIONS) each get their own colour identity. Same round-4 idiom:
   dual radial gradients, fade-out at transparent 70%, !important so this
   wins over round-2's flat accent polish.
   ═══════════════════════════════════════════════════════════════════════════════ */

.dev__card[data-card="proc-memory"] {
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, var(--ha-warn-dim) 0%, transparent 70%),
    radial-gradient(circle at 0% 100%, var(--ha-warn-dim) 0%, transparent 40%),
    repeating-linear-gradient(135deg, transparent 0 12px, var(--ha-warn-dim) 12px 13px),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-warn) !important;
}

.dev__card[data-card="os-memory"] {
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-ok-dim) 0%, transparent 70%),
    radial-gradient(circle at 100% 100%, var(--ha-ok-dim) 0%, transparent 40%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-ok) !important;
}

.dev__card[data-card="cpu"] {
  background:
    radial-gradient(ellipse 90% 70% at 100% 100%, var(--ha-accent-cool-dim) 0%, transparent 70%),
    radial-gradient(circle at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 40%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-accent-cool) !important;
}

.dev__card[data-card="process"] {
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-dim) 0%, transparent 70%),
    radial-gradient(circle at 100% 100%, var(--ha-accent-dim) 0%, transparent 40%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-accent) !important;
}

.dev__card[data-card="versions"] {
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, var(--ha-ok-dim) 0%, transparent 70%),
    radial-gradient(circle at 0% 100%, var(--ha-accent-cool-dim) 0%, transparent 40%),
    repeating-linear-gradient(90deg, transparent 0 24px, var(--ha-ok-dim) 24px 25px),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-ok) !important;
}

/* leading title square on every dev card head */
.dev__card-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.dev__card-title::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 1px;
  background: var(--ha-accent);
  box-shadow:
    0 0 0 3px var(--ha-accent-dim),
    0 0 16px -2px var(--ha-accent);
  transform: translateY(-1px);
  flex-shrink: 0;
}
.dev__card[data-card="proc-memory"] .dev__card-title::before { background: var(--ha-warn);         box-shadow: 0 0 0 3px var(--ha-warn-dim),         0 0 16px -2px var(--ha-warn); }
.dev__card[data-card="os-memory"]   .dev__card-title::before { background: var(--ha-ok);           box-shadow: 0 0 0 3px var(--ha-ok-dim),           0 0 16px -2px var(--ha-ok); }
.dev__card[data-card="cpu"]         .dev__card-title::before { background: var(--ha-accent-cool);  box-shadow: 0 0 0 3px var(--ha-accent-cool-dim),  0 0 16px -2px var(--ha-accent-cool); }
.dev__card[data-card="process"]     .dev__card-title::before { background: var(--ha-accent);       box-shadow: 0 0 0 3px var(--ha-accent-dim),       0 0 16px -2px var(--ha-accent); }
.dev__card[data-card="versions"]    .dev__card-title::before { background: var(--ha-ok);           box-shadow: 0 0 0 3px var(--ha-ok-dim),           0 0 16px -2px var(--ha-ok); }

/* Meter bars get a soft inner glow matching their fill colour */
.dev__meter-fill {
  box-shadow: 0 0 10px -2px currentColor;
}
.dev__meter-fill--ok   { color: var(--ha-ok); }
.dev__meter-fill--warn { color: var(--ha-warn); }
.dev__meter-fill--down { color: var(--ha-danger); }

/* Click hint chip gets a subtle accent */
.dev__card-hint {
  background: var(--ha-surface-2);
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--ha-border);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.dev__card:hover .dev__card-hint {
  border-color: var(--ha-accent);
  color: var(--ha-accent);
}

/* deflist key/value rows get hairline dividers */
.dev__deflist > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  padding: 0.25rem 0;
  border-bottom: 1px dashed var(--ha-border);
}
.dev__deflist > div:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════════════════════
   FLEET POLISH — Round 5 — Hub-tiles + status-panel cells + resource cards
   The shared atoms (.ui-hubtiles__tile / .ui-statuspanel__cell) and the
   hosting resource-composition cards were still flat. Same round-4 idiom.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── .ui-hubtiles__tile — Quick Actions / Hub navigation tiles ──────────── */
.ui-hubtiles__tile {
  background:
    radial-gradient(ellipse 100% 80% at 0% 0%, var(--ha-accent-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 4px 14px -10px rgba(0, 0, 0, 0.5);
  transition: border-left-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
  position: relative;
  overflow: hidden;
}
.ui-hubtiles__tile:hover {
  transform: translateY(-2px) !important;
  border-left-color: var(--ha-accent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 22px -12px rgba(0, 0, 0, 0.55) !important;
}
.ui-hubtiles__tile::after {
  /* soft corner glow */
  content: "";
  position: absolute;
  top: -1px; right: -1px;
  width: 50px; height: 50px;
  background: radial-gradient(circle at 100% 0%, var(--ha-accent-dim) 0%, transparent 70%);
  opacity: 0.5;
  pointer-events: none;
}
.ui-hubtiles__tile > * { position: relative; z-index: 1; }

/* per-href signature so each Quick Action reads as a different surface */
.ui-hubtiles__tile[href*="build"] {
  background: radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-dim) 0%, transparent 65%), var(--ha-surface) !important;
  border-left-color: var(--ha-accent) !important;
}
.ui-hubtiles__tile[href*="build"] .ui-hubtiles__icon { color: var(--ha-accent); }

.ui-hubtiles__tile[href*="backup"] {
  background: radial-gradient(ellipse 90% 70% at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 65%), var(--ha-surface) !important;
  border-left-color: var(--ha-accent-cool) !important;
}
.ui-hubtiles__tile[href*="backup"] .ui-hubtiles__icon { color: var(--ha-accent-cool); }

.ui-hubtiles__tile[href*="logs"] {
  background: radial-gradient(ellipse 90% 70% at 100% 100%, var(--ha-accent-cool-dim) 0%, transparent 65%), var(--ha-surface) !important;
  border-left-color: var(--ha-accent-cool) !important;
}
.ui-hubtiles__tile[href*="logs"] .ui-hubtiles__icon { color: var(--ha-accent-cool); }

.ui-hubtiles__tile[href*="firewall"],
.ui-hubtiles__tile[href*="security"] {
  background: radial-gradient(ellipse 90% 70% at 100% 0%, var(--ha-danger-dim) 0%, transparent 65%),
              repeating-linear-gradient(45deg, transparent 0 16px, var(--ha-danger-dim) 16px 17px),
              var(--ha-surface) !important;
  border-left-color: var(--ha-danger) !important;
}
.ui-hubtiles__tile[href*="firewall"] .ui-hubtiles__icon,
.ui-hubtiles__tile[href*="security"] .ui-hubtiles__icon { color: var(--ha-danger); }

.ui-hubtiles__tile[href*="systems"] {
  background: radial-gradient(ellipse 90% 70% at 0% 100%, var(--ha-accent-dim) 0%, transparent 65%), var(--ha-surface) !important;
  border-left-color: var(--ha-accent) !important;
}
.ui-hubtiles__tile[href*="systems"] .ui-hubtiles__icon { color: var(--ha-accent); }

.ui-hubtiles__tile[href*="uptime"] {
  background: radial-gradient(ellipse 90% 70% at 100% 100%, var(--ha-ok-dim) 0%, transparent 65%), var(--ha-surface) !important;
  border-left-color: var(--ha-ok) !important;
}
.ui-hubtiles__tile[href*="uptime"] .ui-hubtiles__icon { color: var(--ha-ok); }

.ui-hubtiles__tile[href*="observatory"],
.ui-hubtiles__tile[href*="analytics"] {
  background: radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 65%),
              radial-gradient(circle at 100% 100%, var(--ha-accent-cool-dim) 0%, transparent 40%),
              var(--ha-surface) !important;
  border-left-color: var(--ha-accent-cool) !important;
}
.ui-hubtiles__tile[href*="observatory"] .ui-hubtiles__icon,
.ui-hubtiles__tile[href*="analytics"] .ui-hubtiles__icon { color: var(--ha-accent-cool); }

.ui-hubtiles__tile[href*="provision"],
.ui-hubtiles__tile[href*="new-site"] {
  background: radial-gradient(ellipse 90% 70% at 0% 100%, var(--ha-ok-dim) 0%, transparent 65%), var(--ha-surface) !important;
  border-left-color: var(--ha-ok) !important;
}
.ui-hubtiles__tile[href*="provision"] .ui-hubtiles__icon,
.ui-hubtiles__tile[href*="new-site"] .ui-hubtiles__icon { color: var(--ha-ok); }

.ui-hubtiles__tile[href*="audit"] {
  background: radial-gradient(ellipse 90% 70% at 100% 0%, var(--ha-accent-dim) 0%, transparent 65%), var(--ha-surface) !important;
  border-left-color: var(--ha-accent) !important;
}
.ui-hubtiles__tile[href*="audit"] .ui-hubtiles__icon { color: var(--ha-accent); }

.ui-hubtiles__tile[href*="cron"] {
  background: radial-gradient(ellipse 90% 70% at 100% 100%, var(--ha-warn-dim) 0%, transparent 65%),
              repeating-linear-gradient(135deg, transparent 0 14px, var(--ha-warn-dim) 14px 15px),
              var(--ha-surface) !important;
  border-left-color: var(--ha-warn) !important;
}
.ui-hubtiles__tile[href*="cron"] .ui-hubtiles__icon { color: var(--ha-warn); }

/* on hover the icon glows in the signature colour */
.ui-hubtiles__tile:hover .ui-hubtiles__icon {
  filter: drop-shadow(0 0 8px currentColor);
}
.ui-hubtiles__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ─── .ui-statuspanel__cell — fallback tint when cell has no tone class.
       Round 2 only tinted cells whose .ui-statuspanel__cell-value carried
       --ok/--warn/--down/--info. Cells without a tone (Fleet Health on
       Sites page, e.g.) stayed flat. Inherit the parent panel's tone. ─── */
.ui-statuspanel--ok      .ui-statuspanel__cell:not(:has(.ui-statuspanel__cell-value--warn)):not(:has(.ui-statuspanel__cell-value--down)):not(:has(.ui-statuspanel__cell-value--info)) {
  background: radial-gradient(circle at 100% 100%, var(--ha-ok-dim) 0%, transparent 55%), var(--ha-surface-2) !important;
  border-left: 3px solid var(--ha-ok) !important;
}
.ui-statuspanel--warn    .ui-statuspanel__cell:not(:has(.ui-statuspanel__cell-value--ok)):not(:has(.ui-statuspanel__cell-value--down)):not(:has(.ui-statuspanel__cell-value--info)) {
  background: radial-gradient(circle at 100% 0%, var(--ha-warn-dim) 0%, transparent 55%), var(--ha-surface-2) !important;
  border-left: 3px solid var(--ha-warn) !important;
}
.ui-statuspanel--down    .ui-statuspanel__cell:not(:has(.ui-statuspanel__cell-value--ok)):not(:has(.ui-statuspanel__cell-value--warn)):not(:has(.ui-statuspanel__cell-value--info)) {
  background: radial-gradient(circle at 0% 100%, var(--ha-danger-dim) 0%, transparent 55%), var(--ha-surface-2) !important;
  border-left: 3px solid var(--ha-danger) !important;
}
.ui-statuspanel--info    .ui-statuspanel__cell:not([class*="value--"]) {
  background: radial-gradient(circle at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 55%), var(--ha-surface-2) !important;
  border-left: 3px solid var(--ha-accent-cool) !important;
}
.ui-statuspanel--accent  .ui-statuspanel__cell:not([class*="value--"]) {
  background: radial-gradient(circle at 0% 0%, var(--ha-accent-dim) 0%, transparent 55%), var(--ha-surface-2) !important;
  border-left: 3px solid var(--ha-accent) !important;
}

/* ─── HOSTING Resource Composition — boost meters + outer card ──────────── */
.ha-ov__rescomp {
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%, var(--ha-accent-dim) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 100% 100%, var(--ha-accent-cool-dim) 0%, transparent 55%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-accent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 6px 18px -14px rgba(0, 0, 0, 0.5);
}
.ha-ov__rescomp-block {
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, var(--ha-accent-dim) 0%, transparent 60%),
    var(--ha-surface-2) !important;
  border-left: 2px solid var(--ha-accent) !important;
  padding: 0.85rem 1rem !important;
  border-radius: var(--gns-radius, 4px);
}
.ha-ov__rescomp-meter {
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 55%),
    var(--ha-surface-2) !important;
  border-left: 2px solid var(--ha-accent-cool) !important;
  padding: 0.7rem 0.9rem !important;
  border-radius: var(--gns-radius, 4px);
  position: relative;
  overflow: hidden;
}
.ha-ov__rescomp-meter-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ha-ov__rescomp-meter-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--ha-accent-cool);
  box-shadow:
    0 0 0 3px var(--ha-accent-cool-dim),
    0 0 12px -2px var(--ha-accent-cool);
  transform: translateY(-1px);
  flex-shrink: 0;
}

/* ─── Boost .ha-ov__seccard — round 2 already polished but per the latest
       screenshots they're not popping enough vs Genesis Overview. Boost
       coverage and add dual radial like round 4. ─────────────────────── */
.ha-ov__seccard--ok {
  background:
    radial-gradient(ellipse 100% 80% at 100% 100%, var(--ha-ok-dim) 0%, transparent 70%),
    radial-gradient(circle at 0% 0%, var(--ha-ok-dim) 0%, transparent 35%),
    var(--ha-surface) !important;
}
.ha-ov__seccard--warn {
  background:
    radial-gradient(ellipse 100% 80% at 100% 0%, var(--ha-warn-dim) 0%, transparent 70%),
    repeating-linear-gradient(135deg, transparent 0 11px, var(--ha-warn-dim) 11px 12px),
    var(--ha-surface) !important;
}
.ha-ov__seccard--down {
  background:
    radial-gradient(ellipse 100% 80% at 0% 100%, var(--ha-danger-dim) 0%, transparent 70%),
    repeating-linear-gradient(45deg, transparent 0 12px, var(--ha-danger-dim) 12px 13px),
    var(--ha-surface) !important;
}
.ha-ov__seccard--info {
  background:
    radial-gradient(ellipse 100% 80% at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 70%),
    radial-gradient(circle at 0% 100%, var(--ha-accent-cool-dim) 0%, transparent 35%),
    var(--ha-surface) !important;
}
.ha-ov__seccard--neutral {
  background:
    linear-gradient(135deg, var(--ha-accent-dim) 0%, transparent 55%),
    radial-gradient(circle at 100% 100%, var(--ha-accent-dim) 0%, transparent 45%),
    var(--ha-surface) !important;
}

/* ─── Boost .ha-ov__servtile too (Nginx / PM2 / Node.js rack tiles) ─────── */
.ha-ov__servtile--ok {
  background:
    radial-gradient(ellipse 90% 70% at 100% 100%, var(--ha-ok-dim) 0%, transparent 65%),
    radial-gradient(circle at 0% 0%, var(--ha-ok-dim) 0%, transparent 40%),
    var(--ha-surface) !important;
}
.ha-ov__servtile--down {
  background:
    radial-gradient(ellipse 90% 70% at 0% 100%, var(--ha-danger-dim) 0%, transparent 65%),
    repeating-linear-gradient(45deg, transparent 0 14px, var(--ha-danger-dim) 14px 15px),
    var(--ha-surface) !important;
}

/* ─── Boost the FLEET hero on Sites page (uses .gns-hero shared atom) ───── */
.gns-hero__bar {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FLEET POLISH — Round 6 — Server app (Uptime + Analytics) via statcardgrid atom
   .ui-statcardgrid__card is the shared atom rendered by Uptime, Analytics,
   and several other pages. Was completely flat. Polish via :has() on the
   inner .ui-pill--{tone} the JS embeds — no JS changes needed.
   ═══════════════════════════════════════════════════════════════════════════════ */

.ui-statcardgrid__card {
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 4px 14px -10px rgba(0, 0, 0, 0.5);
  transition: border-left-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
  position: relative;
  overflow: hidden;
}
.ui-statcardgrid__card > * { position: relative; z-index: 1; }

/* Tone driven by the .ui-pill the JS embeds inside the card head.
   Falls back to accent if no pill present (analytics +xx% chip cards use
   .ui-pill--ok/--down via the renderPill call). */
.ui-statcardgrid__card:has(.ui-pill--ok) {
  background:
    radial-gradient(ellipse 100% 80% at 100% 100%, var(--ha-ok-dim) 0%, transparent 70%),
    radial-gradient(circle at 0% 0%, var(--ha-ok-dim) 0%, transparent 35%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-ok) !important;
}
.ui-statcardgrid__card:has(.ui-pill--warn) {
  background:
    radial-gradient(ellipse 100% 80% at 100% 0%, var(--ha-warn-dim) 0%, transparent 70%),
    repeating-linear-gradient(135deg, transparent 0 11px, var(--ha-warn-dim) 11px 12px),
    var(--ha-surface) !important;
  border-left-color: var(--ha-warn) !important;
}
.ui-statcardgrid__card:has(.ui-pill--down) {
  background:
    radial-gradient(ellipse 100% 80% at 0% 100%, var(--ha-danger-dim) 0%, transparent 70%),
    repeating-linear-gradient(45deg, transparent 0 12px, var(--ha-danger-dim) 12px 13px),
    var(--ha-surface) !important;
  border-left-color: var(--ha-danger) !important;
}
.ui-statcardgrid__card:has(.ui-pill--accent) {
  background:
    radial-gradient(ellipse 100% 80% at 100% 0%, var(--ha-accent-dim) 0%, transparent 70%),
    radial-gradient(circle at 0% 100%, var(--ha-accent-dim) 0%, transparent 35%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-accent) !important;
}

/* Hover lift + bloom matched to the card's tone via currentColor */
.ui-statcardgrid__card:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 26px -14px rgba(0, 0, 0, 0.55) !important;
  background-color: transparent !important; /* let the radial gradient stay visible on hover */
}

/* If a card has an error footer, override to danger tone */
.ui-statcardgrid__card:has(.ui-statcardgrid__error) {
  background:
    radial-gradient(ellipse 100% 80% at 0% 100%, var(--ha-danger-dim) 0%, transparent 70%),
    repeating-linear-gradient(45deg, transparent 0 12px, var(--ha-danger-dim) 12px 13px),
    var(--ha-surface) !important;
  border-left-color: var(--ha-danger) !important;
}
.ui-statcardgrid__error {
  /* lift the danger note off the diagonal stripes */
  background: var(--ha-surface-2);
  padding: 0.4rem 0.6rem;
  border-radius: var(--gns-radius, 4px);
  border-left: 2px solid var(--ha-danger);
  margin-top: 0.3rem;
}

/* Title gets a leading tone-aware square */
.ui-statcardgrid__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.ui-statcardgrid__title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--ha-accent);
  box-shadow:
    0 0 0 3px var(--ha-accent-dim),
    0 0 12px -2px var(--ha-accent);
  transform: translateY(-1px);
  flex-shrink: 0;
}
.ui-statcardgrid__card:has(.ui-pill--ok) .ui-statcardgrid__title::before {
  background: var(--ha-ok); box-shadow: 0 0 0 3px var(--ha-ok-dim), 0 0 12px -2px var(--ha-ok);
}
.ui-statcardgrid__card:has(.ui-pill--warn) .ui-statcardgrid__title::before {
  background: var(--ha-warn); box-shadow: 0 0 0 3px var(--ha-warn-dim), 0 0 12px -2px var(--ha-warn);
}
.ui-statcardgrid__card:has(.ui-pill--down) .ui-statcardgrid__title::before,
.ui-statcardgrid__card:has(.ui-statcardgrid__error) .ui-statcardgrid__title::before {
  background: var(--ha-danger); box-shadow: 0 0 0 3px var(--ha-danger-dim), 0 0 12px -2px var(--ha-danger);
}

/* Stat values get subtle text-shadow glow in their tone */
.ui-statcardgrid__stat-value--ok    { text-shadow: 0 0 10px var(--ha-ok-dim); }
.ui-statcardgrid__stat-value--warn  { text-shadow: 0 0 10px var(--ha-warn-dim); }
.ui-statcardgrid__stat-value--down  { text-shadow: 0 0 10px var(--ha-danger-dim); }

/* Pill itself gets a soft bloom in its tone (the badge inside the card head) */
.ui-pill {
  transition: box-shadow 0.18s ease;
}
.ui-pill--ok      { box-shadow: 0 0 12px -3px var(--ha-ok); }
.ui-pill--warn    { box-shadow: 0 0 12px -3px var(--ha-warn); }
.ui-pill--down    { box-shadow: 0 0 12px -3px var(--ha-danger); }
.ui-pill--accent  { box-shadow: 0 0 12px -3px var(--ha-accent); }

/* ─── Analytics sparkline bars — give them a soft accent tone gradient ────── */
.haa-spark__bar {
  background: linear-gradient(180deg, var(--ha-accent) 0%, var(--ha-accent-dim) 100%);
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.ui-statcardgrid__card:has(.ui-pill--down) .haa-spark__bar {
  background: linear-gradient(180deg, var(--ha-danger) 0%, var(--ha-danger-dim) 100%);
}
.ui-statcardgrid__card:has(.ui-pill--ok) .haa-spark__bar {
  background: linear-gradient(180deg, var(--ha-ok) 0%, var(--ha-ok-dim) 100%);
}

.haa-empty {
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, var(--ha-accent-dim) 0%, transparent 65%),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-radius: var(--gns-radius-lg, 6px);
  padding: 2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FLEET POLISH — Round 7 — every Server-app page via the remaining flat
   shared atoms (.ui-hero / .ui-countergrid / .ui-statusgrid) plus the
   monitoring + uptime-detail + analytics-detail module-specific classes.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── .ui-hero — the simpler hero atom (Server detail / Systems / Apps /
       Bandwidth / Monitoring pages). Round 4 only boosted .gns-hero. ───── */
.ui-hero {
  position: relative;
  padding: 1.5rem 1.75rem 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--ha-border-hi);
  border-radius: var(--gns-radius-lg, 6px);
  background:
    radial-gradient(ellipse 70% 60% at 8% 12%, var(--ha-accent-dim) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 95% 90%, var(--ha-accent-cool-dim) 0%, transparent 55%),
    var(--ha-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 8px 24px -16px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.ui-hero::before {
  /* leading accent ribbon */
  content: "";
  position: absolute;
  top: 12%; left: 0;
  width: 3px;
  height: 76%;
  background: var(--ha-accent);
  box-shadow: 0 0 24px -4px var(--ha-accent);
  border-radius: 0 2px 2px 0;
}
.ui-hero__title {
  background: linear-gradient(135deg, var(--ha-text-bright) 0%, var(--ha-text-bright) 60%, var(--ha-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ui-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.ui-hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--ha-accent);
  box-shadow: 0 0 0 3px var(--ha-accent-dim), 0 0 12px -2px var(--ha-accent);
  transform: translateY(-1px);
  flex-shrink: 0;
}

/* ─── .ui-countergrid__card — System / Resources tiles (HOSTNAME, IP,
       UPTIME, OS, CPU, MEMORY, DISK) ────────────────────────────────── */
.ui-countergrid__card {
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-dim) 0%, transparent 65%),
    radial-gradient(circle at 100% 100%, var(--ha-accent-cool-dim) 0%, transparent 40%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-accent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 4px 14px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  position: relative;
  overflow: hidden;
  min-height: 90px;
}
.ui-countergrid__card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 22px -12px rgba(0, 0, 0, 0.55);
}
.ui-countergrid__value {
  text-shadow: 0 1px 18px var(--ha-accent-dim);
}
/* leading square next to the label */
.ui-countergrid__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ui-countergrid__label::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--ha-accent);
  box-shadow: 0 0 0 3px var(--ha-accent-dim), 0 0 10px -2px var(--ha-accent);
  flex-shrink: 0;
}

/* :nth-child rotation so consecutive counter tiles read as different
   surfaces (HOSTNAME=accent, IP=cool-blue, UPTIME=ok, OS=warn, etc.) */
.ui-countergrid__card:nth-child(4n + 2) {
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-accent-cool) !important;
}
.ui-countergrid__card:nth-child(4n + 2) .ui-countergrid__label::before {
  background: var(--ha-accent-cool); box-shadow: 0 0 0 3px var(--ha-accent-cool-dim), 0 0 10px -2px var(--ha-accent-cool);
}
.ui-countergrid__card:nth-child(4n + 3) {
  background:
    radial-gradient(ellipse 90% 70% at 0% 100%, var(--ha-ok-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-ok) !important;
}
.ui-countergrid__card:nth-child(4n + 3) .ui-countergrid__label::before {
  background: var(--ha-ok); box-shadow: 0 0 0 3px var(--ha-ok-dim), 0 0 10px -2px var(--ha-ok);
}
.ui-countergrid__card:nth-child(4n) {
  background:
    radial-gradient(ellipse 90% 70% at 100% 100%, var(--ha-warn-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-warn) !important;
}
.ui-countergrid__card:nth-child(4n) .ui-countergrid__label::before {
  background: var(--ha-warn); box-shadow: 0 0 0 3px var(--ha-warn-dim), 0 0 10px -2px var(--ha-warn);
}

/* ─── .ui-statusgrid__tile — Service tiles (NGINX / PM2 / NODE.JS) ──────── */
.ui-statusgrid__tile {
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 4px 14px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-left-color 0.18s ease !important;
  position: relative;
  overflow: hidden;
}
/* Tone from the dot — uses :has() */
.ui-statusgrid__tile:has(.ui-statusgrid__dot--ok) {
  background:
    radial-gradient(ellipse 100% 80% at 100% 100%, var(--ha-ok-dim) 0%, transparent 70%),
    radial-gradient(circle at 0% 0%, var(--ha-ok-dim) 0%, transparent 35%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-ok) !important;
}
.ui-statusgrid__tile:has(.ui-statusgrid__dot--warn) {
  background:
    radial-gradient(ellipse 100% 80% at 100% 0%, var(--ha-warn-dim) 0%, transparent 70%),
    repeating-linear-gradient(135deg, transparent 0 11px, var(--ha-warn-dim) 11px 12px),
    var(--ha-surface) !important;
  border-left-color: var(--ha-warn) !important;
}
.ui-statusgrid__tile:has(.ui-statusgrid__dot--down) {
  background:
    radial-gradient(ellipse 100% 80% at 0% 100%, var(--ha-danger-dim) 0%, transparent 70%),
    repeating-linear-gradient(45deg, transparent 0 12px, var(--ha-danger-dim) 12px 13px),
    var(--ha-surface) !important;
  border-left-color: var(--ha-danger) !important;
}
.ui-statusgrid__tile:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 22px -12px rgba(0, 0, 0, 0.55);
}
.ui-statusgrid__dot--ok   { box-shadow: 0 0 10px -1px var(--ha-ok); }
.ui-statusgrid__dot--warn { box-shadow: 0 0 10px -1px var(--ha-warn); }
.ui-statusgrid__dot--down { box-shadow: 0 0 10px -1px var(--ha-danger); }

/* ─── .ha-server__console — Server detail page console output ──────────── */
.ha-server__console {
  background:
    radial-gradient(ellipse 90% 60% at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 50%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-accent-cool) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02),
    0 6px 18px -14px rgba(0, 0, 0, 0.5);
}
.ha-server__pipe-head {
  position: relative;
}

/* ─── Monitoring Channels table (.ha-mon__*) ───────────────────────────── */
.ha-mon__table-wrap {
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 45%),
    var(--ha-surface);
  border-left: 3px solid var(--ha-accent-cool);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02),
    0 6px 18px -14px rgba(0, 0, 0, 0.5);
  border-radius: var(--gns-radius-lg, 6px);
  overflow: hidden;
}
.ha-mon__sev--info     { box-shadow: 0 0 10px -3px #90a4ae; }
.ha-mon__sev--warn     { box-shadow: 0 0 10px -3px var(--ha-warn); }
.ha-mon__sev--alert    { box-shadow: 0 0 12px -3px var(--ha-danger); }
.ha-mon__sev--critical { box-shadow: 0 0 14px -3px var(--ha-danger); }

/* ─── Monitoring Feed cards (.ha-mon-feed__*) — boost from round 2 ──── */
.ha-mon-feed__card {
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-dim) 0%, transparent 60%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 4px 14px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
.ha-mon-feed__card--crit {
  background:
    radial-gradient(ellipse 100% 80% at 0% 100%, var(--ha-danger-dim) 0%, transparent 70%),
    repeating-linear-gradient(45deg, transparent 0 12px, var(--ha-danger-dim) 12px 13px),
    var(--ha-surface) !important;
  border-left-color: var(--ha-danger) !important;
}
.ha-mon-feed__card--alert {
  background:
    radial-gradient(ellipse 100% 80% at 100% 0%, var(--ha-danger-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-danger) !important;
}
.ha-mon-feed__card--err {
  background:
    radial-gradient(ellipse 100% 80% at 0% 100%, var(--ha-danger-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-danger) !important;
}
.ha-mon-feed__card--warn {
  background:
    radial-gradient(ellipse 100% 80% at 100% 0%, var(--ha-warn-dim) 0%, transparent 70%),
    repeating-linear-gradient(135deg, transparent 0 11px, var(--ha-warn-dim) 11px 12px),
    var(--ha-surface) !important;
  border-left-color: var(--ha-warn) !important;
}
.ha-mon-feed__card--dim {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 55%),
    var(--ha-surface) !important;
}
.ha-mon-feed__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.55);
}

/* ─── Monitoring Crons cards — boost ─────────────────────────────────── */
.ha-mon-cron__card {
  background:
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-dim) 0%, transparent 60%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 4px 14px -10px rgba(0, 0, 0, 0.5);
}
.ha-mon-cron__card--ok {
  background:
    radial-gradient(ellipse 100% 80% at 100% 100%, var(--ha-ok-dim) 0%, transparent 70%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-ok) !important;
}
.ha-mon-cron__card--err {
  background:
    radial-gradient(ellipse 100% 80% at 0% 100%, var(--ha-danger-dim) 0%, transparent 70%),
    repeating-linear-gradient(45deg, transparent 0 12px, var(--ha-danger-dim) 12px 13px),
    var(--ha-surface) !important;
  border-left-color: var(--ha-danger) !important;
}
.ha-mon-cron__card--warn {
  background:
    radial-gradient(ellipse 100% 80% at 100% 0%, var(--ha-warn-dim) 0%, transparent 70%),
    repeating-linear-gradient(135deg, transparent 0 11px, var(--ha-warn-dim) 11px 12px),
    var(--ha-surface) !important;
  border-left-color: var(--ha-warn) !important;
}
.ha-mon-cron__card--dim {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 55%),
    var(--ha-surface) !important;
}
.ha-mon-cron__table-wrap {
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 45%),
    var(--ha-surface);
  border-left: 3px solid var(--ha-accent-cool);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  border-radius: var(--gns-radius-lg, 6px);
  overflow: hidden;
}

/* ─── Monitoring Nginx — hourly bar chart card ─────────────────────────── */
.ha-mon-nx__hourly {
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-accent-cool);
  border-radius: var(--gns-radius-lg, 6px);
  padding: 1rem 1.2rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.ha-mon-nx__bar-ok  {
  background: linear-gradient(180deg, var(--ha-ok) 0%, var(--ha-ok-dim) 100%) !important;
  box-shadow: 0 0 8px -2px var(--ha-ok);
}
.ha-mon-nx__bar-err {
  background: linear-gradient(180deg, var(--ha-danger) 0%, var(--ha-danger-dim) 100%) !important;
  box-shadow: 0 0 8px -2px var(--ha-danger);
}

/* ─── Uptime detail chart (.ha-upd-chart) ──────────────────────────────── */
.ha-upd-chart {
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, var(--ha-ok-dim) 0%, transparent 45%),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-accent);
  border-radius: var(--gns-radius-lg, 6px);
  padding: 1rem 1.2rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.ha-upd-bar {
  transition: filter 0.15s ease, transform 0.15s ease;
}
.ha-upd-bar--ok    { background: linear-gradient(180deg, var(--ha-ok)     0%, var(--ha-ok-dim)     100%) !important; box-shadow: 0 0 6px -2px var(--ha-ok); }
.ha-upd-bar--slow  { background: linear-gradient(180deg, var(--ha-warn)   0%, var(--ha-warn-dim)   100%) !important; box-shadow: 0 0 6px -2px var(--ha-warn); }
.ha-upd-bar--down  { background: linear-gradient(180deg, var(--ha-danger) 0%, var(--ha-danger-dim) 100%) !important; box-shadow: 0 0 8px -2px var(--ha-danger); }
.ha-upd-bar:hover { filter: brightness(1.2); transform: scaleY(1.04); }

/* ─── Analytics detail (.haad-*) — chart + heatmap + breakdown ─────────── */
.haad-chart {
  background:
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-accent);
  border-radius: var(--gns-radius-lg, 6px);
  padding: 1rem 1.2rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.haad-chart__bar {
  background: linear-gradient(180deg, var(--ha-accent) 0%, var(--ha-accent-dim) 100%) !important;
  box-shadow: 0 0 8px -3px var(--ha-accent);
  transition: filter 0.15s ease;
}
.haad-chart__bar:hover { filter: brightness(1.25); }
.haad-heatmap__grid {
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, var(--ha-warn-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-warn);
  border-radius: var(--gns-radius-lg, 6px);
  padding: 1rem 1.2rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.haad-breakdown {
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-accent-cool);
  border-radius: var(--gns-radius-lg, 6px);
  padding: 1rem 1.2rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  margin-top: 1rem;
}
.haad-chart-empty,
.haa-spark--empty {
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, var(--ha-accent-dim) 0%, transparent 65%),
    var(--ha-surface);
  border: 1px dashed var(--ha-border);
  border-radius: var(--gns-radius, 4px);
  padding: 1.5rem;
  text-align: center;
  color: var(--ha-text-muted);
}

/* ─── .haad__sec-h — section headings on analytics detail ──────────────── */
.haad__sec-h {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.5rem;
}
.haad__sec-h::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--ha-accent-cool);
  box-shadow: 0 0 0 3px var(--ha-accent-cool-dim), 0 0 12px -2px var(--ha-accent-cool);
  transform: translateY(-1px);
  flex-shrink: 0;
}

/* ─── Monitoring Overview (.ha-mon-ov__*) — section h leading squares ──── */
.ha-mon-ov__section-h {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.ha-mon-ov__section-h::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--ha-accent);
  box-shadow: 0 0 0 3px var(--ha-accent-dim), 0 0 12px -2px var(--ha-accent);
  transform: translateY(-1px);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FLEET POLISH — Round 8 — PATTERN LIBRARY
   User feedback: "i found this very lazy as you gave no patters to styles of
   cards or sections or objects in those pages". Rounds 1-7 leaned on gradient
   washes + colored rails. This round adds actual textures: dot grids, pin-
   stripes, concentric arcs, tick marks, contour lines, grid mesh, waveforms.
   Patterns layer on TOP of existing gradient backgrounds — the gradient
   provides the tone, the pattern provides the identity.

   Pattern primitives (custom properties — composable):
     --p-dotgrid       : 12×12px dot lattice
     --p-pinstripe-v   : 9px vertical stripes
     --p-pinstripe-h   : 7px horizontal stripes
     --p-tick          : short diagonal tick marks
     --p-arcs          : concentric arcs from bottom-left corner
     --p-grid          : 14×14px square grid mesh
     --p-cross         : 45°+135° crosshatch
     --p-circuit       : pcb-trace style horizontal+vertical
     --p-wave          : repeating ellipse wave
     --p-bands         : 16px solid bands separated by 2px gaps
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Pattern primitives — opt-in via background-image stack ─────────────── */
.gns-page, .ha-content {
  --p-color: rgba(255, 255, 255, 0.05);
  --p-color-strong: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .gns-page,
[data-theme="light"] .ha-content {
  --p-color: rgba(0, 20, 60, 0.06);
  --p-color-strong: rgba(0, 20, 60, 0.10);
}

/* ─── .ui-countergrid__card — distinct patterns per :nth-child ────────────
       Server detail HOSTNAME / IP / UPTIME / OS + CPU / MEMORY / DISK ── */
.ui-countergrid__card:nth-child(4n + 1) {
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, var(--p-color) 9px 10px),
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
}
.ui-countergrid__card:nth-child(4n + 2) {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 12px 12px,
    radial-gradient(ellipse 90% 70% at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
}
.ui-countergrid__card:nth-child(4n + 3) {
  background:
    repeating-radial-gradient(circle at 0% 100%, transparent 0 14px, var(--p-color) 14px 15px),
    radial-gradient(ellipse 90% 70% at 0% 100%, var(--ha-ok-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
}
.ui-countergrid__card:nth-child(4n) {
  background:
    repeating-linear-gradient(0deg, transparent 0 6px, var(--p-color) 6px 7px),
    radial-gradient(ellipse 90% 70% at 100% 100%, var(--ha-warn-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
}

/* ─── .ui-statusgrid__tile — patterns by status dot ──────────────────────── */
.ui-statusgrid__tile:has(.ui-statusgrid__dot--ok) {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 14px 14px,
    radial-gradient(ellipse 100% 80% at 100% 100%, var(--ha-ok-dim) 0%, transparent 70%),
    radial-gradient(circle at 0% 0%, var(--ha-ok-dim) 0%, transparent 35%),
    var(--ha-surface) !important;
}
.ui-statusgrid__tile:has(.ui-statusgrid__dot--warn) {
  background:
    repeating-linear-gradient(135deg, transparent 0 6px, var(--ha-warn-dim) 6px 8px),
    radial-gradient(ellipse 100% 80% at 100% 0%, var(--ha-warn-dim) 0%, transparent 70%),
    var(--ha-surface) !important;
}
.ui-statusgrid__tile:has(.ui-statusgrid__dot--down) {
  background:
    repeating-linear-gradient(45deg,  transparent 0 6px, var(--ha-danger-dim) 6px 8px),
    repeating-linear-gradient(-45deg, transparent 0 6px, var(--ha-danger-dim) 6px 8px),
    var(--ha-surface) !important;
}

/* ─── .ui-statcardgrid__card[data-gen-id] — Generator pipeline signatures
       Server detail page: each generator gets a unique pattern. ─────── */
.ui-statcardgrid__card[data-gen-id="modules"] {
  background:
    linear-gradient(0deg, var(--p-color) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, var(--p-color) 1px, transparent 1px) 0 0 / 14px 14px,
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-accent) !important;
}
.ui-statcardgrid__card[data-gen-id="coreModules"] {
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, var(--p-color) 8px 10px),
    radial-gradient(ellipse 90% 70% at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-accent-cool) !important;
}
.ui-statcardgrid__card[data-gen-id="memoryPolicies"] {
  background:
    repeating-radial-gradient(circle at 100% 100%, transparent 0 12px, var(--p-color) 12px 13px),
    radial-gradient(ellipse 90% 70% at 100% 100%, var(--ha-ok-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-ok) !important;
}
.ui-statcardgrid__card[data-gen-id="ultragen"] {
  background:
    linear-gradient(45deg,  var(--p-color) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(-45deg, var(--p-color) 1px, transparent 1px) 0 0 / 18px 18px,
    radial-gradient(ellipse 90% 70% at 0% 100%, var(--ha-warn-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-warn) !important;
}
.ui-statcardgrid__card[data-gen-id="daSig"] {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 10px 10px,
    radial-gradient(ellipse 90% 70% at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-accent-cool) !important;
}
.ui-statcardgrid__card[data-gen-id="signedDaSig"] {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 10px 10px,
    repeating-linear-gradient(45deg, transparent 0 16px, var(--p-color) 16px 17px),
    radial-gradient(ellipse 90% 70% at 100% 100%, var(--ha-ok-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-ok) !important;
}
.ui-statcardgrid__card[data-gen-id="bootContract"] {
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, var(--p-color) 4px 6px, transparent 6px 14px),
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-accent) !important;
}
.ui-statcardgrid__card[data-gen-id="bootDeps"] {
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, var(--p-color) 9px 10px),
    radial-gradient(ellipse 90% 70% at 0% 100%, var(--ha-accent-cool-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-accent-cool) !important;
}
.ui-statcardgrid__card[data-gen-id="coreWorkers"] {
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, var(--p-color) 7px 8px),
    radial-gradient(ellipse 90% 70% at 100% 0%, var(--ha-accent-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-accent) !important;
}
.ui-statcardgrid__card[data-gen-id="corePlugins"] {
  background:
    linear-gradient(0deg, var(--p-color) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--p-color) 1px, transparent 1px) 0 0 / 12px 12px,
    radial-gradient(ellipse 90% 70% at 100% 100%, var(--ha-warn-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-warn) !important;
}

/* ─── .gns__pulse-card[data-app-card] — Genesis Overview app pulse cards
       Texture overlay per-app on top of existing color signatures. ─── */
.gns__pulse-card[data-app-card="hosting"] {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 12px 12px,
    radial-gradient(circle at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 55%),
    var(--ha-surface);
}
.gns__pulse-card[data-app-card="server"] {
  background:
    repeating-linear-gradient(0deg, transparent 0 6px, var(--p-color) 6px 7px),
    linear-gradient(135deg, var(--ha-accent-dim) 0%, transparent 60%),
    var(--ha-surface);
}
.gns__pulse-card[data-app-card="shield"] {
  background:
    repeating-linear-gradient(45deg, transparent 0 8px, var(--ha-danger-dim) 8px 10px),
    repeating-linear-gradient(-45deg, transparent 0 8px, var(--ha-danger-dim) 8px 10px),
    var(--ha-surface);
}
.gns__pulse-card[data-app-card="engine"] {
  background:
    linear-gradient(0deg, var(--p-color) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, var(--p-color) 1px, transparent 1px) 0 0 / 14px 14px,
    radial-gradient(circle at 0% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface);
}
.gns__pulse-card[data-app-card="arc"] {
  background:
    repeating-radial-gradient(circle at 100% 100%, transparent 0 14px, var(--p-color) 14px 15px),
    linear-gradient(135deg, var(--ha-accent-cool-dim) 0%, transparent 55%),
    var(--ha-surface);
}
.gns__pulse-card[data-app-card="arena"] {
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, var(--p-color) 9px 10px),
    radial-gradient(ellipse at 100% 0%, var(--ha-warn-dim) 0%, transparent 55%),
    var(--ha-surface);
}
.gns__pulse-card[data-app-card="lens"] {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 10px 10px,
    radial-gradient(circle at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, var(--ha-accent-cool-dim) 0%, transparent 50%),
    var(--ha-surface);
}
.gns__pulse-card[data-app-card="helm"] {
  background:
    repeating-linear-gradient(90deg, transparent 0 11px, var(--ha-ok-dim) 11px 12px),
    linear-gradient(135deg, var(--ha-ok-dim) 0%, transparent 55%),
    var(--ha-surface);
}
.gns__pulse-card[data-app-card="silo"] {
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, var(--p-color) 8px 10px),
    radial-gradient(ellipse at 100% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface);
}
.gns__pulse-card[data-app-card="ink"] {
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, var(--p-color) 4px 5px, transparent 5px 14px),
    radial-gradient(circle at 100% 0%, var(--ha-accent-dim) 0%, transparent 55%),
    radial-gradient(circle at 0% 100%, var(--ha-warn-dim) 0%, transparent 45%),
    var(--ha-surface);
}
.gns__pulse-card[data-app-card="seal"] {
  background:
    repeating-linear-gradient(-45deg, transparent 0 8px, var(--ha-warn-dim) 8px 10px),
    repeating-linear-gradient(45deg,  transparent 0 8px, var(--ha-warn-dim) 8px 10px),
    radial-gradient(ellipse at 100% 100%, var(--ha-warn-dim) 0%, transparent 55%),
    var(--ha-surface);
}
.gns__pulse-card[data-app-card="damage-hq"] {
  background:
    linear-gradient(0deg, var(--p-color) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, var(--p-color) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(135deg, var(--ha-accent-cool-dim) 0%, transparent 50%),
    var(--ha-surface);
}
.gns__pulse-card[data-app-card="tax-reporter-hq"] {
  background:
    repeating-linear-gradient(90deg, transparent 0 11px, var(--ha-ok-dim) 11px 12px),
    radial-gradient(circle at 100% 0%, var(--ha-ok-dim) 0%, transparent 50%),
    var(--ha-surface);
}

/* ─── .ui-hubtiles__tile[href*=…] — Quick Action signatures with texture ── */
.ui-hubtiles__tile[href*="build"] {
  background:
    linear-gradient(0deg, var(--p-color) 1px, transparent 1px) 0 0 / 13px 13px,
    linear-gradient(90deg, var(--p-color) 1px, transparent 1px) 0 0 / 13px 13px,
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
}
.ui-hubtiles__tile[href*="backup"] {
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, var(--p-color) 8px 10px),
    radial-gradient(ellipse 90% 70% at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
}
.ui-hubtiles__tile[href*="logs"] {
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, var(--p-color) 4px 5px),
    radial-gradient(ellipse 90% 70% at 100% 100%, var(--ha-accent-cool-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
}
.ui-hubtiles__tile[href*="firewall"],
.ui-hubtiles__tile[href*="security"] {
  background:
    repeating-linear-gradient(45deg,  transparent 0 7px, var(--ha-danger-dim) 7px 9px),
    repeating-linear-gradient(-45deg, transparent 0 7px, var(--ha-danger-dim) 7px 9px),
    radial-gradient(ellipse 90% 70% at 100% 0%, var(--ha-danger-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
}
.ui-hubtiles__tile[href*="systems"] {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 14px 14px,
    radial-gradient(ellipse 90% 70% at 0% 100%, var(--ha-accent-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
}
.ui-hubtiles__tile[href*="uptime"] {
  background:
    repeating-radial-gradient(circle at 0% 100%, transparent 0 12px, var(--p-color) 12px 13px),
    radial-gradient(ellipse 90% 70% at 100% 100%, var(--ha-ok-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
}
.ui-hubtiles__tile[href*="observatory"] {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 11px 11px,
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 65%),
    radial-gradient(circle at 100% 100%, var(--ha-accent-cool-dim) 0%, transparent 40%),
    var(--ha-surface) !important;
}
.ui-hubtiles__tile[href*="analytics"] {
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, var(--p-color) 4px 5px, transparent 5px 16px),
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
}
.ui-hubtiles__tile[href*="provision"],
.ui-hubtiles__tile[href*="new-site"] {
  background:
    linear-gradient(0deg, var(--p-color) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--p-color) 1px, transparent 1px) 0 0 / 12px 12px,
    radial-gradient(ellipse 90% 70% at 0% 100%, var(--ha-ok-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
}
.ui-hubtiles__tile[href*="audit"] {
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, var(--p-color) 9px 10px),
    radial-gradient(ellipse 90% 70% at 100% 0%, var(--ha-accent-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
}
.ui-hubtiles__tile[href*="cron"] {
  background:
    repeating-linear-gradient(135deg, transparent 0 6px, var(--ha-warn-dim) 6px 7px, transparent 7px 24px),
    radial-gradient(ellipse 90% 70% at 100% 100%, var(--ha-warn-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
}

/* ─── .ha-section[data-section] — per-section patterns on Account etc. ──── */
.gns-acc__section[data-section="identity"] {
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, var(--p-color) 9px 10px),
    radial-gradient(ellipse 70% 60% at 0% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, var(--ha-accent-dim) 0%, transparent 45%),
    var(--ha-surface) !important;
}
.gns-acc__section[data-section="password"] {
  background:
    repeating-linear-gradient(45deg,  transparent 0 6px, var(--ha-danger-dim) 6px 8px),
    repeating-linear-gradient(-45deg, transparent 0 6px, var(--ha-danger-dim) 6px 8px),
    radial-gradient(ellipse 70% 60% at 100% 0%, var(--ha-danger-dim) 0%, transparent 50%),
    var(--ha-surface) !important;
}
.gns-acc__section[data-section="notifications"] {
  background:
    repeating-linear-gradient(0deg, transparent 0 7px, var(--p-color) 7px 8px),
    radial-gradient(ellipse 70% 60% at 0% 100%, var(--ha-accent-cool-dim) 0%, transparent 50%),
    radial-gradient(circle at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 45%),
    var(--ha-surface) !important;
}

/* generic position-rotated patterns for unlabelled .ha-section instances */
.ha-section:not([data-section]):nth-of-type(4n + 1) {
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, var(--p-color) 9px 10px),
    radial-gradient(ellipse 80% 60% at 0% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface) !important;
}
.ha-section:not([data-section]):nth-of-type(4n + 2) {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 14px 14px,
    radial-gradient(ellipse 80% 60% at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 50%),
    var(--ha-surface) !important;
}
.ha-section:not([data-section]):nth-of-type(4n + 3) {
  background:
    repeating-radial-gradient(circle at 0% 100%, transparent 0 14px, var(--p-color) 14px 15px),
    radial-gradient(ellipse 80% 60% at 0% 100%, var(--ha-ok-dim) 0%, transparent 50%),
    var(--ha-surface) !important;
}
.ha-section:not([data-section]):nth-of-type(4n) {
  background:
    repeating-linear-gradient(0deg, transparent 0 6px, var(--p-color) 6px 7px),
    radial-gradient(ellipse 80% 60% at 100% 100%, var(--ha-warn-dim) 0%, transparent 50%),
    var(--ha-surface) !important;
}

/* ─── .gns-kpi--* tones — add subtle patterns on top of the round-4 boost ── */
.gns-kpi--ok {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 11px 11px,
    radial-gradient(ellipse 100% 80% at 100% 100%, var(--ha-ok-dim) 0%, transparent 70%),
    radial-gradient(circle at 0% 0%, var(--ha-ok-dim) 0%, transparent 35%),
    var(--ha-surface) !important;
}
.gns-kpi--info {
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, var(--p-color) 4px 5px, transparent 5px 16px),
    radial-gradient(ellipse 100% 80% at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 70%),
    radial-gradient(circle at 0% 100%, var(--ha-accent-cool-dim) 0%, transparent 35%),
    var(--ha-surface) !important;
}

/* ─── .dev__card[data-card] — Dev Status cards keep their round-4 signature
       but pick up a texture. Already had per-card colours; now textures. ─ */
.dev__card[data-card="proc-memory"] {
  background:
    repeating-linear-gradient(135deg, transparent 0 6px, var(--ha-warn-dim) 6px 8px),
    radial-gradient(ellipse 90% 70% at 100% 0%, var(--ha-warn-dim) 0%, transparent 70%),
    var(--ha-surface) !important;
}
.dev__card[data-card="os-memory"] {
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, var(--p-color) 8px 10px),
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-ok-dim) 0%, transparent 70%),
    radial-gradient(circle at 100% 100%, var(--ha-ok-dim) 0%, transparent 40%),
    var(--ha-surface) !important;
}
.dev__card[data-card="cpu"] {
  background:
    linear-gradient(0deg, var(--p-color) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, var(--p-color) 1px, transparent 1px) 0 0 / 14px 14px,
    radial-gradient(ellipse 90% 70% at 100% 100%, var(--ha-accent-cool-dim) 0%, transparent 70%),
    var(--ha-surface) !important;
}
.dev__card[data-card="process"] {
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, var(--p-color) 9px 10px),
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-dim) 0%, transparent 70%),
    radial-gradient(circle at 100% 100%, var(--ha-accent-dim) 0%, transparent 40%),
    var(--ha-surface) !important;
}
.dev__card[data-card="versions"] {
  background:
    repeating-radial-gradient(circle at 100% 100%, transparent 0 13px, var(--p-color) 13px 14px),
    radial-gradient(ellipse 90% 70% at 100% 0%, var(--ha-ok-dim) 0%, transparent 70%),
    radial-gradient(circle at 0% 100%, var(--ha-accent-cool-dim) 0%, transparent 40%),
    var(--ha-surface) !important;
}

/* ─── Monitoring Feed cards — add patterns per tone ─────────────────────── */
.ha-mon-feed__card--crit {
  background:
    repeating-linear-gradient(45deg,  transparent 0 6px, var(--ha-danger-dim) 6px 8px),
    repeating-linear-gradient(-45deg, transparent 0 6px, var(--ha-danger-dim) 6px 8px),
    radial-gradient(ellipse 100% 80% at 0% 100%, var(--ha-danger-dim) 0%, transparent 70%),
    var(--ha-surface) !important;
}
.ha-mon-feed__card--warn {
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, var(--ha-warn-dim) 7px 9px),
    radial-gradient(ellipse 100% 80% at 100% 0%, var(--ha-warn-dim) 0%, transparent 70%),
    var(--ha-surface) !important;
}
.ha-mon-cron__card--ok {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 12px 12px,
    radial-gradient(ellipse 100% 80% at 100% 100%, var(--ha-ok-dim) 0%, transparent 70%),
    var(--ha-surface) !important;
}
.ha-mon-cron__card--err {
  background:
    repeating-linear-gradient(45deg,  transparent 0 6px, var(--ha-danger-dim) 6px 8px),
    repeating-linear-gradient(-45deg, transparent 0 6px, var(--ha-danger-dim) 6px 8px),
    radial-gradient(ellipse 100% 80% at 0% 100%, var(--ha-danger-dim) 0%, transparent 70%),
    var(--ha-surface) !important;
}

/* ─── Light-theme softening of the patterns ──────────────────────────────── */
[data-theme="light"] .ui-countergrid__card,
[data-theme="light"] .ui-statusgrid__tile,
[data-theme="light"] .ui-statcardgrid__card[data-gen-id],
[data-theme="light"] .gns__pulse-card,
[data-theme="light"] .ui-hubtiles__tile,
[data-theme="light"] .gns-acc__section,
[data-theme="light"] .dev__card,
[data-theme="light"] .gns-kpi {
  background-blend-mode: multiply, multiply, normal;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FLEET POLISH — Round 9 — SHIELD APP per-module identity + patterns

   Every Shield/Security module gets its own colour AND its own pattern.
   The .sh-XX__ naming scheme is uniform across the app — same skeleton
   (__viz-card / __tabs / __donut / __bars) repeated per module, so a
   single block can hit them all.

   Module identity:
     sh-ov  (Overview)   accent  + dot matrix
     sh-po  (Posture)    ok      + grid mesh    (defensive lattice)
     sh-fw  (Firewall)   danger  + dense cross   (wall)
     sh-th  (Threats)    warn    + diagonal      (warning stripes)
     sh-au  (Audit)      accent  + tick marks    (audit trail)
     sh-hd  (Hardening)  cool    + concentric    (layered defence)
     sh-csp (CSP)        ok      + cross-stitch  (policy lattice)
     sh-en  (Enclave)    accent  + dot matrix    (isolation cells)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── .sh-XX__viz-card — main card container repeated per Shield module ─── */
.sh-po__viz-card,
.sh-po__donut {
  background:
    linear-gradient(0deg, var(--p-color) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, var(--p-color) 1px, transparent 1px) 0 0 / 14px 14px,
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-ok-dim) 0%, transparent 65%),
    radial-gradient(circle at 100% 100%, var(--ha-ok-dim) 0%, transparent 40%),
    var(--ha-surface) !important;
  border: 1px solid var(--ha-border-hi);
  border-left: 3px solid var(--ha-ok) !important;
  border-radius: var(--gns-radius-lg, 6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 6px 18px -14px rgba(0, 0, 0, 0.5);
  padding: 1rem 1.2rem;
}

.sh-fw__viz-card {
  background:
    repeating-linear-gradient(45deg,  transparent 0 7px, var(--ha-danger-dim) 7px 9px),
    repeating-linear-gradient(-45deg, transparent 0 7px, var(--ha-danger-dim) 7px 9px),
    radial-gradient(ellipse 90% 70% at 100% 0%, var(--ha-danger-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border: 1px solid var(--ha-border-hi);
  border-left: 3px solid var(--ha-danger) !important;
  border-radius: var(--gns-radius-lg, 6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 6px 18px -14px rgba(0, 0, 0, 0.5);
  padding: 1rem 1.2rem;
}

.sh-th__viz-card {
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, var(--ha-warn-dim) 7px 9px),
    radial-gradient(ellipse 90% 70% at 100% 0%, var(--ha-warn-dim) 0%, transparent 65%),
    radial-gradient(circle at 0% 100%, var(--ha-warn-dim) 0%, transparent 40%),
    var(--ha-surface) !important;
  border: 1px solid var(--ha-border-hi);
  border-left: 3px solid var(--ha-warn) !important;
  border-radius: var(--gns-radius-lg, 6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 6px 18px -14px rgba(0, 0, 0, 0.5);
  padding: 1rem 1.2rem;
}

.sh-au__viz-card {
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, var(--p-color) 4px 6px, transparent 6px 18px),
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-dim) 0%, transparent 65%),
    radial-gradient(circle at 100% 100%, var(--ha-accent-dim) 0%, transparent 40%),
    var(--ha-surface) !important;
  border: 1px solid var(--ha-border-hi);
  border-left: 3px solid var(--ha-accent) !important;
  border-radius: var(--gns-radius-lg, 6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 6px 18px -14px rgba(0, 0, 0, 0.5);
  padding: 1rem 1.2rem;
}

.sh-hd__viz-card {
  background:
    repeating-radial-gradient(circle at 0% 100%, transparent 0 14px, var(--p-color) 14px 15px),
    radial-gradient(ellipse 90% 70% at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 65%),
    radial-gradient(circle at 0% 100%, var(--ha-accent-cool-dim) 0%, transparent 40%),
    var(--ha-surface) !important;
  border: 1px solid var(--ha-border-hi);
  border-left: 3px solid var(--ha-accent-cool) !important;
  border-radius: var(--gns-radius-lg, 6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 6px 18px -14px rgba(0, 0, 0, 0.5);
  padding: 1rem 1.2rem;
}

.sh-csp__viz-card {
  background:
    linear-gradient(0deg, var(--p-color) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--p-color) 1px, transparent 1px) 0 0 / 12px 12px,
    repeating-linear-gradient(45deg, transparent 0 20px, var(--p-color) 20px 21px),
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-ok-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border: 1px solid var(--ha-border-hi);
  border-left: 3px solid var(--ha-ok) !important;
  border-radius: var(--gns-radius-lg, 6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 6px 18px -14px rgba(0, 0, 0, 0.5);
  padding: 1rem 1.2rem;
}

.sh-en__viz-card {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 11px 11px,
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-dim) 0%, transparent 65%),
    radial-gradient(circle at 100% 100%, var(--ha-accent-dim) 0%, transparent 40%),
    var(--ha-surface) !important;
  border: 1px solid var(--ha-border-hi);
  border-left: 3px solid var(--ha-accent) !important;
  border-radius: var(--gns-radius-lg, 6px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 6px 18px -14px rgba(0, 0, 0, 0.5);
  padding: 1rem 1.2rem;
}

/* ─── Shield Overview pulse cards — boost the existing per-tone variants ── */
.sh-ov__pulse-card {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 12px 12px,
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-dim) 0%, transparent 60%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 4px 14px -10px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-left-color 0.18s ease !important;
}
.sh-ov__pulse-card--ok {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 12px 12px,
    radial-gradient(ellipse 100% 80% at 100% 100%, var(--ha-ok-dim) 0%, transparent 70%),
    radial-gradient(circle at 0% 0%, var(--ha-ok-dim) 0%, transparent 35%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-ok) !important;
}
.sh-ov__pulse-card--warn {
  background:
    repeating-linear-gradient(135deg, transparent 0 8px, var(--ha-warn-dim) 8px 10px),
    radial-gradient(ellipse 100% 80% at 100% 0%, var(--ha-warn-dim) 0%, transparent 70%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-warn) !important;
}
.sh-ov__pulse-card--down {
  background:
    repeating-linear-gradient(45deg,  transparent 0 7px, var(--ha-danger-dim) 7px 9px),
    repeating-linear-gradient(-45deg, transparent 0 7px, var(--ha-danger-dim) 7px 9px),
    radial-gradient(ellipse 100% 80% at 0% 100%, var(--ha-danger-dim) 0%, transparent 70%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-danger) !important;
}
.sh-ov__pulse-card--info {
  background:
    repeating-radial-gradient(circle at 0% 100%, transparent 0 14px, var(--p-color) 14px 15px),
    radial-gradient(ellipse 100% 80% at 100% 0%, var(--ha-accent-cool-dim) 0%, transparent 70%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-accent-cool) !important;
}
.sh-ov__pulse-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 22px -12px rgba(0, 0, 0, 0.55);
}

/* ─── Shield Overview sub-cards (.sh-ov__sub) — pulse rack ───────────────── */
.sh-ov__sub {
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, var(--ha-accent-dim) 0%, transparent 55%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-left-color 0.18s ease !important;
}
.sh-ov__sub:has(.sh-ov__sub-health--ok) {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 12px 12px,
    radial-gradient(ellipse 100% 80% at 100% 100%, var(--ha-ok-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-ok) !important;
}
.sh-ov__sub:has(.sh-ov__sub-health--warn) {
  background:
    repeating-linear-gradient(135deg, transparent 0 8px, var(--ha-warn-dim) 8px 10px),
    radial-gradient(ellipse 100% 80% at 100% 0%, var(--ha-warn-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-warn) !important;
}
.sh-ov__sub:has(.sh-ov__sub-health--down) {
  background:
    repeating-linear-gradient(45deg,  transparent 0 7px, var(--ha-danger-dim) 7px 9px),
    repeating-linear-gradient(-45deg, transparent 0 7px, var(--ha-danger-dim) 7px 9px),
    var(--ha-surface) !important;
  border-left-color: var(--ha-danger) !important;
}
.sh-ov__sub:has(.sh-ov__sub-health--info) {
  background:
    repeating-radial-gradient(circle at 100% 100%, transparent 0 13px, var(--p-color) 13px 14px),
    radial-gradient(ellipse 100% 80% at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 65%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-accent-cool) !important;
}
.sh-ov__sub:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 22px -12px rgba(0, 0, 0, 0.55);
}

/* ─── Shield Overview geomap + whoami banner ─────────────────────────────── */
.sh-ov__geomap {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 16px 16px,
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 100% 100%, var(--ha-accent-dim) 0%, transparent 45%),
    var(--ha-surface) !important;
  border: 1px solid var(--ha-border-hi);
  border-left: 3px solid var(--ha-accent-cool);
  border-radius: var(--gns-radius-lg, 6px);
  padding: 1rem 1.2rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.sh-ov__whoami {
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, var(--p-color) 9px 10px),
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    color-mix(in srgb, var(--ha-text) 5%, transparent) !important;
  border-left: 3px solid var(--ha-accent);
  padding-left: 1rem;
}

/* ─── Shield Overview geo grid cells (cybertruck-style ranked locations) ── */
.sh-ov__geocell {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 10px 10px,
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-warn-dim) 0%, transparent 55%),
    var(--ha-surface) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.sh-ov__geocell:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 20px -12px rgba(0, 0, 0, 0.55);
}

/* ─── Shield Overview pipe rows — accent left rail per row ───────────────── */
.sh-ov__pipe {
  background:
    linear-gradient(90deg, var(--ha-accent-dim) 0%, transparent 18%),
    var(--ha-surface-2);
  border-left: 2px solid var(--ha-border);
  padding-left: 1rem;
  transition: background 0.15s ease, border-left-color 0.15s ease;
}
.sh-ov__pipe:hover {
  border-left-color: var(--ha-accent);
}

/* ─── Shield tabs — boost each tab strip ─────────────────────────────────── */
.sh-fw__tabs,
.sh-th__tabs,
.sh-hd__tabs,
.sh-csp__tabs,
.sh-en__tabs {
  border-bottom: 1px solid var(--ha-border);
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
}
.sh-fw__tab.is-active,
.sh-th__tab.is-active,
.sh-hd__tab.is-active,
.sh-csp__tab.is-active,
.sh-en__tab.is-active {
  background: linear-gradient(180deg, var(--ha-accent-dim) 0%, transparent 100%) !important;
  box-shadow:
    inset 0 -2px 0 var(--ha-accent),
    0 4px 14px -6px var(--ha-accent-dim);
}
.sh-fw__tab.is-active { box-shadow: inset 0 -2px 0 var(--ha-danger),      0 4px 14px -6px var(--ha-danger-dim); background: linear-gradient(180deg, var(--ha-danger-dim) 0%, transparent 100%) !important; }
.sh-th__tab.is-active { box-shadow: inset 0 -2px 0 var(--ha-warn),        0 4px 14px -6px var(--ha-warn-dim);   background: linear-gradient(180deg, var(--ha-warn-dim)   0%, transparent 100%) !important; }
.sh-hd__tab.is-active { box-shadow: inset 0 -2px 0 var(--ha-accent-cool), 0 4px 14px -6px var(--ha-accent-cool-dim); background: linear-gradient(180deg, var(--ha-accent-cool-dim) 0%, transparent 100%) !important; }
.sh-csp__tab.is-active { box-shadow: inset 0 -2px 0 var(--ha-ok),          0 4px 14px -6px var(--ha-ok-dim);     background: linear-gradient(180deg, var(--ha-ok-dim)     0%, transparent 100%) !important; }
.sh-en__tab.is-active { box-shadow: inset 0 -2px 0 var(--ha-accent),       0 4px 14px -6px var(--ha-accent-dim); background: linear-gradient(180deg, var(--ha-accent-dim) 0%, transparent 100%) !important; }

/* Time filter buttons (e.g. .sh-fw__time-btn) — same active treatment */
.sh-fw__time-btn.is-active,
.sh-th__time-btn.is-active,
.sh-hd__time-btn.is-active,
.sh-csp__time-btn.is-active,
.sh-en__time-btn.is-active {
  background: linear-gradient(180deg, var(--ha-accent-dim) 0%, transparent 100%);
  box-shadow: 0 0 12px -4px var(--ha-accent);
  border-color: var(--ha-accent);
}

/* ─── Audit bars + donut polish (already had base in round 3, refine) ──── */
.sh-au__bars {
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, var(--p-color) 4px 6px, transparent 6px 18px),
    radial-gradient(ellipse 90% 70% at 100% 100%, var(--ha-warn-dim) 0%, transparent 60%),
    var(--ha-surface) !important;
}
.sh-au__donut {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 11px 11px,
    radial-gradient(ellipse 90% 70% at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 60%),
    radial-gradient(circle at 100% 100%, var(--ha-accent-cool-dim) 0%, transparent 40%),
    var(--ha-surface) !important;
}
.sh-au__act {
  background:
    repeating-linear-gradient(45deg,  transparent 0 6px, var(--ha-danger-dim) 6px 8px),
    repeating-linear-gradient(-45deg, transparent 0 6px, var(--ha-danger-dim) 6px 8px),
    radial-gradient(ellipse 90% 70% at 100% 100%, var(--ha-danger-dim) 0%, transparent 60%),
    var(--ha-surface) !important;
}

/* Bar fills get tone gradient + soft glow */
.sh-au__bars-bar-fill {
  background: linear-gradient(90deg, var(--ha-accent) 0%, var(--ha-accent-dim) 100%);
  box-shadow: 0 0 8px -2px var(--ha-accent);
}
.sh-au__donut-leg-bar-fill--down { background: linear-gradient(90deg, var(--ha-danger) 0%, var(--ha-danger-dim) 100%) !important; box-shadow: 0 0 8px -2px var(--ha-danger); }
.sh-au__donut-leg-bar-fill--warn { background: linear-gradient(90deg, var(--ha-warn) 0%, var(--ha-warn-dim) 100%) !important; box-shadow: 0 0 8px -2px var(--ha-warn); }

/* ─── Donut arcs get soft tone glow ─────────────────────────────────────── */
.sh-au__donut-arc { filter: drop-shadow(0 0 6px currentColor); }
.sh-po__donut-arc { filter: drop-shadow(0 0 6px currentColor); }

/* ─── Donut leg rows on Audit/Posture — left rail per tone ─────────────── */
.sh-au__donut-leg-row,
.sh-po__donut-leg-row {
  border-left: 2px solid var(--ha-border);
  padding-left: 0.55rem;
  transition: border-left-color 0.15s ease, background 0.15s ease;
}
.sh-au__donut-leg-row--active,
.sh-po__donut-leg-row--active {
  background: var(--ha-accent-dim);
  border-left-color: var(--ha-accent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* ─── Ipprofile / Quarantine / Decoys / Training / Alerts / Live —
       These render via shared atoms (statcardgrid / statusgrid /
       hubtiles / countergrid). All already polished — no per-module
       CSS needed. ────────────────────────────────────────────────── */

/* ─── Shield Overview .sh-ov__sub-stats — was painting a solid box
       inside the card that masked the parent's pattern. Make it
       transparent + add column dividers so 3-up stats still read as
       grouped without breaking the card's identity pattern. ──── */
.sh-ov__sub-stats {
  background: transparent !important;
  padding: 0.6rem 0 !important;
  border-radius: 0 !important;
}
.sh-ov__sub-stat {
  padding: 0 0.9rem;
  border-left: 1px dashed var(--ha-border);
}
.sh-ov__sub-stat:first-child {
  padding-left: 0;
  border-left: none;
}
.sh-ov__sub-stat-num {
  text-shadow: 0 0 14px var(--ha-accent-dim);
}
/* Tone the stat num text-shadow to match the parent sub's health */
.sh-ov__sub:has(.sh-ov__sub-health--ok)   .sh-ov__sub-stat-num { text-shadow: 0 0 14px var(--ha-ok-dim); }
.sh-ov__sub:has(.sh-ov__sub-health--warn) .sh-ov__sub-stat-num { text-shadow: 0 0 14px var(--ha-warn-dim); }
.sh-ov__sub:has(.sh-ov__sub-health--down) .sh-ov__sub-stat-num { text-shadow: 0 0 14px var(--ha-danger-dim); }
.sh-ov__sub:has(.sh-ov__sub-health--info) .sh-ov__sub-stat-num { text-shadow: 0 0 14px var(--ha-accent-cool-dim); }

/* ═══════════════════════════════════════════════════════════════════════════════
   FLEET POLISH — Round 10 — Shield deep elements (per-page beyond viz-card)
   User: "and every page needs love not only overvieW!!!!!". Round 9 hit only
   the __viz-card skeleton. Each Shield page has many more surfaces: heatmaps,
   threat lists, feeds, IP lists, sub-cards, categories, history charts,
   tables, toolbars, pagers, action panels. Each gets its module's signature
   pattern + tone.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── HISTORY chart card (.sh-XX__hist) — used by every shield module ──── */
.sh-fw__hist {
  background:
    repeating-linear-gradient(45deg,  transparent 0 7px, var(--ha-danger-dim) 7px 9px),
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-danger-dim) 0%, transparent 50%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-danger);
}
.sh-th__hist {
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, var(--ha-warn-dim) 7px 9px),
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-warn-dim) 0%, transparent 50%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-warn);
}
.sh-hd__hist {
  background:
    repeating-radial-gradient(circle at 0% 100%, transparent 0 14px, var(--p-color) 14px 15px),
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 50%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-accent-cool);
}
.sh-csp__hist {
  background:
    linear-gradient(0deg, var(--p-color) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, var(--p-color) 1px, transparent 1px) 0 0 / 14px 14px,
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-ok-dim) 0%, transparent 50%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-ok);
}
.sh-en__hist {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 11px 11px,
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-accent);
}
.sh-au__hist {
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, var(--p-color) 4px 6px, transparent 6px 18px),
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface) !important;
  border-left: 3px solid var(--ha-accent);
}
.sh-fw__hist,
.sh-th__hist,
.sh-hd__hist,
.sh-csp__hist,
.sh-en__hist,
.sh-au__hist {
  border: 1px solid var(--ha-border-hi);
  border-radius: var(--gns-radius-lg, 6px);
  padding: 1rem 1.2rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 4px 14px -10px rgba(0, 0, 0, 0.5);
}

/* ─── TOOLBAR strip (.sh-XX__toolbar) — top action bar of each page ──── */
.sh-fw__toolbar,
.sh-th__toolbar,
.sh-au__toolbar,
.sh-csp__toolbar {
  background:
    linear-gradient(180deg, var(--ha-surface-2) 0%, transparent 100%),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-accent);
  border-radius: var(--gns-radius, 4px);
  padding: 0.6rem 0.85rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.sh-fw__toolbar { border-left-color: var(--ha-danger); }
.sh-th__toolbar { border-left-color: var(--ha-warn); }
.sh-au__toolbar { border-left-color: var(--ha-accent); }
.sh-csp__toolbar { border-left-color: var(--ha-ok); }

/* ─── TABLE + ROW polish (.sh-XX__table, .sh-XX__row) ─────────────────── */
.sh-th__table,
.sh-hd__table,
.sh-csp__table,
.sh-en__table,
.sh-au__table {
  background:
    linear-gradient(180deg, var(--ha-surface) 0%, transparent 80%),
    var(--ha-surface);
  border-radius: var(--gns-radius-lg, 6px);
  overflow: hidden;
  border: 1px solid var(--ha-border);
}
.sh-th__row,
.sh-hd__row,
.sh-csp__row,
.sh-en__row,
.sh-au__row {
  transition: background 0.12s ease, border-left-color 0.12s ease;
  border-left: 2px solid transparent;
}
.sh-th__row:hover,
.sh-hd__row:hover,
.sh-csp__row:hover,
.sh-en__row:hover,
.sh-au__row:hover {
  background: var(--ha-surface-2);
  border-left-color: var(--ha-accent);
}

/* ─── PAGER (.sh-XX__pager) ───────────────────────────────────────────── */
.sh-fw__pager,
.sh-th__pager,
.sh-au__pager {
  background: linear-gradient(180deg, transparent 0%, var(--ha-surface-2) 100%);
  border-top: 1px solid var(--ha-border);
  padding: 0.55rem 0.85rem;
}

/* ─── QUICK STATS strip (.sh-XX__qstat) — at top of fw/hd ────────────── */
.sh-fw__qstat,
.sh-hd__qstat {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 12px 12px,
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-accent);
  border-radius: var(--gns-radius-lg, 6px);
  padding: 0.85rem 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* ─── CONTROL panel (.sh-XX__control) — admin actions ─────────────────── */
.sh-po__control,
.sh-hd__control,
.sh-csp__control,
.sh-en__control {
  background:
    linear-gradient(135deg, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border-hi);
  border-left: 3px solid var(--ha-accent);
  border-radius: var(--gns-radius-lg, 6px);
  padding: 0.85rem 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* ─── SUB-cards inside Posture / Hardening (.sh-XX__sub) ─────────────── */
.sh-po__sub,
.sh-hd__sub {
  background:
    linear-gradient(0deg, var(--p-color) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, var(--p-color) 1px, transparent 1px) 0 0 / 14px 14px,
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-ok-dim) 0%, transparent 50%),
    var(--ha-surface) !important;
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-ok);
  border-radius: var(--gns-radius, 4px);
  padding: 0.75rem 1rem;
}
.sh-hd__sub {
  background:
    repeating-radial-gradient(circle at 0% 100%, transparent 0 12px, var(--p-color) 12px 13px),
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 50%),
    var(--ha-surface) !important;
  border-left-color: var(--ha-accent-cool);
}

/* ─── CATEGORY cards (.sh-XX__cat) on Hardening / CSP ─────────────────── */
.sh-hd__cat,
.sh-csp__cat {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 13px 13px,
    radial-gradient(ellipse 70% 50% at 100% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-accent);
  border-radius: var(--gns-radius, 4px);
  padding: 0.75rem 1rem;
}
.sh-hd__cat { border-left-color: var(--ha-accent-cool); }
.sh-csp__cat { border-left-color: var(--ha-ok); }

/* ─── SECURITY GROUP (.sh-XX__sg) on Posture / Hardening / CSP ────────── */
.sh-po__sg,
.sh-hd__sg,
.sh-csp__sg {
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, var(--p-color) 9px 10px),
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-accent);
  border-radius: var(--gns-radius, 4px);
  padding: 0.6rem 0.9rem;
}
.sh-po__sg { border-left-color: var(--ha-ok); }
.sh-hd__sg { border-left-color: var(--ha-accent-cool); }
.sh-csp__sg { border-left-color: var(--ha-ok); }

/* ─── POSTURE-specific: tier / debt ────────────────────────────────── */
.sh-po__tier {
  background:
    linear-gradient(0deg, var(--p-color) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, var(--p-color) 1px, transparent 1px) 0 0 / 14px 14px,
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-ok-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border-hi);
  border-left: 3px solid var(--ha-ok);
  border-radius: var(--gns-radius-lg, 6px);
  padding: 0.85rem 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.sh-po__debt {
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, var(--ha-warn-dim) 7px 9px),
    radial-gradient(ellipse 70% 50% at 100% 0%, var(--ha-warn-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border-hi);
  border-left: 3px solid var(--ha-warn);
  border-radius: var(--gns-radius-lg, 6px);
  padding: 0.85rem 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* ─── FIREWALL-specific: heatmap + threat list + feed + IP list ───────── */
.sh-fw__heat {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 12px 12px,
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-danger-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-danger);
  border-radius: var(--gns-radius, 4px);
  padding: 0.75rem 1rem;
}
.sh-fw__heat-cell--ok    { box-shadow: 0 0 4px -1px var(--ha-ok); }
.sh-fw__heat-cell--warn  { box-shadow: 0 0 4px -1px var(--ha-warn); }
.sh-fw__heat-cell--down  { box-shadow: 0 0 6px -1px var(--ha-danger); }
.sh-fw__heat-cell--alert { box-shadow: 0 0 6px -1px var(--ha-danger); }

.sh-fw__threat {
  background:
    repeating-linear-gradient(45deg,  transparent 0 7px, var(--ha-danger-dim) 7px 9px),
    repeating-linear-gradient(-45deg, transparent 0 7px, var(--ha-danger-dim) 7px 9px),
    var(--ha-surface);
  border: 1px solid var(--ha-border-hi);
  border-left: 3px solid var(--ha-danger);
  border-radius: var(--gns-radius-lg, 6px);
  padding: 0.85rem 1.1rem;
}
.sh-fw__threat-row {
  border-left: 2px solid transparent;
  transition: background 0.12s ease, border-left-color 0.12s ease;
}
.sh-fw__threat-row:hover {
  background: var(--ha-surface-2);
  border-left-color: var(--ha-danger);
}
.sh-fw__threat-row--ok      { border-left-color: var(--ha-ok); }
.sh-fw__threat-row--warn    { border-left-color: var(--ha-warn); }
.sh-fw__threat-row--down    { border-left-color: var(--ha-danger); }
.sh-fw__threat-row--alert   { border-left-color: var(--ha-danger); box-shadow: inset 4px 0 12px -8px var(--ha-danger); }

.sh-fw__feed,
.sh-fw__iplist,
.sh-fw__events {
  background:
    linear-gradient(135deg, var(--ha-danger-dim) 0%, transparent 35%),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-danger);
  border-radius: var(--gns-radius, 4px);
  padding: 0.6rem 0.85rem;
}

.sh-fw__spark,
.sh-th__spark {
  display: inline-flex;
}

.sh-fw__act,
.sh-th__act {
  background:
    repeating-linear-gradient(45deg,  transparent 0 6px, var(--ha-danger-dim) 6px 8px),
    repeating-linear-gradient(-45deg, transparent 0 6px, var(--ha-danger-dim) 6px 8px),
    radial-gradient(ellipse 70% 50% at 100% 100%, var(--ha-danger-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border-hi);
  border-left: 3px solid var(--ha-danger);
  border-radius: var(--gns-radius-lg, 6px);
  padding: 0.85rem 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.sh-fw__raw {
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, var(--p-color) 4px 5px),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-accent-cool);
  border-radius: var(--gns-radius, 4px);
  padding: 0.55rem 0.8rem;
  font-family: var(--gns-mono, ui-monospace, monospace);
}

/* ─── THREATS-specific: cohorts, top patterns, table ──────────────────── */
.sh-th__cohorts,
.sh-th__toppat {
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, var(--ha-warn-dim) 7px 9px),
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-warn-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-warn);
  border-radius: var(--gns-radius, 4px);
  padding: 0.75rem 1rem;
}

.sh-th__empty {
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, var(--ha-accent-dim) 0%, transparent 65%),
    var(--ha-surface);
  border: 1px dashed var(--ha-border);
  border-radius: var(--gns-radius-lg, 6px);
  padding: 2rem;
  text-align: center;
}

/* ─── ENCLAVE-specific: runs ─────────────────────────────────────────── */
.sh-en__run {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 10px 10px,
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-accent);
  border-radius: var(--gns-radius, 4px);
  padding: 0.65rem 0.9rem;
  font-family: var(--gns-mono, ui-monospace, monospace);
}

/* ─── CSP-specific: sources list ─────────────────────────────────────── */
.sh-csp__sources {
  background:
    linear-gradient(0deg, var(--p-color) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--p-color) 1px, transparent 1px) 0 0 / 12px 12px,
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-ok-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-ok);
  border-radius: var(--gns-radius, 4px);
  padding: 0.75rem 1rem;
}

/* ─── AUDIT-specific: runs strip, run-mix, geo, insights ──────────────── */
.sh-au__runs {
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, var(--p-color) 4px 6px, transparent 6px 18px),
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-accent);
  border-radius: var(--gns-radius-lg, 6px);
  padding: 0.75rem 1rem;
}
.sh-au__run-chip {
  background:
    linear-gradient(135deg, var(--ha-accent-dim) 0%, transparent 100%),
    var(--ha-surface-2);
  border: 1px solid var(--ha-border-hi);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.sh-au__run-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 14px -4px var(--ha-accent);
}
.sh-au__rmix,
.sh-au__geo {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 12px 12px,
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-accent-cool);
  border-radius: var(--gns-radius, 4px);
  padding: 0.75rem 1rem;
}
.sh-au__insights {
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, var(--p-color) 4px 6px, transparent 6px 18px),
    radial-gradient(ellipse 70% 50% at 100% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border-hi);
  border-left: 3px solid var(--ha-accent);
  border-radius: var(--gns-radius-lg, 6px);
  padding: 0.85rem 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* ─── SHIELD OVERVIEW additional: pipeline / term / tls ──────────────── */
.sh-ov__pipeline {
  background:
    radial-gradient(circle, var(--p-color-strong) 1px, transparent 1.5px) 0 0 / 12px 12px,
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border-hi);
  border-left: 3px solid var(--ha-accent);
  border-radius: var(--gns-radius-lg, 6px);
  padding: 0.85rem 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.sh-ov__term {
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, var(--p-color) 4px 5px),
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-accent-cool-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-accent-cool);
  border-radius: var(--gns-radius, 4px);
  padding: 0.55rem 0.85rem;
  font-family: var(--gns-mono, ui-monospace, monospace);
}
.sh-ov__tls {
  background:
    repeating-linear-gradient(45deg, transparent 0 16px, var(--p-color) 16px 17px),
    radial-gradient(ellipse 70% 50% at 0% 0%, var(--ha-ok-dim) 0%, transparent 50%),
    var(--ha-surface);
  border: 1px solid var(--ha-border);
  border-left: 3px solid var(--ha-ok);
  border-radius: var(--gns-radius, 4px);
  padding: 0.6rem 0.9rem;
}

/* ─── Light-theme blend for round-10 classes ─────────────────────────── */
[data-theme="light"] .sh-fw__hist,
[data-theme="light"] .sh-th__hist,
[data-theme="light"] .sh-hd__hist,
[data-theme="light"] .sh-csp__hist,
[data-theme="light"] .sh-en__hist,
[data-theme="light"] .sh-au__hist,
[data-theme="light"] .sh-fw__qstat,
[data-theme="light"] .sh-hd__qstat,
[data-theme="light"] .sh-po__sub,
[data-theme="light"] .sh-hd__sub,
[data-theme="light"] .sh-hd__cat,
[data-theme="light"] .sh-csp__cat,
[data-theme="light"] .sh-po__sg,
[data-theme="light"] .sh-hd__sg,
[data-theme="light"] .sh-csp__sg,
[data-theme="light"] .sh-po__tier,
[data-theme="light"] .sh-po__debt,
[data-theme="light"] .sh-fw__heat,
[data-theme="light"] .sh-fw__threat,
[data-theme="light"] .sh-fw__act,
[data-theme="light"] .sh-th__act,
[data-theme="light"] .sh-th__cohorts,
[data-theme="light"] .sh-th__toppat,
[data-theme="light"] .sh-en__run,
[data-theme="light"] .sh-csp__sources,
[data-theme="light"] .sh-au__runs,
[data-theme="light"] .sh-au__rmix,
[data-theme="light"] .sh-au__geo,
[data-theme="light"] .sh-au__insights,
[data-theme="light"] .sh-ov__pipeline,
[data-theme="light"] .sh-ov__term,
[data-theme="light"] .sh-ov__tls {
  background-blend-mode: multiply, multiply, normal;
}

/* ─── Light-theme blend for shield round-9 classes ──────────────────────── */
[data-theme="light"] .sh-po__viz-card,
[data-theme="light"] .sh-fw__viz-card,
[data-theme="light"] .sh-th__viz-card,
[data-theme="light"] .sh-au__viz-card,
[data-theme="light"] .sh-hd__viz-card,
[data-theme="light"] .sh-csp__viz-card,
[data-theme="light"] .sh-en__viz-card,
[data-theme="light"] .sh-ov__pulse-card,
[data-theme="light"] .sh-ov__sub,
[data-theme="light"] .sh-ov__geomap,
[data-theme="light"] .sh-ov__geocell,
[data-theme="light"] .sh-au__bars,
[data-theme="light"] .sh-au__donut,
[data-theme="light"] .sh-au__act {
  background-blend-mode: multiply, multiply, normal;
}