/* ============================================================
   Activate — "Luxe" skin (2026-07)
   Loaded AFTER app.css / test-lifecycle.css / wm-copilot.css.
   Re-skins the token layer + core shell components; screens that
   consume the CSS variables inherit the look automatically.
   Design refs: Syncthing/Idea 1-3 (porcelain canvas, floating
   cards, coral action color, ink pill nav, pastel data hues).
   ============================================================ */
:root {
  /* type: Montserrat (brand font) inherited from app.css --font — not overridden */

  /* palette */
  --accent: #4180f2;
  --accent-light: #6ba1f7;
  --accent-soft: rgba(65, 128, 242, 0.09);
  --bg-page: #f4f4fa;
  --bg-secondary: #f5f5fb;
  --bg-input: #f6f7fc;
  --bg-hover: rgba(65, 128, 242, 0.05);
  --bg-sidebar: rgba(250, 250, 254, 0.82);
  --bg-sidebar-hover: rgba(37, 51, 120, 0.05);
  --bg-sidebar-active: #1d2554;
  --text-sidebar-active: #ffffff;
  --border: rgba(37, 51, 120, 0.09);
  --border-light: rgba(37, 51, 120, 0.06);

  /* geometry */
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 18px;

  /* elevation — layered, soft, "floating" */
  --shadow-sm: 0 1px 2px rgba(23, 26, 63, 0.05);
  --shadow: 0 1px 2px rgba(23, 26, 63, 0.04), 0 6px 20px -8px rgba(37, 51, 120, 0.10);
  --shadow-md: 0 2px 6px rgba(23, 26, 63, 0.05), 0 12px 28px -10px rgba(37, 51, 120, 0.14);
  --shadow-lg: 0 4px 12px rgba(23, 26, 63, 0.06), 0 24px 48px -16px rgba(37, 51, 120, 0.20);

  /* motion — one luxury curve everywhere */
  --ease-luxe: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 0.28s var(--ease-luxe);
}

/* ===== CANVAS — soft lavender/blue washes behind floating content ===== */
body {
  background:
    radial-gradient(900px 600px at 88% -10%, rgba(122, 110, 228, 0.10), transparent 60%),
    radial-gradient(800px 560px at -8% 100%, rgba(83, 152, 246, 0.09), transparent 60%),
    radial-gradient(600px 400px at 55% 115%, rgba(245, 88, 25, 0.045), transparent 60%),
    var(--bg-page);
}

.main-content { background: transparent; }
.content-area { padding: 26px 28px; }

/* content enters with a soft rise on every screen change */
@keyframes luxe-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* fill-mode MUST NOT be 'both'/'forwards': a filled transform keyframe keeps
   a computed transform on every top-level block FOREVER, making each its own
   stacking layer painted in DOM order — which put summary tiles ON TOP of
   open export menus (owner repro, Issues screen 2026-07-14). 'backwards'
   keeps the entrance identical (the end frame is the natural state) and
   releases the stacking context the moment the animation finishes. */
.content-area > * { animation: luxe-enter 0.36s var(--ease-luxe) backwards; }

/* ===== SIDEBAR — frosted panel, ink pill for active item ===== */
.sidebar {
  background: var(--bg-sidebar);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-right: 1px solid rgba(37, 51, 120, 0.07);
}

.sidebar-header { border-bottom: 1px solid rgba(37, 51, 120, 0.06); }

.nav-item {
  border-left: none;
  border-radius: 10px;
  margin: 1px 4px;
  padding: 5px 10px;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.nav-item:hover { background: var(--bg-sidebar-hover); }

.nav-item .icon {
  transition: transform 0.3s var(--ease-luxe), opacity 0.3s var(--ease-luxe);
}
.nav-item:hover .icon { transform: translateX(2px) scale(1.08); opacity: 0.9; }

.nav-item.active {
  background: linear-gradient(135deg, #232b63, #1a2150);
  color: #fff;
  border-left: none;
  box-shadow: 0 4px 14px -4px rgba(29, 37, 84, 0.45);
}
.nav-item.active .icon { opacity: 1; color: #fff; }
.nav-item.active .badge { background: rgba(255, 255, 255, 0.18); color: #cfe0ff; }

.nav-item .badge { border-radius: 999px; }

.nav-section-label { color: rgba(37, 51, 120, 0.42); letter-spacing: 1.2px; }

.sidebar-footer { border-top: 1px solid rgba(37, 51, 120, 0.06); }
.sidebar-footer .env-badge { border-radius: 999px; }

.sidebar-toggle {
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe);
}
.sidebar-toggle:hover { transform: scale(1.12); }

/* ===== HEADER — frosted, blends with canvas ===== */
.header {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(37, 51, 120, 0.06);
}

.header-title { font-weight: 700; letter-spacing: -0.02em; }

.header-actions .env-tag {
  background: linear-gradient(135deg, #2a3475, #1c2452);
  border-radius: 999px;
  box-shadow: 0 3px 10px -3px rgba(29, 37, 84, 0.4);
}

/* ===== CARDS — floating, lift + accent sweep on hover ===== */
.stat-card,
.section-card,
.progress-section {
  border-color: var(--border-light);
  box-shadow: var(--shadow);
}

.stat-card {
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease-luxe), box-shadow 0.35s var(--ease-luxe), border-color 0.35s var(--ease-luxe);
}

/* hairline gradient sweep along the top edge, revealed on hover */
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(122, 110, 228, 0.9), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-luxe);
  pointer-events: none;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(65, 128, 242, 0.22);
}
.stat-card:hover::after { transform: scaleX(1); }

.stat-card .stat-value { letter-spacing: -0.03em; font-weight: 800; }
.stat-card .stat-label { letter-spacing: 0.8px; font-size: 11px; }

/* status cards keep their signal, softened to a 3px inset bar */
.stat-card.pass, .stat-card.fail, .stat-card.pending, .stat-card.total { border-left-width: 3px; }

.section-card {
  border-radius: var(--radius-lg);
  transition: box-shadow 0.35s var(--ease-luxe), transform 0.35s var(--ease-luxe);
}
.section-card:hover { box-shadow: var(--shadow-md); }

.section-card-header { letter-spacing: -0.01em; }

/* ===== BUTTONS — pills with a sheen sweep ===== */
.btn-primary,
.btn-secondary {
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  padding: 8px 18px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}

.btn-primary {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
}

.btn-primary::after,
.btn-secondary::after {
  content: '';
  position: absolute;
  top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s var(--ease-luxe);
  pointer-events: none;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
.btn-primary:hover::after, .btn-secondary:hover::after { left: 130%; }
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-secondary { border-color: rgba(65, 128, 242, 0.35); }
.btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.35);
  border-color: var(--accent);
}

/* filter chips → pills with a gentle lift */
.filter-btn {
  border-radius: 999px;
  padding: 6px 15px;
  transition: transform 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
.filter-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.filter-btn.active { box-shadow: 0 4px 12px -4px rgba(65, 128, 242, 0.5); }

/* ===== INPUTS — soft fill, glowing focus ring ===== */
.search-input {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe);
}
.search-input:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13), 0 4px 14px -6px rgba(65, 128, 242, 0.25);
}

/* ===== TABLES — airy rows, accent bar slides in on hover ===== */
.issues-table th, .adopt-data-table thead th {
  letter-spacing: 0.7px;
  font-size: 11px;
}
.issues-table tr, .adopt-data-table tbody tr { transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe); }
.issues-table tr:hover td,
.adopt-data-table tbody tr:hover td {
  background: linear-gradient(90deg, rgba(65, 128, 242, 0.055), rgba(65, 128, 242, 0.015));
}
.issues-table tbody tr:hover,
.adopt-data-table tbody tr:hover {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ===== PER-SCREEN CARDS — screens inject their own <style> with
   hardcoded radii/hover, so these need #content-area specificity ===== */
#content-area .dash-card,
#content-area .ac-card,
#content-area .pu-card,
#content-area .ta-stat-card,
#content-area .ta-chart-card,
#content-area .sup-chart-card,
#content-area .sup-stat-card,
#content-area .rg-card,
#content-area .dap-rule-card,
#content-area .dap-stat-card,
#content-area .dap-settings-card,
#content-area .brand-card,
#content-area .report-gauge-card,
#content-area .pse-card,
#content-area .mig-summary-card,
#content-area .lms-stat-card,
#content-area .ext-example-card,
#content-area .ais-card,
#content-area .vl-card,
#content-area .trace-stat-card,
#content-area .persona-card,
#content-area .adm-card,
#content-area .comms-cal-card,
#content-area .tt-card {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe), border-color 0.32s var(--ease-luxe);
}

#content-area .dash-card:hover,
#content-area .ac-card:hover,
#content-area .pu-card:hover,
#content-area .ta-stat-card:hover,
#content-area .ta-chart-card:hover,
#content-area .sup-chart-card:hover,
#content-area .sup-stat-card:hover,
#content-area .rg-card:hover,
#content-area .dap-rule-card:hover,
#content-area .dap-stat-card:hover,
#content-area .dap-settings-card:hover,
#content-area .brand-card:hover,
#content-area .report-gauge-card:hover,
#content-area .pse-card:hover,
#content-area .mig-summary-card:hover,
#content-area .lms-stat-card:hover,
#content-area .ext-example-card:hover,
#content-area .ais-card:hover,
#content-area .vl-card:hover,
#content-area .trace-stat-card:hover,
#content-area .persona-card:hover,
#content-area .adm-card:hover,
#content-area .comms-cal-card:hover,
#content-area .tt-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.20);
}

/* clickable dashboard cards get the stronger lift */
#content-area .dash-card-click:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(65, 128, 242, 0.28);
}

/* ===== SCROLLBARS — slim, rounded, quiet ===== */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(37, 51, 120, 0.16);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(37, 51, 120, 0.30); background-clip: content-box; }

/* ===== CHAT PANEL (Tiva) ===== */
.chat-panel { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* ===== LOGIN — align the standalone login screen with the skin ===== */
._lp { font-family: var(--font); background: #f4f4fa; }
._card { border-radius: 22px; box-shadow: 0 2px 6px rgba(23,26,63,0.04), 0 28px 60px -20px rgba(37, 51, 120, 0.18); }
._btn {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  border-radius: 999px;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
  position: relative;
  overflow: hidden;
}
._btn:hover { background: linear-gradient(135deg, #ff7a42, #f5581c); box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55); }
._iw { border-radius: 999px; }
._iw input { padding-left: 44px; }
._ms { border-radius: 999px; }

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   WAVE 2 — exhaustive per-screen overrides (2026-07-02)
   Generated per-domain; sections below keep their own headers.
   ============================================================ */
/* ============================================================
   Activate Luxe overrides — batch 1 (core screens)
   Scope: app.js shell, dashboard.js, tests.js, test-lifecycle.*,
   test-analytics.js, regression.js, issues.js, bugs.js, login.js
   + app.css sweep (modals, dropdowns, tabs, comment forms,
   editor toolbar, chat internals, timeline).
   Every selector is body-prefixed so it outranks JS-injected
   <style> blocks at equal class specificity.
   NOTE: theme-luxe.css already covers stat/section cards, btn-
   primary/secondary, filter-btn, search-input, issues/adopt
   tables, sidebar/header, login shell tokens, and the per-screen
   card list (dash-card, tt-card, ta-stat-card, ta-chart-card,
   rg-card, persona-card, comms-cal-card, ...). Not repeated here.
   ============================================================ */

/* ===== app.js (shell: header actions, shared modal overlays) ===== */

/* Header expanding icon buttons -> full pills with a soft lift */
body .hdr-icon {
  border-radius: 999px;
  transition: color 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe),
    background 0.25s var(--ease-luxe), transform 0.25s var(--ease-luxe),
    box-shadow 0.25s var(--ease-luxe);
}
body .hdr-icon:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Shared JS modal overlays (tests.js, test-lifecycle.js edit/regen
   modals all use class .modal-overlay; background itself is inline —
   see CLASHES — but the frosted blur is addable here). */
body .modal-overlay {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
/* Focus rings inside those modals (inline styles set border but not
   box-shadow, so the glow ring is reachable). */
body .modal-overlay input:focus,
body .modal-overlay select:focus,
body .modal-overlay textarea:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}

/* ===== dashboard.js =====
   .dash-card / .dash-card-click / .tt-card are already themed by
   theme-luxe (#content-area rules beat the injected block). No
   further overrides needed; the injected radii/hovers lose. */

/* ===== tests.js ===== */

/* Test scenario cards — accordion rows: no lift (they expand), but
   luxe border/shadow response on hover */
body .test-card {
  transition: border-color 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe);
}
body .test-card:hover {
  border-color: rgba(65, 128, 242, 0.2);
  box-shadow: var(--shadow);
}

/* Status + count chips -> full pills */
body .status-badge,
body .mini-badge,
body .area-stats .mini-badge,
body .ev-indicator,
body .ev-assertion-chip {
  border-radius: 999px;
}

/* "Run"/"Edit" chips on each row: radius is inline (see CLASHES) —
   !important is the only route and these sit on every test row */
body .test-edit-btn {
  border-radius: 999px !important;
  transition: background 0.22s var(--ease-luxe), transform 0.22s var(--ease-luxe);
}
body .test-edit-btn:hover {
  background: var(--bg-hover);
  transform: translateY(-1px);
}

/* Load-more (dashed) button -> pill with lift */
body .test-list-container.paginated .load-more-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe),
    border-color 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe);
}
body .test-list-container.paginated .load-more-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* Type-breakdown tiles (dashboard extras used by tests summary) */
body .type-card {
  border-radius: var(--radius-sm);
  transition: border-color 0.28s var(--ease-luxe), box-shadow 0.28s var(--ease-luxe),
    background 0.28s var(--ease-luxe);
}
body .type-card:hover {
  border-color: rgba(65, 128, 242, 0.25);
  box-shadow: var(--shadow-sm);
}

/* ===== test-lifecycle.js + css/test-lifecycle.css ===== */

/* Lifecycle buttons: semantic colors (approve=green, generate=accent)
   are kept — pill radius + lift only, per the button exceptions */
body .lc-btn,
body .lc-load-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe),
    background 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body .lc-btn:hover,
body .lc-load-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* RUN / APPROVED micro-badges -> pills */
body .lc-run-badge,
body .lc-approved-badge {
  border-radius: 999px;
}

/* ===== test-analytics.js ===== */
/* (.ta-stat-card and .ta-chart-card are covered by theme-luxe) */

/* Side-by-side panels get the full card treatment */
body .ta-panel {
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe),
    border-color 0.32s var(--ease-luxe);
}
body .ta-panel:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}

