/* ============================================================
   Synaptyx — App Shell layout (vt-0987)
   ============================================================
   Re-implements the core app-shell LAYOUT that was lost when
   redesign Phase 1 (ec7643a) archived themes/app/standalone.css
   to design/_legacy-*.css. The new design CSS (tokens/components/
   specialized/auth) restyled the dashboard + individual widgets
   but never re-implemented the shell scaffolding:
     .topbar / .sh-topbar  — fixed horizontal chrome (status bar)
     .grid  / .rail / .viewer — the sessions/spawn console layout
     .footbar / .sh-foot   — fixed bottom settings nav
     .notif-drawer         — off-canvas notifications drawer
     #archive/#sdetail/... — fullscreen page overlays
   Ported from _legacy-app.css, re-pointed onto the warm-coral
   design tokens via the legacy-var alias layer below.

   It ALSO fixes view-switching: the legacy `main.grid` (spawn/
   sessions/viewer console) is no longer always-visible under the
   new `#page-root` dashboard. app.js sets `#app[data-view=...]`
   and the rules at the bottom show exactly one base view at a time.
   ============================================================ */

/* ─── LEGACY VAR ALIASES → new design tokens ───────────────────
   The ported selectors below reference the legacy custom props
   (--bg, --line, --panel, --text, --topbar-h, …). Map them onto
   the warm-coral palette so the shell inherits the new look. */
:root {
  --topbar-h: 56px;
  --footbar-h: 64px;

  /* surfaces */
  --bg:        var(--bg-canvas);
  --bg-warm:   var(--bg-surface);
  --bg-deep:   var(--bg-canvas);
  --bg-hover:  var(--bg-surface-2);
  --panel:     var(--bg-surface);
  --panel-2:   var(--bg-surface-2);
  --surface:   var(--bg-surface);
  --surface-2: var(--bg-surface-2);

  /* lines / borders */
  --line:      var(--border-default);
  --line-2:    var(--border-strong);
  --border:    var(--border-default);

  /* text */
  --text:        var(--fg-primary);
  --text-dim:    var(--fg-secondary);
  --text-faint:  var(--fg-muted);
  --fg:          var(--fg-primary);

  /* semantic */
  --ok:          var(--success);
  --ok-glow:     var(--success-soft);
  --warn:        var(--warning);
  --warn-glow:   var(--warning-soft);
  --err:         var(--danger);
  --danger-glow: var(--danger-soft);

  --radius-sm:   var(--radius-2);
  --radius:      var(--radius-3);
}

[hidden] { display: none !important; }

/* ============ APP SHELL FRAME ============ */
/* topbar (56px) + footbar (64px) are fixed; main is offset to sit
   between them. */
#app { display: block; min-height: 100vh; }
#app > main.grid {
  height: calc(100vh - var(--topbar-h) - var(--footbar-h));
  margin-top: var(--topbar-h);
  margin-bottom: var(--footbar-h);
  box-sizing: border-box;
}
/* The new SPA dashboard mounts into #page-root (routes.js). Offset it
   below the fixed topbar / above the fixed footbar so its content
   is not hidden behind the chrome. Scroll within. */
#app > #page-root {
  min-height: calc(100vh - var(--topbar-h) - var(--footbar-h));
  margin-top: var(--topbar-h);
  margin-bottom: var(--footbar-h);
  padding: var(--space-5) var(--space-6);
  box-sizing: border-box;
  overflow-y: auto;
}

/* ============ TOPBAR ============ */
.topbar, .sh-topbar {
  display: flex; align-items: center; gap: var(--space-5);
  padding: 0 var(--space-5); background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--topbar-h);
}
.brand, .sh-topbar__brand {
  display: flex; align-items: baseline; gap: var(--space-2);
  line-height: 1; flex: 0 0 auto;
}
.sh-topbar__brand-name {
  font-family: var(--font-mono); font-size: 1.05rem; font-weight: var(--fw-bold);
  letter-spacing: 0.04em; color: var(--fg-primary);
}
.brand-sub, .sh-topbar__brand .brand-sub {
  font-size: var(--fz-meta); color: var(--accent);
  letter-spacing: var(--tr-meta-upper); text-transform: uppercase;
}
.scope-switcher, .sh-scope-mount { flex: 0 0 auto; }

/* horizontal stat bar — was rendering stacked because .status-bar had
   no flex rules in any loaded sheet. */
.status-bar, .sh-crumbs {
  display: flex; flex-flow: row nowrap; align-items: center;
  gap: var(--space-5); margin: 0 auto;
}
.status-bar .stat {
  display: flex; flex-flow: row nowrap; align-items: baseline; gap: var(--space-2);
  line-height: 1.2; white-space: nowrap;
}
.status-bar .stat .lbl {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-muted);
}
.status-bar .stat .val { font-size: 0.95rem; font-weight: var(--fw-medium); color: var(--fg-primary); }
.status-bar .stat .val-ok   { color: var(--success); }
.status-bar .stat .val-warn { color: var(--warning); }

.controls, .sh-topbar__right {
  display: flex; align-items: center; gap: var(--space-2);
  flex: 0 0 auto; margin-left: auto;
}
.sh-search-btn { display: inline-flex; align-items: center; gap: var(--space-2); }
.sh-search-btn-kbd { display: inline-flex; gap: 2px; }
.sx-kbd {
  font-family: var(--font-mono); font-size: 0.7rem; padding: 1px 4px;
  border: 1px solid var(--border-default); border-radius: var(--radius-1);
  color: var(--fg-muted); background: var(--bg-surface-2);
}
.active-nav {
  color: var(--accent) !important;
  border-bottom: 2px solid var(--accent) !important;
}
.stack-dot .stack-dot-icon { color: var(--fg-muted); }
.stack-dot[data-state="ok"]   .stack-dot-icon { color: var(--success); }
.stack-dot[data-state="warn"] .stack-dot-icon { color: var(--warning); }
.stack-dot[data-state="err"]  .stack-dot-icon { color: var(--danger); }
@keyframes spin-once { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.spin { animation: spin-once .4s linear; }

/* ============ GRID (sessions / spawn console) ============ */
main.grid {
  display: grid; grid-template-columns: 320px 1fr; min-height: 0;
  background: var(--bg-canvas);
}
.rail {
  border-right: 1px solid var(--border-default); background: var(--bg-surface);
  overflow-y: auto; padding: 0; min-height: 0;
}
.rail::-webkit-scrollbar { width: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--border-strong); }

.panel { padding: var(--space-4) var(--space-4); border-bottom: 1px solid var(--border-default); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-3);
}
.panel-head h3 {
  margin: 0; font-family: var(--font-mono); font-size: 0.72rem; font-weight: var(--fw-bold);
  letter-spacing: 0.22em; color: var(--fg-secondary); text-transform: uppercase;
}
.pill {
  display: inline-flex; align-items: center; padding: 1px 8px;
  background: var(--bg-surface-2); color: var(--fg-secondary);
  border: 1px solid var(--border-default); font-size: 0.72rem; letter-spacing: 0.08em;
  border-radius: var(--radius-pill);
}
.toggle-row { display: inline-flex; align-items: center; gap: 0.25em; cursor: pointer; }
.toggle-row input { margin: 0; accent-color: var(--accent); }
.toggle-row .lbl { font-size: 0.65rem; color: var(--fg-muted); }

