/* Spartan visual refresh. CSS only: the Angular templates, routes and events stay intact.
   Radius scale: controls 8px, surfaces 12px, dialogs 16px.
   Existing overlay stacking contexts are intentionally retained. */
@font-face {
  font-family: 'Spartan Geist';
  src: url('/spartan-geist-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
:root {
  --sp-canvas: #f5f7f6;
  --sp-surface: #fdfefd;
  --sp-subtle: #eef3f0;
  --sp-border: #dbe3df;
  --sp-ink: #202e29;
  --sp-muted: #596b63;
  --sp-accent: #216149;
  --sp-accent-hover: #194d39;
  --sp-accent-soft: #e4efe7;
  --sp-on-accent: #f8fcf9;
  --sp-focus: #327b58;
  --sp-danger: #a33229;
  --sp-danger-soft: #fff0ed;
  --sp-warning: #805819;
  --sp-warning-soft: #fff6e7;
  --sp-shadow: 0 3px 12px rgb(28 59 43 / 4%);
}
:root body {
  font-family: 'Spartan Geist', 'Segoe UI', Arial, sans-serif;
  color: var(--sp-ink);
  background: var(--sp-canvas);
  font-size: 14px;
  line-height: 1.5;
}
:root .app-shell { min-height: 100dvh; color: var(--sp-ink); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(button, input, select, textarea) { font-family: inherit; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(h1, h2, h3, h4) { color: var(--sp-ink); font-weight: 600; letter-spacing: -.035em; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--sp-focus);
  outline-offset: 3px;
}
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(button, a) { -webkit-tap-highlight-color: transparent; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .sidebar {
  width: 252px;
  padding: 26px 14px 16px;
  height: 100dvh;
  background: var(--sp-surface);
  color: var(--sp-muted);
  border-right: 1px solid var(--sp-border);
}
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .brand { gap: 10px; padding: 0 10px 28px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .brand strong { font-size: 20px; font-weight: 700; color: var(--sp-ink); letter-spacing: -.07em; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .brand strong span { color: var(--sp-accent); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .brand small { color: var(--sp-muted); font-weight: 500; font-size: 9px; letter-spacing: .18em; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .brand-mark { width: 36px; height: 36px; border-radius: 10px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .workspace { padding: 12px; background: var(--sp-subtle); border: 1px solid var(--sp-border); border-radius: 10px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .workspace-icon { background: var(--sp-accent-soft); color: var(--sp-accent); font-size: 13px; border-radius: 8px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .workspace strong { color: var(--sp-ink); font-size: 12px; font-weight: 600; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .workspace small { color: var(--sp-muted); font-size: 10px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .sidebar nav { margin-top: 18px; scrollbar-color: var(--sp-border) transparent; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .nav-heading { margin: 22px 12px 8px; color: var(--sp-muted); font-size: 10px; font-weight: 500; letter-spacing: .1em; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .nav-item { min-height: 39px; margin: 2px 0; padding: 9px 12px; font-size: 13px; font-weight: 500; color: var(--sp-muted); border-radius: 8px; gap: 11px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .nav-item.active { background: var(--sp-accent-soft); color: var(--sp-accent); font-weight: 600; box-shadow: inset 3px 0 var(--sp-accent); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .nav-glyph { opacity: .85; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .sidebar-bottom { border-color: var(--sp-border); color: var(--sp-muted); font-size: 11px; padding-top: 16px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .sidebar-bottom small { color: var(--sp-muted); font-size: 10px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .topbar { min-height: 68px; padding: 12px 32px; background: var(--sp-surface); border-color: var(--sp-border); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .breadcrumbs { gap: 14px; color: var(--sp-muted); font-size: 12px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .breadcrumbs strong { color: var(--sp-ink); font-weight: 500; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .top-actions { gap: 12px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .account { font-size: 12px; font-weight: 500; gap: 8px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .avatar { width: 30px; height: 30px; background: var(--sp-accent-soft); color: var(--sp-accent); border: 1px solid var(--sp-border); border-radius: 50%; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.search-trigger, .dg-trigger, .bell) { background: var(--sp-surface); color: var(--sp-muted); border-color: var(--sp-border); font-size: 12px; min-height: 34px; border-radius: 8px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .search-trigger { background: var(--sp-subtle); box-shadow: none; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(kbd, .dg-count) { background: var(--sp-surface); color: var(--sp-muted); border-color: var(--sp-border); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .content { width: 100%; max-width: 1460px; padding: 32px 36px 48px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .wide-content { max-width: 1800px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .page-intro { margin-bottom: 28px; gap: 20px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .page-intro h1 { font-size: clamp(27px, 2.5vw, 34px); font-weight: 600; letter-spacing: -.05em; line-height: 1.2; margin: 0 0 6px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .eyebrow { color: var(--sp-muted); font-size: 10px; letter-spacing: .1em; font-weight: 500; margin-bottom: 8px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .accent { color: var(--sp-accent); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .page-intro p:last-child { color: var(--sp-muted); font-size: 13px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.primary, .outline-button) { min-height: 38px; padding: 9px 13px; border-radius: 8px; font-size: 12px; line-height: 1.4; font-weight: 600; white-space: nowrap; box-shadow: none; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .primary { background: var(--sp-accent); border-color: var(--sp-accent); color: var(--sp-on-accent); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .outline-button { background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-ink); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.primary, .outline-button):disabled { cursor: not-allowed; opacity: .5; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.panel, .metric, .resource-card, .action-card) { background: var(--sp-surface); border-color: var(--sp-border); border-radius: 12px; box-shadow: var(--sp-shadow); color: var(--sp-ink); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.section-title h2, .health h2) { font-size: 18px; font-weight: 600; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.resource-card strong, .resource-count, .resource-name, .resource-summary dd, .detail-heading h2, .result-list dd) { color: var(--sp-ink); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.resource-card small, .owner-control, .search-control, .action-select, .field-help, .optional, .modal-context, .modal-context strong, .result-list dt, .resource-summary dt) { color: var(--sp-muted); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.resource-icon, .action-card-icon, .modal-icon) { background: var(--sp-accent-soft); color: var(--sp-accent); border-radius: 8px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .resource-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .resource-card { min-height: 114px; padding: 18px; box-shadow: none; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .resource-card strong { font-size: 13px; font-weight: 600; margin-top: 12px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .resource-card small { font-size: 11px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .hero-card { min-height: 210px; padding: 28px 32px; background: var(--sp-accent-soft); color: var(--sp-ink); border: 1px solid var(--sp-border); border-radius: 12px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .hero-card h2 { font-size: 28px; margin: 12px 0; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .hero-card h2 em { color: var(--sp-accent); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.hero-kicker, .hero-card p) { color: var(--sp-muted); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .hero-kicker { font-weight: 500; font-size: 10px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .hero-card button { background: var(--sp-accent); color: var(--sp-on-accent); border-radius: 8px; font-size: 12px; font-weight: 600; margin-top: 10px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .hero-graphic { width: 190px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .graphic-disc { border-color: var(--sp-border); width: 190px; height: 190px; top: -14px; left: 0; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .graphic-core { left: 52px; top: 38px; width: 86px; height: 86px; font-size: 58px; background: var(--sp-surface); color: var(--sp-accent); box-shadow: var(--sp-shadow); border: 1px solid var(--sp-border); border-radius: 20px; transform: rotate(-8deg); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview { margin-bottom: 24px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview .health { margin-bottom: 16px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview .health h2 { margin: 0 0 4px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview .health p { margin: 0; color: var(--sp-muted); font-size: 12px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: center; padding: 16px 20px; margin: 8px 0; border: 1px solid var(--sp-border); border-left: 3px solid #c69a48; border-radius: 10px; background: var(--sp-surface); color: var(--sp-ink); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview article.critical { border-left-color: var(--sp-danger); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview article strong { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview article p { grid-column: 1; margin: 0; font-size: 12px; color: var(--sp-muted); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview article button { grid-column: 2; grid-row: 1 / 3; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview button { border-color: var(--sp-border); background: var(--sp-surface); color: var(--sp-ink); border-radius: 8px; font-size: 12px; padding: 8px 12px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview .metrics { gap: 10px; margin: 24px 0 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview .metrics button { padding: 20px; border-radius: 10px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview .metrics strong { font-size: 30px; font-weight: 600; color: var(--sp-ink); margin: 10px 0 4px; font-variant-numeric: tabular-nums; letter-spacing: -.05em; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview .metrics :is(span, small) { color: var(--sp-muted); font-size: 12px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview .metrics small { font-size: 10px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview .all-clear { background: var(--sp-accent-soft); color: var(--sp-accent); border-radius: 10px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .resource-toolbar { margin: 22px 0 16px; gap: 16px; flex-wrap: wrap; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .search-control { font-size: 12px; font-weight: 500; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .search-control input { min-width: 250px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { color: var(--sp-ink); background: var(--sp-surface); border-color: var(--sp-border); border-radius: 8px; font-size: 14px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(input, textarea)::placeholder { color: var(--sp-muted); opacity: 1; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(input:not([type=checkbox]):not([type=radio]), select, textarea):focus { border-color: var(--sp-focus); box-shadow: 0 0 0 3px rgb(50 123 88 / 12%); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) input[type=checkbox]:not(.switch) { accent-color: var(--sp-accent); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .list-actions { flex-wrap: wrap; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .table-panel { box-shadow: none; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) table { font-size: 13px; font-variant-numeric: tabular-nums; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) th { padding: 14px 16px; background: var(--sp-subtle); color: var(--sp-muted); font-size: 11px; font-weight: 500; border-color: var(--sp-border); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) th .resource-name { color: var(--sp-muted); font-weight: 500; font-size: 11px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) td { padding: 16px; background: var(--sp-surface); color: var(--sp-ink); border-color: var(--sp-border); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) tbody td .resource-name { font-size: 12px; font-weight: 600; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .row-actions { gap: 6px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .row-actions .outline-button { min-height: 32px; padding: 6px 9px; font-size: 11px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .icon-button { color: var(--sp-muted); background: var(--sp-surface); border-color: var(--sp-border); border-radius: 8px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.badge, .row-badge) { border-radius: 6px; padding: 4px 7px; font-size: 10px; font-weight: 500; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.badge-ok, .row-badge) { color: var(--sp-accent); background: var(--sp-accent-soft); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .badge-muted { background: var(--sp-subtle); color: var(--sp-muted); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.badge-danger, .application-failed) { background: var(--sp-danger-soft); color: var(--sp-danger); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .badge-warn { background: var(--sp-warning-soft); color: var(--sp-warning); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.detail-tabs, .tabs) { border-color: var(--sp-border); gap: 10px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.detail-tabs, .tabs) button { color: var(--sp-muted); border-color: var(--sp-border); background: var(--sp-surface); font-size: 12px; font-weight: 500; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.detail-tabs, .tabs) button.active { background: var(--sp-accent-soft); color: var(--sp-accent); border-color: var(--sp-accent); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.resource-summary, .history-toolbar, .deployment-stage, .action-card, .domain-choice) { background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-ink); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.history-toolbar p, .deployment-heading span, .deployment-note, .deployment-status small) { color: var(--sp-muted); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .history-quick-filters [aria-pressed=true] { background: var(--sp-accent-soft); color: var(--sp-accent); border-color: var(--sp-accent); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .modal { background: var(--sp-surface); border-radius: 16px; box-shadow: 0 24px 80px rgb(15 38 26 / 20%); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.modal-header, .modal-footer) { border-color: var(--sp-border); background: var(--sp-surface); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.modal-hint, .input-group button, .advanced-options) { background: var(--sp-subtle); color: var(--sp-muted); border-color: var(--sp-border); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .modal-field > label { color: var(--sp-ink); font-size: 13px; font-weight: 500; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .modal-heading h2 { font-size: 20px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .modal-close { color: var(--sp-muted); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .modal-danger .modal-icon { background: var(--sp-danger-soft); color: var(--sp-danger); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .danger { background: var(--sp-danger); border-color: var(--sp-danger); color: var(--sp-on-accent); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .row-menu { background: var(--sp-surface); border-color: var(--sp-border); box-shadow: 0 10px 32px rgb(15 38 26 / 14%); border-radius: 10px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .row-menu button { color: var(--sp-ink); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.row-menu button.danger, .row-menu .danger) { background: transparent; color: var(--sp-danger); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.dg-dialog, .palette) { background: var(--sp-surface); color: var(--sp-ink); border-radius: 16px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.dg-header, .dg-footer, .dg-sidebar, .dg-context) { background: var(--sp-subtle); border-color: var(--sp-border); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .dg-item { background: var(--sp-surface); color: var(--sp-ink); border-color: var(--sp-border); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .dg-item.selected { background: var(--sp-accent-soft); border-color: var(--sp-accent); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.dg-context dt, .dg-header p, .dg-eyebrow) { color: var(--sp-muted); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .auth-panel { max-width: 440px; padding: 30px; box-shadow: 0 12px 40px rgb(28 59 43 / 6%); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .auth-panel h2 { font-size: 21px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .auth-panel label { color: var(--sp-ink); font-size: 12px; font-weight: 500; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .auth-panel .panel-icon { color: var(--sp-accent); width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--sp-border); background: var(--sp-accent-soft); border-radius: 10px; font-size: 22px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .auth-panel input { min-height: 44px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .auth-panel .primary { min-height: 44px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .content:has(> .auth-panel) { max-width: 1100px; padding-top: 44px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .content:has(> .auth-panel) .page-intro { margin-top: 36px; margin-bottom: 26px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-site-detail :is(article, form) { background: var(--sp-surface); border-color: var(--sp-border); border-radius: 12px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-site-detail :is(dt, small) { color: var(--sp-muted); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-site-detail :is(button, a) { background: var(--sp-surface); color: var(--sp-ink); border-color: var(--sp-border); font-size: 12px; }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-site-detail :is(button, a).primary { background: var(--sp-accent); color: var(--sp-on-accent); border-color: var(--sp-accent); }
:root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.table-panel, .modal-body, .palette-results, .row-menu) { scrollbar-color: var(--sp-border) transparent; }
/* Child applications share the same surfaces without replacing their controls. */
:root .app-shell :is(app-webapps, app-postgresql, app-snapshots, app-workspaces, app-panel-transfer, app-metrics) { color: var(--sp-ink); }
:root .app-shell :is(.catalog article, .form-panel, .requirements, .file-access, .file-selection, .file-notice, .installer-card, .install-destination) { background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-ink); border-radius: 12px; }
:root .app-shell :is(.catalog p, .catalog small, .field small, .file-toolbar label, .file-access summary, .install-destination span, .installer-card > p:not(.eyebrow), .domain-choice small) { color: var(--sp-muted); }
:root .app-shell :is(.catalog .capabilities, .file-link, .file-access-heading span) { color: var(--sp-accent); }
:root .app-shell .file-access-heading span { background: var(--sp-accent-soft); }
:root .app-shell .file-access-heading .readonly { background: var(--sp-warning-soft); color: var(--sp-warning); }
:root .app-shell .file-toolbar .upload-button.primary { background: var(--sp-accent); color: var(--sp-on-accent); border-color: var(--sp-accent); }
:root .app-shell :is(.file-error, .modal-error, .confirm-action) { background: var(--sp-danger-soft); border-color: var(--sp-danger); color: var(--sp-danger); }
:root .app-shell app-webapps button:not(.primary) { background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-ink); }
:root :is(.modal-backdrop, .palette-backdrop) { animation: none; }
:root .modal-backdrop .modal { animation: none; }
:root .modal-backdrop :is(.toggle-list, .toggle-row, .input-group) { border-color: var(--sp-border); }
:root .modal-backdrop :is(.toggle-text strong, .disclosure) { color: var(--sp-ink); }
:root .modal-backdrop :is(.toggle-text small, .toggle-list legend, .disclosure small, .input-suffix, .modal-note) { color: var(--sp-muted); }
:root .modal-backdrop :is(.disclosure, .input-suffix) { background: var(--sp-subtle); border-color: var(--sp-border); }
:root .modal-backdrop .modal-field .input-group input { border: 0; border-radius: 0; box-shadow: none; }
:root .modal-backdrop .switch { background: var(--sp-border); border-radius: 999px; }
:root .modal-backdrop .switch:checked { background: var(--sp-accent); }
:root .modal-backdrop .switch::after { background: var(--sp-surface); }
:root .modal-backdrop .switch:checked::after { background: var(--sp-on-accent); }
/* Frequent navigation stays immediate; feedback is confined to pointer presses. */
@media (hover: hover) and (pointer: fine) {
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) button:not(:disabled) { transition: background-color 120ms ease, border-color 120ms ease, transform 120ms cubic-bezier(.23,1,.32,1); }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) button:not(:disabled):active { transform: scale(.98); }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .nav-item:hover { background: var(--sp-subtle); color: var(--sp-ink); }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .nav-item.active:hover { background: var(--sp-accent-soft); color: var(--sp-accent); }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .primary:hover { background: var(--sp-accent-hover); border-color: var(--sp-accent-hover); }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .outline-button:hover { background: var(--sp-subtle); border-color: var(--sp-muted); }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) :is(.resource-card, app-overview .metrics button):hover { transform: none; border-color: var(--sp-accent); box-shadow: none; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) tbody tr:hover td { background: var(--sp-subtle); }
  :root .modal-backdrop :is(.toggle-row, .disclosure):hover { background: var(--sp-subtle); }
}
@media (min-width: 1500px) {
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview .metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .sidebar { width: 222px; padding-inline: 10px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .content { padding: 28px 24px 40px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .topbar { padding-inline: 24px; }
}
@media (max-width: 720px) {
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .sidebar { width: 100%; height: auto; padding: 16px 12px 10px; border-right: 0; border-bottom: 1px solid var(--sp-border); }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .brand { padding: 0 4px 16px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .sidebar nav { margin: 0; padding-bottom: 5px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .nav-item { width: auto; min-height: 38px; white-space: nowrap; margin: 0; padding: 9px 12px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .nav-item.active { box-shadow: none; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .topbar { padding: 12px 16px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .top-actions { gap: 8px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .content { padding: 24px 16px 36px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .page-intro { align-items: start; gap: 14px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .page-controls { flex-wrap: wrap; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .page-intro h1 { font-size: 28px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .resource-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .resource-card { padding: 16px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview article { padding: 14px 16px; gap: 8px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview article button { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) app-overview .metrics button { padding: 16px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .hero-card { padding: 24px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .hero-graphic { display: none; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .hero-card h2 { font-size: 25px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .search-control { width: 100%; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .search-control input { width: 100%; min-width: 0; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .list-actions { gap: 8px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .table-panel tbody tr { background: var(--sp-surface); border-color: var(--sp-border); }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .table-panel tbody td { padding: 10px 12px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .table-panel tbody td::before { color: var(--sp-muted); }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .table-panel tbody td .resource-name { overflow-wrap: anywhere; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .content:has(> .auth-panel) { padding-top: 24px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .content:has(> .auth-panel) .page-intro { margin-top: 24px; }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) .auth-panel { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) *, :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) *::before, :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  :root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop, .toasts) button:not(:disabled):active { transform: none; }
}

/* Contrast follow-up: semantic pairs for every product surface and control.
   Text targets WCAG AA 4.5:1; control boundaries and chart series target 3:1. */
:root {
  --sp-muted: #4d6156;
  --sp-control-border: #74897b;
  --sp-control-off: #74897b;
  --sp-code-bg: #142f25;
  --sp-code-ink: #eaf3ed;
  --sp-series-1: #216149;
  --sp-series-2: #3c698f;
  --sp-series-3: #875b17;
  --sp-series-4: #925979;
}

/* Component-local hardcoded colors must follow the same theme as the shell. */
:root body app-root .app-shell .content :is(p, small, dt, label, legend, summary) { color: var(--sp-muted); }
:root body app-root .app-shell .content :is(article, .chart-card, .form-panel, .requirements, .migration-card, .migration-flow, .transfer-capabilities) { background: var(--sp-surface); border-color: var(--sp-border); color: var(--sp-ink); }
:root body app-root .app-shell .content :is(h1, h2, h3, h4, dd, .when strong, .hero strong, .legend b) { color: var(--sp-ink); }
:root body app-root .app-shell .content :is(.muted, .updated, .migration-limit, .x-labels, .y-labels span, .legend, .snapshots .when small) { color: var(--sp-muted); }
:root body app-root .app-shell .content a:not(.primary):not(.outline-button) { color: var(--sp-accent); }
:root body app-root .app-shell .link { color: var(--sp-accent); }
:root body app-root app-notification-bell :is(.dropdown, header, footer, li) { background: var(--sp-surface); color: var(--sp-ink); border-color: var(--sp-border); }
:root body app-root app-notification-bell :is(footer, .desktop-toggle, li.unread) { background: var(--sp-subtle); border-color: var(--sp-border); }
:root body app-root .app-shell app-notification-bell .dropdown strong { color: var(--sp-ink); }
:root body app-root .app-shell app-notification-bell .dropdown :is(p, small, .empty) { color: var(--sp-muted); }
:root body app-root app-notification-bell .notice-error { color: var(--sp-danger); }
:root body app-root .app-shell app-notification-bell .bell[aria-expanded=true] { background: var(--sp-subtle); color: var(--sp-ink); }
:root body app-root .app-shell .content :is(.file-access, .file-selection, .file-notice, .app-target, .install-destination) { background: var(--sp-subtle); color: var(--sp-ink); border-color: var(--sp-border); }
:root body app-root .app-shell .file-access-heading span { background: var(--sp-accent-soft); color: var(--sp-accent); }
:root body app-root .app-shell .file-access-heading span.readonly { background: var(--sp-warning-soft); color: var(--sp-warning); }
:root body app-root .app-shell .content :is(.notice, .operation-pending, .offline-banner, .confirm-action) { background: var(--sp-warning-soft); color: var(--sp-warning); border-color: var(--sp-warning); }
:root body app-root .app-shell .content :is(.notice, .operation-pending, .offline-banner, .confirm-action) :is(p, small, strong, label, h3) { color: inherit; }
:root body app-root .app-shell .content :is(.error, .file-error, .form-error, .modal-error, .metrics-error, [role=alert]) { color: var(--sp-danger); }
:root body app-root .app-shell .content :is(.file-error, .modal-error, .metrics-error) { background: var(--sp-danger-soft); border-color: var(--sp-danger); }
:root body app-root .app-shell .content :is(.error, .file-error, .form-error, .modal-error, .metrics-error) :is(p, small, strong) { color: inherit; }
:root body app-root .app-shell .content :is(.success-note, .all-clear) { color: var(--sp-accent); background: var(--sp-accent-soft); }
:root body app-root .app-shell .content .postgres-badge { color: var(--sp-accent); background: var(--sp-accent-soft); }
:root body app-root .app-shell .content :is(.metrics-toolbar, app-panel-transfer .buttons, app-webapps) button:not(.primary) { color: var(--sp-ink); background: var(--sp-surface); border-color: var(--sp-control-border); }
:root body app-root .app-shell .content .metrics-toolbar button.active { color: var(--sp-on-accent); background: var(--sp-accent); border-color: var(--sp-accent); }
:root body app-root .app-shell app-overview .metrics button { background: var(--sp-surface); color: var(--sp-ink); border-color: var(--sp-border); }
:root body app-root .app-shell app-overview .metrics :is(span, small) { color: var(--sp-muted); }
:root body app-root .app-shell app-overview .metrics strong { color: var(--sp-ink); }
:root body app-root .app-shell :is(.detail-tabs, .tabs) button { color: var(--sp-muted); background: var(--sp-surface); border-color: var(--sp-border); }
:root body app-root .app-shell :is(.detail-tabs, .tabs) button.active { color: var(--sp-accent); background: var(--sp-accent-soft); border-color: var(--sp-accent); }
:root body app-root .app-shell .content .table-panel :is(td, td:first-child) { background: var(--sp-surface); color: var(--sp-ink); border-color: var(--sp-border); }
:root body app-root .app-shell .content .table-panel .resource-name { background: transparent; color: var(--sp-ink); }
:root body app-root .app-shell .content .table-panel th .resource-name { color: var(--sp-muted); }
:root body app-root .app-shell .content .empty-state { background: var(--sp-surface); color: var(--sp-muted); }
/* Inputs, placeholders, switches and disabled states remain legible in both modes. */
:root body app-root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea) { background: var(--sp-surface); color: var(--sp-ink); border-color: var(--sp-control-border); }
:root body app-root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop) :is(input, textarea)::placeholder { color: var(--sp-muted); opacity: 1; }
:root body app-root :is(.modal-backdrop, .app-shell) :is(.input-group, .install-destination) { border-color: var(--sp-control-border); }
:root body app-root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop) :is(button, input, select, textarea, summary, a):focus-visible { outline: 2px solid var(--sp-focus); outline-offset: 3px; }
:root body app-root :is(.app-shell, .modal-backdrop, .palette-backdrop, .dg-backdrop) :is(button, input, select, textarea):disabled { opacity: 1; color: var(--sp-muted); background: var(--sp-subtle); border-color: var(--sp-control-border); cursor: not-allowed; }
:root body app-root .app-shell .file-toolbar .upload-button.primary { color: var(--sp-on-accent); background: var(--sp-accent); }
:root body app-root .app-shell .file-toolbar .upload-button.primary:has(input:disabled) { color: var(--sp-muted); background: var(--sp-subtle); border-color: var(--sp-control-border); }
:root body app-root :is(.app-shell, .modal-backdrop) .switch { background: var(--sp-control-off); }
:root body app-root :is(.app-shell, .modal-backdrop) .switch:checked { background: var(--sp-accent); }
:root body app-root :is(.app-shell, .modal-backdrop) .switch::after { background: var(--sp-on-accent); }
:root body app-root :is(.app-shell, .modal-backdrop) .switch:checked::after { background: var(--sp-on-accent); }
:root body app-root :is(.app-shell, .modal-backdrop) .switch:disabled { background: var(--sp-control-off); }
/* The search palette is outside the shell, so it needs its own complete pairs. */
:root body app-root .palette-backdrop .palette { background: var(--sp-surface); color: var(--sp-ink); }
:root body app-root .palette-backdrop .palette :is(.palette-input, .palette-results, .palette-footer) { background: var(--sp-surface); color: var(--sp-muted); border-color: var(--sp-border); }
:root body app-root .palette-backdrop .palette .palette-results li { background: var(--sp-surface); color: var(--sp-ink); }
:root body app-root .palette-backdrop .palette .palette-results li.active { background: var(--sp-accent-soft); color: var(--sp-accent); }
:root body app-root .palette-backdrop .palette .palette-results :is(small, .palette-empty) { color: var(--sp-muted) !important; }
:root body app-root .palette-backdrop .palette .palette-label { color: inherit; }
:root body app-root .palette-backdrop .palette .palette-icon { background: var(--sp-accent-soft); color: var(--sp-accent); }
:root body app-root .palette-backdrop .palette :is(.palette-footer, kbd) { color: var(--sp-muted); background: var(--sp-subtle); border-color: var(--sp-control-border); }
/* Diagnostic content includes a dark technical log in both page themes. */
:root body app-root app-diagnostics :is(.dg-header p, .dg-eyebrow, .dg-source, .dg-context dt, .dg-empty, .dg-footer span) { color: var(--sp-muted); }
:root body app-root .dg-dialog :is(.dg-header p, .dg-eyebrow, .dg-source, .dg-context dt, .dg-empty, .dg-footer span) { color: var(--sp-muted); }
:root body app-root app-diagnostics .dg-code { color: var(--sp-danger); }
:root body app-root app-diagnostics .dg-technical { background: var(--sp-code-bg); color: var(--sp-code-ink); }
:root body app-root app-diagnostics .dg-technical :is(h4, p, pre, button, .dg-copy-status, .dg-technical-note) { color: var(--sp-code-ink); }
:root body app-root app-diagnostics .dg-technical button { background: var(--sp-code-bg); color: var(--sp-code-ink); border-color: #88ac97; }
:root body app-root app-diagnostics .dg-footer button { color: var(--sp-on-accent); background: var(--sp-accent); border-color: var(--sp-accent); }
:root body app-root app-diagnostics .dg-sidebar input { background: var(--sp-surface); color: var(--sp-ink); border-color: var(--sp-control-border); }
/* Shared log blocks keep their paired foreground instead of inheriting dark-page ink. */
:root body app-root .app-shell :is(pre, .result-raw, .result-long pre) { color: var(--sp-code-ink); background: var(--sp-code-bg); }
:root body app-root .app-shell .tooltip { color: var(--sp-code-ink); background: var(--sp-code-bg); }
:root body app-root .app-shell .tooltip :is(time, b) { color: var(--sp-code-ink); }
:root body app-root .toasts :is(.toast-body strong, .toast-body p, .toast-close, .toast-action) { color: #f5fbf7; opacity: 1; }
/* Series colors are inline in the existing chart component. Override only paint,
   preserving the original series order, values, paths and interactions. */
:root body app-root .app-shell app-metrics .line:nth-of-type(2) { stroke: var(--sp-series-1) !important; }
:root body app-root .app-shell app-metrics .line:nth-of-type(4) { stroke: var(--sp-series-2) !important; }
:root body app-root .app-shell app-metrics .line:nth-of-type(6) { stroke: var(--sp-series-3) !important; }
:root body app-root .app-shell app-metrics :is(.area:nth-of-type(1), .dot:nth-of-type(1)) { fill: var(--sp-series-1) !important; }
:root body app-root .app-shell app-metrics :is(.area:nth-of-type(3), .dot:nth-of-type(2)) { fill: var(--sp-series-2) !important; }
:root body app-root .app-shell app-metrics :is(.area:nth-of-type(5), .dot:nth-of-type(3)) { fill: var(--sp-series-3) !important; }
:root body app-root .app-shell app-metrics :is(.legend li:nth-child(1), .tooltip > div:nth-of-type(1)) .swatch { background: var(--sp-series-1) !important; }
:root body app-root .app-shell app-metrics :is(.legend li:nth-child(2), .tooltip > div:nth-of-type(2)) .swatch { background: var(--sp-series-2) !important; }
:root body app-root .app-shell app-metrics :is(.legend li:nth-child(3), .tooltip > div:nth-of-type(3)) .swatch { background: var(--sp-series-3) !important; }
:root body app-root .app-shell app-metrics .dot { stroke: var(--sp-surface); }
:root body app-root .app-shell app-metrics .grid { stroke: var(--sp-border); }
:root body app-root .app-shell app-metrics .data-table th { color: var(--sp-muted); }
:root body app-root .app-shell app-metrics .data-table td { color: var(--sp-ink); }
:root body app-root .app-shell app-metrics .crosshair { stroke: var(--sp-muted); }
:root body app-root .app-shell app-metrics .plot:focus-visible { outline: 2px solid var(--sp-focus); outline-offset: 3px; box-shadow: none; }
/* Hover states use the same tested semantic pairs, including table cells. */
@media (hover:hover) and (pointer:fine) {
  :root body app-root .app-shell app-notification-bell .bell:hover { background: var(--sp-subtle); color: var(--sp-ink); }
  :root body app-root .app-shell .row-menu :is(button, a):hover { background: var(--sp-subtle); color: var(--sp-ink); }
  :root body app-root .app-shell .row-menu :is(button.danger, a.danger):hover { color: var(--sp-danger); }
  :root body app-root .palette-backdrop .palette .palette-results li:hover { background: var(--sp-accent-soft); color: var(--sp-accent); }
  :root body app-root app-diagnostics .dg-item:hover { background: var(--sp-accent-soft); color: var(--sp-ink); }
  :root body app-root .app-shell .content .outline-button:hover { background: var(--sp-subtle); color: var(--sp-ink); border-color: var(--sp-control-border); }
  :root body app-root .app-shell .content .table-panel tr:hover :is(td, td:first-child) { background: var(--sp-subtle); }
}

/* Spartan / Operations Studio. Visual overhaul of the existing Angular product.
   Native CSS, existing icons and self-hosted Geist. No API or event changes.
   DESIGN_VARIANCE 7 / MOTION_INTENSITY 3 / VISUAL_DENSITY 6.
   Geometry: 6px controls, 10px grouped surfaces, 16px transient popovers.
   Existing overlay z-indices stay intact. */
:root {
  --sp-canvas: #f3f4f3;
  --sp-surface: #ffffff;
  --sp-subtle: #eaeeeb;
  --sp-border: #d2dad5;
  --sp-ink: #18271f;
  --sp-muted: #4f6257;
  --sp-accent: #175b3b;
  --sp-accent-hover: #10472d;
  --sp-accent-soft: #deede3;
  --sp-on-accent: #ffffff;
  --sp-focus: #175b3b;
  --studio-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --studio-nav: #172d23;
  --studio-nav-surface: #213d2e;
  --studio-nav-border: #45604f;
  --studio-nav-ink: #edf4ef;
  --studio-nav-muted: #bdcdc3;
  --studio-nav-active: #d8ebd9;
}

:root body app-root .app-shell { display:grid; grid-template-columns:224px minmax(0,1fr); align-items:start; background:var(--sp-canvas); }
:root body app-root .app-shell .sidebar { position:sticky; top:0; height:100dvh; width:auto; padding:0; display:grid; grid-template-rows:76px auto minmax(0,1fr) 44px; border-right:0; background:var(--studio-nav); color:var(--studio-nav-ink); }
:root body app-root .app-shell .brand { padding:0 20px; margin:0; gap:10px; border-bottom:1px solid var(--sp-border); align-items:center; }
:root body app-root .app-shell .brand-mark { width:32px; height:32px; border-radius:7px; }
:root body app-root .app-shell .brand strong { font-size:19px; letter-spacing:-.06em; }
:root body app-root .app-shell .brand small { font:9px/1.5 var(--studio-mono); letter-spacing:.12em; margin-top:3px; }
:root body app-root .app-shell .workspace { margin:20px 14px 8px; padding:12px 10px; border:1px solid var(--sp-border); border-radius:6px; background:var(--sp-canvas); gap:9px; }
:root body app-root .app-shell .workspace-icon { border-radius:4px; width:28px; height:28px; font:600 12px var(--studio-mono); }
:root body app-root .app-shell .workspace strong { font:600 11px var(--studio-mono); }
:root body app-root .app-shell .workspace small { font-size:10px; margin-top:4px; }
:root body app-root .app-shell .sidebar nav { margin:0; padding:0 10px 16px; overflow-y:auto; scrollbar-width:thin; }
:root body app-root .app-shell .nav-item { width:100%; min-height:36px; padding:8px 10px; margin:2px 0; gap:10px; border-radius:5px; font-size:13px; font-weight:500; text-align:left; }
:root body app-root .app-shell .nav-item.active { box-shadow:inset 3px 0 var(--sp-accent); font-weight:650; }
:root body app-root .app-shell .nav-glyph { width:17px; opacity:1; }
:root body app-root .app-shell .nav-glyph svg { width:16px; height:16px; }
:root body app-root .app-shell .nav-heading { font:10px/1.4 var(--studio-mono); letter-spacing:.08em; margin:22px 10px 8px; color:var(--sp-muted); }
:root body app-root .app-shell .sidebar-bottom { margin:0; padding:12px 20px; border-top:1px solid var(--sp-border); font:10px var(--studio-mono); }
:root body app-root .app-shell .sidebar .brand { border-color:var(--studio-nav-border); }
:root body app-root .app-shell .sidebar .brand strong { color:var(--studio-nav-ink); }
:root body app-root .app-shell .sidebar .brand strong span { color:var(--studio-nav-active); }
:root body app-root .app-shell .sidebar :is(.brand small,.workspace small,.nav-heading,.sidebar-bottom,.sidebar-bottom small) { color:var(--studio-nav-muted); }
:root body app-root .app-shell .sidebar .workspace { background:var(--studio-nav-surface); border-color:var(--studio-nav-border); }
:root body app-root .app-shell .sidebar .workspace strong { color:var(--studio-nav-ink); }
:root body app-root .app-shell .sidebar .workspace-icon { background:var(--studio-nav-active); color:#183320; }
:root body app-root .app-shell .sidebar .nav-item { color:var(--studio-nav-muted); background:transparent; }
:root body app-root .app-shell .sidebar .nav-item.active { background:var(--studio-nav-active); color:#183320; box-shadow:inset 3px 0 #5c996d; }
:root body app-root .app-shell .sidebar .sidebar-bottom { border-color:var(--studio-nav-border); }
:root body app-root .app-shell .main { min-width:0; width:100%; margin:0; }
:root body app-root .app-shell .topbar { position:sticky; top:0; z-index:5; min-height:76px; height:auto; padding:16px 32px; background:var(--sp-surface); border-bottom:1px solid var(--sp-border); gap:20px; }
:root body app-root .app-shell .breadcrumbs { font-size:12px; gap:12px; }
:root body app-root .app-shell .breadcrumbs > span:first-child { font-family:var(--studio-mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
:root body app-root .app-shell .top-actions { gap:10px; }
:root body app-root .app-shell .search-trigger { min-width:170px; background:var(--sp-canvas); height:36px; }
:root body app-root .app-shell .search-trigger kbd { font:10px var(--studio-mono); border-radius:3px; }
:root body app-root .app-shell .account { font-size:12px; padding-left:10px; border-left:1px solid var(--sp-border); }
:root body app-root .app-shell .avatar { width:28px; height:28px; border-radius:5px; }
:root body app-root .app-shell .content { width:100%; max-width:1600px; margin:0 auto; padding:28px 36px 56px; }
:root body app-root .app-shell .page-intro { padding:20px 0 26px; margin:0 0 24px; align-items:center; border-bottom:1px solid var(--sp-border); }
:root body app-root .app-shell .page-intro h1 { font-size:clamp(32px,3.4vw,48px); font-weight:550; letter-spacing:-.06em; line-height:1.12; margin:5px 0 10px; }
:root body app-root .app-shell .page-intro .eyebrow { font:10px var(--studio-mono); letter-spacing:.08em; margin:0 0 10px; }
:root body app-root .app-shell .page-intro p:last-child { font:12px/1.6 var(--studio-mono); }
:root body app-root .app-shell .page-intro .accent { display:none; }
:root body app-root .app-shell .page-controls { gap:10px; }
:root body app-root .app-shell .owner-control { font:10px var(--studio-mono); letter-spacing:.05em; }
:root body app-root :is(.app-shell,.modal-backdrop,.dg-backdrop,.palette-backdrop) :is(.primary,.outline-button,.icon-button,.search-trigger,.dg-trigger,.bell) { border-radius:6px; min-height:36px; font-size:12px; font-weight:600; padding:9px 13px; box-shadow:none; }
:root body app-root .app-shell .icon-button { width:34px; height:34px; min-height:34px; padding:0; }
:root body app-root .app-shell .primary { background:var(--sp-accent); color:var(--sp-on-accent); }
:root body app-root .app-shell .content :is(.panel,.chart-card,.form-panel,.resource-summary,.requirements,.migration-card,.migration-flow,.file-access) { border-radius:10px; box-shadow:none; }
/* The dashboard becomes an operations sheet: inventory first, alerts second. */
:root body app-root .app-shell app-overview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; margin:0 0 30px; }
:root body app-root .app-shell app-overview .metrics { order:-3; grid-column:1/-1; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0; margin:0 0 28px; border:1px solid var(--sp-border); border-radius:10px; overflow:hidden; background:var(--sp-surface); }
:root body app-root .app-shell app-overview .metrics button { border:0; border-right:1px solid var(--sp-border); border-radius:0; padding:22px 16px 18px; min-width:0; box-shadow:none; transform:none; }
:root body app-root .app-shell app-overview .metrics button:last-child { border-right:0; }
:root body app-root .app-shell app-overview .metrics span { font-size:11px; font-weight:600; }
:root body app-root .app-shell app-overview .metrics strong { font:500 clamp(25px,3vw,38px)/1.2 var(--studio-mono); letter-spacing:-.07em; margin:20px 0 10px; }
:root body app-root .app-shell app-overview .metrics small { font-size:10px; }
:root body app-root .app-shell app-overview .health { order:-2; grid-column:1/-1; padding:0 0 14px; align-items:center; }
:root body app-root .app-shell app-overview .health h2 { font-size:20px; margin:0 0 6px; }
:root body app-root .app-shell app-overview .health p { font:11px var(--studio-mono); margin:0; }
:root body app-root .app-shell app-overview article { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px 12px; padding:18px 20px; margin:0 0 12px; border:1px solid var(--sp-border); border-left:3px solid var(--sp-warning); border-radius:8px; }
:root body app-root .app-shell app-overview article.critical { border-left-color:var(--sp-danger); }
:root body app-root .app-shell app-overview article strong { font-size:13px; overflow-wrap:anywhere; }
:root body app-root .app-shell app-overview article p { grid-column:1; margin:0; font-size:12px; line-height:1.6; }
:root body app-root .app-shell app-overview article button { grid-column:2; grid-row:1/3; padding:9px 10px; font-size:11px; border-radius:5px; }
:root body app-root .app-shell app-overview article:last-child { grid-column:1/-1; border-left:1px solid var(--sp-border); background:var(--sp-subtle); margin-top:10px; }
:root body app-root .app-shell app-overview .all-clear { grid-column:1/-1; border-radius:6px; background:var(--sp-accent-soft); color:var(--sp-accent); }
:root body app-root .app-shell .hero-card { min-height:0; padding:24px 28px; margin:0 0 32px; border:1px solid var(--sp-border); border-radius:10px; background:var(--sp-surface); color:var(--sp-ink); }
:root body app-root .app-shell .hero-card > div:first-child { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 28px; width:100%; align-items:center; }
:root body app-root .app-shell .hero-kicker { font:10px var(--studio-mono); color:var(--sp-muted); letter-spacing:.06em; }
:root body app-root .app-shell .hero-card h2 { grid-column:1; font-size:25px; line-height:1.25; font-weight:500; margin:0; }
:root body app-root .app-shell .hero-card h2 br { display:none; }
:root body app-root .app-shell .hero-card h2 em { color:var(--sp-ink); font-style:normal; }
:root body app-root .app-shell .hero-card h2 em { display:inline-block; margin-left:.2em; }
:root body app-root .app-shell .hero-card p { grid-column:1; font-size:12px; margin:0; color:var(--sp-muted); }
:root body app-root .app-shell .hero-card button { grid-column:2; grid-row:1/4; margin:0; padding:12px 18px; border-radius:6px; background:var(--sp-accent); color:var(--sp-on-accent); font-size:12px; }
:root body app-root .app-shell .hero-graphic { display:none; }
:root body app-root .app-shell .section-title { margin:26px 0 18px; }
:root body app-root .app-shell .section-title h2 { font-size:20px; font-weight:550; }
:root body app-root .app-shell .resource-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border:1px solid var(--sp-border); border-radius:10px; overflow:hidden; background:var(--sp-surface); }
:root body app-root .app-shell .resource-card { display:grid; grid-template-columns:34px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; gap:4px 14px; min-height:94px; padding:20px 22px; border:0; border-right:1px solid var(--sp-border); border-bottom:1px solid var(--sp-border); border-radius:0; box-shadow:none; transform:none; }
:root body app-root .app-shell .resource-card strong { grid-column:2; grid-row:1; margin:0; font-size:13px; font-weight:600; }
:root body app-root .app-shell .resource-card small { grid-column:2; grid-row:2; margin:0; font-size:11px; line-height:1.5; }
:root body app-root .app-shell .resource-icon { grid-row:1/3; width:34px; height:34px; border-radius:6px; }
:root body app-root .app-shell .resource-card:nth-child(3n+1):last-child { grid-column:1/-1; }
:root body app-root .app-shell .resource-card:nth-child(3n+2):last-child { grid-column:span 2; }
/* Resource workspaces: separate the command strip from the actual data. */
:root body app-root .app-shell .resource-toolbar { background:var(--sp-surface); padding:18px 20px; border:1px solid var(--sp-border); border-radius:10px 10px 0 0; margin:0; gap:18px; align-items:end; }
:root body app-root .app-shell .search-control { font:10px var(--studio-mono); letter-spacing:.02em; gap:8px; }
:root body app-root .app-shell .search-control input { min-width:240px; font-family:inherit; font-size:13px; border-radius:6px; padding:10px 12px; }
:root body app-root .app-shell .list-actions { gap:8px; }
:root body app-root .app-shell .table-panel { border-radius:0 0 10px 10px; box-shadow:none; border-top:0; }
:root body app-root .app-shell .content .table-panel th { padding:14px 16px; background:var(--sp-subtle); font:10px/1.5 var(--studio-mono); letter-spacing:.02em; text-transform:none; }
:root body app-root .app-shell .content .table-panel td { padding:16px; font:13px/1.7 var(--studio-mono); max-width:320px; }
:root body app-root .app-shell .content .table-panel .resource-name { font:600 13px/1.5 'Spartan Geist','Segoe UI',sans-serif; }
:root body app-root .app-shell .row-actions { gap:7px; }
:root body app-root .app-shell .inline-select { font:11px var(--studio-mono); height:32px; border-radius:5px; }
:root body app-root .app-shell .badge { border-radius:4px; font:600 10px/1.5 var(--studio-mono); padding:3px 7px; }
:root body app-root .app-shell .resource-summary { gap:24px; padding:24px; border-left:3px solid var(--sp-accent); }
:root body app-root .app-shell .resource-summary dt { font:10px var(--studio-mono); margin-bottom:10px; }
:root body app-root .app-shell .resource-summary dd { font-size:14px; }
:root body app-root .app-shell :is(.tabs,.detail-tabs) { gap:0; padding:4px; background:var(--sp-subtle); border:1px solid var(--sp-border); border-radius:7px; margin:24px 0; overflow-x:auto; }
:root body app-root .app-shell :is(.tabs,.detail-tabs) button { padding:10px 14px; font-size:12px; border:0; border-radius:4px; background:transparent; white-space:nowrap; }
:root body app-root .app-shell :is(.tabs,.detail-tabs) button.active { background:var(--sp-surface); color:var(--sp-accent); box-shadow:0 1px 3px rgb(20 40 28 / 8%); }
:root body app-root .app-shell .action-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
:root body app-root .app-shell .action-card { padding:20px; border-radius:8px; }
:root body app-root .app-shell .action-card strong { font-size:13px; }
:root body app-root .app-shell .action-card small { font-size:12px; }
:root body app-root .app-shell .catalog { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
:root body app-root .app-shell .catalog article { padding:26px; border-radius:10px; }
:root body app-root .app-shell .catalog h3 { font-size:22px; letter-spacing:-.04em; }
:root body app-root .app-shell .metrics-grid { gap:20px; }
:root body app-root .app-shell .chart-card { padding:24px; }
:root body app-root .app-shell .job-card { padding:24px; border-left:3px solid var(--sp-accent); }
/* Forms are working drawers. Same form order, confirmation and focus handling. */
:root body app-root .modal-backdrop { align-items:stretch; justify-content:flex-end; padding:0; background:rgb(11 28 19 / 40%); backdrop-filter:blur(3px); }
:root body app-root .modal-backdrop .modal { width:620px; max-width:min(100%,760px); height:100dvh; max-height:100dvh; border-radius:0; border-left:1px solid var(--sp-border); box-shadow:-16px 0 60px rgb(12 35 23 / 14%); animation:none; }
:root body app-root .modal-backdrop .modal.modal-lg { width:760px; }
:root body app-root .modal-backdrop .modal-form { flex:1; display:flex; flex-direction:column; min-height:0; }
:root body app-root .modal-backdrop .modal-body { flex:1; min-height:0; }
:root body app-root .modal-backdrop .modal-header { padding:32px 32px 24px; gap:16px; background:var(--sp-surface); }
:root body app-root .modal-backdrop .modal-heading h2 { font-size:28px; font-weight:550; letter-spacing:-.05em; }
:root body app-root .modal-backdrop .modal-context { font:11px/1.7 var(--studio-mono); margin:0 0 8px; }
:root body app-root .modal-backdrop .modal-icon { width:42px; height:42px; border-radius:6px; }
:root body app-root .modal-backdrop .modal-body { padding:28px 32px; gap:24px; }
:root body app-root .modal-backdrop .modal-field > label { font-size:12px; font-weight:600; }
:root body app-root .modal-backdrop :is(input:not([type=checkbox]),select,textarea,.input-group) { border-radius:6px; }
:root body app-root .modal-backdrop .modal-grid { gap:24px 20px; }
:root body app-root .modal-backdrop .modal-field :is(input:not([type=checkbox]),select) { height:44px; font-size:14px; }
:root body app-root .modal-backdrop :is(.toggle-list,.disclosure,.modal-hint,.confirm-action,.install-destination) { border-radius:8px; }
:root body app-root .modal-backdrop .toggle-row { padding:18px; }
:root body app-root .modal-backdrop .modal-footer { padding:20px 32px; background:var(--sp-subtle); }
:root body app-root .modal-backdrop .modal-footer .primary { min-width:160px; }
:root body app-root .palette-backdrop .palette { border-radius:16px; border:1px solid var(--sp-control-border); box-shadow:0 24px 100px rgb(12 35 23 / 24%); }
:root body app-root .dg-dialog { border-radius:16px; border:1px solid var(--sp-border); }
/* A proper split-screen entrance, rather than the product sidebar and a small box. */
:root body app-root .app-shell:has(.auth-panel) { display:block; }
:root body app-root .app-shell:has(.auth-panel) .sidebar { position:absolute; left:48px; top:24px; height:auto; width:250px; background:transparent; border:0; display:block; z-index:6; }
:root body app-root .app-shell:has(.auth-panel) .sidebar .brand { padding:0; border:0; height:44px; }
:root body app-root .app-shell:has(.auth-panel) .sidebar .brand strong { color:var(--sp-ink); }
:root body app-root .app-shell:has(.auth-panel) .sidebar .brand strong span { color:var(--sp-accent); }
:root body app-root .app-shell:has(.auth-panel) .sidebar .brand small { color:var(--sp-muted); }
:root body app-root .app-shell:has(.auth-panel) .sidebar :is(nav,.workspace,.sidebar-bottom) { display:none; }
:root body app-root .app-shell:has(.auth-panel) .topbar { justify-content:flex-end; padding:28px 48px; min-height:96px; background:transparent; border:0; position:static; }
:root body app-root .app-shell:has(.auth-panel) .breadcrumbs { display:none; }
:root body app-root .app-shell .content:has(>.auth-panel) { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); gap:32px 72px; max-width:1260px; min-height:calc(100dvh - 120px); align-content:center; align-items:center; padding:40px 64px 80px; }
:root body app-root .app-shell .content:has(>.auth-panel) > :is(app-availability-banner,.diagnostic-banner) { grid-column:1/-1; }
:root body app-root .app-shell .content:has(>.auth-panel) > .page-intro { grid-column:1; padding:32px 0; margin:0; border:0; }
:root body app-root .app-shell .content:has(>.auth-panel) .page-intro h1 { font-size:clamp(52px,6vw,84px); line-height:1.04; font-weight:550; letter-spacing:-.075em; max-width:520px; margin:24px 0; }
:root body app-root .app-shell .content:has(>.auth-panel) .page-intro p:last-child { font-family:inherit; font-size:17px; max-width:370px; line-height:1.75; }
:root body app-root .app-shell .auth-panel { grid-column:2; max-width:none; width:100%; margin:0; padding:42px; border:1px solid var(--sp-border); border-radius:12px; box-shadow:0 16px 48px rgb(25 55 34 / 5%); }
:root body app-root .app-shell .auth-panel .panel-icon { font-size:26px; }
:root body app-root .app-shell .auth-panel h2 { font-size:28px; font-weight:550; margin:20px 0 28px; }
:root body app-root .app-shell .auth-panel form { gap:24px; }
:root body app-root .app-shell .auth-panel input { min-height:48px; border-radius:6px; padding:12px 14px; font-size:16px; }
:root body app-root .app-shell .auth-panel .primary { min-height:48px; font-size:14px; }
@media(hover:hover) and (pointer:fine) {
  :root body app-root .app-shell .sidebar .nav-item:hover { color:var(--studio-nav-ink); background:var(--studio-nav-surface); }
  :root body app-root .app-shell .sidebar .nav-item.active:hover { color:#183320; background:var(--studio-nav-active); }
  :root body app-root .app-shell .resource-card:hover,
  :root body app-root .app-shell app-overview .metrics button:hover { background:var(--sp-subtle); transform:none; box-shadow:none; }
}
@media(min-width:769px) and (prefers-reduced-motion:no-preference) {
  :root body app-root .modal-backdrop .modal { animation:studio-drawer 200ms cubic-bezier(.16,1,.3,1); }
}
@keyframes studio-drawer { from { transform:translateX(32px); opacity:0; } to { transform:translateX(0); opacity:1; } }
@media(max-width:1200px) {
  :root body app-root .app-shell { grid-template-columns:204px minmax(0,1fr); }
  :root body app-root .app-shell .content { padding:24px; }
  :root body app-root .app-shell .topbar { padding:16px 24px; }
  :root body app-root .app-shell .search-trigger { min-width:36px; }
  :root body app-root .app-shell .search-trigger :is(span,kbd) { display:none; }
  :root body app-root .app-shell app-overview .metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
  :root body app-root .app-shell app-overview .metrics button:nth-child(-n+3) { border-bottom:1px solid var(--sp-border); }
  :root body app-root .app-shell .resource-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  :root body app-root .app-shell .resource-card:last-child { grid-column:auto; }
  :root body app-root .app-shell .resource-card:nth-child(2n+1):last-child { grid-column:1/-1; }
}
@media(max-width:768px) {
  :root body app-root .app-shell { display:block; }
  :root body app-root .app-shell .sidebar { width:100%; height:auto; position:static; display:block; border-right:0; border-bottom:1px solid var(--sp-border); padding:0; }
  :root body app-root .app-shell .brand { height:62px; padding:16px 20px; border:0; }
  :root body app-root .app-shell .sidebar :is(.workspace,.sidebar-bottom,.nav-heading) { display:none; }
  :root body app-root .app-shell .sidebar nav { display:flex; gap:4px; overflow-x:auto; overflow-y:hidden; padding:0 16px 12px; margin:0; }
  :root body app-root .app-shell .nav-item { flex:none; width:auto; min-height:36px; padding:9px 12px; border-radius:5px; }
  :root body app-root .app-shell .nav-glyph { display:inline-flex; }
  :root body app-root .app-shell .topbar { position:static; min-height:60px; padding:12px 16px; flex-wrap:wrap; gap:10px; }
  :root body app-root .app-shell .top-actions { gap:6px; }
  :root body app-root :is(.app-shell,.modal-backdrop) :is(.primary,.outline-button,.icon-button,.search-trigger,.dg-trigger,.bell) { min-height:44px; }
  :root body app-root .app-shell .account { display:none; }
  :root body app-root .app-shell .breadcrumbs { display:none; }
  :root body app-root .app-shell .content { padding:20px 16px 36px; }
  :root body app-root .app-shell .page-intro { display:block; padding:12px 0 22px; margin-bottom:20px; }
  :root body app-root .app-shell .page-intro h1 { font-size:36px; }
  :root body app-root .app-shell .page-controls { margin-top:20px; flex-wrap:wrap; }
  :root body app-root .app-shell app-overview { grid-template-columns:1fr; gap:0; }
  :root body app-root .app-shell app-overview .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  :root body app-root .app-shell app-overview .metrics button { padding:20px; border-bottom:1px solid var(--sp-border); }
  :root body app-root .app-shell app-overview .metrics button:nth-last-child(-n+2) { border-bottom:0; }
  :root body app-root .app-shell app-overview article { padding:16px; }
  :root body app-root .app-shell .hero-card { padding:22px; }
  :root body app-root .app-shell .hero-card > div:first-child { display:block; }
  :root body app-root .app-shell .hero-card h2 { font-size:25px; margin:12px 0; }
  :root body app-root .app-shell .hero-card button { margin-top:18px; }
  :root body app-root .app-shell .resource-grid { grid-template-columns:1fr; }
  :root body app-root .app-shell .resource-card:last-child { grid-column:1; }
  :root body app-root .app-shell .resource-card { min-height:84px; border-right:0; }
  :root body app-root .app-shell .resource-toolbar { display:grid; padding:16px; }
  :root body app-root .app-shell .search-control input { min-width:0; width:100%; }
  :root body app-root .app-shell .list-actions { justify-content:flex-start; flex-wrap:wrap; }
  :root body app-root .app-shell .action-cards { grid-template-columns:1fr; }
  :root body app-root .modal-backdrop .modal { width:100%; max-width:100%; border:0; }
  :root body app-root .modal-backdrop :is(.modal-header,.modal-body) { padding:24px 20px; }
  :root body app-root .modal-backdrop .modal-heading h2 { font-size:25px; }
  :root body app-root .modal-backdrop .modal-grid { grid-template-columns:1fr; gap:20px; }
  :root body app-root .modal-backdrop .modal-field :is(input:not([type=checkbox]),select) { font-size:16px; }
  :root body app-root .modal-backdrop .modal-footer { padding:16px 20px; }
  :root body app-root .modal-backdrop .modal-footer .primary { min-width:0; }
  :root body app-root .app-shell:has(.auth-panel) .sidebar { position:static; width:auto; padding:20px 24px; }
  :root body app-root .app-shell:has(.auth-panel) .topbar { position:absolute; right:20px; top:20px; min-height:0; padding:0; }
  :root body app-root .app-shell .content:has(>.auth-panel) { grid-template-columns:1fr; gap:24px; min-height:0; padding:28px 24px 48px; }
  :root body app-root .app-shell .content:has(>.auth-panel) > .page-intro { padding:0; }
  :root body app-root .app-shell .content:has(>.auth-panel) .page-intro h1 { font-size:54px; margin:16px 0; }
  :root body app-root .app-shell .content:has(>.auth-panel) .page-intro p:last-child { font-size:15px; }
  :root body app-root .app-shell .auth-panel { grid-column:1; padding:28px; }
}

/* Desktop refinement. Existing markup, actions and data remain authoritative. */
@media (min-width:1024px) {
  :root body app-root .app-shell .content { padding:28px 32px 40px; }
  :root body app-root .app-shell .page-intro { margin-bottom:24px; padding-bottom:22px; }
  :root body app-root .app-shell .page-intro h1 { font-size:38px; letter-spacing:-.045em; line-height:1.15; }
  :root body app-root .app-shell .page-intro p:last-child { font:13px/1.6 'Spartan Geist','Segoe UI',sans-serif; }
  :root body app-root .app-shell .nav-heading { font:600 11px/1.5 'Spartan Geist','Segoe UI',sans-serif; letter-spacing:.055em; }
  :root body app-root .app-shell .sidebar .nav-item { min-height:38px; }
  :root body app-root .app-shell .sidebar .nav-item.active { box-shadow:inset 4px 0 #5c996d; }

  /* A coherent strip for inventory, then a clearly delimited attention queue. */
  :root body app-root .app-shell app-overview { gap:0 16px; }
  :root body app-root .app-shell app-overview .metrics { margin-bottom:24px; }
  :root body app-root .app-shell app-overview .metrics button { padding:20px 18px 16px; }
  :root body app-root .app-shell app-overview .metrics span { font-size:13px; font-weight:550; }
  :root body app-root .app-shell app-overview .metrics strong { font:550 34px/1.2 'Spartan Geist','Segoe UI',sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.045em; margin:14px 0 8px; }
  :root body app-root .app-shell app-overview .metrics small { font-size:12px; }
  :root body app-root .app-shell app-overview .metrics button:nth-last-child(-n+2) { background:var(--sp-subtle); }
  :root body app-root .app-shell app-overview .health { padding:16px 0; border-top:1px solid var(--sp-border); margin-bottom:4px; }
  :root body app-root .app-shell app-overview .health h2 { font-size:21px; font-weight:600; }
  :root body app-root .app-shell app-overview .health p { font:13px/1.6 'Spartan Geist','Segoe UI',sans-serif; color:var(--sp-muted); font-variant-numeric:tabular-nums; }
  :root body app-root .app-shell app-overview article { padding:16px 18px; gap:6px 16px; border-left:3px solid var(--sp-warning); margin-bottom:10px; }
  :root body app-root .app-shell app-overview article strong { font-size:14px; line-height:1.5; }
  :root body app-root .app-shell app-overview article p { font-size:13px; }
  :root body app-root .app-shell app-overview article button { font-size:12px; padding:9px 12px; }
  :root body app-root .app-shell app-overview article:not(:last-child) { border-left-color:var(--sp-warning); }
  :root body app-root .app-shell app-overview article.critical { order:-1; grid-column:1/-1; border-color:var(--sp-danger); background:var(--sp-danger-soft); }
  :root body app-root .app-shell app-overview article.critical :is(strong,p) { color:var(--sp-danger); }
  :root body app-root .app-shell app-overview article:last-child { padding:16px 18px; margin-top:8px; border-left:1px solid var(--sp-border); }
  :root body app-root .app-shell .resource-card { min-height:86px; padding:18px 20px; }
  :root body app-root .app-shell .resource-card strong { font-size:14px; }
  :root body app-root .app-shell .resource-card small { font-size:12px; color:var(--sp-muted); }

  /* Keep resource names, column headings and actions visible while scanning. */
  :root body app-root .app-shell .resource-toolbar { padding:16px 18px; align-items:center; }
  :root body app-root .app-shell .search-control { font:550 12px/1.5 'Spartan Geist','Segoe UI',sans-serif; letter-spacing:0; }
  :root body app-root .app-shell .search-control input { min-width:260px; height:40px; }
  :root body app-root .app-shell .content .table-panel:has(table) { max-height:max(360px,calc(100dvh - 360px)); overflow:auto; isolation:isolate; scrollbar-gutter:stable; }
  :root body app-root .app-shell .content .table-panel table { border-collapse:separate; border-spacing:0; }
  :root body app-root .app-shell .content .table-panel th { position:sticky; top:0; z-index:3; padding:13px 12px; background:var(--sp-subtle); border-bottom:1px solid var(--sp-border); font:550 12px/1.5 'Spartan Geist','Segoe UI',sans-serif; white-space:nowrap; }
  :root body app-root .app-shell .content .table-panel th .resource-name { font:inherit; color:var(--sp-muted); }
  :root body app-root .app-shell .content .table-panel td { padding:12px; font:13px/1.6 'Spartan Geist','Segoe UI',sans-serif; font-variant-numeric:tabular-nums; vertical-align:middle; }
  :root body app-root .app-shell .content .table-panel tbody .resource-name { font-size:14px; font-weight:550; max-width:300px; white-space:normal; overflow-wrap:anywhere; text-align:left; line-height:1.5; }
  :root body app-root .app-shell .content .table-panel td[data-label="Seleccionar"] { position:sticky; left:0; z-index:2; min-width:40px; width:40px; padding:12px 10px; }
  :root body app-root .app-shell .content .table-panel table:has(td[data-label="Seleccionar"]) th:first-child { left:0; z-index:5; min-width:40px; width:40px; padding:13px 10px; }
  :root body app-root .app-shell .content .table-panel td:has(>button.resource-name) { position:sticky; left:0; z-index:2; min-width:280px; box-shadow:1px 0 var(--sp-border); }
  :root body app-root .app-shell .content .table-panel table:has(td[data-label="Seleccionar"]) td:has(>button.resource-name) { left:40px; }
  :root body app-root .app-shell .content .table-panel table:has(td[data-label="Seleccionar"]) th:nth-child(2) { left:40px; z-index:5; box-shadow:1px 0 var(--sp-border); }
  :root body app-root .app-shell .content .table-panel table:not(:has(td[data-label="Seleccionar"])) th:first-child { left:0; z-index:5; box-shadow:1px 0 var(--sp-border); }
  :root body app-root .app-shell .content .table-panel td[data-label="Gestionar"] { position:sticky; right:0; z-index:2; box-shadow:-1px 0 var(--sp-border); }
  :root body app-root .app-shell .content .table-panel table:has(td[data-label="Gestionar"]) th:last-child { right:0; z-index:5; box-shadow:-1px 0 var(--sp-border); }
  :root body app-root .app-shell .content .table-panel td[data-label="Alias"] { max-width:190px; font-size:12px; color:var(--sp-muted); }
  :root body app-root .app-shell .content .table-panel :is(td[data-label="Disco"],td[data-label="Tráfico"],td[data-label="Tamaño"],td[data-label="Cuentas"],td[data-label="Registros"]) { text-align:right; font-family:var(--studio-mono); }
  :root body app-root .app-shell .row-actions { flex-wrap:nowrap; gap:6px; }
  :root body app-root .app-shell .row-actions :is(.outline-button,.icon-button) { min-height:32px; padding:6px 9px; font-size:12px; }
  :root body app-root .app-shell .badge { font:600 11px/1.5 'Spartan Geist','Segoe UI',sans-serif; padding:3px 8px; border-radius:5px; }
  :root body app-root .app-shell .inline-select { font:12px 'Spartan Geist','Segoe UI',sans-serif; min-height:34px; }
  :root body app-root .app-shell app-bulk-actions > section { padding:18px 20px; border:1px solid var(--sp-border); border-left:3px solid var(--sp-accent); background:var(--sp-accent-soft); border-radius:8px; color:var(--sp-ink); }
  :root body app-root .app-shell app-bulk-actions > section > p { color:var(--sp-muted); font-size:13px; }
  :root body app-root .app-shell app-bulk-actions button { background:var(--sp-surface); color:var(--sp-ink); border-color:var(--sp-control-border); border-radius:6px; font-size:13px; padding:9px 12px; }
  :root body app-root .app-shell .empty-state { padding:52px 24px; max-width:520px; margin:auto; text-align:center; }
  :root body app-root .app-shell .empty-state .empty-glyph { display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--sp-border); border-radius:12px; margin:0 auto 18px; background:var(--sp-subtle); color:var(--sp-muted); }
  :root body app-root .app-shell .empty-state h3 { font-size:20px; margin:0 0 10px; }
  :root body app-root .app-shell .empty-state p { font:14px/1.7 'Spartan Geist','Segoe UI',sans-serif; color:var(--sp-muted); }

  /* Group the existing fields; retain their order and native keyboard behavior. */
  :root body app-root .modal-backdrop .modal-header { border-bottom:1px solid var(--sp-border); padding:28px 32px 24px; }
  :root body app-root .modal-backdrop .modal-heading h2 { font-size:27px; line-height:1.25; letter-spacing:-.035em; }
  :root body app-root .modal-backdrop .modal-context { font:12px/1.6 'Spartan Geist','Segoe UI',sans-serif; }
  :root body app-root .modal-backdrop .modal-grid { padding:20px; border:1px solid var(--sp-border); border-radius:8px; background:var(--sp-subtle); gap:22px 18px; }
  :root body app-root .modal-backdrop .modal-field > label { font-size:13px; line-height:1.5; margin-bottom:8px; }
  :root body app-root .modal-backdrop :is(.field-help,.modal-hint) { font-size:13px; line-height:1.65; }
  :root body app-root .modal-backdrop .toggle-list legend { font-size:13px; font-weight:600; padding:0 8px; }
  :root body app-root .modal-backdrop .toggle-row { padding:16px; }
  :root body app-root .modal-backdrop .modal-footer { border-top:1px solid var(--sp-border); gap:12px; }
  :root body app-root .modal-backdrop .modal-footer button { min-height:44px; font-size:14px; }
  :root body app-root :is(.app-shell,.modal-backdrop) :is(button,a,input,select,textarea):focus-visible { outline:2px solid var(--sp-focus); outline-offset:3px; }
}

/* Loading placeholders use the current theme instead of white highlights. */
:root body app-root .app-shell app-overview .metrics .metric-skeleton { border:0; border-right:1px solid var(--sp-border); border-radius:0; padding:24px 18px; background:var(--sp-surface); }
:root body app-root .app-shell app-overview .metrics .metric-skeleton:last-child { border-right:0; }
:root body app-root .app-shell app-overview .metric-skeleton :is(span,strong),
:root body app-root .app-shell .skeleton-row span { background:var(--sp-subtle); background-image:none; animation:desktop-loading 1.4s ease-in-out infinite; }
@keyframes desktop-loading { 50% { opacity:.5; } }
@media (hover:hover) and (pointer:fine) and (min-width:1024px) {
  :root body app-root .app-shell .content .table-panel tbody tr:hover td { background:var(--sp-subtle); }
  :root body app-root .app-shell .content .table-panel tbody tr:has(input[type=checkbox]:checked) td { background:var(--sp-accent-soft); }
  :root body app-root .app-shell .content .table-panel tbody .resource-name:hover { color:var(--sp-accent); text-decoration:underline; text-underline-offset:3px; }
  :root body app-root :is(.app-shell,.modal-backdrop) :is(.primary,.outline-button,.icon-button) { transition:background-color 120ms ease,border-color 120ms ease,transform 120ms ease-out; }
  :root body app-root :is(.app-shell,.modal-backdrop) :is(.primary,.outline-button,.icon-button):active:not(:disabled):not(:focus-visible) { transform:scale(.98); }
}
@media (prefers-reduced-motion:reduce) {
  :root body app-root .app-shell :is(.metric-skeleton span,.metric-skeleton strong,.skeleton-row span) { animation:none; }
  :root body app-root :is(.app-shell,.modal-backdrop) :is(.primary,.outline-button,.icon-button) { transition:none; }
}

/* Session recovery is a loading state, not the sign-in screen. */
:root body app-root .app-shell:has(.auth-panel > [role="status"]) .content:has(>.auth-panel) {
  display:grid; grid-template-columns:minmax(0,1fr); gap:24px;
  align-content:center; min-height:calc(100dvh - 120px);
}
:root body app-root .app-shell:has(.auth-panel > [role="status"]) .content > .page-intro { display:none; }
:root body app-root .app-shell .auth-panel:has(> [role="status"]) {
  grid-column:1; width:100%; max-width:480px; margin:24px auto;
  padding:32px; box-shadow:none; text-align:center;
}
:root body app-root .app-shell .auth-panel:has(> [role="status"]) > :is(h2,.panel-icon) { display:none; }
:root body app-root .app-shell .auth-panel > [role="status"] {
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:0; color:var(--sp-ink); font-size:15px; line-height:1.6;
}
:root body app-root .app-shell .auth-panel > [role="status"]::before {
  content:''; flex:none; width:18px; height:18px; border:2px solid var(--sp-border);
  border-top-color:var(--sp-accent); border-radius:50%;
  animation:session-check-spin 700ms linear infinite;
}
@keyframes session-check-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) {
  :root body app-root .app-shell .auth-panel > [role="status"]::before { animation:none; }
}


/* Panel light studio: complete neutral shell with distinct section accents.
   Requested light appearance is stable across OS color-scheme preferences. */
:root {
 color-scheme:light;
 --sp-canvas:#f0eff4; --sp-surface:#f8f7fa; --sp-subtle:#eef2f8;
 --sp-border:#e0e6ef; --sp-ink:#25334a; --sp-muted:#58677e;
 --sp-accent:#3b63c4; --sp-accent-hover:#2f51aa; --sp-accent-soft:#eaf0ff;
 --sp-on-accent:#f8f7fa; --sp-focus:#4169cc;
 --sp-danger:#a33246; --sp-danger-soft:#fff3f5;
 --sp-warning:#806328; --sp-warning-soft:#fff9eb;
 --sp-control-border:#8190a6; --sp-control-off:#8190a6;
 --sp-code-bg:#f4f7fc; --sp-code-ink:#526173;
 --sp-series-1:#3b63c4; --sp-series-2:#087c91; --sp-series-3:#aa7524; --sp-series-4:#7952b3;
 --sp-shadow:0 4px 18px rgb(42 58 90 / 5%);
 --studio-nav:#f8f7fa; --studio-nav-surface:#f0eef4; --studio-nav-border:#e0e6ef;
 --studio-nav-ink:#25334a; --studio-nav-muted:#58677e; --studio-nav-active:#eaf0ff;
}
:root body app-root .app-shell .sidebar{border-right:1px solid var(--sp-border)}
:root body app-root .app-shell .sidebar .brand strong span{color:var(--sp-accent)}
:root body app-root .app-shell .sidebar .workspace-icon{color:var(--sp-accent);border-radius:8px}
:root body app-root .app-shell .sidebar .nav-item{border-radius:8px}
:root body app-root .app-shell .sidebar .nav-item.active{color:var(--sp-accent);background:var(--sp-accent-soft);box-shadow:inset 3px 0 var(--sp-accent)}
:root body app-root .app-shell .sidebar .nav-item.active:hover{color:var(--sp-accent);background:var(--sp-accent-soft)}
:root body app-root .app-shell .sidebar .nav-item:nth-of-type(4n+2) .nav-glyph{color:#087c91}
:root body app-root .app-shell .sidebar .nav-item:nth-of-type(4n+3) .nav-glyph{color:#7952b3}
:root body app-root .app-shell .sidebar .nav-item:nth-of-type(4n+4) .nav-glyph{color:#aa7524}
:root body app-root .app-shell .sidebar .nav-item.active .nav-glyph{color:var(--sp-accent)}
:root body app-root .app-shell .hero-card{background:linear-gradient(120deg,#eef4ff,#f6f3ff 65%,#f8f7fa);border:1px solid var(--sp-border);border-radius:12px}
:root body app-root .app-shell .hero-card button{background:var(--sp-accent);color:var(--sp-on-accent);border-color:var(--sp-accent)}
:root body app-root .app-shell .hero-card h2 em{color:#6654ad}
:root body app-root .app-shell .resource-icon{background:#eaf0ff;color:#3b63c4}
:root body app-root .app-shell .resource-card:nth-child(4n+2) .resource-icon{background:#eaf8fa;color:#087c91}
:root body app-root .app-shell .resource-card:nth-child(4n+3) .resource-icon{background:#f3edff;color:#7952b3}
:root body app-root .app-shell .resource-card:nth-child(4n+4) .resource-icon{background:#fff7e8;color:#936820}
:root body app-root .app-shell app-overview .metrics button{background:#f8f7fa}
:root body app-root .app-shell app-overview .metrics button:nth-child(4n+1){box-shadow:inset 0 3px #7998e6}
:root body app-root .app-shell app-overview .metrics button:nth-child(4n+2){box-shadow:inset 0 3px #65b2bd}
:root body app-root .app-shell app-overview .metrics button:nth-child(4n+3){box-shadow:inset 0 3px #b299da}
:root body app-root .app-shell app-overview .metrics button:nth-child(4n+4){box-shadow:inset 0 3px #d9b67a}
:root body app-root .app-shell app-overview .metrics button:nth-child(4n+1) strong{color:#3b63c4}
:root body app-root .app-shell app-overview .metrics button:nth-child(4n+2) strong{color:#087c91}
:root body app-root .app-shell app-overview .metrics button:nth-child(4n+3) strong{color:#7952b3}
:root body app-root .app-shell app-overview .metrics button:nth-child(4n+4) strong{color:#936820}
:root body app-root .toasts .toast{background:#f8f7fa;color:var(--sp-ink);border:1px solid var(--sp-border);box-shadow:0 8px 30px rgb(42 58 90 / 12%)}
:root body app-root .toasts :is(.toast-body strong,.toast-body p,.toast-close,.toast-action){color:var(--sp-ink)}
@media(max-width:720px){:root body app-root .app-shell .sidebar{border-right:0}}

/* Explicit Dracula mode; never inferred from an operation state. */
:root[data-theme="dark"] {
 color-scheme:dark;
 --sp-canvas:#282a36; --sp-surface:#303341; --sp-subtle:#383b4c;
 --sp-border:#44475a; --sp-ink:#f8f8f2; --sp-muted:#b8bbcf;
 --sp-accent:#bd93f9; --sp-accent-hover:#cba9fa; --sp-accent-soft:#40364f;
 --sp-on-accent:#282a36; --sp-focus:#ff79c6;
 --sp-danger:#ff9cae; --sp-danger-soft:#432e3c;
 --sp-warning:#f1d58a; --sp-warning-soft:#413c31;
 --sp-control-border:#777e96; --sp-control-off:#777e96;
 --sp-code-bg:#242631; --sp-code-ink:#e5e6f0;
 --sp-series-1:#bd93f9; --sp-series-2:#8be9fd; --sp-series-3:#f1fa8c; --sp-series-4:#ff79c6;
 --sp-shadow:0 4px 18px rgb(0 0 0 / 12%);
 --studio-nav:#242631; --studio-nav-surface:#303341; --studio-nav-border:#44475a;
 --studio-nav-ink:#f8f8f2; --studio-nav-muted:#b8bbcf; --studio-nav-active:#40364f;
}
:root body app-root .top-actions app-theme-toggle{flex:none}
:root[data-theme="dark"] body app-root .app-shell .sidebar .nav-item:nth-of-type(4n+2) .nav-glyph{color:#8be9fd}
:root[data-theme="dark"] body app-root .app-shell .sidebar .nav-item:nth-of-type(4n+3) .nav-glyph{color:#ff79c6}
:root[data-theme="dark"] body app-root .app-shell .sidebar .nav-item:nth-of-type(4n+4) .nav-glyph{color:#f1fa8c}
:root[data-theme="dark"] body app-root .app-shell .sidebar .nav-item.active .nav-glyph{color:var(--sp-accent)}
:root[data-theme="dark"] body app-root .app-shell .hero-card{background:linear-gradient(120deg,#303344,#393047 65%,#303341)}
:root[data-theme="dark"] body app-root .app-shell .hero-card h2 em{color:#bd93f9}
:root[data-theme="dark"] body app-root .app-shell .resource-card .resource-icon{background:#40364f;color:#bd93f9}
:root[data-theme="dark"] body app-root .app-shell .resource-card:nth-child(4n+2) .resource-icon{background:#2b4048;color:#8be9fd}
:root[data-theme="dark"] body app-root .app-shell .resource-card:nth-child(4n+3) .resource-icon{background:#453348;color:#ff79c6}
:root[data-theme="dark"] body app-root .app-shell .resource-card:nth-child(4n+4) .resource-icon{background:#413f31;color:#f1fa8c}
:root[data-theme="dark"] body app-root .app-shell app-overview .metrics button{background:var(--sp-surface)}
:root[data-theme="dark"] body app-root .app-shell app-overview .metrics button:nth-child(4n+1) strong{color:#bd93f9}
:root[data-theme="dark"] body app-root .app-shell app-overview .metrics button:nth-child(4n+2) strong{color:#8be9fd}
:root[data-theme="dark"] body app-root .app-shell app-overview .metrics button:nth-child(4n+3) strong{color:#ff79c6}
:root[data-theme="dark"] body app-root .app-shell app-overview .metrics button:nth-child(4n+4) strong{color:#f1fa8c}
:root[data-theme="dark"] body app-root .toasts .toast{background:var(--sp-surface)}
:root[data-theme="dark"] body app-root .row-badge[data-state="error"]{background:#432e3c!important;color:#ff9cae!important}
:root[data-theme="dark"] body app-root .row-badge[data-state="success"]{background:#2b403c!important;color:#9ae5b8!important}
:root[data-theme="dark"] body app-root .row-badge[data-state="pending"],:root[data-theme="dark"] body app-root .row-badge[data-state="unknown"]{background:#413c31!important;color:#f1d58a!important}
:root[data-theme="dark"] body app-root .row-badge[data-state="running"]{background:#323b50!important;color:#a6c8ff!important}
:root[data-theme="dark"] body app-root .row-badge[data-state="cancelled"]{background:#383b4c!important;color:#c1c4d6!important}
:root[data-theme="dark"] body app-root .app-shell .operation-banner[data-state]{color:var(--sp-ink)!important;border-color:var(--sp-border)!important;background:var(--sp-surface)!important}
:root[data-theme="dark"] body app-root .app-shell .operation-banner[data-state="error"]{background:#432e3c!important}
:root[data-theme="dark"] body app-root .app-shell .operation-banner[data-state="pending"],:root[data-theme="dark"] body app-root .app-shell .operation-banner[data-state="unknown"]{background:#413c31!important}
:root[data-theme="dark"] body app-root .app-shell .job-card pre,:root[data-theme="dark"] body app-root .app-shell .operation-banner pre{background:var(--sp-code-bg)!important;color:var(--sp-code-ink)!important;border-color:var(--sp-border)}
:root[data-theme="dark"] body app-root .app-shell .action-unavailable{color:var(--sp-muted)}
:root[data-theme="dark"] body app-root .app-shell .availability{background:#2b403c;color:#b6e7c8;border-color:#4f7966}
:root[data-theme="dark"] body app-root .app-shell .availability.problem{background:var(--sp-danger-soft);color:var(--sp-danger);border-color:var(--sp-danger)}
:root[data-theme="dark"] body app-root :is(.diagnostic-banner,.dg-impact,.dg-status,.dg-mark){background:var(--sp-danger-soft);color:var(--sp-danger);border-color:var(--sp-border)}
:root[data-theme="dark"] body app-root .field-error{color:var(--sp-danger)}
:root[data-theme="dark"] body app-root :is(input,select,textarea)[aria-invalid="true"]{border-color:#ff9cae!important;box-shadow:0 0 0 1px #ff9cae}
:root[data-theme="dark"] body app-root :is(.modal-error,.form-error){color:var(--sp-danger);background:var(--sp-danger-soft)}
:root[data-theme="dark"] body app-root .danger.primary{background:#ff5555;color:#282a36;border-color:#ff5555}

/* Active forms keep their controls above running-operation notifications. */
:root:has(.modal-backdrop) body app-root .toasts{z-index:19}

:root[data-theme="dark"] body app-root .dg-cause{background:var(--sp-accent-soft);color:var(--sp-ink);border-color:var(--sp-border)}
:root[data-theme="dark"] body app-root .dg-cause :is(strong,p){color:var(--sp-ink)}
:root[data-theme="dark"] body app-root :is(.dg-copy,.dg-close,.dg-clear,.dg-footer button){background:var(--sp-subtle);color:var(--sp-ink);border-color:var(--sp-control-border)}