body .ta-triage-scroll { border-color: var(--border-light); }

/* Table typography + accent-bar row hover */
body .ta-triage-table th,
body .ta-matrix th {
  font-size: 11px;
  letter-spacing: 0.7px;
}
body .ta-triage-table tbody tr,
body .ta-matrix tbody tr {
  transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe);
}
body .ta-triage-table tbody tr:hover,
body .ta-matrix tbody tr:hover {
  box-shadow: inset 3px 0 0 var(--accent);
}
body .ta-triage-table tbody tr:hover td,
body .ta-matrix tbody tr:hover td {
  background: rgba(65, 128, 242, 0.05);
}

/* Triage category select */
body .ta-triage-table select {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .ta-triage-table select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}

/* Export = secondary/outline button -> pill + lift */
body .ta-export-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe),
    border-color 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe);
}
body .ta-export-btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.35);
  background: #fff;
}

/* All analytics chips -> pills (colors untouched; gauges/charts untouched) */
body .ta-cat-badge,
body .ta-flaky-rec,
body .ta-cell-chip,
body .ta-type-badge {
  border-radius: 999px;
}

/* ===== regression.js ===== */
/* (.rg-card container is covered by theme-luxe) */

/* Underline tabs -> pill segmented control with ink-pill active */
body .rg-tabs {
  border-bottom: none;
  gap: 6px;
  padding-bottom: 2px;
}
body .rg-tab {
  border-bottom: none;
  margin-bottom: 0;
  border-radius: 999px;
  padding: 7px 16px;
  transition: background 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe),
    box-shadow 0.25s var(--ease-luxe);
}
body .rg-tab:hover { background: var(--bg-hover); color: var(--accent); }
body .rg-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #232b63, #1a2150);
  border-bottom-color: transparent;
  box-shadow: 0 4px 14px -4px rgba(29, 37, 84, 0.45);
}

/* Buttons: primary navy -> coral gradient pill; secondary/danger keep
   family, pill + lift */
body .rg-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe),
    background 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body .rg-btn-p {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
}
body .rg-btn-p:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
body .rg-btn-s:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.35);
  background: #fff;
}
body .rg-btn-d:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(193, 21, 58, 0.3);
  background: #fef2f2;
}

/* Badges -> pills */
body .rg-badge { border-radius: 999px; }

/* Table: header type + accent-bar row hover (component subheader rows
   excluded so their tinted band stays put) */
body .rg-table th { font-size: 11px; letter-spacing: 0.7px; }
body .rg-table tbody tr {
  transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe);
}
body .rg-table tbody tr:not(.rg-comprow):hover {
  box-shadow: inset 3px 0 0 var(--accent);
}
body .rg-table tbody tr:not(.rg-comprow):hover td {
  background: rgba(65, 128, 242, 0.05);
}

/* Form fields + focus glow */
body .rg-field input,
body .rg-field textarea,
body .rg-field select {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .rg-field input:focus,
body .rg-field textarea:focus,
body .rg-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}

/* Modal: luxe overlay + floating box */
body .rg-modal {
  background: rgba(23, 26, 63, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .rg-modal-box {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ===== issues.js ===== */
/* (.issues-table covered by theme-luxe; tab bar + #issue-search radius
   are inline — see CLASHES) */

body .severity-badge { border-radius: 999px; }

/* Focus glow for the inline-styled search + modal fields (box-shadow
   is not set inline, so this lands) */
body #issue-search:focus,
body #issue-modal-content input:focus,
body #issue-modal-content select:focus,
body #issue-modal-content textarea:focus {
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}

/* Export dropdown (app.css) -> pill trigger, floating menu */
body .export-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe),
    border-color 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe);
}
body .export-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
body .export-menu {
  border-color: var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
}
body .export-item { border-radius: 8px; }

/* ===== bugs.js ===== */
/* Markup is fully inline-styled (see CLASHES); only the additive bits
   are reachable through the overlay ids. */
body #bug-report-overlay,
body #bug-detail-overlay {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body #bug-report-overlay input:focus,
body #bug-report-overlay select:focus,
body #bug-report-overlay textarea:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}

/* ===== login.js ===== */
/* The login screen replaces body.innerHTML, so its injected <style>
   sits after theme-luxe in document order and WINS ties against the
   head stylesheet. Re-asserted here with the body prefix so the luxe
   login skin actually applies. */
body ._lp {
  font-family: var(--font);
  background: #f4f4fa;
}
body ._card {
  border-radius: 22px;
  box-shadow: 0 2px 6px rgba(23, 26, 63, 0.04), 0 28px 60px -20px rgba(37, 51, 120, 0.18);
}
body ._btn {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  border-radius: 999px;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
}
body ._btn:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
  transform: translateY(-1px);
}
body ._iw { border-radius: 999px; }
body ._iw input { padding-left: 44px; }
body ._iw:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
  background: #fff;
}
body ._ms { border-radius: 999px; }

/* ===== css/app.css sweep — components theme-luxe doesn't cover ===== */

/* --- Modal overlays: unify on the ink-blue frosted backdrop --- */
body .kb-modal-overlay,
body .pp-modal-overlay,
body .adopt-modal-overlay,
body .ev-backdrop {
  background: rgba(23, 26, 63, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
/* (.kb-modal / .adopt-modal / .ev-modal already use var(--radius-lg)
   + var(--shadow-lg) tokens, which theme-luxe re-values — no override.) */

/* Modal close (✕) buttons -> soft icon buttons */
body .kb-modal-header button,
body .adopt-modal-header button,
body .ev-close-btn {
  border-radius: 10px;
  transition: background 0.2s var(--ease-luxe), transform 0.2s var(--ease-luxe);
}
body .kb-modal-header button:hover,
body .adopt-modal-header button:hover,
body .ev-close-btn:hover {
  background: var(--bg-hover);
  transform: scale(1.06);
}

/* --- Kanban form + chips (modal internals) --- */
body .kb-input { border-radius: 10px; }
body .kb-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
body .kb-tag-opt,
body .kb-col-count { border-radius: 999px; }

/* --- Segmented view toggles -> pill shells --- */
body .kb-view-toggle,
body .pp-view-toggle,
body .pp-zoom-toggle,
body .adopt-view-toggle {
  border-radius: 999px;
  overflow: hidden;
}

/* --- Underline tab bars -> pill items, ink-pill active --- */
body .adopt-tab,
body .ev-tab {
  border-radius: 999px;
  border-bottom: none;
  margin-bottom: 4px;
  padding: 7px 16px;
  transition: background 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe),
    box-shadow 0.25s var(--ease-luxe);
}
body .adopt-tab:hover,
body .ev-tab:hover { background: var(--bg-hover); }
body .adopt-tab.active,
body .ev-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #232b63, #1a2150);
  border-bottom-color: transparent;
  box-shadow: 0 4px 14px -4px rgba(29, 37, 84, 0.45);
}
body .ev-modal-tabs { padding: 8px 12px; gap: 4px; }

/* --- Evidence modal internals --- */
body .ev-export-btn {
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe),
    background 0.25s var(--ease-luxe);
}
body .ev-export-btn:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
body .ev-toggle-btn,
body .ev-btn-tag,
body .ev-badge,
body .ev-header-id { border-radius: 999px; }
body .ev-view-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe),
    background 0.25s var(--ease-luxe);
}
body .ev-view-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.45);
}

/* --- Comment panel + form (floating annotation widget) --- */
body .comment-panel {
  border-radius: var(--radius-lg);
  border-color: var(--border-light);
  box-shadow: var(--shadow-lg);
}
body .comment-form input,
body .comment-form textarea { border-radius: 10px; }
body .comment-form input:focus,
body .comment-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
/* Post button = solid primary CTA -> coral pill */
body .comment-form button {
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe),
    background 0.25s var(--ease-luxe);
}
body .comment-form button:hover {
  opacity: 1;
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
body .comment-filter button,
body .comment-context-select button,
body .comment-context { border-radius: 999px; }

/* --- Editor toolbar (app's own toolbar; Editor.js .ce-* untouched) --- */
body .editor-toolbar button {
  border-radius: 10px;
  transition: background 0.2s var(--ease-luxe), transform 0.2s var(--ease-luxe),
    border-color 0.2s var(--ease-luxe);
}
body .editor-toolbar button:hover {
  background: var(--bg-hover);
  transform: scale(1.06);
}

/* --- Chat (Tiva) internals — panel shell is themed already --- */
body .chat-input { border-radius: 999px; }
body .chat-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}

/* --- AI-branded buttons: keep the blue/violet family, pill + lift --- */
body .ai-btn,
body .adopt-ai-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe),
    background 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body .ai-btn:hover,
body .adopt-ai-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(83, 152, 246, 0.4);
}
body .ai-dropdown-menu,
body .adopt-ai-menu,
body .adopt-pkg-menu {
  border-color: var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
body .ai-btn-dropdown .ai-dropdown-menu { padding: 6px; }
body .ai-dropdown-item { border-radius: 8px; }

/* Inline status / run-mode picker popovers (Validate → Smoke/Unit/etc. tests:
   the Status badge and "▶ Run ▾" menus) float over content like the
   .ai-dropdown-menu above, but were never given the theme's floating-menu
   treatment. They fall back to app.css's 1px solid var(--border), and in this
   skin --border is only 9% ink, so on the porcelain card the edge reads as
   borderless. Match the elevated menu look and give the edge enough contrast
   to actually be seen (item 7251b26c). */
body .status-picker-pop {
  border-color: rgba(37, 51, 120, 0.16);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

/* --- Small icon buttons --- */
body .adopt-icon-btn {
  border-radius: 10px;
  transition: background 0.2s var(--ease-luxe), transform 0.2s var(--ease-luxe),
    color 0.2s var(--ease-luxe);
}
body .adopt-icon-btn:hover {
  background: var(--bg-hover);
  transform: scale(1.06);
}

/* --- Inputs not yet themed --- */
body .adopt-select { border-radius: 10px; }
body .adopt-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}

/* --- Timeline cards (comms) --- */
body .comms-timeline-card {
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe),
    border-color 0.32s var(--ease-luxe);
}
body .comms-timeline-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}

/* Toasts (App.toast) already read var(--radius)/var(--shadow-lg)
   tokens inline, so they inherit the luxe values automatically.
   Placeholder panels / empty states are purely typographic — no
   boxes to re-skin. */
/* ============================================================
   Activate — Luxe skin, part 2: Agents / Sims / Co-Pilot / Chat
   Loads after theme-luxe.css. Every selector is prefixed with
   `body ` so these rules beat the screens' JS-injected <style>
   blocks (same specificity would lose on DOM order).
   !important appears ONLY where the screen writes the property
   as an inline style= attribute (marked "inline clash").
   ============================================================ */

/* ============================================================
   SHARED — modal backdrops, focus rings, hover lift for the
   inline-styled buttons on these screens
   ============================================================ */

/* Modal overlays created by these screens (backgrounds are inline —
   see CLASHES — but backdrop-filter is not, so the blur works). */
body .as-modal-overlay,
body .modal-overlay,
body #layout-modal-ov,
body #sim-modal-ov,
body #sop-editor-ov,
body #lp-modal-ov,
body #wmc-evidence-modal {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Dialog shells inside those overlays (radius is inline: clash) */
body .modal-overlay > div,
body #layout-modal-ov > div,
body #sim-modal-ov > div,
body #sop-editor-ov > div,
body #lp-modal-ov > div {
  border-radius: var(--radius-lg) !important; /* inline clash: border-radius:12px */
}
body .as-modal-overlay > [role="dialog"] {
  box-shadow: var(--shadow-lg);
}

/* Focus ring for the inline-styled inputs/selects/textareas in these
   screens' modals and forms (border-color is in an inline shorthand:
   clash, hence !important; the glow itself is clean CSS). */
body .as-modal-body :is(input, textarea, select):focus,
body .modal-overlay :is(input, textarea, select):focus,
body #sim-modal-ov :is(input, textarea, select):focus,
body #sop-editor-ov :is(input, textarea, select):focus,
body #lp-modal-ov :is(input, textarea, select):focus,
body #layout-modal-ov :is(input, textarea, select):focus,
body #am-creds :is(input, select):focus,
body #ag-chat-input:focus {
  border-color: var(--accent) !important; /* inline clash: border shorthand */
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
  outline: none;
}

/* Hover lift + luxe transition for the inline-styled action buttons on
   these screens (geometry/colors stay inline — listed as clashes). */
body button[onclick^="AgentStudio."],
body button[onclick^="AgentMenu."],
body button[onclick^="AgentMonitor."],
body button[onclick^="Simulations."],
body button[onclick^="UserPools."],
body button[onclick^="Research."],
body button[onclick^="Learning."],
body button[onclick^="PerceivedError."],
body button[onclick^="WMMobileOverlay."],
body .as-modal-actions button,
body .rm-ok, body .rm-cancel {
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe),
              background 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe),
              filter 0.25s var(--ease-luxe);
}
body button[onclick^="AgentStudio."]:hover:not(:disabled),
body button[onclick^="AgentMenu."]:hover:not(:disabled),
body button[onclick^="AgentMonitor."]:hover:not(:disabled),
body button[onclick^="Simulations."]:hover:not(:disabled),
body button[onclick^="UserPools."]:hover:not(:disabled),
body button[onclick^="Research."]:hover:not(:disabled),
body button[onclick^="Learning."]:hover:not(:disabled),
body button[onclick^="PerceivedError."]:hover:not(:disabled),
body button[onclick^="WMMobileOverlay."]:hover:not(:disabled),
body .as-modal-actions button:hover,
body .rm-ok:hover, body .rm-cancel:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Card grids that only carry inline styles (Research projects,
   Agent Menu, User Pools) — top-level tiles get the luxe card look.
   (radius/box-shadow are inline or JS-toggled: clash, hence !important) */
body #content-area div[style*="minmax(300px"] > div[onclick],
body #content-area div[style*="minmax(330px"] > div {
  border-radius: var(--radius) !important;   /* inline clash */
  box-shadow: var(--shadow) !important;      /* JS onmouseover writes inline boxShadow */
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe) !important;
}
body #content-area div[style*="minmax(300px"] > div[onclick]:hover,
body #content-area div[style*="minmax(330px"] > div:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
  border-color: rgba(65, 128, 242, 0.2);
}

/* ============================================================
   SCREEN: Co-Pilot (js/wm-copilot.js + css/wm-copilot.css)
   ============================================================ */