.list { list-style: none; padding: 0; margin: 0; }
.list li {
  display: grid; grid-template-columns: 14px 1fr auto; gap: var(--space-2);
  align-items: center; padding: 0.45em 0.6em; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius-1);
  font-size: 0.88rem; transition: background var(--dur-hover), border-color var(--dur-hover);
}
.list li:hover { background: var(--bg-surface-2); border-color: var(--border-default); }
.list li.active { background: var(--accent-soft); border-color: var(--accent); }
.list-sessions li { grid-template-columns: 14px 1fr auto auto; font-size: 0.82rem; gap: 0.5em; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-muted); }
.dot.on  { background: var(--success); animation: pulse 2.4s ease-in-out infinite; }
.dot.off { background: var(--fg-muted); }
.dot.warn{ background: var(--warning); }
.dot.err { background: var(--danger); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

.sess-id   { color: var(--fg-primary); font-variant-numeric: tabular-nums; }
.sess-host { color: var(--fg-muted); font-size: 0.9em; }
.sess-age  { color: var(--fg-muted); font-size: 0.82em; min-width: 4em; text-align: right; font-variant-numeric: tabular-nums; }

.panel-spawn label { display: block; margin-bottom: 0.55em; }
.panel-spawn label .lbl { display: block; margin-bottom: 0.25em; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
.panel-spawn input, .panel-spawn select, .panel-spawn textarea {
  width: 100%; background: var(--bg-canvas); color: var(--fg-primary);
  border: 1px solid var(--border-default); border-radius: var(--radius-1);
  padding: 0.45em 0.6em; font-family: var(--font-mono); font-size: 0.82rem; outline: none;
}
.panel-spawn input:focus, .panel-spawn select:focus, .panel-spawn textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}
.panel-spawn textarea { min-height: 2.4em; resize: vertical; }
.panel-spawn .toggle-row { display: flex; align-items: center; gap: 0.4em; }
.panel-spawn .toggle-row input[type=checkbox] { width: auto; }
.panel-spawn summary { color: var(--fg-secondary); }

/* ============ HOST DETAIL ============ */
.host-detail { display: grid; grid-template-rows: auto 1fr; min-width: 0; overflow: hidden; background: var(--bg-canvas); }
.host-detail-head {
  display: flex; gap: var(--space-5); align-items: center; justify-content: space-between;
  padding: 0.9em 1.4em; background: var(--bg-surface); border-bottom: 1px solid var(--border-default);
}
.host-detail-head [contenteditable] { outline: 0; border-bottom: 1px dashed transparent; }
.host-detail-head [contenteditable]:focus,
.host-detail-head [contenteditable]:hover { border-bottom-color: var(--accent); }
.host-detail-body { overflow-y: auto; padding: 1.4em 1.6em; }
.hd-section { margin-bottom: 2em; }
.hd-section h4 {
  margin: 0 0 0.8em; font-family: var(--font-mono); font-size: 0.72rem; font-weight: var(--fw-bold);
  color: var(--fg-secondary); letter-spacing: 0.22em; text-transform: uppercase;
}
.hd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5em 1.2em; }
.hd-grid > div { display: flex; flex-direction: column; gap: 2px; }
.hd-grid .lbl { font-size: 0.68rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.35em; margin-bottom: 0.6em; }
.chip {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.15em 0.55em; background: var(--bg-surface-2);
  border: 1px solid var(--border-default); color: var(--fg-primary); font-size: 0.82rem;
  border-radius: var(--radius-1);
}
.chip:hover { border-color: var(--accent); }

/* ============ VIEWER (session output) ============ */
.viewer { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-canvas); }
.viewer-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.4em; align-items: center;
  padding: 0.9em 1.4em; background: var(--bg-surface); border-bottom: 1px solid var(--border-default);
}
.viewer-id { display: flex; align-items: baseline; gap: 0.6em; }
.viewer-id .lbl { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.callsign { font-family: var(--font-mono); font-size: 1.05rem; color: var(--accent); letter-spacing: -0.01em; }
.viewer-meta {
  display: flex; gap: 0.55em; align-items: center;
  color: var(--fg-secondary); font-size: 0.82rem; min-width: 0;
}
.viewer-meta .lbl { color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; }
.viewer-meta .val { color: var(--fg-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22em; }
.viewer-meta .sep { color: var(--fg-muted); }
.viewer-actions { display: flex; gap: var(--space-2); align-items: center; }
.viewer-raw-toggle {
  display: inline-flex; align-items: center; gap: 0.35em;
  background: transparent; color: var(--fg-secondary); border: 1px solid var(--border-default);
  border-radius: var(--radius-1); padding: 0.3em 0.6em; font-size: 0.78rem; cursor: pointer;
}
.viewer-raw-toggle:hover { border-color: var(--accent); color: var(--accent); }
.viewer-body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; background: var(--bg-canvas); }
.viewer-body > * { width: 100%; }
.viewer.exited .callsign { color: var(--fg-secondary); }

/* ============ FOOTBAR (settings nav) ============ */
.footbar, .sh-foot {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--space-5); background: var(--bg-surface);
  border-top: 1px solid var(--border-default);
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  height: var(--footbar-h);
}
.footbar-row, .sh-foot__row {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-height: 0;
}
.footbar-settings .lbl, .sh-foot__row .lbl {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent);
  letter-spacing: 0.14em; margin-right: var(--space-2);
}

/* ---- vt-0991 (wave2): grouped admin menu ---- */
.adminmenu { position: relative; display: inline-flex; }
.adminmenu-trigger {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-weight: 600; letter-spacing: 0.02em;
}
.adminmenu-trigger-icon { font-size: 0.95em; }
.adminmenu-trigger-caret {
  font-size: 0.65em; opacity: 0.6; transition: transform 120ms ease;
}
.adminmenu--open .adminmenu-trigger-caret { transform: rotate(180deg); }
/* Coral highlight when the menu is open OR an admin area is active. */
.adminmenu--open .adminmenu-trigger,
.adminmenu-trigger--active {
  color: var(--accent);
  border-color: var(--accent);
}
.adminmenu-popover {
  position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 200;
  min-width: 480px;
  display: flex; gap: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2, 0 8px 28px rgba(0,0,0,0.35));
}
.adminmenu-section {
  display: flex; flex-direction: column; gap: 2px; min-width: 140px;
}
.adminmenu-section-head {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  color: var(--fg-tertiary, var(--fg-secondary)); opacity: 0.75;
  padding: 0 0.5em; margin-bottom: 0.35em; text-transform: uppercase;
}
.adminmenu-item {
  display: flex; align-items: center; gap: 0.6em;
  width: 100%; text-align: left;
  padding: 0.42em 0.6em; border: 1px solid transparent; border-radius: var(--radius-1);
  background: transparent; color: var(--fg-primary); cursor: pointer;
  font-size: 0.84rem; line-height: 1.2;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.adminmenu-item:hover,
.adminmenu-item:focus-visible {
  background: var(--bg-canvas);
  border-color: var(--border-default);
  outline: none;
}
.adminmenu-item.active-nav {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.adminmenu-item-icon {
  display: inline-flex; width: 1.3em; justify-content: center; flex: none;
  font-size: 0.95em;
}
.footbar-controls { display: inline-flex; align-items: center; gap: var(--space-2); }

.sh-theme { display: inline-flex; gap: 2px; }
.sh-theme button {
  background: transparent; border: 1px solid var(--border-default);
  border-radius: var(--radius-1); color: var(--fg-secondary);
  padding: 0.2em 0.5em; cursor: pointer; font-size: 0.85rem;
}
.sh-theme button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.switcher, #lang-select {
  background: var(--bg-canvas); color: var(--fg-primary);
  border: 1px solid var(--border-default); border-radius: var(--radius-1);
  padding: 0.25em 0.5em; font-size: 0.82rem;
}

/* ============ PAGE OVERLAYS ============ */
/* Fullscreen routed pages (archive, sessions detail, groups, prices,
   vault, health, audit, users, roles, profile, …). They cover BOTH
   base views (#page-root + main.grid), sitting above them but below
   the fixed topbar/footbar. */
#archive, #sdetail, #costview {
  position: fixed; top: var(--topbar-h); bottom: var(--footbar-h);
  left: 0; right: 0; z-index: 80; background: var(--bg-canvas);
  display: grid; grid-template-rows: auto auto 1fr auto; overflow: auto;
}
#groupsview, #workflowsview, #workfloweditor, #workflowrunviewer, #pricesview,
#vaultview, #healthview, #auditview, #agentrolesview, #recyclebinview,
#audit-screen, #user-list-screen, #profile-screen {
  position: fixed; top: var(--topbar-h); bottom: var(--footbar-h);
  left: 0; right: 0; z-index: 80; background: var(--bg-canvas);
  display: flex; flex-direction: column; overflow: auto;
}
/* ---- vt-0991 (wave2): div-based editor modals (roles / prices / groups).
   These overlay rules were lost when redesign Phase 1 archived app.css —
   without them the modals rendered `position:static` at the BOTTOM of their
   panel (off-screen) instead of floating centered. Re-added so clicking a
   role / price opens a usable, centered editor above the page + footbar. */