/* chat bubbles — soft 16px radii, 6px sender corner */
body .wmc-msg-user .wmc-msg-content {
  background: var(--accent);
  border-radius: 16px 16px 6px 16px;
  box-shadow: 0 4px 12px -6px rgba(65, 128, 242, 0.45);
}
body .wmc-msg-ai .wmc-msg-content {
  background: var(--bg-input);
  border-radius: 16px 16px 16px 6px;
  padding: 8px 12px;
}
body .wmc-msg-surface-tag { border-radius: 999px; }

/* input + send — pill accent look */
body .wmc-input-wrap {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.85);
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .wmc-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
body .wmc-send-btn,
body .wmc-stop-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe),
              background 0.25s var(--ease-luxe);
}
body .wmc-send-btn { background: var(--accent); }
body .wmc-send-btn:hover {
  background: var(--accent-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.55);
}
body .wmc-stop-btn:hover { transform: translateY(-1px); } /* semantic red: keep color */

/* Additional Info tabs — pill segmented control, ink active */
body .wmc-network-tabs {
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-light);
}
body .wmc-network-tab {
  flex: 0 1 auto;
  border-radius: 999px;
  border-bottom: none;
  padding: 5px 12px;
  transition: background 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe),
              box-shadow 0.25s var(--ease-luxe);
}
body .wmc-network-tab:hover { background: var(--bg-hover); }
body .wmc-network-tab.active {
  background: #1d2554;
  color: #fff;
  border-bottom-color: transparent;
  box-shadow: 0 4px 12px -4px rgba(29, 37, 84, 0.45);
}

/* network entries — row hover like luxe tables; chips as pills */
body .wmc-net-entry { transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe); }
body .wmc-net-entry:hover {
  background: rgba(65, 128, 242, 0.05);
  box-shadow: inset 3px 0 0 var(--accent);
}
body .wmc-net-status { border-radius: 999px; padding: 1px 8px; }
body .wmc-net-detail-body { border-radius: 9px; }
body .wmc-net-detail-label { letter-spacing: 0.7px; }

/* header chrome */
body .wmc-chat-header,
body .wmc-browser-header,
body .wmc-network-header {
  background: rgba(250, 250, 254, 0.85);
  border-bottom-color: var(--border-light);
}
body .wmc-clear-btn {
  border-radius: 10px;
  transition: background 0.25s var(--ease-luxe), transform 0.25s var(--ease-luxe);
}
body .wmc-clear-btn:hover { background: var(--bg-hover); transform: scale(1.06); }
body .wmc-splitter-h:hover, body .wmc-splitter-v:hover { background: var(--accent); }
/* trace chip (#wmc-trace-chip) is inline-styled dark-on-cyan — intentionally
   untouched: it must stay legible over the live view. */

/* ============================================================
   SCREEN: Evidence modal (js/evidence-modal.js, styles in app.css)
   ============================================================ */

body .ev-backdrop {
  background: rgba(23, 26, 63, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .ev-modal {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* tabs — pill items, ink active */
body .ev-modal-tabs { gap: 6px; padding: 8px 14px; border-bottom-color: var(--border-light); }
body .ev-tab {
  border-radius: 999px;
  border-bottom: none;
  padding: 7px 14px;
  transition: background 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe),
              box-shadow 0.25s var(--ease-luxe);
}
body .ev-tab:hover { background: var(--bg-hover); }
body .ev-tab.active {
  background: #1d2554;
  color: #fff;
  border-bottom-color: transparent;
  box-shadow: 0 4px 12px -4px rgba(29, 37, 84, 0.45);
}

/* badges / chips → pills */
body .ev-badge,
body .ev-header-id,
body .ev-btn-tag,
body .ev-indicator,
body .ev-assertion-chip,
body .ev-confidence-badge,
body .ev-evidence-type-badge { border-radius: 999px; }

/* buttons */
body .ev-export-btn {
  border-radius: 999px;
  padding: 6px 16px;
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe),
              background 0.25s var(--ease-luxe);
}
body .ev-export-btn:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
body .ev-view-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .ev-view-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.45); }
body .ev-toggle-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe),
              box-shadow 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body .ev-toggle-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--accent); }
body .ev-close-btn {
  border-radius: 10px;
  transition: background 0.25s var(--ease-luxe), transform 0.25s var(--ease-luxe);
}
body .ev-close-btn:hover { background: var(--bg-hover); transform: scale(1.06); }
body .ev-screenshot-close { transition: transform 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe); }
body .ev-screenshot-close:hover { transform: scale(1.06); }

/* inner cards / panels (nested inside the modal → no hover lift) */
body .ev-step-card,
body .ev-assertion-card { border-radius: var(--radius); border-color: var(--border-light); }
body .ev-accordion-item,
body .ev-network-entry,
body .ev-network-summary,
body .ev-console-summary,
body .ev-timing-stat,
body .ev-assertions-summary,
body .ev-pending-validations,
body .ev-dom-frame-wrap,
body .ev-diff-pane,
body .ev-json-viewer { border-radius: var(--radius-sm); border-color: var(--border-light); }

/* inputs */
body .ev-dom-select {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .ev-dom-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
  outline: none;
}

/* rows */
body .ev-network-row { transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe); }
body .ev-network-row:hover {
  background: rgba(65, 128, 242, 0.05);
  box-shadow: inset 3px 0 0 var(--accent);
}
body .ev-accordion-header { transition: background 0.22s var(--ease-luxe); }
body .ev-accordion-header:hover { background: rgba(65, 128, 242, 0.05); }
body .ev-timing-table th { font-size: 11px; letter-spacing: 0.7px; }

/* ============================================================
   SCREEN: Tiva chat panel + comments (js/chat.js, styles in app.css)
   ============================================================ */

/* The header is light chrome now — the deep indigo lives only in the Tiva
   coin (app.css .tiva-coin), so the panel reads as part of the app, not a
   third-party widget bolted onto it. */
body .chat-header { background: var(--bg); }
body .tiva-coin { box-shadow: 0 2px 8px rgba(35, 43, 99, 0.35); }
body .chat-msg .chat-bubble { border-radius: 16px; }
body .chat-msg.user .chat-bubble { border-radius: 16px 16px 6px 16px; }
body .chat-msg.assistant .chat-bubble { border-radius: 16px 16px 16px 6px; }
body .chat-input {
  border-radius: 999px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
/* The pill is a one-line shape — a grown composer gets a rounded rectangle. */
body .chat-input.is-multiline { border-radius: 16px; }
body .chat-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
body .chat-send {
  border-radius: 999px;
  background: var(--accent);
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe),
              background 0.25s var(--ease-luxe), opacity 0.25s var(--ease-luxe);
}
body .chat-send:hover:not(:disabled) {
  opacity: 1;
  background: var(--accent-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.55);
}

/* comments panel (same overlay family) */
body .comment-panel { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
body .comment-context { border-radius: 999px; }
body .comment-badge { border-radius: 999px; }
body .comment-form input, body .comment-form textarea {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .comment-form input:focus, body .comment-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
body .comment-form button {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), opacity 0.25s var(--ease-luxe);
}
body .comment-form button:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.5);
}
body .comment-context-select button,
body .comment-filter button {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe),
              border-color 0.25s var(--ease-luxe);
}
body .comment-context-select button:hover,
body .comment-filter button:hover { transform: translateY(-1px); border-color: var(--accent); }

/* ============================================================
   SCREEN: Agent Studio (js/agent-studio.js — inline-styled)
   ============================================================ */

body #as-grid > div {
  border-radius: var(--radius) !important;   /* inline clash: border-radius:10px */
  box-shadow: var(--shadow) !important;      /* JS onmouseover/out writes inline boxShadow */
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe) !important; /* inline clash: transition:box-shadow .15s */
}
body #as-grid > div:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}
/* status chip on studio/menu cards is a pill already at 10px — round fully */
body #as-grid span[style*="text-transform:uppercase"],
body #am-grid span[style*="text-transform:uppercase"] { border-radius: 999px !important; } /* inline clash */

/* ============================================================
   SCREEN: Agent Menu + per-agent chat surface (js/agents.js)
   ============================================================ */

body #am-grid > div,
body #am-creds > div {
  border-radius: var(--radius) !important;   /* inline clash: border-radius:10px */
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe);
}
body #am-grid > div:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* agent chat thread — luxe bubble radii (base radii are inline: clash) */
body #ag-chat-thread { border-color: var(--border-light); border-radius: var(--radius); }
body #ag-chat-thread > div[style*="flex-end"] { border-radius: 16px 16px 6px 16px !important; }   /* inline clash */
body #ag-chat-thread > div[style*="flex-start"] { border-radius: 16px 16px 16px 6px !important; } /* inline clash */
body #ag-chat-input { border-radius: 999px !important; } /* inline clash: 10px; dedicated chat input → pill */

/* ============================================================
   SCREEN: Agents Monitor (js/agent-monitor.js — inline-styled)
   ============================================================ */

/* stat tiles + the two summary cards */
body #am-stats > div:first-child > div,
body #am-stats > div:nth-child(2) > div {
  border-radius: var(--radius) !important;   /* inline clash: border-radius:10px */
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe);
}
body #am-stats > div:first-child > div:hover,
body #am-stats > div:nth-child(2) > div:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* runs table shell + row hover */
body #am-runs-table > div {
  border-radius: var(--radius) !important;   /* inline clash */
  box-shadow: var(--shadow);
}
body #am-runs-table > div > div[onclick] {
  transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe);
}
body #am-runs-table > div > div[onclick]:hover {
  background: rgba(65, 128, 242, 0.05) !important; /* inline clash: background set per-row */
  box-shadow: inset 3px 0 0 var(--accent);
}

/* run drawer shell (detail panel — radius only, no lift) */
body #am-run-drawer > div {
  border-radius: var(--radius-lg) !important; /* inline clash */
  box-shadow: var(--shadow);
}
/* the dark "Live activity" narration lane keeps its terminal look on purpose */

/* ============================================================
   SCREEN: Simulations (js/simulations.js)
   ============================================================ */

/* hero buttons — pills; New Sim is the screen's primary CTA */
body .sim-hero-btn {
  border-radius: 999px !important;           /* inline clash: border-radius:8px */
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe),
              background 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body .sim-hero-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.35);
}
body .sim-hero-btn[onclick*="newSim"] {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e) !important; /* inline clash: background:#253378 */
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
}
body .sim-hero-btn[onclick*="newSim"]:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c) !important;
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}

/* templates + executions tables */
body #sim-cards > div,
body #sim-executions > div {
  border-radius: var(--radius) !important;   /* inline clash: border-radius:10px */
  box-shadow: var(--shadow);
}
body #sim-cards th,
body #sim-executions th { font-size: 11px; letter-spacing: 0.7px; text-transform: uppercase; }
body .sim-row { transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe); }
body .sim-row:hover {
  background: rgba(65, 128, 242, 0.05);
  box-shadow: inset 3px 0 0 var(--accent);
}
/* Explore-warehouse 3D viewer shell only (never the canvas inside) */
body #emb-viewer { border-radius: var(--radius); border-color: var(--border-light); }

/* ============================================================
   SCREEN: User Pools (js/user-pools.js — inline-styled)
   Cards covered by the shared minmax(330px) grid rule above.
   ============================================================ */
/* (status badges are already inline 999px pills; buttons get the shared
   UserPools.* hover lift; remaining geometry is inline — see CLASHES) */

/* ============================================================
   SCREEN: Research (js/research.js — inline-styled)
   Project cards covered by the shared minmax(300px) rule above.
   ============================================================ */
body .rm-x {
  border-radius: 10px;
  transition: background 0.25s var(--ease-luxe), transform 0.25s var(--ease-luxe);
}
body .rm-x:hover { background: var(--bg-hover); transform: scale(1.06); }
body .rm-ok { border-radius: 999px !important; }     /* inline clash: 7px — modal primary CTA */
body .rm-cancel { border-radius: 999px !important; } /* inline clash: 7px */
body .rm-ok:hover { box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.45); }

/* ============================================================
   SCREEN: Agent Learning (js/learning.js)
   Cards/buttons use var(--radius)/var(--radius-sm) inline, so they
   inherit the luxe tokens automatically. Tabs are JS-toggled inline
   (see CLASHES); only the hover polish is reachable:
   ============================================================ */
body button[id^="lc-tab-"] { transition: color 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe); }
body button[id^="lc-tab-"]:hover { background: var(--bg-hover); border-radius: 10px 10px 0 0; }

/* ============================================================
   SCREEN: AI Quality / Perceived Errors (js/perceived-error.js)
   ============================================================ */
body div[onclick^="PerceivedError.openTrace"] {
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe),
              border-color 0.25s var(--ease-luxe);
}
body div[onclick^="PerceivedError.openTrace"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   SCREEN: TwinViewer HTML overlay (js/twin-viewer.js)
   Dark HUD buttons over the 3D view keep their look — hover polish
   only. The 3D canvas itself is untouched.
   ============================================================ */
body button[data-cam],
body button[data-tog] {
  transition: filter 0.25s var(--ease-luxe), transform 0.25s var(--ease-luxe);
}
body button[data-cam]:hover,
body button[data-tog]:hover { filter: brightness(1.3); transform: translateY(-1px); }

/* ============================================================
   SCREEN: Mobile companion overlay (js/wm-mobile-overlay.js)
   Coach-mark cards stay dark (device-overlay aesthetic); the side
   panel input gets the luxe focus ring; buttons get the shared
   WMMobileOverlay.* hover lift above.
   ============================================================ */
body #wm-ov-input {
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body #wm-ov-input:focus {
  border-color: var(--accent) !important; /* inline clash: border shorthand */
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
  outline: none;
}
/* ============================================================
   Activate — Luxe skin overrides, batch 3: "Manage" screens
   Covers: documents.js, kanban.js, pm.js, project-plan.js,
   feedback.js, files.js, graph.js, sops.js, help.js,
   help-docs.js, profile.js, approvals.js
   Every selector is body-prefixed so it beats same-specificity
   rules in app.css and JS-injected <style> blocks (which land
   after theme-luxe.css in DOM order).
   ============================================================ */

/* ============================================================
   SHARED — export dropdown (kanban / project-plan / graph),
   help tooltips (help.js)
   ============================================================ */
body .export-btn {
  border-radius: 999px;
  padding: 6px 14px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe),
              border-color 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe);
}
body .export-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent);
}
body .export-menu {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow-md);
  padding: 6px;
}
body .export-item {
  border-radius: 9px;
  transition: background 0.2s var(--ease-luxe), color 0.2s var(--ease-luxe);
}
body .export-item:hover { background: var(--bg-hover); }

/* help.js tooltip bubble */
body .help-tooltip {
  border-radius: 10px;
  background: #1d2554;
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   DOCUMENTS (documents.js) — design-doc viewer, requirements
   table, traceability, extensions
   ============================================================ */
body .doc-toc li a {
  border-radius: 0 999px 999px 0;
  transition: color 0.2s var(--ease-luxe), background 0.2s var(--ease-luxe),
              border-color 0.2s var(--ease-luxe);
}
body .doc-body pre,
body .doc-body table,
body .doc-body img,
body .doc-body blockquote { border-radius: var(--radius-sm); }
body .doc-body pre { overflow: hidden; overflow-x: auto; }

/* requirements table → floating card */
body .req-table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  overflow: hidden;
}
body .req-table thead th { font-size: 11px; letter-spacing: 0.7px; }
body .req-table tbody tr {
  transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe);
}
body .req-table tbody tr:hover td { background: rgba(65, 128, 242, 0.05); }
body .req-table tbody tr:hover { box-shadow: inset 3px 0 0 var(--accent); }
body .req-empty-row:hover { box-shadow: none; }

/* upload chips + inline editors */
body .req-upload-chip { border-radius: 999px; }
body .req-select,
body .req-status-select { border-radius: 10px; }
body .req-trace-input {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .req-trace-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
body .req-delete-btn {
  border-radius: 10px;
  padding: 2px 6px;
  transition: opacity 0.2s var(--ease-luxe), background 0.2s var(--ease-luxe),
              transform 0.2s var(--ease-luxe);
}
body .req-delete-btn:hover { background: var(--bg-hover); transform: scale(1.06); }

/* extensions tab */
body .ext-card {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe),
              border-color 0.32s var(--ease-luxe);
}
body .ext-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}
body .ext-empty { border-radius: var(--radius-lg); }
body .ext-badge { border-radius: 999px; }

/* ============================================================
   KANBAN (kanban.js) — board columns, draggable cards, modal
   ============================================================ */
body .kb-column {
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-lg);
}
body .kb-col-count { border-radius: 999px; }
body .kb-col-dragover {
  background: rgba(65, 128, 242, 0.08);
  border-radius: var(--radius-lg);
}

/* cards are draggable → slightly stronger lift */
body .kb-card {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe),
              border-color 0.32s var(--ease-luxe);
}
body .kb-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(65, 128, 242, 0.2);
}
body .kb-card-tag { border-radius: 999px; }

/* board/list segmented toggle → ink pill */
body .kb-view-toggle {
  border-radius: 999px;
  background: #fff;
  padding: 3px;
  gap: 2px;
  border-color: var(--border);
}
body .kb-view-btn {
  border-radius: 999px;
  background: transparent;
  transition: background 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe);
}
body .kb-view-btn.active { background: #1d2554; color: #fff; }
body .kb-view-btn:hover:not(.active) { background: var(--bg-hover); }

/* modal + inputs (also reused by project-plan's task modal) */
body .kb-modal-overlay {
  background: rgba(23, 26, 63, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .kb-modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
body .kb-input {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .kb-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
body .kb-tag-opt {
  border-radius: 999px;
  transition: border-color 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe),
              color 0.25s var(--ease-luxe), transform 0.25s var(--ease-luxe);
}
body .kb-tag-opt:hover { transform: translateY(-1px); }

/* ============================================================
   PROJECT PLAN (project-plan.js) — Gantt/table toggles, rows,
   status badges (modal shell reuses kb-modal above)
   ============================================================ */
body .pp-view-toggle,
body .pp-zoom-toggle {
  border-radius: 999px;
  background: #fff;
  padding: 3px;
  gap: 2px;
  border-color: var(--border);
}
body .pp-view-btn,
body .pp-zoom-btn {
  border-radius: 999px;
  background: transparent;
  transition: background 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe);
}
body .pp-view-btn.active,
body .pp-zoom-btn.active { background: #1d2554; color: #fff; }
body .pp-view-btn:hover:not(.active),
body .pp-zoom-btn:hover:not(.active) { background: var(--bg-hover); }

body .pp-th { font-size: 11px; letter-spacing: 0.7px; }
body .pp-row {
  transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe);
}
body .pp-row:hover {
  background: rgba(65, 128, 242, 0.05);
  box-shadow: inset 3px 0 0 var(--accent);
}
body .pp-status-badge { border-radius: 999px; padding: 2px 9px; }
body .pp-modal-overlay {
  background: rgba(23, 26, 63, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ============================================================
   FILES (files.js) — context card, stat tiles, sections, table
   ============================================================ */
body .files-context-card {
  border-radius: var(--radius-lg);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe),
              border-color 0.32s var(--ease-luxe);
}
body .files-context-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}
body .files-stat { border-radius: var(--radius); }
body .files-section {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe),
              border-color 0.32s var(--ease-luxe);
}
body .files-section:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}
body .files-section-count { border-radius: 999px; }
body .files-table thead th { font-size: 11px; letter-spacing: 0.7px; }
body .files-table tbody tr {
  transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe);
}
body .files-table tbody tr:hover td { background: rgba(65, 128, 242, 0.05); }
body .files-table tbody tr:hover { box-shadow: inset 3px 0 0 var(--accent); }

/* ============================================================
   GRAPH (graph.js) — container card only; canvas/SVG internals
   untouched. Most toolbar controls are inline-styled (see
   clashes) — only non-inline properties are lifted here.
   ============================================================ */
body #graph-container { box-shadow: var(--shadow); }
body #graph-legend { box-shadow: var(--shadow-sm); }
body #graph-detail { border-radius: var(--radius-lg); }

/* ============================================================
   SOPS (sops.js) — role sidebar, accordion sections, buttons,
   modal, toast (styles injected by _injectStyles)
   ============================================================ */
body .sops-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe),
              border-color 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe),
              background 0.25s var(--ease-luxe);
}
body .sops-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent);
}
/* solid navy primary → coral CTA pill */
body .sops-btn.primary {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
}
body .sops-btn.primary:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  border-color: transparent;
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
/* AI/sparkle-branded accent buttons keep the blue family */
body .sops-btn.accent:hover {
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.5);
}

body .sops-role-item {
  transition: background 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe),
              box-shadow 0.25s var(--ease-luxe);
}
body .sops-role-item.active {
  border-color: rgba(65, 128, 242, 0.35);
  box-shadow: var(--shadow-sm);
}
body .sops-role-badge { border-radius: 999px; }

body .sops-section {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe),
              border-color 0.32s var(--ease-luxe);
}
body .sops-section:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}
body .sops-section-icon { border-radius: 9px; }
body .sops-empty-icon { border-radius: var(--radius-lg); }

body .sops-modal-overlay {
  background: rgba(23, 26, 63, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .sops-modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
body .sops-toast {
  border-radius: var(--radius);
  background: #1d2554;
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   HELP & DOCUMENTATION (help-docs.js) — accordion sections,
   TOC, tips, embedded tables
   ============================================================ */
body .hd-section {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe),
              border-color 0.32s var(--ease-luxe);
}
body .hd-section:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}
/* keep the deep-link highlight ring visible even while hovered */
body .hd-section-highlight,
body .hd-section-highlight:hover {
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-md);
}
body .hd-section-header { transition: background 0.2s var(--ease-luxe); }
body .hd-section-header:hover { background: var(--bg-hover); }
body .hd-tip { border-radius: var(--radius-sm); }
body .hd-toc-link { transition: color 0.2s var(--ease-luxe); }
body .hd-section-content th { font-size: 11px; letter-spacing: 0.7px; }
body .hd-table { border-radius: var(--radius-sm); }

/* ============================================================
   PROFILE (profile.js) — modal is almost entirely inline-styled
   (see clashes); buttons reuse global .btn-primary/.btn-secondary
   which theme-luxe already covers. Nothing safe to add here.
   ============================================================ */

/* ============================================================
   APPROVALS (approvals.js) — phase pills, gate banners, matrix
   table, chips, buttons, modal (styles from _styles() block)
   ============================================================ */
body .apr-toggle {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow-sm);
}

/* phase selector → pill tabs, active = ink pill */
body .apr-phase {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe),
              background 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe),
              border-color 0.25s var(--ease-luxe);
}
body .apr-phase:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent);
}
body .apr-phase.active { background: #1d2554; border-color: #1d2554; }

body .apr-gatebar,
body .apr-warn { border-radius: var(--radius-sm); }

/* approval matrix → floating card table */
body table.apr-matrix {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
}
body .apr-matrix th { letter-spacing: 0.7px; }
body .apr-matrix tbody tr,
body .apr-matrix td { transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe); }
body .apr-matrix tr:hover td { background: rgba(65, 128, 242, 0.05); }
body .apr-matrix tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

body .apr-chip,
body .apr-status { border-radius: 999px; }

/* solid navy CTA → coral pill; secondary stays outline pill */
body .apr-btn {
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe),
              background 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body .apr-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
/* must come after body .apr-btn — wins by order at equal specificity */
body .apr-btn-sec {
  background: #fff;
  color: #253378;
  border: 1px solid var(--border);
  box-shadow: none;
}
body .apr-btn-sec:hover {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.35);
}

body .apr-modal-bg {
  background: rgba(23, 26, 63, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .apr-modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
body .apr-modal select,
body .apr-modal input {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .apr-modal select:focus,
body .apr-modal input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
/* ============================================================
   Activate — Luxe skin, batch 4 (tool/dev screens)
   Overrides for JS-injected <style> blocks. Every selector is
   prefixed with `body ` so it out-specifies the screen styles
   that land after theme-luxe.css in DOM order.
   Screens: config-explorer, compare, config-health, templates,
   scripts, zpl-designer, zpl-viewer, report-developer,
   api-explorer, api-dictionary, collections-admin, env-import,
   tech (CI/CD, Jobs, Monitor, Health Checks, Integrations,
   Migrations).
   !important appears ONLY where the screen sets the property
   inline (style="...") and the element is a flagship CTA.
   ============================================================ */

/* ============================================================
   templates.js — .tpl-*
   ============================================================ */
body .tpl-card {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform .32s var(--ease-luxe), box-shadow .32s var(--ease-luxe), border-color .32s var(--ease-luxe);
}
body .tpl-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, .2);
}
body .tpl-badge { border-radius: 999px; }
body .tpl-filter {
  border-radius: 999px;
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), background .25s var(--ease-luxe), border-color .25s var(--ease-luxe), color .25s var(--ease-luxe);
}
body .tpl-filter:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--accent); }
body .tpl-filter.active {
  background: #1d2554;
  border-color: #1d2554;
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(29, 37, 84, .45);
}
body .tpl-preview { border-radius: var(--radius-sm); }
body .tpl-modal-overlay {
  background: rgba(23, 26, 63, .45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .tpl-modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
body .tpl-form-input,
body .tpl-form-select,
body .tpl-form-textarea {
  border-radius: 10px;
  transition: border-color .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe);
}
body .tpl-form-input:focus,
body .tpl-form-select:focus,
body .tpl-form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, .13);
}
/* flagship CTAs — inline-styled, hence !important (last resort) */
body button[onclick="Templates.openModal()"],
body button[onclick^="Templates.saveTemplate"] {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, .45);
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), background .25s var(--ease-luxe);
}
body button[onclick="Templates.openModal()"]:hover,
body button[onclick^="Templates.saveTemplate"]:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, .55);
}

/* ============================================================
   scripts.js — .scr-*
   ============================================================ */
body .scr-card {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform .32s var(--ease-luxe), box-shadow .32s var(--ease-luxe), border-color .32s var(--ease-luxe);
}
body .scr-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, .2);
}
body .scr-badge { border-radius: 999px; }
body .scr-preview { border-radius: var(--radius-sm); } /* dark code panel stays dark */
body .scr-filter {
  border-radius: 999px;
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), background .25s var(--ease-luxe), border-color .25s var(--ease-luxe), color .25s var(--ease-luxe);
}
body .scr-filter:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--accent); }
body .scr-filter.active {
  background: #1d2554;
  border-color: #1d2554;
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(29, 37, 84, .45);
}
body .scr-modal-overlay {
  background: rgba(23, 26, 63, .45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .scr-modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
body .scr-form-input,
body .scr-form-select {
  border-radius: 10px;
  transition: border-color .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe);
}
body .scr-form-code { border-radius: 10px; } /* keep dark editor background */
body .scr-form-input:focus,
body .scr-form-select:focus,
body .scr-form-code:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, .13);
}
body .scr-upload-zone { border-radius: var(--radius-lg); }
body .scr-upload-zone:hover { border-color: var(--accent); }
body button[onclick="Scripts.openModal()"],
body button[onclick^="Scripts.saveScript"] {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, .45);
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), background .25s var(--ease-luxe);
}
body button[onclick="Scripts.openModal()"]:hover,
body button[onclick^="Scripts.saveScript"]:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, .55);
}

/* ============================================================
   ZPL Source view (zpl-designer.js) — .zpl-*
   (label preview rendering untouched; formerly zpl-viewer.js)
   ============================================================ */
body .zpl-editor,
body .zpl-preview,
/* The Sample Data (JSON) panel (item a20be8dc) is a sibling card of the editor
   and the preview, so it takes the same treatment — left out, it reads as an
   unstyled block wedged between two themed ones. */
body .zpl-data {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
}
body .zpl-data-ta { border-radius: var(--radius-sm); transition: border-color .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe); }
body .zpl-data-ta:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(65, 128, 242, .13); outline: none; }
body .zpl-select {
  border-radius: 10px;
  transition: border-color .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe);
}
body .zpl-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, .13);
  outline: none;
}
body .zpl-btn {
  border-radius: 999px;
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), background .25s var(--ease-luxe), border-color .25s var(--ease-luxe);
}
body .zpl-btn-primary {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, .45);
}
body .zpl-btn-primary:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, .55);
}
body .zpl-btn-secondary:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, .35);
  border-color: var(--accent);
}
/* .zpl-preview-area img intentionally untouched — pixel-accurate label */

/* ============================================================
   zpl-designer.js — .zd-*  (canvas + preview fidelity untouched)
   ============================================================ */