#agent-role-modal, #price-modal, #group-detail-modal {
  position: fixed; top: var(--topbar-h); bottom: var(--footbar-h);
  left: 0; right: 0; z-index: 200;
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 2em 1em;
  background: color-mix(in srgb, var(--bg-canvas) 55%, transparent);
}
#agent-role-modal[hidden], #price-modal[hidden], #group-detail-modal[hidden] { display: none; }
#agent-role-modal .gd-frame, #price-modal .gd-frame, #group-detail-modal .gd-frame {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-3); box-shadow: var(--shadow-2, 0 12px 40px rgba(0,0,0,0.4));
  max-width: 95vw;
}
#agent-role-modal .gd-head, #price-modal .gd-head, #group-detail-modal .gd-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-default);
}
#agent-role-modal .gd-body, #price-modal .gd-body, #group-detail-modal .gd-body {
  padding: var(--space-4);
}
#agent-role-modal .gd-body input, #agent-role-modal .gd-body textarea,
#price-modal .gd-body input, #price-modal .gd-body textarea,
#group-detail-modal .gd-body input, #group-detail-modal .gd-body textarea {
  width: 100%; box-sizing: border-box; margin: 0.15em 0 0.6em;
  padding: 0.45em 0.6em; background: var(--bg-canvas);
  border: 1px solid var(--border-default); border-radius: var(--radius-1);
  color: var(--fg-primary); font-size: 0.85rem;
}
#agent-role-modal .gd-body .lbl, #price-modal .gd-body .lbl, #group-detail-modal .gd-body .lbl {
  display: block; margin-top: 0.4em;
}

.archive-head, .sd-head, .sa-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9em 1.4em; background: var(--bg-surface); border-bottom: 1px solid var(--border-default);
}
.archive-filters {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end;
  padding: var(--space-4); border-bottom: 1px solid var(--border-default);
}
.archive-table-wrap { overflow: auto; flex: 1; min-height: 0; }
.archive-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.archive-table th {
  position: sticky; top: 0; background: var(--bg-surface); color: var(--fg-muted);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.6em 1em; border-bottom: 1px solid var(--border-default); text-align: left;
}
.archive-table td { padding: 0.6em 1em; border-bottom: 1px solid var(--border-subtle); }
.archive-table tr:hover td { background: var(--bg-surface-2); }
.archive-foot { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-default); }

.empty-state { color: var(--fg-muted); text-align: center; padding: 3rem; font-size: 0.9rem; }

/* ============ CONFIRM DIALOG (Shell.confirm / ShellTemplates.confirmModal) ====
   vt-1206: these classes had NO rules in any served stylesheet — the dialog
   rendered as an unstyled in-flow block underneath the fixed footbar
   (z-index 100), which intercepted clicks on [data-confirm-ok]. */
.sh-confirm-overlay {
  position: fixed; inset: 0; z-index: 9100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.4);
}
.sh-confirm {
  position: relative; z-index: 1;
  width: min(440px, calc(100vw - 32px));
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-4); box-shadow: var(--shadow-3);
  padding: var(--space-5);
}
.sh-confirm__head { display: flex; gap: var(--space-3); align-items: flex-start; }
.sh-confirm__icon { flex-shrink: 0; display: inline-flex; margin-top: 2px; }
.sh-confirm__icon--danger { color: var(--danger); }
.sh-confirm__icon--warn { color: var(--warning, var(--accent)); }
.sh-confirm__title { margin: 0 0 var(--space-2); font-size: 1rem; }
.sh-confirm__body { margin: 0; color: var(--fg-secondary); }
.sh-confirm__type { margin-top: var(--space-4); }
.sh-confirm__foot {
  display: flex; justify-content: flex-end; gap: var(--space-2);
  margin-top: var(--space-5);
}

/* ============ NOTIFICATION DRAWER (off-canvas) ============ */
/* Was rendering inline/visible because the off-screen + transition
   rules lived in the archived sheet. notification-drawer.js toggles
   .is-open + aria-hidden; default state must be off-screen. */
/* New drawer markup (ShellTemplates.notifDrawer): an OVERLAY aside
   (.sh-drawer-overlay.notif-drawer) holds a flex-1 click-catcher spacer
   plus the actual right-side panel (.sh-drawer.notif-drawer-inner). */
.sh-drawer-overlay, .notif-drawer.sh-drawer-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; flex-direction: row;
  background: rgba(0,0,0,0); pointer-events: none;
  transition: background var(--dur-drawer) var(--ease-out);
}
.sh-drawer-overlay[aria-hidden="false"], .sh-drawer-overlay.is-open {
  background: rgba(0,0,0,.4); pointer-events: auto;
}
.sh-drawer-overlay > [data-close-notif] { flex: 1; }
.sh-drawer {
  width: 400px; max-width: 90vw; margin-left: auto;
  margin-top: var(--topbar-h); margin-bottom: var(--footbar-h);
  background: var(--bg-surface); border-left: 1px solid var(--border-default);
  display: flex; flex-direction: column; min-height: 0;
  transform: translateX(110%); transition: transform var(--dur-drawer) var(--ease-out);
  box-shadow: var(--shadow-3); pointer-events: auto;
}
.sh-drawer-overlay[aria-hidden="false"] .sh-drawer,
.sh-drawer-overlay.is-open .sh-drawer { transform: translateX(0); }
.sh-drawer__head { display: flex; align-items: center; gap: 0.5em; padding: 0.8em 1em; border-bottom: 1px solid var(--border-default); }
.sh-drawer__actions { display: flex; align-items: center; gap: 0.35em; margin-left: auto; }
.sh-drawer__filters { display: flex; gap: 0.4em; padding: 0.6em 1em; border-bottom: 1px solid var(--border-default); }
.sh-filter-pill {
  height: 28px !important; padding: 0 var(--space-3) !important;
  background: transparent !important; border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-pill) !important; color: var(--fg-secondary) !important;
  font-size: var(--fz-meta) !important; cursor: pointer;
}
.sh-filter-pill[aria-pressed="true"] { background: var(--accent-soft) !important; border-color: var(--accent) !important; color: var(--accent) !important; }
.sh-drawer__list { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; min-height: 0; }