body .zd-card {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform .32s var(--ease-luxe), box-shadow .32s var(--ease-luxe), border-color .32s var(--ease-luxe);
}
body .zd-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, .2);
}
body .zd-toolbar,
body .zd-canvas-col,
body .zd-preview-col,
body .zd-side {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
}
body .zd-btn {
  border-radius: 999px;
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), background .25s var(--ease-luxe), border-color .25s var(--ease-luxe), color .25s var(--ease-luxe);
}
body .zd-btn-pri {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, .45);
}
body .zd-btn-pri:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, .55);
}
body .zd-btn-sec:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, .35);
  border-color: var(--accent);
}
body .zd-btn-ghost:hover { transform: translateY(-1px); color: var(--text-primary); }
/* danger button keeps its red family — pill + lift only */
body .zd-btn-del:hover {
  background: #fee2e2;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(193, 21, 58, .3);
}
body .zd-tool { border-radius: 10px; transition: border-color .25s var(--ease-luxe), color .25s var(--ease-luxe), background .25s var(--ease-luxe); }
body .zd-tool:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-hover); }
body .zd-sel,
body .zd-num,
body .zd-pin,
body .zd-name-input {
  border-radius: 10px;
  transition: border-color .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe);
}
body .zd-sel:focus,
body .zd-num:focus,
body .zd-pin:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, .13);
  outline: none;
}
body .zd-name-input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(65, 128, 242, .13); }
body .zd-zpl,
body .zd-prev-zpl,
body .zd-data-ta { border-radius: var(--radius-sm); }
body .zd-data-ta { transition: border-color .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe); }
body .zd-data-ta:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(65, 128, 242, .13); outline: none; }
body .zd-card-del { border-radius: 10px; }
/* .zd-canvas / .zd-el / .zd-preview img untouched — design surface fidelity */

/* ============================================================
   env-import.js — .envimp-*
   ============================================================ */
body .envimp-overlay {
  background: rgba(23, 26, 63, .45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .envimp-modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
body .envimp-row select {
  border-radius: 10px;
  transition: border-color .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe);
}
body .envimp-row select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, .13);
  outline: none;
}
body .envimp-items { border-radius: var(--radius-sm); }
body .envimp-item { transition: background .22s var(--ease-luxe), box-shadow .22s var(--ease-luxe); }
body .envimp-item:hover {
  background: rgba(65, 128, 242, .05);
  box-shadow: inset 3px 0 0 var(--accent);
}
body .envimp-btn {
  border-radius: 999px;
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), background .25s var(--ease-luxe), border-color .25s var(--ease-luxe);
}
body .envimp-btn.primary {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, .45);
}
body .envimp-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, .55);
}
body .envimp-btn.sec:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, .35);
  border-color: var(--accent);
}
body .envimp-bulk { border-radius: 999px; }

/* ============================================================
   collections-admin.js — .ca-*
   ============================================================ */
body .ca-btn {
  border-radius: 999px;
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), background .25s var(--ease-luxe), border-color .25s var(--ease-luxe);
}
body .ca-btn:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, .35);
  border-color: var(--accent);
}
body .ca-btn.primary {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, .45);
}
body .ca-btn.primary:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  border-color: transparent;
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, .55);
}
/* danger keeps its red family */
body .ca-btn.danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  box-shadow: 0 6px 16px -6px rgba(239, 68, 68, .3);
}
body .ca-table th { font-size: 11px; letter-spacing: .7px; }
body .ca-table tbody tr { transition: background .22s var(--ease-luxe), box-shadow .22s var(--ease-luxe); }
body .ca-table tbody tr:hover td { background: rgba(65, 128, 242, .05); }
body .ca-table tbody tr:hover { box-shadow: inset 3px 0 0 var(--accent); }
body .ca-badge { border-radius: 999px; }
body .ca-method-tag { font-family: var(--font); border-radius: 999px; }
body .ca-modal-bg {
  background: rgba(23, 26, 63, .45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .ca-modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
body .ca-modal input,
body .ca-modal textarea,
body .ca-modal select {
  border-radius: 10px;
  transition: border-color .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe);
}
body .ca-modal input:focus,
body .ca-modal textarea:focus,
body .ca-modal select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, .13);
  outline: none;
}
body .ca-import-preview { border-radius: var(--radius-sm); }
/* dense request rows — tint, not lift */
body .ca-req-row { border-radius: var(--radius-sm); transition: background .22s var(--ease-luxe), border-color .22s var(--ease-luxe); }
body .ca-req-row:hover { background: rgba(65, 128, 242, .05); border-color: rgba(65, 128, 242, .2); }
body .ca-req-action { border-radius: 999px; }
body .ca-dropzone { border-radius: var(--radius-lg); }
body .ca-dropzone:hover,
body .ca-dropzone.drag-over { border-color: var(--accent); background: rgba(65, 128, 242, .04); color: var(--accent); }

/* ============================================================
   api-explorer.js — .apix-*
   ============================================================ */
body .apix { font-family: var(--font); background: transparent; }
body .apix-sidebar { border-right-color: var(--border-light); }

/* sidebar + req/response tabs → pills, ink active */
body .apix-sidebar-tab {
  border-bottom: none;
  border-radius: 999px;
  margin: 6px 3px;
  transition: background .25s var(--ease-luxe), color .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe);
}
body .apix-sidebar-tab:hover:not(.active) { background: var(--bg-hover); color: #1d2554; }
body .apix-sidebar-tab.active {
  background: #1d2554;
  color: #fff;
  border-bottom: none;
  box-shadow: 0 4px 12px -4px rgba(29, 37, 84, .45);
}
body .apix-tab {
  border-bottom: none;
  border-radius: 999px;
  margin: 5px 2px;
  transition: background .25s var(--ease-luxe), color .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe);
}
body .apix-tab:hover:not(.active) { background: var(--bg-hover); color: #1d2554; }
body .apix-tab.active {
  background: #1d2554;
  color: #fff;
  border-bottom: none;
  box-shadow: 0 4px 12px -4px rgba(29, 37, 84, .45);
}
body .apix-tab.active .apix-tab-count { background: rgba(255, 255, 255, .18); color: #cfe0ff; }
body .apix-tab-count { border-radius: 999px; }

/* joined method | url | send group — pill the outer corners */
body .apix-method-select { border-radius: 999px 0 0 999px; padding-left: 18px; }
body .apix-send-btn {
  border-radius: 0 999px 999px 0;
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, .45);
  transition: background .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe);
}
body .apix-send-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, .55);
}
body .apix-send-btn.loading { background: #64748b; box-shadow: none; }
body .apix-url-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, .13);
}
body .apix-save-btn {
  border-radius: 999px;
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), border-color .25s var(--ease-luxe), background .25s var(--ease-luxe);
}
body .apix-save-btn:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, .35);
  border-color: var(--accent);
}

/* tree / history rows — tint treatment, never lift */
body .apix-coll-header:hover,
body .apix-folder-header:hover,
body .apix-req-item:hover,
body .apix-hist-item:hover { background: rgba(65, 128, 242, .05); }
body .apix-req-item,
body .apix-hist-item { transition: background .22s var(--ease-luxe); }
body .apix-coll-badge { border-radius: 999px; }
body .apix-edit-badge { border-radius: 999px; }
body .apix-hist-status { border-radius: 999px; }
body .apix-req-item .method-tag,
body .apix .method-tag { font-family: var(--font); border-radius: 999px; }

/* key-value editor + body editor */
body .apix-kv-table th { font-size: 11px; letter-spacing: .7px; }
body .apix-kv-input { border-radius: 8px; transition: border-color .22s var(--ease-luxe), box-shadow .22s var(--ease-luxe), background .22s var(--ease-luxe); }
body .apix-kv-input:hover { border-color: var(--border); }
body .apix-kv-input:focus {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(65, 128, 242, .13);
}
body .apix-kv-del { border-radius: 10px; transition: transform .2s var(--ease-luxe), color .2s var(--ease-luxe), background .2s var(--ease-luxe); }
body .apix-kv-del:hover { transform: scale(1.06); }
body .apix-add-row {
  border-radius: 999px;
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), border-color .25s var(--ease-luxe), background .25s var(--ease-luxe);
}
body .apix-add-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--accent); }
body .apix-body-textarea {
  border-radius: 10px;
  transition: border-color .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe);
}
body .apix-body-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, .13);
}
body .apix-body-type {
  border-radius: 999px;
  transition: background .25s var(--ease-luxe), color .25s var(--ease-luxe), border-color .25s var(--ease-luxe);
}
body .apix-body-type.active { background: #1d2554; border-color: #1d2554; color: #fff; }
body .apix-body-warn {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #92400e;
  background: rgba(245, 158, 11, .1);
  border: 1px solid rgba(245, 158, 11, .35);
}
body .apix-prettify-btn,
body .apix-res-btn {
  border-radius: 999px;
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), border-color .25s var(--ease-luxe), background .25s var(--ease-luxe);
}
body .apix-prettify-btn:hover,
body .apix-res-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--accent); }

/* auth + response chrome */
body .apix-auth-info { border-radius: var(--radius-sm); }
body .apix-auth-token-preview { border-radius: 8px; }
body .apix-res-status { border-radius: 999px; }
body .apix-rh-table th { font-size: 11px; letter-spacing: .7px; }
body .apix-rh-table tbody tr { transition: background .22s var(--ease-luxe); }
body .apix-rh-table tbody tr:hover td { background: rgba(65, 128, 242, .05); }
body .apix-var-tag { border-radius: 999px; }
body .apix-env-badge { border-radius: 999px; }
/* .apix-json syntax colors intentionally untouched */

/* modal + context menu */
body .apix-modal-bg {
  background: rgba(23, 26, 63, .45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .apix-modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
body .apix-modal input,
body .apix-modal select {
  border-radius: 10px;
  transition: border-color .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe);
}
body .apix-modal input:focus,
body .apix-modal select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, .13);
  outline: none;
}
body .apix-modal-btn {
  border-radius: 999px;
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), background .25s var(--ease-luxe), border-color .25s var(--ease-luxe);
}
body .apix-modal-btn.primary {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, .45);
}
body .apix-modal-btn.primary:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, .55);
}
body .apix-modal-btn.secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, .35);
  border-color: var(--accent);
}
body .apix-context-menu {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow-lg);
}
body .apix-context-item { border-radius: 8px; }

/* ============================================================
   api-dictionary.js — fully inline-styled; hooks limited to
   properties the inline styles don't set (hover/focus/motion)
   ============================================================ */
/* component list rows — tint on hover (selected row's inline bg wins, correctly) */
body #dict-comp-list > div[onclick]:hover { background: rgba(65, 128, 242, .05); }
body #dict-comp-list > div[onclick] { transition: background .22s var(--ease-luxe); }
/* endpoint rows: inline bg blocks a tint — use the accent inset bar instead */
body #dict-main [onclick^="ApiDictionary.toggleEp"] { transition: box-shadow .22s var(--ease-luxe); }
body #dict-main [onclick^="ApiDictionary.toggleEp"]:hover { box-shadow: inset 3px 0 0 var(--accent); }
/* entity cards + search-result rows — gentle lift (transform/shadow not inline) */
body #dict-main [onclick^="ApiDictionary.openEntity"],
body #dict-main [onclick^="ApiDictionary.jump"] {
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe);
}
body #dict-main [onclick^="ApiDictionary.openEntity"]:hover,
body #dict-main [onclick^="ApiDictionary.jump"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
/* focus rings (inline border shorthand can't be beaten; ring can be added) */
body #dict-q:focus,
body #dict-ep-filter:focus {
  box-shadow: 0 0 0 4px rgba(65, 128, 242, .13);
  outline: none;
}
/* flagship CTAs — inline-styled, hence !important */
body button[onclick^="ApiDictionary.runSearch"],
body #dict-main button[onclick^="ApiDictionary.openInExplorer"] {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, .45);
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), background .25s var(--ease-luxe);
}
body button[onclick^="ApiDictionary.runSearch"]:hover,
body #dict-main button[onclick^="ApiDictionary.openInExplorer"]:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, .55);
}
/* harvest button keeps accent-outline family — pill + lift only */
body #dict-harvest-btn {
  border-radius: 999px !important;
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe);
}
body #dict-harvest-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, .35);
}

/* ============================================================
   config-explorer.js — inline-styled; class hooks only
   ============================================================ */
body .ce-card {
  box-shadow: var(--shadow);
  /* radius comes from inline var(--radius) — already luxe */
}
body .ce-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
body .ce-entity-row:hover { background: rgba(65, 128, 242, .05); }
body #ce-search:focus { box-shadow: 0 0 0 4px rgba(65, 128, 242, .13); }
body #ce-refresh-btn { transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe); }
body #ce-refresh-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
/* segmented tab pills — inline radius/font, minimal !important.
   The Config screen shell's ROUTE tabs (config-screen.js .cfg-tab, onclick
   ConfigScreen.setTab) share the font normalization so both tab levels read
   as one system — but NOT the pill radius: the route tabs are deliberately
   the APIs-style underline bar, visually distinct from the Explorer's inner
   pill segments below them. */
body button[onclick^="ConfigExplorer.switchTab"],
body button[onclick^="ConfigScreen.setTab"] {
  font-family: var(--font) !important;
}
body button[onclick^="ConfigExplorer.switchTab"] {
  border-radius: 999px !important;
}
/* primary CTAs (indigo solids) → luxe coral pills */
body button[onclick^="ConfigExplorer._captureBaseline"],
body button[onclick^="ConfigExplorer._runDrift"] {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, .45);
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), background .25s var(--ease-luxe);
}
body button[onclick^="ConfigExplorer._captureBaseline"]:hover,
body button[onclick^="ConfigExplorer._runDrift"]:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, .55);
}

/* ============================================================
   compare.js — inline-styled; light hooks only
   ============================================================ */
body .cmp-view-btn { transition: background .25s var(--ease-luxe), color .25s var(--ease-luxe); }
/* Check drift = primary CTA of the drift modal */
body button[onclick="Compare.runDrift(false)"] {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, .45);
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), background .25s var(--ease-luxe);
}
body button[onclick="Compare.runDrift(false)"]:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, .55);
}

/* ============================================================
   config-health.js — inline-styled; light hooks only
   ============================================================ */
/* transaction rows — hover tint (no inline background set) */
body #ch-body [onclick^="ConfigHealth.toggle"] { transition: background .22s var(--ease-luxe); }
body #ch-body [onclick^="ConfigHealth.toggle"]:hover { background: rgba(65, 128, 242, .05); }
body #ch-component:focus { box-shadow: 0 0 0 4px rgba(65, 128, 242, .13); outline: none; }
/* Run Audit = flagship CTA */
body #ch-run {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e) !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, .45);
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), background .25s var(--ease-luxe);
}
body #ch-run:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, .55);
}

/* ============================================================
   report-developer.js — inline BTN_PRI/BTN_SEC constants;
   class/onclick hooks. Design canvas (.rd-zone/.rd-dropdata)
   intentionally untouched.
   ============================================================ */