/* Legacy fallback drawer (no overlay wrapper) — still off-canvas. */
.notif-drawer:not(.sh-drawer-overlay) {
  position: fixed; top: var(--topbar-h); right: -440px; bottom: var(--footbar-h);
  width: 400px; max-width: 90vw;
  background: var(--bg-surface); border-left: 1px solid var(--border-default);
  z-index: 9000; display: flex; flex-direction: column;
  transition: right var(--dur-drawer) var(--ease-out);
  box-shadow: var(--shadow-3);
}
.notif-drawer:not(.sh-drawer-overlay).is-open { right: 0; }
.notif-drawer:not(.sh-drawer-overlay)[aria-hidden="true"] { right: -440px; }
.notif-drawer-head {
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.8em 1em; border-bottom: 1px solid var(--border-default);
}
.notif-drawer-title { margin: 0; font-size: 1rem; flex: 1; color: var(--fg-primary); }
.notif-drawer-mark-all, .notif-drawer-close, .notif-drawer-prefs {
  background: transparent; border: 1px solid var(--border-default);
  color: var(--fg-secondary); padding: 0.25em 0.55em; cursor: pointer;
  font-size: 0.75rem; border-radius: var(--radius-1); text-decoration: none;
}
.notif-drawer-mark-all:hover, .notif-drawer-close:hover, .notif-drawer-prefs:hover { color: var(--fg-primary); border-color: var(--fg-muted); }
.notif-drawer-list { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; }
.notif-bell { position: relative; padding: 0.25em 0.55em; font-size: 1.05rem; background: transparent; border: 0; cursor: pointer; color: var(--fg-secondary); }
.notif-bell-badge {
  position: absolute; top: -2px; right: -2px; background: var(--danger); color: var(--fg-on-accent);
  font-size: 0.58rem; min-width: 1.5em; padding: 0.1em 0.35em; border-radius: var(--radius-pill);
  line-height: 1.2; text-align: center; font-weight: var(--fw-bold);
}
.notif-row {
  display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle); position: relative;
}
.notif-row.is-read { opacity: 0.6; }
.notif-row:hover { background: var(--bg-surface-2); }
.notif-empty, .notif-loading, .notif-error { text-align: center; padding: 2em 1em; color: var(--fg-secondary); font-size: 0.9rem; list-style: none; }

/* ============ VIEW SWITCHING ============ */
/* The new dashboard (#page-root, mounted by routes.js) and the legacy
   console (main.grid) are mutually exclusive base views. app.js sets
   `#app[data-view]` in setPage(). Fullscreen overlays (z:80) cover
   whichever base view is active, so they need no toggle here. */
/* Default (before app.js setPage() sets data-view, or if it is absent):
   behave like the dashboard route — hide the legacy console so it never
   flashes stacked under the dashboard during boot. */
#app:not([data-view]) > main.grid { display: none; }
#app[data-view="dashboard"] > main.grid { display: none; }
#app[data-view="sessions"]  > #page-root { display: none; }
/* When a fullscreen overlay page is active we hide BOTH base views so
   the overlay's own scroll container is the only scrollable surface and
   no stale content peeks through a transparent edge. */
#app[data-view="overlay"] > main.grid,
#app[data-view="overlay"] > #page-root { display: none; }

/* ============================================================
   LEGACY COMPONENT BRIDGE (vt-0988)
   ============================================================
   Phase 1 of the redesign archived themes/app/standalone.css to
   design/_legacy-*.css and never re-ported the per-COMPONENT rules.
   The new design CSS only styled the new sx-* components + dashboard,
   so every legacy widget (buttons, inputs, palette, notification
   drawer, profile menu, language switcher, badges, tables, tabs,
   chips, modals, links) rendered with browser-default chrome.

   These rules port those components onto the warm-coral design
   tokens. They live AFTER the layout above so they win, and use the
   legacy-var alias layer at the top of this file so they pick up the
   coral palette automatically. sx-* components are excluded via
   :not() so they keep their own (already-correct) styling.
   ============================================================ */

/* ─── BUTTONS ───────────────────────────────────────────────────
   Legacy markup uses bare <button>, .btn-primary/.btn-ghost/
   .btn-outline/.btn-danger/.btn-row/.btn-sm/.btn-icon. Give them the
   design-system look. sx-btn buttons (which set their own bg/border/
   color/height) are excluded so they are untouched. */

/* Base look for any bare button inside the shell that is NOT an sx-btn
   and NOT one of the special chrome toggles (avatar trigger, bell,
   theme swatch, language select handled separately). */
#app button:not(.sx-btn):not(.profile-trigger):not(.notif-bell):not(.sh-theme button):not(.notif-bell-badge),
.palette-frame button:not(.sx-btn),
dialog button:not(.sx-btn) {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4); height: 36px;
  font-family: var(--font-body); font-size: var(--fz-body);
  font-weight: var(--fw-medium); line-height: 1;
  border-radius: var(--radius-3);
  border: 1px solid var(--border-default);
  background: var(--bg-surface); color: var(--fg-primary);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out);
  user-select: none;
}
#app button:not(.sx-btn):not(.profile-trigger):not(.notif-bell):hover:not(:disabled),
dialog button:not(.sx-btn):hover:not(:disabled) {
  background: var(--bg-surface-2); border-color: var(--border-strong);
}
#app button:not(.sx-btn):disabled,
dialog button:not(.sx-btn):disabled { opacity: 0.5; cursor: not-allowed; }

/* Primary — filled coral */
.btn-primary,
button[type="submit"]:not(.sx-btn):not(.btn-ghost):not(.btn-outline):not(.btn-danger) {
  background: var(--accent) !important;
  color: var(--fg-on-accent) !important;
  border: 1px solid var(--accent) !important;
  font-weight: var(--fw-medium);
}
.btn-primary:hover:not(:disabled),
button[type="submit"]:not(.sx-btn):not(.btn-ghost):hover:not(:disabled) {
  background: var(--accent-hover) !important; border-color: var(--accent-hover) !important;
  color: var(--fg-on-accent) !important;
}
.btn-primary:active:not(:disabled) { background: var(--accent-active) !important; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary--full, .btn-ghost--full { width: 100%; }

/* Ghost — transparent at rest, surface on hover */
.btn-ghost:not(.sx-btn) {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--fg-secondary) !important;
}
.btn-ghost:not(.sx-btn):hover:not(:disabled) {
  background: var(--bg-surface-2) !important;
  border-color: var(--border-default) !important;
  color: var(--fg-primary) !important;
}
.btn-ghost.active-nav,
.btn-ghost.active {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

/* Outline — visible border at rest */
.btn-outline:not(.sx-btn) {
  background: transparent !important;
  border-color: var(--border-default) !important;
  color: var(--fg-secondary) !important;
}
.btn-outline:not(.sx-btn):hover:not(:disabled) {
  border-color: var(--accent) !important; color: var(--accent) !important;
}

/* Danger — destructive */
.btn-danger:not(.sx-btn) {
  background: transparent !important;
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}
.btn-danger:not(.sx-btn):hover:not(:disabled) {
  background: var(--danger) !important; color: var(--fg-on-accent) !important;
}
.btn-danger:disabled { opacity: 0.4; cursor: not-allowed; }

/* Small modifier */
.btn-sm { height: 28px !important; padding: 0 var(--space-3) !important; font-size: var(--fz-meta) !important; }

/* Compact row-action button (tables: run/delete/edit) */
.btn-row {
  height: 28px; padding: 0 var(--space-3) !important;
  font-size: var(--fz-meta) !important; font-family: var(--font-mono);
  background: transparent !important; color: var(--fg-secondary) !important;
  border: 1px solid var(--border-default) !important; border-radius: var(--radius-2) !important;
}
.btn-row:hover:not(:disabled) { border-color: var(--accent) !important; color: var(--accent) !important; }
.btn-row + .btn-row { margin-left: var(--space-2); }

/* Icon-only square button (refresh, cleanup) */
.btn-icon:not(.sx-btn) {
  width: 32px; padding: 0 !important;
  background: transparent !important; color: var(--fg-secondary) !important;
  border: 1px solid var(--border-default) !important;
}
.btn-icon:not(.sx-btn):hover:not(:disabled) { color: var(--fg-primary) !important; border-color: var(--border-strong) !important; }

/* Button group (period selectors) */
.btn-group { display: inline-flex; gap: 0; }
.btn-group .btn-outline { border-radius: 0 !important; border-right-width: 0 !important; }
.btn-group .btn-outline:first-child { border-radius: var(--radius-2) 0 0 var(--radius-2) !important; }
.btn-group .btn-outline:last-child { border-radius: 0 var(--radius-2) var(--radius-2) 0 !important; border-right-width: 1px !important; }

/* Text/link buttons */
.link-btn {
  background: transparent !important; border: 0 !important; height: auto !important;
  padding: 0 !important; color: var(--accent) !important; cursor: pointer;
  font-family: var(--font-mono); font-size: inherit; text-align: left;
}
.link-btn:hover { text-decoration: underline; }

/* ─── FORM CONTROLS ─────────────────────────────────────────────
   Bare inputs/selects/textareas that are NOT sx-* get the design look. */
#app input:not(.sx-input):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.sx-toggle):not(.switcher),
#app select:not(.sx-select):not(.switcher),
#app textarea:not(.sx-textarea),
dialog input:not(.sx-input):not([type="checkbox"]):not([type="radio"]),
dialog select:not(.sx-select),
dialog textarea:not(.sx-textarea),
.palette-frame input {
  background: var(--bg-canvas); color: var(--fg-primary);
  border: 1px solid var(--border-default); border-radius: var(--radius-2);
  padding: 0.5em 0.7em; font-family: var(--font-body); font-size: var(--fz-meta);
  line-height: 1.4; outline: none;
  transition: border-color var(--dur-hover), box-shadow var(--dur-hover);
}
#app input:not(.sx-input):not([type=checkbox]):not([type=radio]):not(.switcher):focus,
#app select:not(.sx-select):not(.switcher):focus,
#app textarea:not(.sx-textarea):focus,
dialog input:not(.sx-input):focus, dialog select:not(.sx-select):focus,
dialog textarea:not(.sx-textarea):focus,
.palette-frame input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
#app textarea:not(.sx-textarea), dialog textarea:not(.sx-textarea) { resize: vertical; min-height: 80px; }
/* native number spinner suppression */
#app input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
#app input[type="number"]::-webkit-inner-spin-button,
#app input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* native select chevron */
#app select:not(.sx-select):not(.switcher), dialog select:not(.sx-select) {
  appearance: none; -webkit-appearance: none; padding-right: 2em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path stroke='%237a7468' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round' d='M3 5l3 3 3-3'/></svg>");
  background-repeat: no-repeat; background-position: right 0.6em center;
}
/* inline validation */
input.invalid, textarea.invalid, select.invalid,
#app input:invalid:not(:placeholder-shown),
#app textarea:invalid:not(:placeholder-shown) {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px var(--danger-soft) !important;
}
.field-error, .err-msg {
  display: block; color: var(--danger); font: var(--fz-meta)/1.3 var(--font-mono);
  margin: 0.15em 0 0.5em; min-height: 1em;
}
.field-error:empty { display: none; }
.form-msg { font-size: var(--fz-meta); color: var(--fg-secondary); }
.status-ok { color: var(--success); font-size: var(--fz-meta); }
.status-err { color: var(--danger); font-size: var(--fz-meta); }
.status-warn { color: var(--warning); font-size: var(--fz-meta); }
/* spawn panel: explicit width:100% for stacked form fields */
.panel-spawn input:not([type=checkbox]), .panel-spawn select, .panel-spawn textarea { width: 100%; }
.panel-spawn button { width: 100%; }

/* ─── LANGUAGE SWITCHER + .switcher selects ─────────────────────
   #lang-select is class="switcher sx-select"; sx-select forces
   width:100% which made it a full-footer-width bar. Constrain it to a
   compact dropdown and give .switcher selects the design look. */
.switcher, #lang-select.sx-select, #lang-select {
  width: auto !important; flex: 0 0 auto;
  display: inline-flex; align-items: center; height: 30px;
  background: var(--bg-surface); color: var(--fg-secondary);
  border: 1px solid var(--border-default); border-radius: var(--radius-2);
  font-family: var(--font-mono); font-size: var(--fz-meta);
  padding: 0 1.8em 0 0.6em; margin: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path stroke='%237a7468' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round' d='M3 5l3 3 3-3'/></svg>");
  background-repeat: no-repeat; background-position: right 0.5em center;
}
.switcher:hover, #lang-select:hover { border-color: var(--accent); color: var(--fg-primary); }
.switcher:focus, #lang-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* ─── COMMAND PALETTE (⌘K) ──────────────────────────────────────
   .palette-overlay covers the viewport; the frame is a centered card.
   Was rendering as a bare stacked list at the bottom. */
.app-dialog-overlay, .modal-overlay, .dialog-overlay, .palette-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 400; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh; backdrop-filter: blur(2px);
}
.palette-frame {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-4); width: min(640px, 90vw); max-height: 70vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--shadow-3);
}
.sh-cmd__search {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 14px; border-bottom: 1px solid var(--border-default);
  color: var(--fg-muted);
}
.sh-cmd__search > svg { flex-shrink: 0; }
.palette-input, .sh-cmd__search .palette-input {
  flex: 1; min-width: 0;
  background: transparent !important; border: none !important; border-radius: 0 !important;
  padding: 12px 0 !important; color: var(--fg-primary);
  font: var(--fz-body)/1.4 var(--font-body); outline: none;
}
.palette-input:focus { box-shadow: none !important; }
.palette-input::placeholder { color: var(--fg-muted); }
.palette-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.palette-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; min-height: 0; }
.palette-item {
  display: grid; grid-template-columns: 24px 1fr auto auto; gap: 10px;
  align-items: center;
  padding: 8px 12px; cursor: pointer; border-radius: var(--radius-2);
  font: var(--fz-meta)/1.4 var(--font-body); color: var(--fg-primary);
}
.palette-item.active, .palette-item:hover { background: var(--accent-soft); color: var(--accent); }
.palette-icon { text-align: center; color: var(--fg-muted); }
.palette-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-sub { color: var(--fg-muted); font-size: 0.78em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16em; justify-self: end; }
.sh-cmd-kbd { display: inline-flex; gap: 2px; }
.sh-cmd-kbd .sx-kbd, .palette-item .sx-kbd {
  font-family: var(--font-mono); font-size: 0.7rem; padding: 1px 5px;
  border: 1px solid var(--border-default); border-radius: var(--radius-1);
  color: var(--fg-muted); background: var(--bg-surface-2); line-height: 1.3;
}
.palette-foot {
  display: flex; align-items: center; gap: 14px;
  border-top: 1px solid var(--border-default); padding: 8px 14px;
  font: 0.72rem/1.4 var(--font-body); color: var(--fg-muted);
}
.palette-foot > span { display: inline-flex; align-items: center; gap: 4px; }
.palette-item kbd, .palette-foot kbd, .palette-list kbd {
  font-family: var(--font-mono); font-size: 0.7rem; padding: 1px 5px;
  border: 1px solid var(--border-default); border-radius: var(--radius-1);
  color: var(--fg-muted); background: var(--bg-surface-2);
}

/* ─── PROFILE MENU (the "A▾" trigger top-right) ─────────────────
   #profile-trigger renders avatar + arrow; .profile-dropdown is the
   menu. Avatar color vars + trigger + dropdown all ported. */