/* primary CTAs */
body .rd-ok,
body .rd-dl,
body button[onclick="ReportDeveloper.newReport()"],
body button[onclick="ReportDeveloper.generate()"] {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, .45);
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), background .25s var(--ease-luxe);
}
body .rd-ok:hover,
body .rd-dl:hover,
body button[onclick="ReportDeveloper.newReport()"]:hover,
body button[onclick="ReportDeveloper.generate()"]:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, .55);
}
/* AI-branded button keeps its accent family — pill + lift only */
body button[onclick="ReportDeveloper.aiDraft()"] {
  border-radius: 999px !important;
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe);
}
body button[onclick="ReportDeveloper.aiDraft()"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, .35);
}
/* main secondary toolbar buttons → pills with lift */
body .rd-cancel,
body .rd-copy,
body button[onclick="ReportDeveloper.importXml()"],
body button[onclick="ReportDeveloper.back()"],
body button[onclick="ReportDeveloper.preview()"],
body button[onclick="ReportDeveloper.save()"],
body button[onclick="ReportDeveloper.remove()"] {
  border-radius: 999px !important;
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe);
}
body .rd-cancel:hover,
body .rd-copy:hover,
body button[onclick="ReportDeveloper.importXml()"]:hover,
body button[onclick="ReportDeveloper.back()"]:hover,
body button[onclick="ReportDeveloper.preview()"]:hover,
body button[onclick="ReportDeveloper.save()"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, .35);
}
body button[onclick="ReportDeveloper.remove()"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(220, 38, 38, .3); /* delete stays red */
}
/* close glyph buttons */
body .rd-x,
body .rd-pvx,
body .rd-close { transition: transform .2s var(--ease-luxe), color .2s var(--ease-luxe); }
body .rd-x:hover,
body .rd-pvx:hover,
body .rd-close:hover { transform: scale(1.15); }

/* ============================================================
   tech.js — CI/CD, Jobs, Env Monitor, Health Checks,
   Integration Map, Data Migration (shared STYLES block)
   ============================================================ */

/* --- pipeline stage cards --- */
body .cicd-stage-card {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .32s var(--ease-luxe), box-shadow .32s var(--ease-luxe), border-color .32s var(--ease-luxe);
}
body .cicd-stage-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  /* sides only — the bottom edge carries the status color */
  border-top-color: rgba(65, 128, 242, .2);
  border-left-color: rgba(65, 128, 242, .2);
  border-right-color: rgba(65, 128, 242, .2);
}
body .cicd-detail-panel,
body .monitor-detail-panel {
  border-radius: var(--radius-lg);
  border-color: var(--border-light);
}
body .cicd-tab {
  border-radius: 999px;
  border-bottom: none;
  margin-bottom: 6px;
  transition: background .25s var(--ease-luxe), color .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe);
}
body .cicd-tab:hover:not(.active) { background: var(--bg-hover); color: #1d2554; }
body .cicd-tab.active {
  background: #1d2554;
  color: #fff;
  border-bottom: none;
  box-shadow: 0 4px 12px -4px rgba(29, 37, 84, .45);
}
body .cicd-check-box { border-radius: 6px; }

/* --- tables (promotion, job history, incidents, health, integrations, migrations) --- */
body .promo-table thead th,
body .job-history-table thead th,
body .monitor-incidents-table thead th,
body .hc-table thead th,
body .integration-table thead th,
body .mig-table thead th { font-size: 11px; letter-spacing: .7px; }
body .promo-table tbody tr,
body .job-history-table tbody tr,
body .monitor-incidents-table tbody tr,
body .hc-table tbody tr,
body .integration-table tbody tr,
body .mig-table tbody tr { transition: background .22s var(--ease-luxe), box-shadow .22s var(--ease-luxe); }
body .promo-table tbody tr:hover,
body .job-history-table tbody tr:hover,
body .monitor-incidents-table tbody tr:hover,
body .hc-table tbody tr:hover,
body .integration-table tbody tr:hover,
body .mig-table tbody tr:hover {
  background: rgba(65, 128, 242, .05);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* --- chips / badges → pills --- */
body .promo-badge,
body .job-type-badge,
body .hc-status-badge,
body .intg-dir-badge,
body .intg-status-badge,
body .mig-cat-badge { border-radius: 999px; }

/* --- filter + action buttons --- */
body .promo-filter-btn {
  border-radius: 999px;
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), background .25s var(--ease-luxe), border-color .25s var(--ease-luxe), color .25s var(--ease-luxe);
}
body .promo-filter-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
body .promo-filter-btn.active {
  background: #1d2554;
  border-color: #1d2554;
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(29, 37, 84, .45);
}
/* success-green / neutral semantic buttons keep their color family */
body .promo-action-btn,
body .monitor-check-btn {
  border-radius: 999px;
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), background .25s var(--ease-luxe), color .25s var(--ease-luxe);
}
body .promo-action-btn:hover,
body .monitor-check-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* --- jobs --- */
body .jobs-view-toggle { border-radius: 999px; }
body .jobs-view-btn { transition: background .25s var(--ease-luxe), color .25s var(--ease-luxe); }
body .jobs-view-btn.active { background: #1d2554; color: #fff; }
body .jobs-search {
  border-radius: 999px;
  transition: border-color .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe);
}
body .jobs-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, .13);
}
body .job-card {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform .32s var(--ease-luxe), box-shadow .32s var(--ease-luxe), border-color .32s var(--ease-luxe);
}
body .job-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, .2);
}
body .job-modal-overlay,
body .hc-modal-overlay,
body .mig-modal-overlay {
  background: rgba(23, 26, 63, .45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .job-modal,
body .hc-modal,
body .mig-modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
body .job-modal-header,
body .hc-modal-header,
body .mig-modal-header { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
body .job-modal-close {
  border-radius: 10px;
  transition: transform .2s var(--ease-luxe), background .2s var(--ease-luxe), color .2s var(--ease-luxe);
}
body .job-modal-close:hover { transform: scale(1.06); }
body .job-form-input,
body .job-form-select {
  border-radius: 10px;
  transition: border-color .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe);
}
body .job-form-input:focus,
body .job-form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, .13);
}
body .job-cron-preset {
  border-radius: 999px;
  transition: transform .25s var(--ease-luxe), border-color .25s var(--ease-luxe), color .25s var(--ease-luxe);
}
body .job-cron-preset:hover { transform: translateY(-1px); }

/* tech.js re-declares .btn-primary/.btn-secondary in its own <style>,
   overriding the theme — re-assert the luxe treatment inside content */
body #content-area .btn-primary {
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, .45);
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), background .25s var(--ease-luxe);
}
body #content-area .btn-primary:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, .55);
}
body #content-area .btn-secondary {
  border-radius: 999px;
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), border-color .25s var(--ease-luxe), color .25s var(--ease-luxe);
}
body #content-area .btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, .35);
  border-color: var(--accent);
}

/* --- section wrappers --- */
body .tech-section,
body .timeline-container {
  border-radius: var(--radius-lg);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
}

/* --- environment monitor --- */
body .monitor-card {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform .32s var(--ease-luxe), box-shadow .32s var(--ease-luxe), border-color .32s var(--ease-luxe);
}
body .monitor-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, .2);
}
body .monitor-card.selected { border-color: var(--primary-light); }

/* --- health checks --- */
body .hc-expand-inner pre { border-radius: var(--radius-sm); }
body .hc-form-group input,
body .hc-form-group select,
body .hc-form-group textarea,
body .hc-kv-row input,
body .hc-condition-row input,
body .hc-condition-row select {
  border-radius: 10px;
  transition: border-color .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe);
}
body .hc-form-group input:focus,
body .hc-form-group select:focus,
body .hc-form-group textarea:focus,
body .hc-kv-row input:focus,
body .hc-condition-row input:focus,
body .hc-condition-row select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, .13);
  outline: none;
}
body .hc-kv-remove {
  border-radius: 10px;
  transition: transform .2s var(--ease-luxe), background .2s var(--ease-luxe), color .2s var(--ease-luxe);
}
body .hc-kv-remove:hover { transform: scale(1.06); }
body .hc-quick-setup { border-radius: var(--radius-lg); }
body .hc-quick-setup button {
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, .45);
  transition: transform .25s var(--ease-luxe), box-shadow .25s var(--ease-luxe), background .25s var(--ease-luxe);
}
body .hc-quick-setup button:hover {
  filter: none;
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, .55);
}
body .hc-test-result { border-radius: var(--radius-sm); }

/* --- integration map / migration tracker --- */
body .integration-canvas { border-radius: var(--radius-lg); border-color: var(--border-light); }
body .mig-progress-bar { border-radius: 999px; }
body .mig-progress-fill { border-radius: 999px; }
body .mig-val-badge { border-radius: 999px; }
/* ============================================================
   Activate — Luxe skin overrides, batch 5: Adopt suite
   Screens: adopt.js (Personas / Change Impacts / Training /
   Communications / Surveys / Readiness / LMS Portal / Catalog /
   Reports / Quiz / Screen Flows / DAP), academy.js,
   training-gen.js, reference-guides.js, branding.js.
   (process-drift.js, training-library.js are inline-styled — see
   CLASHES; screen-map.js has no UI; dap-inject.js runs on
   external manh.com pages where this skin is not loaded.)

   All selectors are body-prefixed so they beat the screens'
   JS-injected <style> blocks (which land after theme-luxe.css
   in DOM order) at higher specificity.
   ============================================================ */

/* ============================================================
   ADOPT — shared shell (adopt.js + app.css adopt layer)
   ============================================================ */

/* empty state + filter bar are top-level panels */
body .adopt-empty {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
}
body .adopt-filter-bar {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
}

/* small icon-only buttons */
body .adopt-icon-btn {
  border-radius: 10px;
  transition: background 0.25s var(--ease-luxe), transform 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe);
}
body .adopt-icon-btn:hover {
  background: var(--bg-hover);
  transform: scale(1.06);
}

/* chips / badges / tags → full pills */
body .adopt-impact-badge,
body .adopt-status-badge,
body .adopt-persona-chip,
body .adopt-source-chip,
body .adopt-adoptability-badge,
body .adopt-mitigation-badge,
body .kb-tag-opt,
body .ai-badge {
  border-radius: 999px;
}

/* selects & shared kb inputs */
body .adopt-select {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .adopt-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
  outline: none;
}
body .kb-input {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .kb-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}

/* AI-branded buttons: keep blue/purple family, pill + lift only */
body .adopt-ai-btn,
body .ai-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body .adopt-ai-btn:hover,
body .ai-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(83, 152, 246, 0.4);
}
body .adopt-ai-menu,
body .adopt-pkg-menu,
body .ai-btn-dropdown .ai-dropdown-menu {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow-lg);
}

/* adopt modal — luxe backdrop (shell radius/shadow already token-driven) */
body .adopt-modal-overlay {
  background: rgba(23, 26, 63, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .adopt-modal {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* segmented view toggle (Comms/Surveys list-vs-calendar) → pill items */
body .adopt-view-toggle { gap: 4px; }
body .adopt-view-toggle .filter-btn,
body .adopt-view-toggle .filter-btn:first-child,
body .adopt-view-toggle .filter-btn:last-child {
  border-radius: 999px;
}

/* ============================================================
   ADOPT — Change Impacts sub-screen
   ============================================================ */
body .impact-table {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
}
body .impact-row-summary {
  transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe);
}
body .impact-row-summary:hover {
  background: rgba(65, 128, 242, 0.05);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ============================================================
   ADOPT — Training sub-screen (authoring layout; content itself
   — Editor.js internals, uploaded video, branded output — untouched)
   ============================================================ */
body .training-layout {
  border-radius: var(--radius-lg);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
}
body .h5p-block-field input:focus,
body .training-video-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}

/* ============================================================
   ADOPT — Communications sub-screen
   ============================================================ */
body .comms-timeline-card {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe), border-color 0.32s var(--ease-luxe);
}
body .comms-timeline-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}

/* ============================================================
   ADOPT — Readiness Dashboard sub-screen
   ============================================================ */
body .readiness-gauge-card,
body .readiness-dimensions {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe), border-color 0.32s var(--ease-luxe);
}
body .readiness-gauge-card:hover,
body .readiness-dimensions:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}
body .readiness-ai-narrative {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* rounded progress tracks, semantic fill colors preserved */
body .readiness-dim-bar-track,
body .readiness-dim-bar-fill,
body .video-progress-bar,
body .video-progress-bar-fill {
  border-radius: 999px;
}
body .readiness-risk-level { border-radius: 999px; }

/* ============================================================
   ADOPT — Learning Paths (module map)
   ============================================================ */
body .learning-path-card {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe), border-color 0.32s var(--ease-luxe);
}
body .learning-path-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}
body .lp-content-chip,
body .lp-assessment-chip,
body .lp-module-status-label {
  border-radius: 999px;
}
body .lp-access-rules-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body .lp-access-rules-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent);
}

/* ============================================================
   ADOPT — LMS Portal preview (injected block, adopt.js:1069)
   ============================================================ */
body .lms-progress-card {
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe), border-color 0.32s var(--ease-luxe);
}
body .lms-progress-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}
/* Continue = the portal's main CTA */
body .lms-continue-btn {
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe);
}
body .lms-continue-btn:hover {
  opacity: 1;
  transform: translateY(-1px);
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
body .lms-badge {
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe), border-color 0.32s var(--ease-luxe);
}
body .lms-badge:hover:not(.locked) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}
body .cert-badge { border-radius: 999px; }

/* ============================================================
   ADOPT — Course Catalog (injected block)
   ============================================================ */
body .catalog-card {
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe), border-color 0.32s var(--ease-luxe);
}
body .catalog-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}
/* white hero button on the gradient banner: pill + lift, keeps white */
body .catalog-hero-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .catalog-hero-btn:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -8px rgba(23, 26, 63, 0.45);
}
body .catalog-filter-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .catalog-filter-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
body .catalog-filter-btn.active {
  box-shadow: 0 4px 12px -4px rgba(29, 37, 84, 0.5);
}
body .catalog-search {
  border-radius: 999px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .catalog-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
  outline: none;
}
/* card action button: accent/pass/partial color families preserved */
body .catalog-card-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .catalog-card-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(65, 128, 242, 0.45);
}
body .catalog-badge,
body .catalog-difficulty {
  border-radius: 999px;
}
body .catalog-card-progress,
body .catalog-card-progress-fill {
  border-radius: 999px;
}

/* ============================================================
   ADOPT — Reports (injected block)
   ============================================================ */