:root {
  --avatar-c0:#66d9ef; --avatar-c1:#a6e22e; --avatar-c2:#fd971f; --avatar-c3:#ae81ff;
  --avatar-c4:#f92672; --avatar-c5:#4fc1ff; --avatar-c6:#7ed491; --avatar-c7:#ffd866;
  --avatar-c8:#c594c5; --avatar-c9:#5ac8d4; --avatar-c10:#e07b00; --avatar-c11:#6ed4a7;
  --avatar-c12:#ff9292; --avatar-c13:#b1d4ff; --avatar-c14:#ffe066; --avatar-c15:#d8b88d;
  --avatar-text:#1f1c17;
}
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-family: var(--font-mono); font-size: 0.68em; font-weight: var(--fw-bold);
  color: var(--avatar-text); user-select: none; flex-shrink: 0;
  background: var(--accent);
}
.avatar.sm { width: 20px; height: 20px; font-size: 0.6em; }
.avatar.lg { width: 36px; height: 36px; font-size: 0.92em; }
.avatar.avatar-c0{background:var(--avatar-c0)} .avatar.avatar-c1{background:var(--avatar-c1)}
.avatar.avatar-c2{background:var(--avatar-c2)} .avatar.avatar-c3{background:var(--avatar-c3)}
.avatar.avatar-c4{background:var(--avatar-c4)} .avatar.avatar-c5{background:var(--avatar-c5)}
.avatar.avatar-c6{background:var(--avatar-c6)} .avatar.avatar-c7{background:var(--avatar-c7)}
.avatar.avatar-c8{background:var(--avatar-c8)} .avatar.avatar-c9{background:var(--avatar-c9)}
.avatar.avatar-c10{background:var(--avatar-c10)} .avatar.avatar-c11{background:var(--avatar-c11)}
.avatar.avatar-c12{background:var(--avatar-c12)} .avatar.avatar-c13{background:var(--avatar-c13)}
.avatar.avatar-c14{background:var(--avatar-c14)} .avatar.avatar-c15{background:var(--avatar-c15)}
.avatar.avatar-svc { background: var(--warning); color: var(--avatar-text); }
.avatar.avatar-unknown { background: transparent; color: var(--fg-muted); border: 1px solid var(--border-strong); }

.profile-trigger {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.25em 0.5em; height: 32px;
  background: transparent; border: 1px solid var(--border-default);
  border-radius: var(--radius-2); cursor: pointer; position: relative;
}
.profile-trigger:hover { border-color: var(--accent); background: var(--bg-surface-2); }
.profile-trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.profile-arrow { font-size: 0.6em; color: var(--fg-muted); }

.profile-dropdown {
  position: absolute; top: calc(var(--topbar-h) + 4px); right: var(--space-5);
  z-index: 1000; min-width: 260px; overflow: hidden;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-3); box-shadow: var(--shadow-3);
  font-family: var(--font-body);
}
.profile-dropdown::before {
  content: ''; display: block; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
}
@media (max-width: 600px) { .profile-dropdown { right: .4em; left: .4em; min-width: 0; } }
.profile-dropdown-head { display: flex; gap: 0.7em; align-items: center; padding: 1em 0.9em 0.8em; border-bottom: 1px solid var(--border-default); }
.profile-dropdown-meta { display: flex; flex-direction: column; gap: 0.15em; }
.profile-email { color: var(--fg-primary); font-size: var(--fz-meta); font-weight: var(--fw-medium); word-break: break-all; }
.profile-role { color: var(--accent); font-size: 0.6em; letter-spacing: 0.18em; text-transform: uppercase; font-family: var(--font-mono); }
.profile-dropdown-actions { padding: 0.35em 0; }
.profile-dropdown-actions button, .profile-dropdown-actions a {
  display: block !important; width: 100%; height: auto !important; text-align: left !important;
  padding: 0.55em 0.9em !important; justify-content: flex-start !important;
  background: transparent !important; border: none !important; border-radius: 0 !important;
  color: var(--fg-secondary) !important; font-family: var(--font-body); font-size: var(--fz-meta);
  text-decoration: none; cursor: pointer;
}
.profile-dropdown-actions button:hover, .profile-dropdown-actions a:hover { background: var(--bg-surface-2) !important; color: var(--accent) !important; }
.profile-dropdown-foot { border-top: 1px solid var(--border-default); padding: 0.35em 0; }
.profile-dropdown-foot button {
  display: block !important; width: 100%; height: auto !important; text-align: left !important;
  padding: 0.55em 0.9em !important; justify-content: flex-start !important;
  background: transparent !important; border: none !important; border-radius: 0 !important;
  color: var(--danger) !important; font-family: var(--font-body); font-size: var(--fz-meta); cursor: pointer;
}
.profile-dropdown-foot button:hover { background: var(--bg-surface-2) !important; }

/* Profile / generic <dialog> modals */
.profile-modal, .app-dialog-frame {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-4); color: var(--fg-primary);
  padding: 1.4em 1.6em; min-width: 420px; max-width: 520px;
  box-shadow: var(--shadow-3);
}
@media (max-width: 480px) { .profile-modal { min-width: 0; width: 95vw; padding: 1em; } }
.profile-modal::backdrop, .app-dialog-frame::backdrop,
dialog::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(3px); }
.profile-modal h3, .app-dialog-title {
  font-size: 0.82em; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1em; font-family: var(--font-mono);
}
.profile-modal label {
  display: block; font-size: 0.65em; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-muted); margin-top: 0.8em; margin-bottom: 0.3em; font-family: var(--font-mono);
}
.profile-modal-actions, .app-dialog-buttons { margin-top: 1.4em; display: flex; justify-content: flex-end; gap: 0.6em; }
.profile-modal-uri, .profile-modal-codes ol { font-family: var(--font-mono); }
.profile-modal-uri { display: block; padding: 0.5em; background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-2); word-break: break-all; }
.profile-modal-codes ol { color: var(--accent); margin: 0; padding-left: 1.6em; }

/* ─── NOTIFICATION BELL + DRAWER internals ──────────────────────
   Drawer frame layout is above; these style the bell trigger + rows. */
.notif-bell, #notif-bell-trigger {
  position: relative; height: 32px; padding: 0 0.55em;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; background: transparent;
  border: 1px solid var(--border-default); border-radius: var(--radius-2);
  cursor: pointer; color: var(--fg-secondary);
}
.notif-bell:hover, #notif-bell-trigger:hover { border-color: var(--accent); color: var(--fg-primary); }
.notif-bell .notif-bell-icon { line-height: 1; }
.notif-drawer-prefs, .notif-drawer-mark-all, .notif-drawer-close { font-family: var(--font-mono); }
.notif-row-meta { display: flex; align-items: center; gap: 0.5em; font-size: var(--fz-meta); margin-bottom: 4px; }
.notif-sev-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.notif-sev-info .notif-sev-dot { background: var(--info); }
.notif-sev-warn .notif-sev-dot { background: var(--warning); }
.notif-sev-error .notif-sev-dot, .notif-sev-critical .notif-sev-dot { background: var(--danger); }
.notif-sev-critical .notif-sev-dot { box-shadow: 0 0 6px var(--danger); }
.notif-cat { flex: 1; color: var(--fg-secondary); }
.notif-time { color: var(--fg-muted); }
.notif-row-body { color: var(--fg-primary); cursor: pointer; }
.notif-row-title { font-weight: var(--fw-medium); font-size: 0.9em; }
.notif-row-text { font-size: 0.82em; color: var(--fg-secondary); margin-top: 2px; }
.notif-row-actions { display: flex; gap: 0.35em; margin-top: 6px; }

/* ─── BADGES / PILLS ────────────────────────────────────────────*/
.badge-ok, .badge-warn, .badge-danger, .badge-neutral,
.badge-kind-human, .badge-kind-service, .badge-kind-synthetic,
.audit-outcome {
  display: inline-flex; align-items: center; gap: 0.3em;
  border-radius: var(--radius-pill); padding: 0.1em 0.6em;
  font-size: 0.75em; font-family: var(--font-mono); border: 1px solid transparent;
}
.badge-ok, .badge-kind-human, .audit-outcome-ok { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.badge-warn, .badge-kind-service, .audit-outcome-denied { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.badge-danger, .audit-outcome-error { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.badge-neutral, .badge-kind-synthetic { background: var(--bg-surface-2); color: var(--fg-secondary); border-color: var(--border-default); }

/* ─── TABLES (data-table / archive-table / user-table / audit-table) ─*/
.data-table, .archive-table, .user-table, .audit-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.data-table th, .archive-table th, .user-table th, .audit-table th {
  text-align: left; font-family: var(--font-mono); font-size: 0.68rem; font-weight: var(--fw-bold);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted);
  padding: 0.6em 1em; border-bottom: 1px solid var(--border-default);
  position: sticky; top: 0; background: var(--bg-surface); z-index: 1;
}
.data-table td, .archive-table td, .user-table td, .audit-table td { padding: 0.55em 1em; border-bottom: 1px solid var(--border-subtle); color: var(--fg-secondary); }
.data-table tr:hover td, .archive-table tr:hover td, .user-table tr:hover td, .audit-table tr:hover td { background: var(--bg-surface-2); color: var(--fg-primary); }
.data-table tr:last-child td { border-bottom: none; }
.archive-table tr.row-clickable { cursor: pointer; }
.audit-row .ts { font-size: 0.8em; color: var(--fg-muted); font-family: var(--font-mono); }
.audit-row .caller code { font-size: 0.85em; color: var(--fg-secondary); font-family: var(--font-mono); }
.audit-row.audit-error td { background: var(--danger-soft); }
.audit-row.audit-denied td { background: var(--warning-soft); }

/* ─── TABS (viewer-tabs, vault-tab-switch) ──────────────────────*/
.vault-tab-switch { display: inline-flex; gap: 4px; margin-left: 1em; }
.vault-tab-switch .btn-ghost { padding: 0 0.8em !important; height: 28px !important; }
.viewer-tabs .tab-btn {
  background: transparent; color: var(--fg-muted);
  border: none; border-bottom: 2px solid transparent; height: auto;
  padding: 6px 14px; font: 0.72rem/1 var(--font-mono);
  cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em;
}
.viewer-tabs .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.viewer-tabs .tab-btn:hover { color: var(--fg-primary); }

/* ─── CHIPS (extra rule for the inline .chip variant) ───────────*/
.chip button {
  height: auto !important; width: auto !important; padding: 0 !important;
  background: transparent !important; border: 0 !important;
  color: var(--fg-muted) !important; font-size: 1em; line-height: 1;
}
.chip button:hover { color: var(--danger) !important; }
.chip-warn { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }

/* ─── GENERIC LINKS inside app surfaces ─────────────────────────
   New page-root cards render <a> that fell back to browser blue. */
#page-root a:not(.sx-btn):not(.btn-primary):not(.btn-ghost),
#groupsview a, #workflowsview a, #pricesview a, #vaultview a,
#healthview a, #auditview a, #agentrolesview a, #archive a,
.vault-md a, .wf-inspector a, a.sa-link {
  color: var(--accent); text-decoration: none;
}
#page-root a:hover:not(.sx-btn), .vault-md a:hover, a.sa-link:hover { text-decoration: underline; }

/* ─── CARD / PANEL legacy aesthetic ─────────────────────────────*/
.card-shell, .panel-card, .host-card, .session-card {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-3); padding: 1rem 1.25rem;
}
.card-shell:hover, .host-card:hover, .session-card:hover { border-color: var(--border-strong); }
.settings-section__header, .profile-block-head {
  font-family: var(--font-mono); font-size: 0.75em; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-muted);
  border-bottom: 1px solid var(--border-default); padding-bottom: 0.5rem; margin-bottom: 1rem;
}

/* ---- vt-0991 (wave2): active-sessions list ---- */
.sessions-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1rem; }
.session-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "main actions" "meta actions";
  align-items: center; gap: 0.15rem 1rem;
  padding: 0.6rem 0.85rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2);
}
.session-row--current { border-color: var(--accent); }
.session-row-main { grid-area: main; display: flex; align-items: center; gap: 0.6rem; }
.session-device { font-weight: var(--fw-medium); color: var(--fg-primary); }
.session-current-badge {
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius-1);
  padding: 0.1em 0.5em;
}
.session-row-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.session-row-meta .sep { opacity: 0.4; }
.session-row-actions { grid-area: actions; display: flex; align-items: center; }

/* ─── COST SUMMARY (trends) — stat row spacing ──────────────────*/
.cv-summary {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-default);
}
.cv-summary .stat { display: flex; align-items: baseline; gap: var(--space-2); line-height: 1.2; }
.cv-summary .stat .lbl { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.cv-summary .stat .val { font-size: 0.95rem; font-weight: var(--fw-medium); color: var(--fg-primary); }
.cv-summary .stat .val-warn { color: var(--warning); }
.cv-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-5); font-size: var(--fz-meta); }
.lbl { font-family: var(--font-mono); font-size: 0.72em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }

/* ============================================================
   OUT-OF-#app OVERLAY-PANEL BRIDGE (vt-0990 / Wave 1)
   ============================================================
   The original bridge (above) scoped its bare button/input/select
   rules to `#app …`. But the overlay views (archive, vault, audit,
   health, prices, cost, groups, users, profile, audit-log, etc.)
   are rendered as SIBLINGS of #app — they close OUT of #app at the
   footer, so the `#app button:not(.sx-btn)` rules never reached
   them. Result: Users "+ invite user", Audit-log Apply / CSV /
   filters, the Vault search box, etc. fell back to raw browser
   chrome (grey buttonface buttons, native search pills, native
   selects).

   This block re-applies the same coral look to bare controls inside
   those panels. sx-* components are excluded so they keep their own
   styling. Keep the panel list in sync with index.html top-level
   overlay panels + .page-section sections.
   ============================================================ */

/* Panel scope: every top-level overlay view that lives outside #app. */
#archive, #sdetail, #groupsview, #pricesview, #costview, #agentrolesview,
#recyclebinview, #workflowsview, #workfloweditor, #workflowrunviewer,
#auditview, #healthview, #vaultview, #editor,
#user-list-screen, #audit-screen, #profile-screen, .page-section {
  /* marker — no styles; presence documents the scope list below */
}