body .report-panel {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe), border-color 0.32s var(--ease-luxe);
}
body .report-panel:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}
body .report-bar-track,
body .report-bar-fill {
  border-radius: 999px;
}
body .report-persona-table th {
  font-size: 11px;
  letter-spacing: 0.7px;
}
body .report-persona-table tr {
  transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe);
}
body .report-persona-table tbody tr:hover,
body .report-persona-table tr:hover td {
  background: rgba(65, 128, 242, 0.05);
}

/* ============================================================
   ADOPT — Quiz Taker (injected block)
   ============================================================ */
body .quiz-overlay {
  background: rgba(23, 26, 63, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .quiz-container {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
body .quiz-progress,
body .quiz-progress-fill {
  border-radius: 999px;
}
body .quiz-close {
  border-radius: 10px;
  transition: background 0.25s var(--ease-luxe), transform 0.25s var(--ease-luxe);
}
body .quiz-close:hover {
  background: var(--bg-hover);
  transform: scale(1.06);
}
/* Next / Submit = primary CTA of the quiz flow */
body .quiz-next-btn {
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe);
}
body .quiz-next-btn:hover:not(:disabled) {
  opacity: 1;
  transform: translateY(-1px);
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
body .quiz-retake-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body .quiz-retake-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent);
}
/* answer options keep semantic correct/incorrect colors; soften radius */
body .quiz-option { border-radius: var(--radius); }

/* ============================================================
   ADOPT — Screen Flow editor & evidence browser (adopt.js:2501)
   (sf-viewer dark stage kept as a "player" — chrome only)
   ============================================================ */
body .sf-step-list,
body .sf-step-editor {
  border-color: var(--border-light);
  box-shadow: var(--shadow);
}
body .sf-field input,
body .sf-field textarea,
body .sf-field select {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .sf-field input:focus,
body .sf-field textarea:focus,
body .sf-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
  outline: none;
}
body .sf-img-actions button {
  border-radius: 10px;
  transition: background 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe), transform 0.25s var(--ease-luxe);
}
body .sf-img-actions button:hover { transform: scale(1.04); }
/* danger button keeps red family: pill + lift only */
body .sf-delete-step {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .sf-delete-step:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(193, 21, 58, 0.4);
}
body .sf-viewer-controls button { border-radius: 999px; }
body .sf-evidence-badge { border-radius: 999px; }
body .sf-evidence-row {
  border-radius: var(--radius-sm);
  transition: background 0.22s var(--ease-luxe), border-color 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe);
}
body .sf-evidence-row:hover { box-shadow: var(--shadow-sm); }

/* ============================================================
   ADOPT — Digital Adoption (DAP) config screen (adopt.js:5136)
   ============================================================ */
/* tabs → pill items, dark-ink active */
body .dap-tabs {
  padding: 6px;
  gap: 6px;
  border-color: var(--border-light);
}
body .dap-tab-btn {
  border-radius: 999px;
  border-bottom: none;
  transition: background 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .dap-tab-btn.active {
  background: linear-gradient(135deg, #232b63, #1a2150);
  color: #fff;
  border-bottom: none;
  box-shadow: 0 4px 14px -4px rgba(29, 37, 84, 0.45);
}
body .dap-tab-btn.active .dap-tab-badge {
  background: rgba(255, 255, 255, 0.18);
  color: #cfe0ff;
}
body .dap-tab-badge { border-radius: 999px; }
body .dap-tab-body { border-color: var(--border-light); }
body .dap-error { border-radius: 10px; }

/* primary solid CTAs → coral pills */
body .dap-add-btn,
body .dap-save-btn,
body .dap-sug-generate {
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe);
}
body .dap-add-btn:hover,
body .dap-save-btn:hover,
body .dap-sug-generate:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}

/* semantic approve/reject keep their families: pill + lift */
body .dap-sug-approve,
body .dap-sug-reject {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .dap-sug-approve:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(16, 185, 129, 0.45);
}
body .dap-sug-reject:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(239, 68, 68, 0.35);
}

/* icon-only delete */
body .dap-rule-del {
  border-radius: 10px;
  transition: background 0.25s var(--ease-luxe), transform 0.25s var(--ease-luxe);
}
body .dap-rule-del:hover {
  background: var(--bg-hover);
  transform: scale(1.06);
}

/* inputs */
body .dap-rule-row input,
body .dap-rule-row select,
body .dap-rule-textarea {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .dap-rule-row input:focus,
body .dap-rule-row select:focus,
body .dap-rule-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
  outline: none;
}

/* suggestion + analytics cards (dap-rule/stat/settings cards already themed) */
body .dap-sug-card,
body .dap-analytics-section {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe), border-color 0.32s var(--ease-luxe);
}
body .dap-sug-card:hover,
body .dap-analytics-section:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}
body .dap-sug-type { border-radius: 999px; }
body .dap-sug-draft { border-radius: var(--radius-sm); }
body .dap-prompt-trigger { border-radius: var(--radius-sm); }

/* analytics table */
body .dap-table th {
  font-size: 11px;
  letter-spacing: 0.7px;
}
body .dap-table tr {
  transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe);
}
body .dap-table tbody tr:hover,
body .dap-table tr:hover td {
  background: rgba(65, 128, 242, 0.05);
}
body .dap-table tbody tr:hover {
  box-shadow: inset 3px 0 0 var(--accent);
}
body .dap-bar { border-radius: 999px; }

/* ============================================================
   ACADEMY (academy.js)
   ============================================================ */
/* KPI tiles */
body .ac-kpi {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe), border-color 0.32s var(--ease-luxe);
}
body .ac-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}

/* underline tabs → ink pills */
body .ac-tabs {
  gap: 6px;
  border-bottom: none;
  padding-bottom: 2px;
}
body .ac-tab {
  border-radius: 999px;
  border-bottom: none;
  margin-bottom: 0;
  padding: 8px 16px;
  transition: background 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .ac-tab:hover { background: var(--bg-hover); }
body .ac-tab.active {
  background: linear-gradient(135deg, #232b63, #1a2150);
  color: #fff;
  border-bottom: none;
  box-shadow: 0 4px 14px -4px rgba(29, 37, 84, 0.45);
}

/* buttons: primary → coral pill; secondary/danger → pill + lift */
body .ac-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body .ac-btn-p {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
}
body .ac-btn-p:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
body .ac-btn-s:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.35);
  border-color: var(--accent);
}
body .ac-btn-d:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(185, 28, 28, 0.3);
}

/* table + badges */
body .ac-table th {
  font-size: 11px;
  letter-spacing: 0.7px;
}
body .ac-table tr.ac-row {
  transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe);
}
body .ac-table tr.ac-row:hover {
  background: rgba(65, 128, 242, 0.05);
  box-shadow: inset 3px 0 0 var(--accent);
}
body .ac-badge { border-radius: 999px; }

/* forms + modal */
body .ac-field input,
body .ac-field textarea,
body .ac-field select {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .ac-field input:focus,
body .ac-field textarea:focus,
body .ac-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
  outline: none;
}
body .ac-modal {
  background: rgba(23, 26, 63, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .ac-modal-box {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   TRAINING GEN (training-gen.js)
   ============================================================ */
/* green "Generate Training" is semantic-success: pill + lift, keep green */
body .tgen-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .tgen-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(60, 198, 154, 0.5);
}
/* test-picker modal has NO stylesheet of its own — define the luxe shell */
body .tgen-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(23, 26, 63, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
body .tgen-modal {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  overflow: hidden;
}
body .tgen-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
}
body .tgen-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 10px;
  transition: background 0.25s var(--ease-luxe), transform 0.25s var(--ease-luxe);
}
body .tgen-modal-close:hover {
  background: var(--bg-hover);
  transform: scale(1.06);
}

/* ============================================================
   REFERENCE GUIDES (reference-guides.js)
   (rg-card base/hover already themed; rg-printable & @media print
   left exactly as authored — branded printable output)
   ============================================================ */
/* primary CTA → coral pill; the ✨ AI Generate trigger keeps its
   navy/AI family via the attribute exemption below */
body .rg-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body .rg-btn:not(.rg-btn-sec):not(.rg-btn-danger):not([onclick*="showGenerate"]) {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
}
body .rg-btn:not(.rg-btn-sec):not(.rg-btn-danger):not([onclick*="showGenerate"]):hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
/* AI-branded generate: keep ink family, lift only */
body .rg-btn[onclick*="showGenerate"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(37, 51, 120, 0.45);
}
body .rg-btn-sec:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.35);
  border-color: var(--accent);
}
body .rg-btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(220, 38, 38, 0.3);
}
body .rg-card-badge,
body .rg-card-tag {
  border-radius: 999px;
}
body .rg-empty { border-radius: var(--radius-lg); }

/* editor modal */
body .rg-modal {
  background: rgba(23, 26, 63, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .rg-modal-content {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
body .rg-form input,
body .rg-form select,
body .rg-form textarea {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .rg-form input:focus,
body .rg-form select:focus,
body .rg-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
body .rg-preview-controls {
  border-radius: var(--radius-sm);
  border-color: var(--border-light);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   BRANDING (branding.js) — the config UI only; preset palette
   data and the live brand preview render as authored
   ============================================================ */
body .brand-input,
body .brand-hex-input {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .brand-input:focus,
body .brand-hex-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
body .brand-file-btn {
  border-radius: 10px;
  transition: background 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe), transform 0.25s var(--ease-luxe);
}
body .brand-file-btn:hover {
  background: var(--bg-hover);
  transform: scale(1.06);
}
/* accent solid button = primary action (Save / Apply); the AI
   auto-extract trigger keeps its accent family */
body .brand-btn-accent {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), filter 0.25s var(--ease-luxe);
}
body .brand-btn-accent:not([onclick*="autoExtract"]) {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
}
body .brand-btn-accent:not([onclick*="autoExtract"]):hover:not(:disabled) {
  filter: none;
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
body .brand-btn-accent[onclick*="autoExtract"]:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.45);
}
body .brand-btn-outline {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .brand-btn-outline:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent);
}
body .brand-preset-card {
  border-radius: var(--radius);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe), border-color 0.32s var(--ease-luxe);
}
body .brand-preset-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.35);
}
body .brand-toast { border-radius: 999px; }

/* ============================================================
   DAP-INJECT (dap-inject.js) — best-effort only: this widget is
   bookmarklet-injected on external *.manh.com pages where the
   skin normally is NOT loaded. Rules below take effect only if
   the widget ever renders on a page that includes this skin.
   ============================================================ */
body #adap-panel {
  border-radius: 18px;
  box-shadow: 0 4px 12px rgba(23, 26, 63, 0.06), 0 24px 48px -16px rgba(37, 51, 120, 0.3);
}
body #adap-chat input { border-radius: 10px; }
body #adap-chat button { border-radius: 999px; }
/* ============================================================
   Luxe overrides — batch 6 (admin / infra / AI screens)
   Screens: Admin, Environments, Env Monitors, Pub/Sub Explorer,
   Support, Product Updates, Value Ledger, Data Sets, AI Settings,
   AI Tester, Field Monitor, Digital Twin.
   Every selector is prefixed with `body ` so it beats the
   JS-injected <style> blocks at equal-name specificity.
   !important is used ONLY against inline style attributes
   (monitors tiles/modal/buttons, datasets primary button,
   field-monitor panels) — each use is annotated.
   ============================================================ */

/* ============================================================
   ADMIN (admin.js — .adm-*)
   .adm-card hover/radius already handled by theme-luxe.
   ============================================================ */
body .adm-btn {
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  color: #fff;
  text-transform: none;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe);
}
body .adm-btn:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
body .adm-btn-sec {
  background: #fff;
  color: #253378;
  border: 1px solid var(--border);
  box-shadow: none;
}
body .adm-btn-sec:hover {
  background: #fff;
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.35);
}
body .adm-btn-danger {
  background: #fff;
  color: #dc2626;
  border: 1px solid #fecaca;
  box-shadow: none;
}
body .adm-btn-danger:hover {
  background: #fef2f2;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(220, 38, 38, 0.25);
}
body .adm-table th { font-size: 11px; letter-spacing: 0.7px; }
body .adm-table tbody tr,
body .adm-table tr { transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe); }
body .adm-table tr:hover td { background: rgba(65, 128, 242, 0.05); }
body .adm-table tbody tr:hover { box-shadow: inset 3px 0 0 var(--accent); }
body .role-pill { border-radius: 999px; }
body .adm-chip { border-radius: 999px; }
body .adm-action-btn { border-radius: 10px; transition: background 0.2s var(--ease-luxe); }
body .adm-action-btn:hover { background: var(--bg-hover); text-decoration: none; }
body .adm-modal {
  background: rgba(23, 26, 63, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .adm-modal-content,
body .adm-modal-lg {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
body .adm-modal-ftr { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
body .adm-field input,
body .adm-field select,
body .adm-field textarea {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .adm-field input:focus,
body .adm-field select:focus,
body .adm-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
body .adm-env-search {
  border-radius: 999px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .adm-env-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
body .adm-multi-select { border-radius: 10px; }
body .adm-env-list { border-radius: var(--radius-sm); border-color: var(--border-light); }

/* ============================================================
   ENVIRONMENTS (environments.js — .env-*)
   ============================================================ */
body .env-card {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe), border-color 0.32s var(--ease-luxe);
}
body .env-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}
body .env-card.selected { border-color: #253378; }
body .env-detail-panel {
  border-radius: var(--radius-lg);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: box-shadow 0.32s var(--ease-luxe);
}
body .env-detail-panel:hover { box-shadow: var(--shadow-md); }
body .env-type-badge,
body .env-link-item .link-type-badge { border-radius: 999px; }
body .env-tabs { gap: 6px; border-bottom: none; padding-bottom: 4px; }
body .env-tab {
  border-radius: 999px;
  border-bottom: 2px solid transparent;
  transition: background 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .env-tab:hover { background: var(--bg-hover); }
body .env-tab.active {
  background: #1d2554;
  color: #fff;
  border-bottom-color: transparent;
  box-shadow: 0 4px 14px -4px rgba(29, 37, 84, 0.45);
}
body .env-field input,
body .env-field select {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .env-field input:focus,
body .env-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
body .env-var-table th { font-size: 11px; letter-spacing: 0.7px; }
body .env-var-table tr { transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe); }
body .env-var-table tr:hover td { background: rgba(65, 128, 242, 0.05); }
body .env-var-table tbody tr:hover { box-shadow: inset 3px 0 0 var(--accent); }
body .env-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body .env-btn-primary {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
}
body .env-btn-primary:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
body .env-btn-secondary:hover {
  background: #fff;
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.35);
}
body .env-btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(220, 38, 38, 0.25);
}
body .env-link-item { border-radius: 10px; }
body .env-var-btn { border-radius: 10px; }

/* ============================================================
   ENV MONITORS (monitors.js — everything is inline-styled;
   tiles re-render on a 15/30s poll → static styling + hover
   only, NO entrance animations. Status colors untouched.
   !important below is required to beat inline style="" attrs.
   ============================================================ */
/* monitor tiles: inline border-radius:10px + transition:box-shadow .1s */
body #mon-grid > div[data-mon] {
  border-radius: var(--radius) !important;          /* inline radius */
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe) !important; /* inline transition */
}
body #mon-grid > div[data-mon]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;          /* JS onmouseover sets inline boxShadow */
}
/* toolbar secondary buttons (inline BTN2 string, radius 7px) */
body #mon-tv, body #mon-fleet, body #mon-alerts-btn,
body #mon-ai, body #mon-templates, body #mon-runall,
body #mm-cancel {
  border-radius: 999px !important;                  /* inline radius */
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body #mon-tv:hover, body #mon-fleet:hover, body #mon-alerts-btn:hover,
body #mon-ai:hover, body #mon-templates:hover, body #mon-runall:hover,
body #mm-cancel:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.35);
  border-color: var(--accent) !important;           /* inline border */
}
/* primary buttons (inline BTN string, navy bg) */
body #mon-new, body #mm-save {
  border-radius: 999px !important;                  /* inline radius */
  background: linear-gradient(135deg, #ff6b2e, #f04e0e) !important; /* inline navy bg */
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe);
}
body #mon-new:hover, body #mm-save:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
/* editor modal (overlay bg is inline cssText; box radius/shadow inline) */
body .mon-modal-overlay {
  background: rgba(23, 26, 63, 0.45) !important;    /* inline overlay bg */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .mon-modal-overlay > div {
  border-radius: var(--radius-lg) !important;       /* inline radius */
  box-shadow: var(--shadow-lg) !important;          /* inline shadow */
}
/* modal form inputs (.mi / .ml come from an injected <style>, class-level → no !important) */
body .mi {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .mi:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
/* alerts + fleet wrapper panels (radius is inline → clash-listed; shadow is not) */
body #mon-alerts > div,
body #mon-fleetpanel > div,
body #mon-detail > div { box-shadow: var(--shadow); }

/* ============================================================
   PUB/SUB EXPLORER (pubsub-explorer.js — .pse-*)
   .pse-card hover/radius already handled by theme-luxe.
   ============================================================ */
body .pse-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body .pse-btn-p {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
}
body .pse-btn-p:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
body .pse-btn-s:hover {
  background: #fff;
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.35);
}
body .pse-btn-d:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(185, 28, 28, 0.25);
}
body .pse-chip { border-radius: 999px; }
body .pse-item .badge { border-radius: 999px; }
body .pse-notice { border-radius: 10px; }
body .pse-msg { border-radius: var(--radius-sm); border-color: var(--border-light); }
body .pse-field input,
body .pse-field textarea {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .pse-field input:focus,
body .pse-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}