/* ─── BARE BUTTONS in overlay panels ───────────────────────────── */
#user-list-screen button:not(.sx-btn),
#audit-screen button:not(.sx-btn),
#profile-screen button:not(.sx-btn),
#vaultview button:not(.sx-btn),
#archive button:not(.sx-btn),
#pricesview button:not(.sx-btn),
#costview button:not(.sx-btn),
#groupsview button:not(.sx-btn),
#agentrolesview button:not(.sx-btn),
#recyclebinview button:not(.sx-btn),
#workflowsview button:not(.sx-btn),
#auditview button:not(.sx-btn),
#sdetail button:not(.sx-btn),
#workfloweditor button:not(.sx-btn),
#workflowrunviewer button:not(.sx-btn),
#editor button:not(.sx-btn),
#healthview button:not(.sx-btn) {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4); height: 36px;
  font-family: var(--font-body); font-size: var(--fz-body);
  font-weight: var(--fw-medium); line-height: 1;
  border-radius: var(--radius-3);
  border: 1px solid var(--border-default);
  background: var(--bg-surface); color: var(--fg-primary);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  appearance: none; -webkit-appearance: none;
  transition: background var(--dur-hover) var(--ease-out),
              border-color var(--dur-hover) var(--ease-out),
              color var(--dur-hover) var(--ease-out);
  user-select: none;
}
#user-list-screen button:not(.sx-btn):hover:not(:disabled),
#audit-screen button:not(.sx-btn):hover:not(:disabled),
#profile-screen button:not(.sx-btn):hover:not(:disabled),
#vaultview button:not(.sx-btn):hover:not(:disabled),
#archive button:not(.sx-btn):hover:not(:disabled),
#pricesview button:not(.sx-btn):hover:not(:disabled),
#costview button:not(.sx-btn):hover:not(:disabled),
#groupsview button:not(.sx-btn):hover:not(:disabled),
#agentrolesview button:not(.sx-btn):hover:not(:disabled),
#recyclebinview button:not(.sx-btn):hover:not(:disabled),
#workflowsview button:not(.sx-btn):hover:not(:disabled),
#auditview button:not(.sx-btn):hover:not(:disabled),
#sdetail button:not(.sx-btn):hover:not(:disabled),
#workfloweditor button:not(.sx-btn):hover:not(:disabled),
#workflowrunviewer button:not(.sx-btn):hover:not(:disabled),
#editor button:not(.sx-btn):hover:not(:disabled),
#healthview button:not(.sx-btn):hover:not(:disabled) {
  background: var(--bg-surface-2); border-color: var(--border-strong);
}
#user-list-screen button:disabled, #audit-screen button:disabled,
#profile-screen button:disabled, #vaultview button:disabled,
#archive button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Primary action buttons in overlay panels — filled coral. The Users
   "+ invite user" and Audit-log "Apply" buttons are the page's main
   actions, so promote bare submit/primary-intent buttons to coral. */
#user-list-screen #invite-user-btn,
#audit-screen #audit-apply,
#user-list-screen button[type="submit"]:not(.sx-btn),
#audit-screen button[type="submit"]:not(.sx-btn) {
  background: var(--accent) !important;
  color: var(--fg-on-accent) !important;
  border: 1px solid var(--accent) !important;
}
#user-list-screen #invite-user-btn:hover:not(:disabled),
#audit-screen #audit-apply:hover:not(:disabled),
#user-list-screen button[type="submit"]:not(.sx-btn):hover:not(:disabled),
#audit-screen button[type="submit"]:not(.sx-btn):hover:not(:disabled) {
  background: var(--accent-hover) !important; border-color: var(--accent-hover) !important;
  color: var(--fg-on-accent) !important;
}

/* ─── BARE INPUTS / SELECTS / TEXTAREAS in overlay panels ───────── */
#user-list-screen input:not(.sx-input):not([type=checkbox]):not([type=radio]),
#audit-screen input:not(.sx-input):not([type=checkbox]):not([type=radio]),
#profile-screen input:not(.sx-input):not([type=checkbox]):not([type=radio]),
#vaultview input:not(.sx-input):not([type=checkbox]):not([type=radio]),
#archive input:not(.sx-input):not([type=checkbox]):not([type=radio]),
#pricesview input:not(.sx-input):not([type=checkbox]):not([type=radio]),
#costview input:not(.sx-input):not([type=checkbox]):not([type=radio]),
#groupsview input:not(.sx-input):not([type=checkbox]):not([type=radio]),
#user-list-screen select:not(.sx-select), #audit-screen select:not(.sx-select),
#profile-screen select:not(.sx-select), #vaultview select:not(.sx-select),
#archive select:not(.sx-select), #pricesview select:not(.sx-select),
#costview select:not(.sx-select), #groupsview select:not(.sx-select),
#user-list-screen textarea:not(.sx-textarea), #audit-screen textarea:not(.sx-textarea),
#profile-screen textarea:not(.sx-textarea), #vaultview textarea:not(.sx-textarea) {
  background: var(--bg-canvas); color: var(--fg-primary);
  border: 1px solid var(--border-default); border-radius: var(--radius-2);
  padding: 0.5em 0.7em; font-family: var(--font-body); font-size: var(--fz-meta);
  line-height: 1.4; outline: none;
  appearance: none; -webkit-appearance: none;
  transition: border-color var(--dur-hover), box-shadow var(--dur-hover);
}
#user-list-screen input:not(.sx-input):focus, #audit-screen input:not(.sx-input):focus,
#profile-screen input:not(.sx-input):focus, #vaultview input:not(.sx-input):focus,
#archive input:not(.sx-input):focus, #pricesview input:not(.sx-input):focus,
#costview input:not(.sx-input):focus, #groupsview input:not(.sx-input):focus,
#user-list-screen select:not(.sx-select):focus, #audit-screen select:not(.sx-select):focus,
#profile-screen select:not(.sx-select):focus, #vaultview select:not(.sx-select):focus,
#archive select:not(.sx-select):focus, #pricesview select:not(.sx-select):focus,
#costview select:not(.sx-select):focus, #groupsview select:not(.sx-select):focus,
#user-list-screen textarea:not(.sx-textarea):focus, #audit-screen textarea:not(.sx-textarea):focus,
#profile-screen textarea:not(.sx-textarea):focus, #vaultview textarea:not(.sx-textarea):focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* native select chevron for overlay-panel selects */
#user-list-screen select:not(.sx-select), #audit-screen select:not(.sx-select),
#profile-screen select:not(.sx-select), #vaultview select:not(.sx-select),
#archive select:not(.sx-select), #pricesview select:not(.sx-select),
#costview select:not(.sx-select), #groupsview select:not(.sx-select) {
  padding-right: 2em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path stroke='%237a7468' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round' d='M3 5l3 3 3-3'/></svg>");
  background-repeat: no-repeat; background-position: right 0.6em center;
}
/* suppress native search pill on the Vault filter box */
#vaultview input[type=search] { -webkit-appearance: none; appearance: none; }
#vaultview input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* CSV download "link button" in the audit-log screen — make it look
   like a secondary button instead of a bare blue <a>. */
#audit-screen #audit-csv {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 36px; padding: 0 var(--space-4);
  border: 1px solid var(--border-default); border-radius: var(--radius-3);
  background: var(--bg-surface); color: var(--fg-secondary) !important;
  font-family: var(--font-body); font-size: var(--fz-meta); font-weight: var(--fw-medium);
  text-decoration: none !important; white-space: nowrap;
  transition: border-color var(--dur-hover), color var(--dur-hover);
}
#audit-screen #audit-csv:hover { border-color: var(--accent); color: var(--accent) !important; }

/* date-input clock/calendar icon tint to match palette */
#audit-screen input[type=date]::-webkit-calendar-picker-indicator,
#archive input[type=datetime-local]::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; }

/* Vault note/graph/secrets tab buttons + search bar layout polish */
#vaultview .vault-search-bar { display: flex; gap: var(--space-2); align-items: center; }
#vaultview .vault-search-bar input[type=search] { flex: 1; min-width: 0; }

/* ─── TOTP enrol QR (vt-0990) ───────────────────────────────────
   QR is rendered as inline SVG by qrcode-mini.js into #totp-qr. Give
   it a white quiet-zone card so it scans reliably against the warm
   canvas background. */
#totp-qr { margin: var(--space-3) 0; }
#totp-qr svg {
  display: block;
  width: 200px; height: 200px;
  background: #fff;
  padding: 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-3);
}
.profile-totp-step .profile-modal-uri {
  display: block; word-break: break-all;
  font-family: var(--font-mono); font-size: var(--fz-meta);
  color: var(--fg-secondary);
  background: var(--bg-surface-2); padding: 0.5em 0.7em;
  border-radius: var(--radius-2); margin: 0.3em 0 0.8em;
}