/* ============================================================
   SUPPORT (support.js — .sup-*)
   .sup-stat-card / .sup-chart-card hover handled by theme-luxe.
   ============================================================ */
body .sup-ticket-card {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe), border-color 0.32s var(--ease-luxe);
}
body .sup-ticket-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}
body .sup-ticket-card.selected { border-color: var(--accent); }
body .sup-gauge-card {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe), border-color 0.32s var(--ease-luxe);
}
body .sup-gauge-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}
body .sup-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body .sup-btn-primary {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
}
body .sup-btn-primary:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
body .sup-btn-secondary:hover {
  background: var(--bg-secondary);
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.35);
}
body .sup-btn-danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(193, 21, 58, 0.35);
}
body .sup-toolbar select,
body .sup-toolbar input[type="text"] {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .sup-toolbar input.sup-search[type="text"] { border-radius: 999px; }
body .sup-toolbar select:focus,
body .sup-toolbar input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
body .sup-severity-badge,
body .sup-status-badge,
body .sup-category-tag,
body .sup-sla-indicator { border-radius: 999px; }
body .sup-bulk-bar { border-radius: var(--radius); }
body .sup-modal-overlay {
  background: rgba(23, 26, 63, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .sup-modal {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
body .sup-modal-close {
  border-radius: 10px;
  transition: background 0.2s var(--ease-luxe), transform 0.2s var(--ease-luxe), color 0.2s var(--ease-luxe);
}
body .sup-modal-close:hover { background: var(--bg-hover); transform: scale(1.06); }
body .sup-form-group input,
body .sup-form-group select,
body .sup-form-group textarea {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .sup-form-group input:focus,
body .sup-form-group select:focus,
body .sup-form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
body .sup-comment-box textarea { border-radius: 10px; }
body .sup-comment-box textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
body .sup-time-track { border-radius: 10px; }
body .sup-sla-ref { border-radius: 10px; }
body .sup-data-table th { font-size: 11px; letter-spacing: 0.7px; }
body .sup-data-table tr { transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe); }
body .sup-data-table tr:hover td { background: rgba(65, 128, 242, 0.05); }
body .sup-data-table tbody tr:hover { box-shadow: inset 3px 0 0 var(--accent); }
body .sup-toggle-group { border-radius: 999px; padding: 2px; gap: 2px; }
body .sup-toggle-btn {
  border-radius: 999px;
  transition: background 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .sup-toggle-btn:not(:last-child) { border-right: none; }
body .sup-toggle-btn.active {
  background: #1d2554;
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(29, 37, 84, 0.45);
}

/* ============================================================
   PRODUCT UPDATES (product-updates.js — .pu-*)
   .pu-card hover/radius already handled by theme-luxe.
   ============================================================ */
body .pu-table th { font-size: 11px; letter-spacing: 0.7px; }
body .pu-table tr.pu-row { transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe); }
body .pu-table tr.pu-row:hover { background: rgba(65, 128, 242, 0.05); box-shadow: inset 3px 0 0 var(--accent); }
body .pu-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body .pu-btn-p {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
}
body .pu-btn-p:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
body .pu-btn-s:hover {
  background: #fff;
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.35);
}
body .pu-btn-d:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(185, 28, 28, 0.25);
}
body .pu-badge { border-radius: 999px; }
body .pu-field input,
body .pu-field textarea,
body .pu-field select {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .pu-field input:focus,
body .pu-field textarea:focus,
body .pu-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
body .pu-stage { border-radius: var(--radius-sm); border-color: var(--border-light); }
body .pu-modal {
  background: rgba(23, 26, 63, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .pu-modal-box {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
body .pu-progress, body .pu-progress > div { border-radius: 999px; }

/* ============================================================
   VALUE LEDGER (value-ledger.js — .vl-*)
   .vl-card hover/radius already handled by theme-luxe.
   (The printable exec report window keeps its own styles.)
   ============================================================ */
body .vl-kpi {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe), border-color 0.32s var(--ease-luxe);
}
body .vl-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(65, 128, 242, 0.2);
}
body .vl-table th { font-size: 11px; letter-spacing: 0.7px; }
body .vl-table tbody tr,
body .vl-table tr { transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe); }
body .vl-table tr:hover td { background: rgba(65, 128, 242, 0.05); }
body .vl-table tbody tr:hover { box-shadow: inset 3px 0 0 var(--accent); }
body .vl-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body .vl-btn-p {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
}
body .vl-btn-p:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
body .vl-btn-s:hover {
  background: #fff;
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.35);
}
body .vl-btn-g:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(22, 101, 52, 0.25);
}
body .vl-btn-d:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -6px rgba(185, 28, 28, 0.25);
}
body .vl-badge { border-radius: 999px; }
body .vl-field input,
body .vl-field textarea,
body .vl-field select {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .vl-field input:focus,
body .vl-field textarea:focus,
body .vl-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
body .vl-modal {
  background: rgba(23, 26, 63, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body .vl-modal-box {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
body .vl-basis { border-radius: var(--radius-sm); }

/* ============================================================
   DATA SETS (datasets.js — 100% inline styles; only a handful
   of hooks are reachable. Most items are clash-listed.
   ============================================================ */
/* tables: th font-size/letter-spacing and row hover are NOT inline → reachable */
body #ds-root table th { font-size: 11px; letter-spacing: 0.7px; text-transform: uppercase; }
body #ds-root table tr { transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe); }
body #ds-root table tbody tr:hover td { background: rgba(65, 128, 242, 0.05); }
body #ds-root table tbody tr:hover { box-shadow: inset 3px 0 0 var(--accent); }
/* primary "New Template" CTA (inline navy bg + radius 7px) */
body #ds-root button[onclick*="newTemplate"] {
  border-radius: 999px !important;                  /* inline radius */
  background: linear-gradient(135deg, #ff6b2e, #f04e0e) !important; /* inline navy bg */
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe);
}
body #ds-root button[onclick*="newTemplate"]:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
/* table wrapper cards: shadow is not inline → reachable */
body #ds-root > div > div[style*="border:1px solid"] { box-shadow: var(--shadow); }

/* ============================================================
   AI SETTINGS (ai-settings.js — .ais-*)
   .ais-card hover/radius already handled by theme-luxe.
   ============================================================ */
body .ais-tbl th { font-size: 11px; letter-spacing: 0.7px; }
body .ais-tbl tbody tr,
body .ais-tbl tr { transition: background 0.22s var(--ease-luxe), box-shadow 0.22s var(--ease-luxe); }
body .ais-tbl tr:hover td { background: rgba(65, 128, 242, 0.05); }
body .ais-tbl tbody tr:hover { box-shadow: inset 3px 0 0 var(--accent); }
body .ais-catrow:hover { box-shadow: none; }
body .ais-catrow:hover td { background: #f6f8fc; }
body .ais-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body .ais-btn-p {
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
}
body .ais-btn-p:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
body .ais-btn-s:hover {
  background: #fff;
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.35);
}
body .ais-btn-sm {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body .ais-btn-sm:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.35);
}
body .ais-mode { border-radius: 999px; }
body .ais-status { border-radius: 999px; }
body .ais-src { border-radius: 999px; }
body .ais-in,
body .ais-ta {
  border-radius: 10px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .ais-in:focus,
body .ais-ta:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
/* keep .ais-toggle green switch semantics as-is */

/* ============================================================
   AI TESTER (ai-tester.js — .ait-* styled in app.css)
   Video panel keeps its dark live-view aesthetic — container
   rounding only. Run (green) / Stop (red) keep their colors.
   ============================================================ */
body .ait-command-bar {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
  transition: box-shadow 0.32s var(--ease-luxe), border-color 0.32s var(--ease-luxe);
}
body .ait-command-bar:hover { box-shadow: var(--shadow-md); }
body .ait-command-input {
  border-radius: 999px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .ait-command-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
body .ait-presets-btn {
  border-radius: 10px;
  transition: background 0.2s var(--ease-luxe), transform 0.2s var(--ease-luxe), color 0.2s var(--ease-luxe);
}
body .ait-presets-btn:hover { background: var(--bg-hover); transform: scale(1.06); }
body .ait-presets-dropdown {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow-lg);
}
body .ait-preset-item { border-radius: var(--radius-sm); }
body .ait-mode-toggle { border-radius: 999px; }
body .ait-mode-btn {
  border-radius: 999px;
  transition: background 0.25s var(--ease-luxe), color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .ait-mode-btn.active {
  background: #1d2554;
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(29, 37, 84, 0.45);
}
/* semantic buttons: pill + lift, keep green/red */
body .ait-run-btn {
  border-radius: 999px;
  box-shadow: 0 4px 14px -4px rgba(60, 198, 154, 0.5);
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe);
}
body .ait-run-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(60, 198, 154, 0.6);
}
body .ait-stop-btn {
  border-radius: 999px;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe);
}
body .ait-stop-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(193, 21, 58, 0.5);
}
/* dark live-view panel: round the container only */
body .ait-video-panel { border-radius: var(--radius); }
/* log panel: rounded card chrome, no lift (streaming log viewer) */
body .ait-log-panel {
  border-radius: var(--radius);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
}
body .ait-log-entry { border-radius: var(--radius-sm); }
body .ait-status-bar { border-radius: 10px; }
body .ait-history-toggle {
  border-radius: 10px;
  border-color: var(--border-light);
  transition: background 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body .ait-history-toggle:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
body .ait-history-list {
  border-radius: var(--radius-sm);
  border-color: var(--border-light);
  box-shadow: var(--shadow);
}

/* ============================================================
   FIELD MONITOR (field-monitor.js — 100% inline styles;
   live roster re-renders on poll → static styling only.
   Panel radius requires !important (inline border-radius:10px);
   shadows are not inline so they apply cleanly.
   ============================================================ */
body #fm-roster,
body #fm-detail {
  border-radius: var(--radius) !important;          /* inline radius */
  box-shadow: var(--shadow);
}
/* roster session cards: transform/shadow are not inline → hover lift OK */
body #fm-roster > div[onclick] {
  transition: transform 0.32s var(--ease-luxe), box-shadow 0.32s var(--ease-luxe);
}
body #fm-roster > div[onclick]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* keep the dark screenshot area (#fm-shot) untouched */

/* ============================================================
   DIGITAL TWIN (digital-twin.js — 3D canvas untouched;
   surrounding chrome only. `.btn` has no stylesheet rule, so
   the toolbar buttons are fully styleable without !important.
   ============================================================ */
body #dt-build, body #dt-lpn-go {
  padding: 7px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: #253378;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), border-color 0.25s var(--ease-luxe);
}
body #dt-build:hover, body #dt-lpn-go:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 6px 16px -6px rgba(65, 128, 242, 0.35);
}
body #dt-sim {
  padding: 7px 18px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6b2e, #f04e0e);
  color: #fff;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px -4px rgba(245, 88, 25, 0.45);
  transition: transform 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe), background 0.25s var(--ease-luxe);
}
body #dt-sim:hover {
  background: linear-gradient(135deg, #ff7a42, #f5581c);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(245, 88, 25, 0.55);
}
body #dt-fac, body #dt-overlay, body #dt-run {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-family: var(--font);
  font-size: 12.5px;
  color: #1e293b;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body #dt-fac:focus, body #dt-overlay:focus, body #dt-run:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
body #dt-lpn {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--font);
  font-size: 12.5px;
  transition: border-color 0.25s var(--ease-luxe), box-shadow 0.25s var(--ease-luxe);
}
body #dt-lpn:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(65, 128, 242, 0.13);
}
/* the dark render container keeps its inline #0c111b aesthetic — no override */