/* =====================================================================
 * theme-luxe.css — TTF "Sophisticated Dark Luxury" theme overlay (v1)
 * ---------------------------------------------------------------------
 * EVERYTHING in this file is scoped under html.theme-luxe so it is a
 * pure no-op when the theme bootstrap has not added that class. Never
 * write a top-level selector here. If you need to globalize a token,
 * change the bootstrap default instead.
 *
 * Direction (per ROADMAP.md, "UI revamp" entry):
 *   - Mood: flagship Saint Laurent / Bottega Veneta — extreme negative
 *     space, restrained typography, premium feel. Not a SaaS dashboard.
 *   - Color: near-black backgrounds (deeper than classic #0B0B10),
 *     high-contrast off-white type, very sparse color usage.
 *   - Rainbow: the existing TTF rainbow gradient is preserved verbatim
 *     as --ttf-luxe-accent-rainbow but used as a deliberate, restrained
 *     accent (one focus ring, one CTA divider, one KPI hero). Not as
 *     borders on every card or background washes.
 *   - Type: Big Shoulders Display stays the display face. Editorial
 *     line-height and letter-spacing on headings.
 *   - Motion: slow, expensive — no bouncing, no spinners-on-everything.
 *
 * Scope (v1): trends.html only. Other pages still load classic CSS.
 * Subsequent versions will style additional pages once the look is
 * approved. See UI_LUXE_PREVIEW.md for current status.
 * =====================================================================
 */

/* ---------------------------------------------------------------------
 * 1. Design tokens
 * -------------------------------------------------------------------*/
html.theme-luxe {
  /* Surfaces — near-black, deeper than classic, with subtle warmth. */
  --luxe-bg-0:        #06060a;   /* page deepest */
  --luxe-bg-1:        #0a0a10;   /* primary surface */
  --luxe-bg-2:        #0f0f17;   /* raised card */
  --luxe-bg-3:        #14141d;   /* hover surface */
  --luxe-bg-elevated: #1a1a26;   /* dropdowns, modals */

  /* Type — high-contrast off-white, with a warm undertone. */
  --luxe-text:        #f4f1ea;   /* primary, warm bone */
  --luxe-text-muted:  #8c8a85;   /* secondary */
  --luxe-text-faint:  #4a4844;   /* tertiary, captions */

  /* Hairlines — barely-there dividers do most of the structural work. */
  --luxe-line:        rgba(244, 241, 234, 0.06);
  --luxe-line-strong: rgba(244, 241, 234, 0.12);

  /* Restrained color: severity badges still need to read instantly. */
  --luxe-sev-critical: #e8513b;
  --luxe-sev-high:     #d99a4a;
  --luxe-sev-medium:   #c8c1ad;
  --luxe-sev-low:      #6b8c7a;

  /* THE RAINBOW. Identical hues to classic for brand continuity. Used
   * extremely sparingly — see the focus / hero / CTA rules below. */
  --luxe-accent-rainbow:
    linear-gradient(90deg, #5cc2ff 0%, #a16eff 22%, #ff6bd6 44%,
                            #ffb86b 66%, #65f3a6 88%, #5cc2ff 100%);
  --luxe-accent-rainbow-conic:
    conic-gradient(from var(--luxe-rainbow-angle, 0deg),
                   #5cc2ff, #a16eff, #ff6bd6, #ffb86b, #65f3a6, #5cc2ff);

  /* Editorial type scale. Heavier letter-spacing on display. */
  --luxe-track-display: 0.04em;
  --luxe-track-eyebrow: 0.32em;
  --luxe-leading-tight: 1.05;
  --luxe-leading-body:  1.55;

  /* Motion — slow, expensive ease curves. */
  --luxe-ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --luxe-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --luxe-dur-fast:      180ms;
  --luxe-dur-base:      320ms;
  --luxe-dur-slow:      520ms;
}

/* ---------------------------------------------------------------------
 * 2. Page foundation — body, type rhythm
 * -------------------------------------------------------------------*/
html.theme-luxe body {
  background: var(--luxe-bg-0);
  background-image:
    radial-gradient(1400px 800px at 50% -200px,
                    rgba(255, 255, 255, 0.018), transparent 70%);
  color: var(--luxe-text);
  font-feature-settings: "ss01", "cv11"; /* tighter Inter alternates */
  letter-spacing: 0.005em;
}

html.theme-luxe ::selection {
  background: rgba(244, 241, 234, 0.18);
  color: #fff;
}

/* ---------------------------------------------------------------------
 * 3. Header chrome — keep the existing nav structure but quiet it down.
 *    The header is shared across all authenticated pages, so changes
 *    here affect the whole app once the user opts into luxe.
 * -------------------------------------------------------------------*/
html.theme-luxe .ttf-header {
  background: rgba(6, 6, 10, 0.78);
  border-bottom: 1px solid var(--luxe-line);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

html.theme-luxe .ttf-brand-text {
  letter-spacing: var(--luxe-track-display);
  font-weight: 600;
  color: var(--luxe-text);
}

html.theme-luxe .ttf-brand-icon {
  filter: grayscale(100%) brightness(1.05) contrast(1.1);
  opacity: 0.92;
  transition: filter var(--luxe-dur-base) var(--luxe-ease),
              opacity  var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .ttf-brand:hover .ttf-brand-icon {
  filter: none;
  opacity: 1;
}

/* Nav links — strip color-coding entirely. The classic theme uses 8
 * different hues in the top nav; luxe collapses them to a single,
 * restrained voice. Hover/active gets a thin rainbow underline instead
 * of a colored fill. */
html.theme-luxe .ttf-nav-link,
html.theme-luxe .ttf-nav-link.ttf-nav-threat,
html.theme-luxe .ttf-nav-link.ttf-nav-purple,
html.theme-luxe .ttf-nav-link.ttf-nav-intel,
html.theme-luxe .ttf-nav-link.ttf-nav-plan,
html.theme-luxe .ttf-nav-link.ttf-nav-ai,
html.theme-luxe .ttf-nav-link.ttf-nav-predict,
html.theme-luxe .ttf-nav-link.ttf-nav-novel,
html.theme-luxe .ttf-nav-link.ttf-nav-ciso,
html.theme-luxe .ttf-nav-link.ttf-nav-admin {
  color: var(--luxe-text-muted);
  background: transparent;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.7rem;
  transition: color var(--luxe-dur-base) var(--luxe-ease);
}

html.theme-luxe .ttf-nav-link:hover,
html.theme-luxe .ttf-nav-link.ttf-nav-threat:hover,
html.theme-luxe .ttf-nav-link.ttf-nav-purple:hover,
html.theme-luxe .ttf-nav-link.ttf-nav-intel:hover,
html.theme-luxe .ttf-nav-link.ttf-nav-plan:hover,
html.theme-luxe .ttf-nav-link.ttf-nav-ai:hover,
html.theme-luxe .ttf-nav-link.ttf-nav-predict:hover,
html.theme-luxe .ttf-nav-link.ttf-nav-novel:hover,
html.theme-luxe .ttf-nav-link.ttf-nav-ciso:hover,
html.theme-luxe .ttf-nav-link.ttf-nav-admin:hover {
  color: var(--luxe-text);
  background: transparent;
}

html.theme-luxe .ttf-nav-link.active {
  color: var(--luxe-text);
  background: transparent;
  position: relative;
}
html.theme-luxe .ttf-nav-link.active::after {
  /* The single rainbow accent in the nav: a 1px underline on the active
   * page link. Restrained, not a fill. */
  content: '';
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 2px;
  height: 1px;
  background: var(--luxe-accent-rainbow);
  border-radius: 1px;
}

html.theme-luxe .ttf-nav-divider {
  background: var(--luxe-line);
  height: 14px;
}

html.theme-luxe .ttf-header-btn,
html.theme-luxe .ttf-user-btn {
  background: transparent;
  border-color: var(--luxe-line);
  color: var(--luxe-text-muted);
  border-radius: 2px;
  transition: color var(--luxe-dur-base) var(--luxe-ease),
              border-color var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .ttf-header-btn:hover,
html.theme-luxe .ttf-user-btn:hover {
  background: transparent;
  color: var(--luxe-text);
  border-color: var(--luxe-line-strong);
}

html.theme-luxe .ttf-user-dropdown {
  background: var(--luxe-bg-elevated);
  border-color: var(--luxe-line-strong);
  border-radius: 2px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7),
              0 0 0 1px var(--luxe-line);
}

html.theme-luxe .ttf-dropdown-item {
  color: var(--luxe-text-muted);
  border-radius: 2px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 500;
  transition: color var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .ttf-dropdown-item:hover {
  background: rgba(244, 241, 234, 0.04);
  color: var(--luxe-text);
}
html.theme-luxe .ttf-dropdown-item i {
  color: var(--luxe-text-faint);
}
html.theme-luxe .ttf-dropdown-divider {
  background: var(--luxe-line);
}

/* The theme toggle has its base (classic) styling inlined in
 * shared-header.html so it renders correctly even on pages that haven't
 * loaded theme-luxe.css yet. Below is the luxe override only. */
html.theme-luxe .ttf-theme-toggle-label {
  letter-spacing: var(--luxe-track-eyebrow);
  color: var(--luxe-text-faint);
}
html.theme-luxe .ttf-theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  color: var(--luxe-text-muted);
  letter-spacing: 0.06em;
  transition: all var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .ttf-theme-toggle-btn:hover {
  color: var(--luxe-text);
  border-color: var(--luxe-line-strong);
  background: transparent;
}
html.theme-luxe .ttf-theme-toggle-btn.active {
  color: #06060a;
  background: var(--luxe-text);
  border-color: var(--luxe-text);
}

/* ---------------------------------------------------------------------
 * 4. Trends page — the v1 canvas.
 *    The remaining sections override classes that exist on trends.html.
 * -------------------------------------------------------------------*/

/* Page wrap — give it real generosity. Editorial sites breathe. */
html.theme-luxe .trends-wrap {
  max-width: 1240px;            /* tighter than classic's 1400 — premium */
  padding: 64px 32px 96px;
}

/* Page header — one big editorial title, an eyebrow tagline. The blue
 * accent square next to the title disappears entirely. */
html.theme-luxe .dash-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1px solid var(--luxe-line);
  padding-bottom: 32px;
  margin-bottom: 48px;
  position: relative;
}

html.theme-luxe .dash-page-title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: var(--luxe-leading-tight);
  letter-spacing: var(--luxe-track-display);
  color: var(--luxe-text);
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 0;
  margin: 0;
}

/* Hide the colored icon-square next to the title; pure type does the
 * work. Classic theme keeps it. */
html.theme-luxe .dash-page-title-accent {
  display: none !important;
}

html.theme-luxe .dash-page-tagline {
  margin-top: 14px;
  color: var(--luxe-text-faint);
  font-size: 0.74rem;
  letter-spacing: var(--luxe-track-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
}

html.theme-luxe .dash-page-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

html.theme-luxe .time-filter {
  display: flex;
  gap: 0;
  background: transparent;
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  padding: 0;
  overflow: hidden;
}
html.theme-luxe .time-filter button {
  background: transparent;
  border: none;
  color: var(--luxe-text-muted);
  padding: 8px 14px;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--luxe-dur-base) var(--luxe-ease),
              background var(--luxe-dur-base) var(--luxe-ease);
  border-radius: 0;
  border-right: 1px solid var(--luxe-line);
  font-family: inherit;
}
html.theme-luxe .time-filter button:last-child { border-right: none; }
html.theme-luxe .time-filter button:hover { color: var(--luxe-text); }
html.theme-luxe .time-filter button.active {
  color: var(--luxe-text);
  background: rgba(244, 241, 234, 0.05);
  position: relative;
}
html.theme-luxe .time-filter button.active::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 1px;
  background: var(--luxe-text);
  opacity: 0.6;
}

html.theme-luxe .dash-link-pill {
  background: transparent;
  border: 1px solid var(--luxe-line);
  color: var(--luxe-text-muted);
  border-radius: 2px;
  padding: 8px 14px;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--luxe-dur-base) var(--luxe-ease),
              border-color var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .dash-link-pill:hover {
  color: var(--luxe-text);
  border-color: var(--luxe-line-strong);
}

/* Tabs — same restraint. Bottom rule, no fills. */
html.theme-luxe .ttf-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--luxe-line);
  margin-bottom: 48px;
  padding: 0;
  background: transparent;
}
html.theme-luxe .ttf-tab {
  background: transparent;
  border: none;
  color: var(--luxe-text-muted);
  padding: 14px 24px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  transition: color var(--luxe-dur-base) var(--luxe-ease);
  border-radius: 0;
}
html.theme-luxe .ttf-tab:hover { color: var(--luxe-text); }
html.theme-luxe .ttf-tab.active {
  color: var(--luxe-text);
}
html.theme-luxe .ttf-tab.active::after {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: -1px;
  height: 1px;
  background: var(--luxe-accent-rainbow);
  /* This is one of the deliberate rainbow moments. */
}

/* KPI cards — the centerpiece of the page. Strip the colored borders,
 * use type hierarchy and hairlines instead. The first card (Rhino)
 * gets the rainbow accent as its hero treatment. */
html.theme-luxe .dashboard-grid {
  display: grid;
  gap: 1px;
  background: var(--luxe-line);
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  margin-bottom: 32px;
  overflow: hidden;
}

html.theme-luxe .kpi-card,
html.theme-luxe .kpi-card.blue,
html.theme-luxe .kpi-card.green,
html.theme-luxe .kpi-card.red,
html.theme-luxe .kpi-card.yellow,
html.theme-luxe .kpi-card.purple,
html.theme-luxe .kpi-card.cyan {
  background: var(--luxe-bg-1);
  border: none;
  border-radius: 0;
  padding: 28px 24px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .kpi-card:hover {
  background: var(--luxe-bg-2);
}

/* Hero KPI — the first .kpi-card on the page (Rhino Score) gets the
 * rainbow accent on its top edge. This is the single hero rainbow on
 * the whole page. */
html.theme-luxe .dashboard-grid > .kpi-card:first-child::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--luxe-accent-rainbow);
}

html.theme-luxe .kpi-card .kpi-icon {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 0.85rem;
  color: var(--luxe-text-faint);
}
html.theme-luxe .kpi-card .kpi-label {
  font-size: 0.65rem;
  letter-spacing: var(--luxe-track-eyebrow);
  text-transform: uppercase;
  color: var(--luxe-text-faint);
  font-weight: 500;
  font-family: 'Inter', sans-serif;
}
html.theme-luxe .kpi-card .kpi-value {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--luxe-text);
  letter-spacing: 0.01em;
  margin-top: 4px;
}
html.theme-luxe .kpi-card .kpi-trend {
  font-size: 0.7rem;
  color: var(--luxe-text-faint);
  letter-spacing: 0.04em;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
html.theme-luxe .kpi-card .kpi-trend.positive { color: var(--luxe-sev-low); }
html.theme-luxe .kpi-card .kpi-trend.negative { color: var(--luxe-sev-critical); }
html.theme-luxe .kpi-card .kpi-trend.neutral  { color: var(--luxe-text-faint); }

/* Generic dashboard cards / panels (used for charts and lists below
 * the KPI strip). */
html.theme-luxe .dash-card,
html.theme-luxe .dashboard-card,
html.theme-luxe .panel {
  background: var(--luxe-bg-1);
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  padding: 28px;
  box-shadow: none;
}
html.theme-luxe .dash-card-title,
html.theme-luxe .dashboard-card-title,
html.theme-luxe .panel-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: var(--luxe-track-eyebrow);
  text-transform: uppercase;
  color: var(--luxe-text-faint);
  font-weight: 500;
  margin: 0 0 24px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--luxe-line);
}

/* Recurring TTPs list — already on trends.html. Strip the colored chips
 * down to monochrome with a sparing severity hint. */
html.theme-luxe .recurring-item {
  border-bottom: 1px solid var(--luxe-line);
  padding: 14px 0;
}
html.theme-luxe .recurring-item .tech-id {
  color: var(--luxe-text-muted);
  font-family: 'Roboto Mono', monospace;
  letter-spacing: 0.08em;
}
html.theme-luxe .recurring-item.persistent .tech-id {
  color: var(--luxe-sev-critical);
}
html.theme-luxe .recurring-item .tech-name {
  color: var(--luxe-text-muted);
}
html.theme-luxe .recurring-item .tech-count {
  background: transparent;
  border: 1px solid var(--luxe-line-strong);
  color: var(--luxe-text-muted);
  border-radius: 2px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  padding: 3px 10px;
}
html.theme-luxe .recurring-item.persistent .tech-count {
  border-color: var(--luxe-sev-critical);
  color: var(--luxe-sev-critical);
}

/* Compliance badges — same monochrome treatment. */
html.theme-luxe .compliance-badge {
  background: var(--luxe-bg-1);
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  padding: 24px 20px;
}
html.theme-luxe .compliance-badge .fw-name {
  color: var(--luxe-text-faint);
  letter-spacing: var(--luxe-track-eyebrow);
}
html.theme-luxe .compliance-badge .fw-count {
  font-family: 'Big Shoulders Display', sans-serif;
  color: var(--luxe-text);
  font-size: 1.8rem;
}

/* Detection stats / progress bars — quiet, monochrome. */
html.theme-luxe .detection-stat {
  border-bottom: 1px solid var(--luxe-line);
  padding: 12px 0;
}
html.theme-luxe .detection-stat .label {
  color: var(--luxe-text-faint);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
html.theme-luxe .detection-stat .value {
  color: var(--luxe-text);
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 600;
}
html.theme-luxe .progress-bar {
  background: var(--luxe-line);
  height: 2px;          /* thinner — premium feel */
  border-radius: 0;
}
html.theme-luxe .progress-bar .fill {
  border-radius: 0;
  transition: width var(--luxe-dur-slow) var(--luxe-ease-out);
}
html.theme-luxe .progress-bar .fill.green  { background: var(--luxe-sev-low); }
html.theme-luxe .progress-bar .fill.blue   { background: var(--luxe-text); }
html.theme-luxe .progress-bar .fill.yellow { background: var(--luxe-sev-high); }

html.theme-luxe .severity-legend {
  margin-top: 24px;
  gap: 28px;
}
html.theme-luxe .legend-item {
  color: var(--luxe-text-faint);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Focus states everywhere — restrained rainbow halo. The third and final
 * deliberate rainbow moment per page. */
html.theme-luxe button:focus-visible,
html.theme-luxe a:focus-visible,
html.theme-luxe [tabindex]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px var(--luxe-bg-0),
    0 0 0 2px transparent;
  border-image: var(--luxe-accent-rainbow) 1;
  position: relative;
}
html.theme-luxe button:focus-visible::after,
html.theme-luxe a:focus-visible::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 1px;
  background: var(--luxe-accent-rainbow);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Subtle motion hint when the page first paints — content fades up
 * gently, expensive ease curve. */
@media (prefers-reduced-motion: no-preference) {
  html.theme-luxe .trends-wrap > * {
    animation: luxe-rise var(--luxe-dur-slow) var(--luxe-ease-out) both;
  }
  html.theme-luxe .trends-wrap > *:nth-child(1) { animation-delay:   0ms; }
  html.theme-luxe .trends-wrap > *:nth-child(2) { animation-delay:  60ms; }
  html.theme-luxe .trends-wrap > *:nth-child(3) { animation-delay: 120ms; }
  html.theme-luxe .trends-wrap > *:nth-child(4) { animation-delay: 180ms; }
}

@keyframes luxe-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
 * 5. Chart panels (Techniques + Risk & Coverage tabs).
 *    These house every secondary visualization on the page. The classic
 *    treatment is glassy + colored icons + colored hover borders; luxe
 *    is hairline + monochrome.
 * -------------------------------------------------------------------*/
html.theme-luxe .chart-panel,
html.theme-luxe .panel {
  background: var(--luxe-bg-1);
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  padding: 28px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transition: border-color var(--luxe-dur-base) var(--luxe-ease),
              background var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .chart-panel:hover,
html.theme-luxe .panel:hover {
  border-color: var(--luxe-line-strong);
  background: var(--luxe-bg-2);
}

html.theme-luxe .chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--luxe-line);
}

html.theme-luxe .chart-title {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--luxe-text);
  letter-spacing: var(--luxe-track-eyebrow);
  text-transform: uppercase;
}

/* Override the inline `style="color: #..."` on each chart-title icon.
   Inline styles win specificity wars unless we shout. */
html.theme-luxe .chart-title i {
  color: var(--luxe-text-faint) !important;
  opacity: 1;
  font-size: 0.72rem;
  margin-right: 10px !important;
}

html.theme-luxe .chart-subtitle {
  color: var(--luxe-text-faint);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  margin-top: 6px;
  text-transform: none;
  font-weight: 400;
  line-height: 1.5;
}

html.theme-luxe .two-col-charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

/* The "Charts & Analysis" section divider above the Rhino chart. */
html.theme-luxe .dash-section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 56px 0 24px;
}
html.theme-luxe .dash-section-dot {
  width: 24px;
  height: 1px;
  border-radius: 0;
  background: var(--luxe-text-faint);
}
html.theme-luxe .dash-section-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--luxe-text-faint);
  letter-spacing: var(--luxe-track-eyebrow);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------
 * 6. Empty state (lots of these on a fresh-org trends page).
 * -------------------------------------------------------------------*/
html.theme-luxe .empty-state {
  text-align: center;
  padding: 56px 24px 48px;
  color: var(--luxe-text-faint);
}
html.theme-luxe .empty-state i {
  font-size: 1.6rem;
  margin-bottom: 18px;
  display: block;
  opacity: 0.4;
  color: var(--luxe-text-faint);
}
html.theme-luxe .empty-state h3 {
  margin: 0 0 10px;
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--luxe-text);
  letter-spacing: var(--luxe-track-display);
  text-transform: uppercase;
}
html.theme-luxe .empty-state p {
  margin: 0 auto;
  max-width: 380px;
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--luxe-text-faint);
}

/* ---------------------------------------------------------------------
 * 7. Buttons — universal ghost treatment.
 * -------------------------------------------------------------------*/
html.theme-luxe .btn,
html.theme-luxe .btn-primary,
html.theme-luxe .btn-ghost,
html.theme-luxe .empty-state .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  margin-top: 20px;
  background: transparent;
  border: 1px solid var(--luxe-line-strong);
  border-radius: 2px;
  color: var(--luxe-text);
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--luxe-dur-base) var(--luxe-ease),
              border-color var(--luxe-dur-base) var(--luxe-ease),
              background var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .btn:hover,
html.theme-luxe .btn-primary:hover,
html.theme-luxe .btn-ghost:hover,
html.theme-luxe .empty-state .btn-primary:hover {
  color: #06060a;
  background: var(--luxe-text);
  border-color: var(--luxe-text);
}
html.theme-luxe .btn-ghost {
  border-color: var(--luxe-line);
  color: var(--luxe-text-muted);
}
html.theme-luxe .btn-ghost:hover {
  color: #06060a;
  background: var(--luxe-text);
  border-color: var(--luxe-text);
}

/* ---------------------------------------------------------------------
 * 7.1 Rainbow-halo escape hatch.
 *     The luxe .btn rule above flattens any .btn to transparent + 2px
 *     radius + uppercase mono. That treatment looks correct as a
 *     standalone control, but when the same .btn (or <a class="btn">)
 *     is wrapped in .rainbow-halo .rainbow-pill .rainbow-ultratight,
 *     the wrapper's `clip-path: inset(2px round 9999px)` clips the
 *     flat button into a tiny ghost pill with the rainbow halo
 *     bleeding through — visibly broken on /upload, /demo,
 *     /whitepaper, /subscribe, /finding-libraries, /purple-team.
 *
 *     Fix: when wrapped in a rainbow-halo, restore the classic
 *     Google-Sans white-pill button so the halo treatment renders
 *     the way it was designed to. This mirrors what contact.html's
 *     .rainbow-btn-inner rule does, but works for plain .btn without
 *     needing per-page markup changes.
 * -------------------------------------------------------------------*/
html.theme-luxe .rainbow-halo .btn,
html.theme-luxe .rainbow-pill .btn,
html.theme-luxe .rainbow-halo a.btn,
html.theme-luxe .rainbow-pill a.btn {
  background: #fff !important;
  color: #3c4043 !important;
  border: 1px solid #dadce0 !important;
  border-radius: 9999px !important;
  padding: 0 24px !important;
  height: 40px !important;
  margin-top: 0 !important;
  font-family: 'Google Sans', Roboto, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
html.theme-luxe .rainbow-halo .btn:hover,
html.theme-luxe .rainbow-pill .btn:hover,
html.theme-luxe .rainbow-halo a.btn:hover,
html.theme-luxe .rainbow-pill a.btn:hover {
  background: #f8f9fa !important;
  color: #3c4043 !important;
  border-color: #dadce0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  transform: none !important;
}

/* ---------------------------------------------------------------------
 * 8. Compliance grid — the badges already styled in section 4 just need
 *    the right grid container.
 * -------------------------------------------------------------------*/
html.theme-luxe .compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px;
  background: var(--luxe-line);
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}
html.theme-luxe .compliance-grid .compliance-badge {
  border: none;
  border-radius: 0;
  padding: 24px 20px;
  background: var(--luxe-bg-1);
  transition: background var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .compliance-grid .compliance-badge:hover {
  background: var(--luxe-bg-2);
}

/* ---------------------------------------------------------------------
 * 9. Severity legend — keep severity color semantics (color = data),
 *    but quiet the dot itself and tighten the label rhythm.
 * -------------------------------------------------------------------*/
html.theme-luxe .legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 0;
}

/* ---------------------------------------------------------------------
 * 10. Detection posture stats — already covered in section 4, but the
 *     coverage progress label row uses inline `color: #64748b` that
 *     reads slightly off on luxe surfaces. Quiet it down.
 * -------------------------------------------------------------------*/
html.theme-luxe [id="detectionStats"] > div[style*="margin-top"] > div[style*="justify-content"] > span {
  color: var(--luxe-text-faint) !important;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------
 * 11. Bottom-of-page nav (next-steps) and footer.
 * -------------------------------------------------------------------*/
html.theme-luxe .next-steps {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  justify-content: center;
  padding: 56px 16px 24px;
  border-top: 1px solid var(--luxe-line);
  margin-top: 64px;
}
html.theme-luxe .next-steps a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: transparent;
  border: none;
  color: var(--luxe-text-muted);
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-right: 1px solid var(--luxe-line);
  transition: color var(--luxe-dur-base) var(--luxe-ease);
  border-radius: 0;
}
html.theme-luxe .next-steps a:last-child { border-right: none; }
html.theme-luxe .next-steps a:hover {
  color: var(--luxe-text);
  background: transparent;
}
html.theme-luxe .next-steps a i {
  color: var(--luxe-text-faint);
  font-size: 0.85rem;
}

html.theme-luxe footer {
  text-align: center;
  padding: 48px 16px 56px;
  border-top: 1px solid var(--luxe-line);
  background: var(--luxe-bg-0);
  margin-top: 0;
}
html.theme-luxe footer p {
  color: var(--luxe-text-faint);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 4px 0;
}
html.theme-luxe footer a {
  color: var(--luxe-text-muted);
  text-decoration: none;
  transition: color var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe footer a:hover {
  color: var(--luxe-text);
}
html.theme-luxe footer .footer-legal {
  margin-top: 14px;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
}
html.theme-luxe footer .footer-legal-sep {
  display: inline-block;
  margin: 0 12px;
  color: var(--luxe-line-strong);
}

/* ---------------------------------------------------------------------
 * 12. Co-occurrence / drift / temporal / heatmap / risk-attribution
 *     panels — these are populated by JS with arbitrary item rows. Make
 *     sure any item lists rendered inside .chart-panel inherit the
 *     hairline divider rhythm we used on .recurring-item.
 * -------------------------------------------------------------------*/
html.theme-luxe .chart-panel [class*="-item"]:not(.legend-item):not(.kpi-card):not(.compliance-badge),
html.theme-luxe .chart-panel [id$="Panel"] > div:not(.empty-state),
html.theme-luxe .chart-panel [id$="List"] > div:not(.empty-state) {
  border-bottom: 1px solid var(--luxe-line);
}
html.theme-luxe .chart-panel [class*="-item"]:not(.legend-item):not(.kpi-card):not(.compliance-badge):last-child,
html.theme-luxe .chart-panel [id$="Panel"] > div:not(.empty-state):last-child,
html.theme-luxe .chart-panel [id$="List"] > div:not(.empty-state):last-child {
  border-bottom: none;
}

/* ---------------------------------------------------------------------
 * 13. Cleanup of leftover inline `color: #6X` (slate gray) labels that
 *     read wrong on luxe surfaces. Caught by attribute selectors so we
 *     don't have to edit trends.html.
 * -------------------------------------------------------------------*/
html.theme-luxe [style*="color: #64748b"],
html.theme-luxe [style*="color:#64748b"] {
  color: var(--luxe-text-faint) !important;
}

/* =====================================================================
 * v2 — extension across all authenticated pages
 * ---------------------------------------------------------------------
 * v1 covered trends.html only. v2 adds:
 *   - generic inline-color overrides (for the dozen hardcoded slate /
 *     bone / blue / purple values sprinkled across HTML inline styles)
 *   - common dashboard families (insight-panel, dash-filter, link pills)
 *   - common form / table / toast / pill primitives used by admin,
 *     integrations, scheduled-reports, audit-logs, etc.
 *   - per-page sections for upload, reports, results, admin,
 *     integrations, nl-query, subscribe — pages that ship their own
 *     bespoke <style> block and would otherwise leak classic colors.
 *
 * Strategy: KEEP semantic colors that carry meaning (severity reds,
 * status greens, warning ambers). REPLACE decorative cool-blues and
 * purples — they're not data, they're just legacy chrome.
 * =====================================================================
 */

/* ---------------------------------------------------------------------
 * v2.1 Universal inline-color overrides
 *
 * Inline `style="color: #..."` wins specificity wars. We override the
 * decorative ones (blues, purples, off-whites, slates) but leave the
 * semantic ones (danger reds, status greens, warning ambers) alone.
 * -------------------------------------------------------------------*/
/* Off-white / bone primary text — promote to luxe-text */
html.theme-luxe [style*="color: #e2e8f0"],
html.theme-luxe [style*="color:#e2e8f0"],
html.theme-luxe [style*="color: #f1f5f9"],
html.theme-luxe [style*="color:#f1f5f9"],
html.theme-luxe [style*="color: #cbd5e1"],
html.theme-luxe [style*="color:#cbd5e1"],
html.theme-luxe [style*="color: #e7ecf2"],
html.theme-luxe [style*="color:#e7ecf2"],
html.theme-luxe [style*="color: #f8fafc"],
html.theme-luxe [style*="color:#f8fafc"],
html.theme-luxe [style*="color: white"],
html.theme-luxe [style*="color:white"],
html.theme-luxe [style*="color: #fff"],
html.theme-luxe [style*="color:#fff"],
html.theme-luxe [style*="color: #ffffff"],
html.theme-luxe [style*="color:#ffffff"] {
  color: var(--luxe-text) !important;
}

/* Slate-gray secondary text — push to muted */
html.theme-luxe [style*="color: #94a3b8"],
html.theme-luxe [style*="color:#94a3b8"],
html.theme-luxe [style*="color: #9fb1c6"],
html.theme-luxe [style*="color:#9fb1c6"] {
  color: var(--luxe-text-muted) !important;
}

/* Decorative cool-blues — these aren't semantic, they're legacy chrome.
 * Map them to luxe text (links and accents become quiet bone). */
html.theme-luxe [style*="color: #60a5fa"],
html.theme-luxe [style*="color:#60a5fa"],
html.theme-luxe [style*="color: #93c5fd"],
html.theme-luxe [style*="color:#93c5fd"],
html.theme-luxe [style*="color: #7fb9ff"],
html.theme-luxe [style*="color:#7fb9ff"],
html.theme-luxe [style*="color: #89c7ff"],
html.theme-luxe [style*="color:#89c7ff"] {
  color: var(--luxe-text) !important;
}

/* Decorative purples — same treatment, push to muted bone. */
html.theme-luxe [style*="color: #a78bfa"],
html.theme-luxe [style*="color:#a78bfa"],
html.theme-luxe [style*="color: #a5b4fc"],
html.theme-luxe [style*="color:#a5b4fc"],
html.theme-luxe [style*="color: #c4b5fd"],
html.theme-luxe [style*="color:#c4b5fd"] {
  color: var(--luxe-text) !important;
}

/* Inline dark-slate panel backgrounds (#1e293b, #1A1A23, #16161D) used
 * for modals and bespoke surfaces — replace with luxe-bg-elevated. */
html.theme-luxe [style*="background:#1e293b"],
html.theme-luxe [style*="background: #1e293b"],
html.theme-luxe [style*="background-color:#1e293b"],
html.theme-luxe [style*="background-color: #1e293b"] {
  background: var(--luxe-bg-elevated) !important;
}

/* ---------------------------------------------------------------------
 * v2.2 Page wraps — give every authenticated page the same editorial
 * generosity we gave .trends-wrap. The per-page <style> blocks set
 * various max-width containers; we override them with one consistent
 * rhythm.
 * -------------------------------------------------------------------*/
html.theme-luxe .insights-wrap,
html.theme-luxe .integrations-container,
html.theme-luxe .chat-container,
html.theme-luxe .ciso-wrap,
html.theme-luxe .purple-wrap,
html.theme-luxe .intel-wrap,
html.theme-luxe .predict-wrap,
html.theme-luxe .novel-wrap,
html.theme-luxe .analytics-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px 32px 96px;
}

/* The standard `.wrap.container` used by most pages — same idea, but be
 * gentle: many pages already nest a more specific wrap inside, so just
 * give it some headroom. */
html.theme-luxe .wrap.container {
  background: transparent;
}

/* ---------------------------------------------------------------------
 * v2.3 Insight panels — used heavily on insights.html and ciso/purple
 * dashboards. Already partially covered by the generic .panel rule, but
 * insight-panel has its own backdrop-blur + min-height that needs
 * overriding.
 * -------------------------------------------------------------------*/
html.theme-luxe .insight-panel {
  background: var(--luxe-bg-1);
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  padding: 28px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  min-height: 240px;
  transition: border-color var(--luxe-dur-base) var(--luxe-ease),
              background var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .insight-panel:hover {
  border-color: var(--luxe-line-strong);
  background: var(--luxe-bg-2);
}
html.theme-luxe .insight-panel h3 {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--luxe-text);
  letter-spacing: var(--luxe-track-eyebrow);
  text-transform: uppercase;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--luxe-line);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
html.theme-luxe .insight-panel h3 .panel-icon,
html.theme-luxe .insight-panel h3 i {
  color: var(--luxe-text-faint) !important;
  opacity: 1;
  font-size: 0.78rem;
}
html.theme-luxe .insight-panel .subtitle {
  color: var(--luxe-text-faint);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
  line-height: 1.5;
  font-family: 'Inter', sans-serif;
}
html.theme-luxe .insight-item {
  border-bottom: 1px solid var(--luxe-line);
  padding: 10px 0;
  color: var(--luxe-text-muted);
  font-size: 0.82rem;
}
html.theme-luxe .insight-item:last-child { border-bottom: none; }

/* Filter inputs (used in insights, ciso-dashboard, etc.) */
html.theme-luxe .dash-filter-input {
  background: transparent;
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  color: var(--luxe-text);
  font-family: 'Roboto Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  transition: border-color var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .dash-filter-input:focus {
  outline: none;
  border-color: var(--luxe-text-faint);
}
html.theme-luxe .dash-filter-input::placeholder {
  color: var(--luxe-text-faint);
  letter-spacing: 0.08em;
}

/* btn-accent (used as Load button on filter rows) */
html.theme-luxe .btn-accent {
  background: transparent;
  border: 1px solid var(--luxe-line-strong);
  color: var(--luxe-text);
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--luxe-dur-base) var(--luxe-ease),
              background var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .btn-accent:hover {
  color: #06060a;
  background: var(--luxe-text);
  border-color: var(--luxe-text);
}

/* ---------------------------------------------------------------------
 * v2.4 Form primitives — admin.html, scheduled-reports, enrichment,
 * audit-logs, custom-dashboards, integrations all use these classes.
 * -------------------------------------------------------------------*/
html.theme-luxe .ttf-input,
html.theme-luxe .ttf-select,
html.theme-luxe input[type="text"]:not(.dash-filter-input):not(.search-input):not(.chat-input),
html.theme-luxe input[type="email"],
html.theme-luxe input[type="number"],
html.theme-luxe input[type="password"],
html.theme-luxe input[type="url"],
html.theme-luxe textarea:not(.chat-input),
html.theme-luxe select:not(.sort-select):not(.dash-filter-input) {
  background: transparent;
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  color: var(--luxe-text);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  padding: 10px 14px;
  transition: border-color var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .ttf-input:focus,
html.theme-luxe .ttf-select:focus,
html.theme-luxe input:focus,
html.theme-luxe textarea:focus,
html.theme-luxe select:focus {
  outline: none;
  border-color: var(--luxe-line-strong);
}
html.theme-luxe .ttf-input::placeholder,
html.theme-luxe input::placeholder,
html.theme-luxe textarea::placeholder {
  color: var(--luxe-text-faint);
}

/* Some <select>s in admin set inline `style="color:#000; background:#fff"`
 * intentionally so the OS-rendered <option> dropdown is readable. We
 * MUST preserve that — overriding would make the dropdown unreadable.
 * The attribute selector below excludes those. */
html.theme-luxe select[style*="background: #ffffff"],
html.theme-luxe select[style*="background:#ffffff"],
html.theme-luxe select[style*="background: #fff"],
html.theme-luxe select[style*="background:#fff"] {
  /* leave alone — keeps native dropdown legible. */
}

html.theme-luxe label,
html.theme-luxe .ttf-small {
  color: var(--luxe-text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* Tables — editorial, full-width, hairline rows */
html.theme-luxe .ttf-table,
html.theme-luxe table:not(.no-luxe) {
  width: 100%;
  border-collapse: collapse;
}
html.theme-luxe .ttf-table th,
html.theme-luxe .ttf-table td,
html.theme-luxe table:not(.no-luxe) th,
html.theme-luxe table:not(.no-luxe) td {
  text-align: left;
  padding: 14px 12px;
  border-bottom: 1px solid var(--luxe-line);
  vertical-align: top;
  color: var(--luxe-text-muted);
  font-size: 0.85rem;
}
html.theme-luxe .ttf-table th,
html.theme-luxe table:not(.no-luxe) th {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  letter-spacing: var(--luxe-track-eyebrow);
  text-transform: uppercase;
  color: var(--luxe-text-faint);
  font-weight: 500;
  border-bottom: 1px solid var(--luxe-line-strong);
}
html.theme-luxe .ttf-table tr:hover td {
  background: var(--luxe-bg-2);
}
html.theme-luxe .ttf-mono {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--luxe-text-muted);
}

/* Pills (admin invites, etc.) */
html.theme-luxe .ttf-pill {
  background: transparent;
  border: 1px solid var(--luxe-line-strong);
  color: var(--luxe-text-muted);
  border-radius: 2px;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
}
html.theme-luxe .ttf-pill.accepted {
  border-color: var(--luxe-sev-low);
  color: var(--luxe-sev-low);
  background: transparent;
}
html.theme-luxe .ttf-pill.pending {
  border-color: var(--luxe-sev-high);
  color: var(--luxe-sev-high);
  background: transparent;
}
html.theme-luxe .ttf-pill.revoked,
html.theme-luxe .ttf-pill.expired {
  border-color: var(--luxe-line);
  color: var(--luxe-text-faint);
  background: transparent;
}

/* Toasts (inline status banners on form pages) */
html.theme-luxe .ttf-toast {
  background: var(--luxe-bg-2);
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  padding: 12px 16px;
  color: var(--luxe-text-muted);
  font-size: 0.78rem;
}
html.theme-luxe .ttf-toast.ttf-error {
  border-color: var(--luxe-sev-critical);
  background: rgba(232, 81, 59, 0.06);
  color: var(--luxe-sev-critical);
}
html.theme-luxe .ttf-toast.ttf-ok {
  border-color: var(--luxe-sev-low);
  background: rgba(107, 140, 122, 0.08);
  color: var(--luxe-sev-low);
}

html.theme-luxe .ttf-hr {
  height: 1px;
  background: var(--luxe-line);
  border: none;
  margin: 20px 0;
}

/* Hide the colored title-accent square on every page (we already do this
 * in v1, but the rule is now scoped to all dash-page-headers which exist
 * across many pages now). The v1 rule at line ~293 still applies — this
 * is a no-op duplicate kept for documentation. */

/* ---------------------------------------------------------------------
 * v2.5 results.html — the report viewer ships its own dark-blue design
 * system in an inline <style>. We need to override it surgically.
 * -------------------------------------------------------------------*/
/* The page sets body { background: linear-gradient(180deg, #16161D, #0B0B10) }
 * inline. We can't beat that without !important. */
html.theme-luxe body[class=""],
html.theme-luxe body {
  background: var(--luxe-bg-0) !important;
  background-image:
    radial-gradient(1400px 800px at 50% -200px,
                    rgba(255, 255, 255, 0.018), transparent 70%) !important;
}

/* The .top header card */
html.theme-luxe .container > .top {
  background: var(--luxe-bg-1);
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  padding: 32px;
}
html.theme-luxe .container > .top h1 {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: var(--luxe-track-display);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--luxe-text);
  margin: 0;
  line-height: var(--luxe-leading-tight);
}
html.theme-luxe .container > .top .muted {
  color: var(--luxe-text-faint);
  font-size: 0.7rem;
  letter-spacing: var(--luxe-track-eyebrow);
  text-transform: uppercase;
  margin-top: 8px;
}

/* KPIs grid inside .top — restyle the inline-blue mini-KPIs */
html.theme-luxe .kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--luxe-line);
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  margin-top: 24px;
  overflow: hidden;
}
html.theme-luxe .kpis .kpi {
  background: var(--luxe-bg-1);
  border: none;
  border-radius: 0;
  padding: 20px;
  transition: background var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .kpis .kpi:hover {
  background: var(--luxe-bg-2);
}
html.theme-luxe .kpis .kpi b {
  color: var(--luxe-text-faint) !important;
  font-size: 0.6rem;
  letter-spacing: var(--luxe-track-eyebrow);
  font-weight: 500;
  font-family: 'Inter', sans-serif;
}
html.theme-luxe .kpis .kpi .v {
  color: var(--luxe-text);
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 600;
  font-size: 1.8rem;
  margin-top: 6px;
  letter-spacing: 0.01em;
}

/* Technique cards on results.html */
html.theme-luxe .tech {
  background: var(--luxe-bg-1);
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .tech:hover {
  border-color: var(--luxe-line-strong);
}
html.theme-luxe .tech .hd {
  background: var(--luxe-bg-2);
  border-bottom: 1px solid var(--luxe-line);
  padding: 14px 18px;
}
html.theme-luxe .tech .id {
  color: var(--luxe-text-muted) !important;
  font-family: 'Roboto Mono', monospace;
  letter-spacing: 0.06em;
  font-weight: 600;
}
html.theme-luxe .tech .body {
  padding: 18px;
  background: var(--luxe-bg-1);
}
html.theme-luxe .tech .card {
  background: var(--luxe-bg-0);
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
}

/* Co-occurrence / threat-intel / critical-alerts banners (results.html).
 * The HTML uses inline styles with semi-transparent colored backgrounds.
 * Quiet them down to a unified hairline panel with semantic accent edge. */
html.theme-luxe #cooccurrenceBanner,
html.theme-luxe #threatIntelPanel {
  background: var(--luxe-bg-1) !important;
  border: 1px solid var(--luxe-line) !important;
  border-left: 1px solid var(--luxe-text-faint) !important;
  border-radius: 2px !important;
  padding: 20px 24px !important;
}
html.theme-luxe #threatIntelPanel h3,
html.theme-luxe #cooccurrenceBanner strong {
  color: var(--luxe-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
html.theme-luxe #criticalAlertsBanner {
  border-left: 2px solid var(--luxe-sev-critical);
}

/* PASTA threat model accordion (used on results.html and upload.html) */
html.theme-luxe .pasta-accordion {
  background: var(--luxe-bg-1);
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .pasta-accordion:hover { border-color: var(--luxe-line-strong); }
html.theme-luxe .pasta-accordion summary { padding: 16px 20px; }
html.theme-luxe .pasta-accordion summary:hover { background: var(--luxe-bg-2); }
html.theme-luxe .pasta-step-number {
  background: transparent !important;
  border: 1px solid var(--luxe-line-strong);
  color: var(--luxe-text-muted) !important;
  border-radius: 0;
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: 0.75rem;
}
html.theme-luxe .pasta-step-title {
  color: var(--luxe-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
html.theme-luxe .pasta-badge {
  background: transparent !important;
  border: 1px solid var(--luxe-line-strong);
  color: var(--luxe-text-faint) !important;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
}
html.theme-luxe .pasta-content {
  background: var(--luxe-bg-0) !important;
  border-top: 1px solid var(--luxe-line);
  padding: 20px;
}
html.theme-luxe .pasta-summary {
  color: var(--luxe-text-muted) !important;
  font-size: 0.82rem;
  line-height: var(--luxe-leading-body);
}

/* ---------------------------------------------------------------------
 * v2.6 reports.html — list of report cards + lifecycle accordion.
 * Keep semantic compliance/severity colors; quiet the rest.
 * -------------------------------------------------------------------*/
html.theme-luxe .report-card {
  background: var(--luxe-bg-1);
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  padding: 24px 28px;
  margin-bottom: 8px;
  transition: border-color var(--luxe-dur-base) var(--luxe-ease),
              background var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .report-card:hover {
  border-color: var(--luxe-line-strong);
  background: var(--luxe-bg-2);
  transform: none;
  box-shadow: none;
}
html.theme-luxe .report-card-title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--luxe-text);
  letter-spacing: var(--luxe-track-display);
  text-transform: uppercase;
  margin: 0;
  line-height: var(--luxe-leading-tight);
}
html.theme-luxe .report-meta {
  color: var(--luxe-text-faint);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
}
html.theme-luxe .report-meta i { color: var(--luxe-text-faint); opacity: 0.7; }
html.theme-luxe .report-count-badge {
  color: var(--luxe-text-faint);
  font-family: 'Roboto Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

/* Status / metric / severity / compliance chips — keep semantics, quiet
 * surfaces. The colored borders and text remain for data legibility. */
html.theme-luxe .status-badge,
html.theme-luxe .metric-chip,
html.theme-luxe .sev-chip,
html.theme-luxe .compliance-chip {
  background: transparent !important;
  border-radius: 2px;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 3px 8px;
}
html.theme-luxe .metric-chip { padding: 4px 10px; }
html.theme-luxe .compliance-chip { font-size: 0.6rem; padding: 2px 6px; }

/* Toolbar (search + sort) */
html.theme-luxe .reports-toolbar .search-input,
html.theme-luxe .reports-toolbar .sort-select {
  background: transparent;
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  color: var(--luxe-text);
  font-family: 'Inter', sans-serif;
  padding: 10px 14px 10px 36px;
}
html.theme-luxe .reports-toolbar .sort-select { padding-left: 14px; }
html.theme-luxe .reports-toolbar .search-input:focus,
html.theme-luxe .reports-toolbar .sort-select:focus {
  border-color: var(--luxe-line-strong);
}
html.theme-luxe .reports-toolbar .search-input::placeholder { color: var(--luxe-text-faint); }
html.theme-luxe .search-wrapper i { color: var(--luxe-text-faint); }

/* Lifecycle phase cards — purple in classic, hairline in luxe */
html.theme-luxe .phase-card {
  background: var(--luxe-bg-1) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px;
  padding: 18px 20px;
  transition: border-color var(--luxe-dur-base) var(--luxe-ease),
              background var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .phase-card:hover {
  border-color: var(--luxe-line-strong) !important;
  background: var(--luxe-bg-2) !important;
  transform: none;
}
html.theme-luxe .phase-card.expanded {
  background: var(--luxe-bg-2) !important;
  border-color: var(--luxe-line-strong) !important;
}
html.theme-luxe .technique-item {
  background: var(--luxe-bg-0);
  border: 1px solid var(--luxe-line);
  border-radius: 0;
  margin-bottom: 4px;
}
html.theme-luxe .technique-item:hover { background: var(--luxe-bg-2); }
html.theme-luxe .date-badge {
  background: transparent !important;
  border: 1px solid var(--luxe-line-strong);
  color: var(--luxe-text-faint) !important;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  border-radius: 2px;
}
html.theme-luxe .report-link {
  color: var(--luxe-text) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--luxe-line);
  transition: border-color var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .report-link:hover {
  color: var(--luxe-text) !important;
  border-color: var(--luxe-text);
}

/* Reports tab buttons — the inline `border-bottom: 2px solid #f59e0b` for
 * active state needs to become a luxe rainbow underline. */
html.theme-luxe #tabReports[style*="border-bottom: 2px solid #f59e0b"],
html.theme-luxe #tabLifecycle[style*="border-bottom: 2px solid #f59e0b"] {
  border-bottom: 2px solid transparent !important;
  position: relative;
}
html.theme-luxe #tabReports[style*="border-bottom: 2px solid #f59e0b"]::after,
html.theme-luxe #tabLifecycle[style*="border-bottom: 2px solid #f59e0b"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--luxe-accent-rainbow);
}

/* Loading / error states */
html.theme-luxe .reports-loading,
html.theme-luxe .reports-error {
  background: transparent;
  border: none;
  color: var(--luxe-text-faint);
  text-align: center;
  padding: 56px 24px;
}
html.theme-luxe .reports-error {
  border: 1px solid var(--luxe-sev-critical);
  border-radius: 2px;
  color: var(--luxe-sev-critical);
}
html.theme-luxe .reports-error .retry-btn {
  background: transparent;
  border: 1px solid var(--luxe-sev-critical);
  color: var(--luxe-sev-critical);
  border-radius: 2px;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.7rem;
  padding: 8px 18px;
}

/* ---------------------------------------------------------------------
 * v2.7 upload.html — drop zone, file queue, vuln cards, scanner panel.
 * -------------------------------------------------------------------*/
html.theme-luxe .upload-header {
  border-bottom: 1px solid var(--luxe-line) !important;
  padding-bottom: 32px;
}
html.theme-luxe .upload-header .title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: var(--luxe-track-display);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--luxe-text);
}
html.theme-luxe .upload-header .tagline {
  color: var(--luxe-text-faint);
  font-size: 0.74rem;
  letter-spacing: var(--luxe-track-eyebrow);
  text-transform: uppercase;
}

html.theme-luxe .drop-zone {
  background: var(--luxe-bg-1);
  border: 1px dashed var(--luxe-line-strong);
  border-radius: 2px;
  padding: 56px 32px;
  transition: border-color var(--luxe-dur-base) var(--luxe-ease),
              background var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .drop-zone:hover,
html.theme-luxe .drop-zone.drag-over {
  border-color: var(--luxe-text-muted);
  background: var(--luxe-bg-2);
}

html.theme-luxe .file-queue-item {
  background: var(--luxe-bg-2);
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
}
html.theme-luxe .file-queue-item:hover {
  border-color: var(--luxe-line-strong);
}
html.theme-luxe .file-queue-item.processing {
  border-color: var(--luxe-sev-high);
  background: rgba(217, 154, 74, 0.04);
}
html.theme-luxe .file-queue-item.done {
  border-color: var(--luxe-sev-low);
  background: rgba(107, 140, 122, 0.06);
}
html.theme-luxe .file-queue-item.error {
  border-color: var(--luxe-sev-critical);
  background: rgba(232, 81, 59, 0.06);
}
html.theme-luxe .file-queue-name { color: var(--luxe-text); }
html.theme-luxe .file-queue-status {
  color: var(--luxe-text-faint);
  font-family: 'Roboto Mono', monospace;
  letter-spacing: 0.05em;
}
html.theme-luxe .file-queue-progress {
  background: var(--luxe-line);
  height: 1px;
  border-radius: 0;
}
html.theme-luxe .file-queue-progress-bar {
  background: var(--luxe-accent-rainbow);
  border-radius: 0;
}
html.theme-luxe .upload-stats {
  color: var(--luxe-text-faint);
  font-family: 'Roboto Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

html.theme-luxe .vuln-card {
  background: var(--luxe-bg-1);
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
}

/* ---------------------------------------------------------------------
 * v2.8 admin.html — modals, instruction panels.
 * -------------------------------------------------------------------*/
/* Modal backdrop overlays. The inline `style="background:#1e293b"` is
 * already caught by v2.1, but we also tighten the outer padding/radius. */
html.theme-luxe #frameworkModal > div,
html.theme-luxe #mappingModal > div {
  border-radius: 2px !important;
  border: 1px solid var(--luxe-line-strong);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
}

/* Instructions panels (admin, integrations, nl-query). They use semi-
 * transparent colored backgrounds to denote category — collapse into
 * one quiet hairline panel for luxe. */
html.theme-luxe .instructions-section,
html.theme-luxe .instructions-panel {
  background: var(--luxe-bg-1) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  padding: 20px 24px !important;
}
html.theme-luxe .instructions-title,
html.theme-luxe .instructions-panel h3 {
  color: var(--luxe-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  margin: 0 0 14px !important;
}
html.theme-luxe .instructions-content,
html.theme-luxe .instructions-panel p,
html.theme-luxe .instructions-panel ul {
  color: var(--luxe-text-muted) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  line-height: var(--luxe-leading-body) !important;
}
html.theme-luxe .instructions-panel code {
  background: var(--luxe-bg-0) !important;
  color: var(--luxe-text) !important;
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  font-family: 'Roboto Mono', monospace !important;
}

/* ---------------------------------------------------------------------
 * v2.9 integrations.html — bespoke integration cards.
 * -------------------------------------------------------------------*/
html.theme-luxe .integrations-title {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  letter-spacing: var(--luxe-track-display) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--luxe-text) !important;
}
html.theme-luxe .integrations-subtitle {
  color: var(--luxe-text-faint) !important;
  font-size: 0.74rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  font-family: 'Inter', sans-serif !important;
}
html.theme-luxe .integration-card {
  background: var(--luxe-bg-1) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  padding: 28px !important;
  transition: border-color var(--luxe-dur-base) var(--luxe-ease),
              background var(--luxe-dur-base) var(--luxe-ease);
}
html.theme-luxe .integration-card:hover {
  border-color: var(--luxe-line-strong) !important;
  background: var(--luxe-bg-2) !important;
}
html.theme-luxe .card-icon-circle {
  background: transparent !important;
  border: 1px solid var(--luxe-line-strong);
  color: var(--luxe-text-muted) !important;
  border-radius: 0;
  width: 44px; height: 44px;
}
html.theme-luxe .card-name {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--luxe-text) !important;
  font-weight: 500 !important;
}
html.theme-luxe .card-desc {
  color: var(--luxe-text-faint) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em !important;
}
html.theme-luxe .status-label {
  background: transparent !important;
  border: 1px solid var(--luxe-line) !important;
  color: var(--luxe-text-muted) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
html.theme-luxe .status-dot.configured { background: var(--luxe-sev-low) !important; }
html.theme-luxe .status-dot.not-configured { background: var(--luxe-text-faint) !important; }

html.theme-luxe .field-row .input {
  background: transparent !important;
  border: 1px solid var(--luxe-line) !important;
  color: var(--luxe-text) !important;
  border-radius: 2px !important;
  padding: 10px 14px !important;
}
html.theme-luxe .field-row .input:focus {
  border-color: var(--luxe-line-strong) !important;
  box-shadow: none !important;
}
html.theme-luxe .field-row .input::placeholder { color: var(--luxe-text-faint) !important; }

html.theme-luxe .btn-save,
html.theme-luxe .btn-test {
  background: transparent !important;
  border: 1px solid var(--luxe-line-strong) !important;
  color: var(--luxe-text) !important;
  border-radius: 2px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  padding: 10px 18px !important;
  transition: color var(--luxe-dur-base) var(--luxe-ease),
              background var(--luxe-dur-base) var(--luxe-ease) !important;
}
html.theme-luxe .btn-save:hover,
html.theme-luxe .btn-test:hover:not(:disabled) {
  color: #06060a !important;
  background: var(--luxe-text) !important;
  border-color: var(--luxe-text) !important;
}
html.theme-luxe .btn-delete {
  background: transparent !important;
  border: 1px solid var(--luxe-sev-critical) !important;
  color: var(--luxe-sev-critical) !important;
  border-radius: 2px !important;
}
html.theme-luxe .btn-delete:hover {
  background: rgba(232, 81, 59, 0.08) !important;
}
html.theme-luxe .siem-toggle {
  background: transparent !important;
  border: 1px solid var(--luxe-line) !important;
  color: var(--luxe-text-muted) !important;
  border-radius: 2px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
html.theme-luxe .siem-toggle:hover { color: var(--luxe-text) !important; border-color: var(--luxe-line-strong) !important; }
html.theme-luxe .siem-toggle.active {
  color: #06060a !important;
  background: var(--luxe-text) !important;
  border-color: var(--luxe-text) !important;
}
html.theme-luxe #status {
  background: var(--luxe-bg-elevated) !important;
  border: 1px solid var(--luxe-line-strong) !important;
  border-radius: 2px !important;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7) !important;
}

/* ---------------------------------------------------------------------
 * v2.10 nl-query.html — chat interface.
 * -------------------------------------------------------------------*/
html.theme-luxe .chat-header {
  border-bottom: 1px solid var(--luxe-line);
  padding-bottom: 32px;
  margin-bottom: 32px;
}
html.theme-luxe .chat-header h1 {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  letter-spacing: var(--luxe-track-display) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--luxe-text) !important;
}
html.theme-luxe .chat-header .tagline {
  color: var(--luxe-text-faint) !important;
  font-size: 0.74rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
}
html.theme-luxe .context-badge {
  background: transparent !important;
  border: 1px solid var(--luxe-line-strong) !important;
  color: var(--luxe-text) !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.06em !important;
  border-radius: 2px !important;
}
html.theme-luxe .chat-messages {
  background: var(--luxe-bg-1);
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
}
html.theme-luxe .message-content {
  background: var(--luxe-bg-2) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  color: var(--luxe-text) !important;
  font-family: 'Inter', sans-serif !important;
  line-height: var(--luxe-leading-body) !important;
}
html.theme-luxe .message.user .message-content {
  background: var(--luxe-bg-elevated) !important;
  border-color: var(--luxe-line-strong) !important;
  color: var(--luxe-text) !important;
}
html.theme-luxe .message.user .message-avatar {
  background: var(--luxe-text) !important;
  color: var(--luxe-bg-0) !important;
  border-radius: 0 !important;
}
html.theme-luxe .message.bot .message-avatar {
  background: transparent !important;
  border: 1px solid var(--luxe-line-strong) !important;
  color: var(--luxe-text-muted) !important;
  border-radius: 0 !important;
}
html.theme-luxe .message-content h3 {
  color: var(--luxe-text) !important;
  font-family: 'Big Shoulders Display', sans-serif !important;
  letter-spacing: var(--luxe-track-display) !important;
  text-transform: uppercase !important;
  font-size: 0.95rem !important;
}
html.theme-luxe .chat-input-area {
  background: transparent !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
}
html.theme-luxe .chat-input {
  background: var(--luxe-bg-0) !important;
  border: 1px solid var(--luxe-line) !important;
  color: var(--luxe-text) !important;
  border-radius: 2px !important;
  font-family: 'Inter', sans-serif !important;
}
html.theme-luxe .chat-input:focus { border-color: var(--luxe-line-strong) !important; }
html.theme-luxe .chat-input::placeholder { color: var(--luxe-text-faint) !important; }
html.theme-luxe .chat-send-btn {
  background: var(--luxe-text) !important;
  color: var(--luxe-bg-0) !important;
  border-radius: 2px !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
html.theme-luxe .chat-send-btn:hover:not(:disabled) {
  background: var(--luxe-text-muted) !important;
  transform: none !important;
}
html.theme-luxe .example-chip {
  background: transparent !important;
  border: 1px solid var(--luxe-line) !important;
  color: var(--luxe-text-muted) !important;
  border-radius: 2px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em !important;
}
html.theme-luxe .example-chip:hover {
  border-color: var(--luxe-line-strong) !important;
  color: var(--luxe-text) !important;
  background: var(--luxe-bg-2) !important;
}
html.theme-luxe .loading-dots span {
  background: var(--luxe-text) !important;
}
html.theme-luxe .source-item {
  background: var(--luxe-bg-0) !important;
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--luxe-text-faint) !important;
}

/* ---------------------------------------------------------------------
 * v2.11 subscribe.html — billing activation page (no shared header).
 * Has its own body background. Override with !important.
 * -------------------------------------------------------------------*/
html.theme-luxe body > main + footer,
html.theme-luxe body > main {
  /* let the body bg from v2.5 take over; no extra panel here */
}
html.theme-luxe .card {
  background: var(--luxe-bg-1) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: var(--luxe-text) !important;
}
html.theme-luxe .subscribe-btn {
  background: var(--luxe-text) !important;
  color: var(--luxe-bg-0) !important;
  border-radius: 2px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
html.theme-luxe .subscribe-btn:hover {
  background: var(--luxe-text-muted) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------
 * v2.12 Methodology notes (analytics transparency block on dashboards).
 * -------------------------------------------------------------------*/
html.theme-luxe .methodology-note {
  margin-top: 16px;
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  background: transparent;
}
html.theme-luxe .methodology-note summary {
  color: var(--luxe-text-faint);
  font-size: 0.62rem;
  letter-spacing: var(--luxe-track-eyebrow);
  text-transform: uppercase;
  padding: 12px 16px;
  cursor: pointer;
}
html.theme-luxe .methodology-note summary:hover { color: var(--luxe-text-muted); }
html.theme-luxe .methodology-note p {
  color: var(--luxe-text-muted);
  padding: 0 16px 14px;
  font-size: 0.78rem;
  line-height: var(--luxe-leading-body);
}

/* ---------------------------------------------------------------------
 * v2.13 ttf-acc accordion (used in upload.html scanner section).
 * -------------------------------------------------------------------*/
html.theme-luxe .ttf-acc summary {
  cursor: pointer;
  color: var(--luxe-text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
html.theme-luxe .ttf-badge {
  background: transparent !important;
  border: 1px solid var(--luxe-line-strong);
  color: var(--luxe-text-muted) !important;
  border-radius: 2px;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  font-family: 'Inter', sans-serif;
}

/* ---------------------------------------------------------------------
 * v2.14 KPI-card accent bars on dashboards (.kpi-card.blue|green|...).
 * Already neutralized in v1 for trends.html, but those rules used the
 * dashboard-grid prefix. Without that prefix, ciso-dashboard / insights
 * etc. would still show colored left borders. Strip them universally.
 * -------------------------------------------------------------------*/
html.theme-luxe .kpi-card.blue,
html.theme-luxe .kpi-card.green,
html.theme-luxe .kpi-card.yellow,
html.theme-luxe .kpi-card.red,
html.theme-luxe .kpi-card.purple,
html.theme-luxe .kpi-card.cyan,
html.theme-luxe .kpi-card.amber,
html.theme-luxe .kpi-card.rose {
  border-left: none !important;
}

/* ---------------------------------------------------------------------
 * v2.15 Title icons (the colored "<i style='color: #...'>" decorations
 * before <h1> / <h2> on multiple pages). Mute icon color but keep icon.
 * -------------------------------------------------------------------*/
html.theme-luxe h1 > i[style*="color"],
html.theme-luxe h2 > i[style*="color"] {
  color: var(--luxe-text-faint) !important;
  margin-right: 12px !important;
  opacity: 0.7;
  font-size: 0.7em !important;
}

/* ---------------------------------------------------------------------
 * v2.16 Generic <h1> / <h2> on authenticated pages — promote to luxe
 * editorial type without breaking pages that already use .dash-page-title.
 * -------------------------------------------------------------------*/
html.theme-luxe main > div > h1,
html.theme-luxe .container h1:not(.title):not(.dash-page-title),
html.theme-luxe .integrations-container h1,
html.theme-luxe body > div h1[style*="font-family"] {
  font-family: 'Big Shoulders Display', sans-serif !important;
  letter-spacing: var(--luxe-track-display) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--luxe-text) !important;
  line-height: var(--luxe-leading-tight);
}

html.theme-luxe .panel h2 {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-size: 1.3rem !important;
  letter-spacing: var(--luxe-track-display) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--luxe-text) !important;
  margin: 0 0 8px;
}

/* ---------------------------------------------------------------------
 * v2.17 Spacing utility classes from styles.css (.section, .container)
 * — give them luxe rhythm.
 * -------------------------------------------------------------------*/
html.theme-luxe .container,
html.theme-luxe main.container {
  max-width: 1240px;
  padding-left: 32px;
  padding-right: 32px;
  /* The body is `display: flex; flex-direction: column;` (see styles.css), so
   * .container sits as a flex item on the cross axis. Without explicit auto
   * margins it defaults to flex-start (left-aligned), which leaves wasted space
   * on the right of every internal page once the viewport is wider than 1240px.
   * margin: auto fixes /trends, /reports, /finding-libraries, /upload, etc. */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Pages that wrap content in `.wrap.container` (trends, reports,
 * finding-libraries, technique-explorer, ciso-dashboard, etc.) are
 * data-dense and want more horizontal real estate than the 1240px cap
 * above. Bump them to 1500px and re-center. */
html.theme-luxe .wrap.container {
  max-width: 1500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------------------------------------------------------------------
 * v2.18 Tagline / subtitle helper class used across pages.
 * -------------------------------------------------------------------*/
html.theme-luxe .tagline {
  color: var(--luxe-text-faint) !important;
  font-size: 0.74rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  font-family: 'Inter', sans-serif !important;
}

/* ---------------------------------------------------------------------
 * v2.19 Hairline divider on the inline upload-header etc.
 * -------------------------------------------------------------------*/
html.theme-luxe [style*="border-bottom: 1px solid rgba(255,255,255,0.1)"] {
  border-bottom-color: var(--luxe-line) !important;
}
html.theme-luxe [style*="border-top: 1px solid rgba(255,255,255,0.1)"] {
  border-top-color: var(--luxe-line) !important;
}

/* =====================================================================
 * v2.20 — second-pass audit fixes
 * ---------------------------------------------------------------------
 * Two leak families discovered after v2 rollout:
 *
 * 1. Decorative cool-cyans / indigos / sky-blues used inline that v2.1
 *    didn't enumerate (#22d3ee, #8b5cf6, #3b82f6, #06b6d4, #2563eb,
 *    #6366f1, #818cf8, #0ea5e9, #14b8a6). Heavy use in
 *    novel-analytics.html for icon tints and KPI values.
 *
 * 2. Card classes defined inside per-page <style> blocks that hardcode
 *    background:#1A1A23. Attribute selectors can't reach them — we
 *    need explicit class rules. Pages affected: audit-logs (.stat-card,
 *    .logs-table-wrap), custom-dashboard-view (.widget), purple-team
 *    (.exercise-card), novel-analytics (.n-card, .novel-tab.active,
 *    .n-badge.medium), technique-explorer, finding-libraries,
 *    custom-dashboards (.dashboard-card), scheduled-reports.
 * =====================================================================
 */

/* v2.20.1 Decorative inline color overrides — round 2 */
html.theme-luxe [style*="color: #22d3ee"],
html.theme-luxe [style*="color:#22d3ee"],
html.theme-luxe [style*="color: #06b6d4"],
html.theme-luxe [style*="color:#06b6d4"],
html.theme-luxe [style*="color: #0ea5e9"],
html.theme-luxe [style*="color:#0ea5e9"],
html.theme-luxe [style*="color: #14b8a6"],
html.theme-luxe [style*="color:#14b8a6"],
html.theme-luxe [style*="color: #8b5cf6"],
html.theme-luxe [style*="color:#8b5cf6"],
html.theme-luxe [style*="color: #6366f1"],
html.theme-luxe [style*="color:#6366f1"],
html.theme-luxe [style*="color: #818cf8"],
html.theme-luxe [style*="color:#818cf8"],
html.theme-luxe [style*="color: #3b82f6"],
html.theme-luxe [style*="color:#3b82f6"],
html.theme-luxe [style*="color: #2563eb"],
html.theme-luxe [style*="color:#2563eb"] {
  color: var(--luxe-text) !important;
}

/* v2.20.2 Decorative inline backgrounds tinted with the same cool palette
 * (e.g. <span style="background: rgba(34,211,238,0.12)">) — desaturate to
 * a faint surface tint so the chip reads as a hairline pill. */
html.theme-luxe [style*="background: rgba(34,211,238"],
html.theme-luxe [style*="background:rgba(34,211,238"],
html.theme-luxe [style*="background: rgba(6,182,212"],
html.theme-luxe [style*="background:rgba(6,182,212"],
html.theme-luxe [style*="background: rgba(139,92,246"],
html.theme-luxe [style*="background:rgba(139,92,246"],
html.theme-luxe [style*="background: rgba(167,139,250"],
html.theme-luxe [style*="background:rgba(167,139,250"],
html.theme-luxe [style*="background: rgba(59,130,246"],
html.theme-luxe [style*="background:rgba(59,130,246"],
html.theme-luxe [style*="background: rgba(96,165,250"],
html.theme-luxe [style*="background:rgba(96,165,250"] {
  background: rgba(245, 240, 232, 0.04) !important;
  color: var(--luxe-text-muted) !important;
}

/* v2.20.3 Class rules with hardcoded #1A1A23 backgrounds. We can't reach
 * these via [style*=] because they're declared inside per-page <style>
 * blocks, not on the element. */
html.theme-luxe .stat-card,
html.theme-luxe .logs-table-wrap,
html.theme-luxe .widget,
html.theme-luxe .exercise-card,
html.theme-luxe .n-card,
html.theme-luxe .dashboard-card {
  background: var(--luxe-bg-elevated) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 4px !important;
  box-shadow: var(--luxe-shadow-sm) !important;
}

html.theme-luxe .stat-card,
html.theme-luxe .widget,
html.theme-luxe .n-card {
  padding: 24px !important;
}

/* novel-analytics specific: section headers + KPI values inside cards */
html.theme-luxe .n-card h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text) !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--luxe-line) !important;
  margin: 0 0 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
html.theme-luxe .n-card h3 i {
  color: var(--luxe-text-faint) !important;
  font-size: 0.78rem !important;
  opacity: 1 !important;
}
html.theme-luxe .n-kpi-value {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 2.2rem !important;
  color: var(--luxe-text) !important;
  line-height: 1.1 !important;
}
html.theme-luxe .n-kpi-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.62rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-faint) !important;
  margin-top: 6px !important;
}
html.theme-luxe .n-list li {
  border-bottom: 1px solid var(--luxe-line) !important;
  padding: 10px 0 !important;
  color: var(--luxe-text-muted) !important;
}
html.theme-luxe .novel-tab {
  background: transparent !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  color: var(--luxe-text-muted) !important;
  padding: 10px 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
html.theme-luxe .novel-tab.active {
  background: var(--luxe-text) !important;
  color: #06060a !important;
  border-color: var(--luxe-text) !important;
}
html.theme-luxe .n-badge {
  background: transparent !important;
  border: 1px solid var(--luxe-line-strong) !important;
  color: var(--luxe-text-muted) !important;
  border-radius: 2px !important;
  padding: 3px 8px !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
/* keep severity-driven badges meaningful */
html.theme-luxe .n-badge.high,
html.theme-luxe .n-badge.critical {
  border-color: var(--luxe-sev-critical) !important;
  color: var(--luxe-sev-critical) !important;
}
html.theme-luxe .n-badge.low {
  border-color: var(--luxe-sev-low) !important;
  color: var(--luxe-sev-low) !important;
}
html.theme-luxe .n-dim {
  background: rgba(245, 240, 232, 0.04) !important;
  color: var(--luxe-text-muted) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  padding: 4px 10px !important;
  font-size: 0.7rem !important;
}
html.theme-luxe .n-radar-dims {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
}
html.theme-luxe .n-kpi {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 24px !important;
  margin-bottom: 18px !important;
}
html.theme-luxe .n-loading {
  color: var(--luxe-text-faint) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.08em !important;
  padding: 24px 0 !important;
}
html.theme-luxe .spinner {
  border-color: var(--luxe-line) !important;
  border-top-color: var(--luxe-text-muted) !important;
}

/* v2.20.4 reports.html sort-select option dropdown — keep readable on luxe */
html.theme-luxe .sort-select option,
html.theme-luxe select option {
  background: #14141a !important;
  color: var(--luxe-text) !important;
}

/* v2.20.5 audit-logs / scheduled-reports filter strips often live inside
 * a div that uses .filters-bar with hardcoded background. Make them flat. */
html.theme-luxe .filters-bar,
html.theme-luxe .toolbar-row,
html.theme-luxe .controls-row {
  background: transparent !important;
  border-bottom: 1px solid var(--luxe-line) !important;
  padding: 16px 0 !important;
}

/* v2.20.6 Generic stat number + label pairs across audit-logs etc. */
html.theme-luxe .stat-card .stat-number,
html.theme-luxe .stat-card .stat-value,
html.theme-luxe .stat-number {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 2.2rem !important;
  color: var(--luxe-text) !important;
  line-height: 1.1 !important;
}
html.theme-luxe .stat-card .stat-label,
html.theme-luxe .stat-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.62rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-faint) !important;
  margin-top: 6px !important;
}

/* =====================================================================
 * v3.0 — public marketing pages
 * ---------------------------------------------------------------------
 * The unauthenticated surface (index, features, demo, whitepaper,
 * contact, terms, privacy) was originally amber/slate/colorful — the
 * "classic" SaaS look. v3 brings it under the same luxe roof as the
 * authenticated app so the brand reads consistently from first paint
 * through deep workflow.
 *
 * Design intent (per the original UI revamp brief):
 *   - Same near-black surfaces, warm-bone type, hairline dividers.
 *   - "Tasteful rainbow" preserved as a deliberate single moment per
 *     page (sign-in CTA on /, gradient tagline span, legal email link,
 *     whitepaper "view" CTA). No rainbow borders, no gradient washes.
 *   - Editorial type: Big Shoulders Display for hero, EB Garamond
 *     italic for select numerals, Inter for body, Roboto Mono micro
 *     for eyebrows + captions.
 *   - Categorical icon tints get desaturated to a small luxe palette,
 *     with red preserved for true danger semantics (PDF Black Hole,
 *     critical findings).
 *
 * Architecture note: scoped exclusively to public-page class names
 * (.hero, .feat-*, .contact-*, .demo-*, .whitepaper-*, .legal-*).
 * No bleed risk into authenticated pages because those pages don't
 * use any of these selectors.
 * =====================================================================
 */

/* ---------------------------------------------------------------------
 * v3.0.1 Categorical palette tokens for marketing icon tints.
 *        Cycle of 6 desaturated hues — readable on var(--luxe-bg-0),
 *        none of them pop louder than the rainbow-halo CTA.
 * -------------------------------------------------------------------*/
html.theme-luxe {
  --luxe-cat-amber:  #d4a574;  /* primary accent — burnished amber */
  --luxe-cat-red:    #c97356;  /* danger / semantic only */
  --luxe-cat-green:  #9bb8a5;  /* muted sage */
  --luxe-cat-purple: #b89db8;  /* muted plum */
  --luxe-cat-blue:   #8a9fb8;  /* muted graphite blue */
  --luxe-cat-cyan:   #c8b896;  /* warm taupe */
}

/* ---------------------------------------------------------------------
 * v3.0.2 Decorative inline-color overrides specific to public pages.
 *        Mostly slate-200/300/400 (#e2e8f0, #cbd5e1, #94a3b8, #64748b)
 *        used inline for body text on terms/privacy/features. Pulls
 *        them onto luxe muted bone.
 * -------------------------------------------------------------------*/
html.theme-luxe [style*="color: #e2e8f0"],
html.theme-luxe [style*="color:#e2e8f0"],
html.theme-luxe [style*="color: #cbd5e1"],
html.theme-luxe [style*="color:#cbd5e1"] {
  color: var(--luxe-text) !important;
}
html.theme-luxe [style*="color: #94a3b8"],
html.theme-luxe [style*="color:#94a3b8"],
html.theme-luxe [style*="color: #64748b"],
html.theme-luxe [style*="color:#64748b"] {
  color: var(--luxe-text-muted) !important;
}
html.theme-luxe [style*="color: #fff"],
html.theme-luxe [style*="color:#fff"],
html.theme-luxe [style*="color: #ffffff"],
html.theme-luxe [style*="color:#ffffff"] {
  color: var(--luxe-text) !important;
}

/* ---------------------------------------------------------------------
 * v3.1 — homepage (index.html)
 * Structure: <main class="hero"> > <div class="hero-stack">
 *   .title — display headline
 *   .tagline — sub with .tagline-gradient span
 *   .cta-row#signInButtonsContainer — Google/MS/Okta sign-in pills
 *   #funFactDisplay.fun-fact-line — rotating intel ticker
 *   #authStatus.muted — auth status microcopy
 *   bottom row of .subtle-link — Demo / Whitepaper / Features
 * Plus the floating .contact-link top-right.
 * -------------------------------------------------------------------*/
html.theme-luxe main.hero {
  /* .hero in styles.css is already display:flex; flex-direction:column;
   * align-items:center; justify-content:center — DON'T override the
   * cross-axis alignment or the stack collapses to the left edge.
   * Just relax the padding for a more editorial top breathing room. */
  padding: clamp(56px, 9vh, 120px) 24px 64px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

html.theme-luxe .hero-stack {
  max-width: 720px !important;
  width: 100% !important;
  text-align: center !important;
  align-items: center !important;
  gap: 20px !important;
}

/* Display title — Big Shoulders, slightly looser, warm bone. */
html.theme-luxe .title {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.8rem, 7vw, 5rem) !important;
  line-height: 0.98 !important;
  letter-spacing: var(--luxe-track-display) !important;
  color: var(--luxe-text) !important;
  margin: 0 !important;
  text-transform: uppercase;
}

/* Tagline — Inter, restrained width, soft. styles.css sets
 * white-space:nowrap which overflows on desktop; force it to wrap. */
html.theme-luxe .tagline {
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: var(--luxe-text-muted) !important;
  max-width: 620px !important;
  margin: 4px auto 0 !important;
  white-space: normal !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0.005em !important;
}

/* The decorative red-gradient + tagline-gradient spans are the
 * deliberate "tasteful rainbow" moments — leave them alone. */

/* Mono microcopy under tagline (the "PDF black hole" line). */
html.theme-luxe .hero-stack p[style*="font-family"][style*="font-mono"],
html.theme-luxe .hero-stack p[style*="--font-mono"] {
  color: var(--luxe-text-faint) !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
  margin-top: 8px !important;
}

/* CTA row spacing — let the rainbow-halo sign-in button breathe. */
html.theme-luxe .cta-row {
  margin-top: 16px !important;
  gap: 14px !important;
}

/* Fun-fact ticker — quiet, mono, hairline pill. */
html.theme-luxe .fun-fact-line {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em !important;
  color: var(--luxe-text-faint) !important;
  margin-top: 24px !important;
  padding: 8px 16px !important;
  border-top: 1px solid var(--luxe-line) !important;
  border-bottom: 1px solid var(--luxe-line) !important;
  background: transparent !important;
  max-width: 560px !important;
}

/* Bottom subtle-link row — hairline-bordered, Roboto Mono, tightened. */
html.theme-luxe .subtle-link {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-faint) !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid transparent !important;
  transition: color var(--luxe-dur-fast) var(--luxe-ease),
              border-color var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .subtle-link:hover {
  color: var(--luxe-text) !important;
  border-bottom-color: var(--luxe-line-strong) !important;
}

/* Floating top-right contact link — tightened, hairline. */
html.theme-luxe .contact-link {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-muted) !important;
  background: transparent !important;
  border: 1px solid var(--luxe-line) !important;
  padding: 8px 14px !important;
  border-radius: 0 !important;
  transition: color var(--luxe-dur-fast) var(--luxe-ease),
              border-color var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .contact-link:hover {
  color: var(--luxe-text) !important;
  border-color: var(--luxe-line-strong) !important;
  background: transparent !important;
}

/* ---------------------------------------------------------------------
 * v3.2 — features.html
 * The big editorial moment: a long ATT&CK-style catalog. Treat it like
 * an editorial spread — eyebrow section labels, hairline rows, restrained
 * categorical icon tints.
 * -------------------------------------------------------------------*/
html.theme-luxe .feat-wrap {
  max-width: 1040px !important;
  padding: 56px 32px 96px !important;
}

/* Top-left back link — match contact-link treatment. */
html.theme-luxe .feat-back,
html.theme-luxe .legal-back,
html.theme-luxe .back-link {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-muted) !important;
  top: 24px !important;
  left: 24px !important;
}
html.theme-luxe .feat-back:hover,
html.theme-luxe .legal-back:hover,
html.theme-luxe .back-link:hover {
  color: var(--luxe-text) !important;
}

/* Hero block. */
html.theme-luxe .feat-hero {
  margin-bottom: 64px !important;
  padding-bottom: 32px !important;
  border-bottom: 1px solid var(--luxe-line) !important;
}
html.theme-luxe .feat-hero h1 {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.5rem, 5vw, 4rem) !important;
  line-height: 1 !important;
  letter-spacing: var(--luxe-track-display) !important;
  color: var(--luxe-text) !important;
  text-transform: uppercase !important;
  margin: 0 0 16px !important;
}
html.theme-luxe .feat-hero p {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.05rem !important;
  line-height: var(--luxe-leading-body) !important;
  color: var(--luxe-text-muted) !important;
  max-width: 680px !important;
  margin: 0 0 28px !important;
}

/* Stats — EB Garamond italic numerals are the editorial flourish. */
html.theme-luxe .feat-stats {
  gap: 48px !important;
  border-top: 1px solid var(--luxe-line) !important;
  padding-top: 24px !important;
}
html.theme-luxe .feat-stat {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 2.4rem !important;
  color: var(--luxe-text) !important;
  line-height: 1 !important;
}
html.theme-luxe .feat-stats span:not(.feat-stat) {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.62rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-faint) !important;
  margin-top: 6px !important;
}

/* PDF Black Hole callout — semantic red, but desaturated to terracotta. */
html.theme-luxe .feat-blackhole {
  margin-top: 32px !important;
  padding: 20px 24px !important;
  border-left: 2px solid var(--luxe-cat-red) !important;
  background: rgba(201, 115, 86, 0.04) !important;
  border-radius: 0 !important;
}
html.theme-luxe .feat-blackhole h2 {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.75rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text) !important;
  font-weight: 600 !important;
  margin: 0 0 12px !important;
}
html.theme-luxe .feat-blackhole h2 i {
  color: var(--luxe-cat-red) !important;
  margin-right: 8px !important;
}
html.theme-luxe .feat-blackhole p {
  color: var(--luxe-text-muted) !important;
  font-size: 0.9rem !important;
  line-height: var(--luxe-leading-body) !important;
}
html.theme-luxe .feat-blackhole p[style*="color: #e2e8f0"],
html.theme-luxe .feat-blackhole p[style*="color:#e2e8f0"] {
  color: var(--luxe-text) !important;
}

/* Section headers — eyebrow style, neutralized from amber. */
html.theme-luxe .feat-section {
  margin-bottom: 56px !important;
}
html.theme-luxe .feat-section h2 {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-faint) !important;
  margin: 0 0 24px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--luxe-line) !important;
}

/* Feature rows — hairline-divided, generous padding. */
html.theme-luxe .feat-row {
  padding: 18px 4px !important;
  border-bottom: 1px solid var(--luxe-line) !important;
  transition: background var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .feat-row:hover {
  background: rgba(244, 241, 234, 0.015) !important;
}
html.theme-luxe .feat-row-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 1px solid var(--luxe-line) !important;
  font-size: 0.85rem !important;
}

/* Categorical icon tints — desaturated luxe palette. */
html.theme-luxe .feat-row-icon.amber  { color: var(--luxe-cat-amber) !important; }
html.theme-luxe .feat-row-icon.blue   { color: var(--luxe-cat-blue)  !important; }
html.theme-luxe .feat-row-icon.green  { color: var(--luxe-cat-green) !important; }
html.theme-luxe .feat-row-icon.purple { color: var(--luxe-cat-purple)!important; }
html.theme-luxe .feat-row-icon.red    { color: var(--luxe-cat-red)   !important; }
html.theme-luxe .feat-row-icon.cyan   { color: var(--luxe-cat-cyan)  !important; }

html.theme-luxe .feat-row-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: var(--luxe-text) !important;
  font-size: 0.95rem !important;
  margin: 0 0 4px !important;
  letter-spacing: 0.005em !important;
}
html.theme-luxe .feat-row-desc {
  color: var(--luxe-text-muted) !important;
  font-size: 0.85rem !important;
  line-height: 1.55 !important;
}

/* Badges — flat, hairline, mono. */
html.theme-luxe .feat-badge {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.55rem !important;
  font-weight: 500 !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 1px solid var(--luxe-line) !important;
  color: var(--luxe-text-muted) !important;
}
html.theme-luxe .feat-badge.new,
html.theme-luxe .feat-badge.enhanced {
  border-color: rgba(212, 165, 116, 0.4) !important;
  color: var(--luxe-cat-amber) !important;
}
html.theme-luxe .feat-badge.active,
html.theme-luxe .feat-badge.core {
  border-color: rgba(155, 184, 165, 0.35) !important;
  color: var(--luxe-cat-green) !important;
}

/* ---------------------------------------------------------------------
 * v3.3 — contact.html
 * Form-driven page. Luxe form primitives (flat inputs, hairline borders,
 * uppercase mono labels) — same vocabulary as the authenticated app.
 * -------------------------------------------------------------------*/
html.theme-luxe .contact-hero {
  padding: 56px 24px 40px !important;
}
html.theme-luxe .contact-stack {
  max-width: 600px !important;
  gap: 16px !important;
}
html.theme-luxe .contact-title {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.2rem, 5vw, 3.5rem) !important;
  letter-spacing: var(--luxe-track-display) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text) !important;
  line-height: 1 !important;
}
html.theme-luxe .contact-subtitle {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-faint) !important;
  margin: 0 0 24px !important;
}

/* Form labels — eyebrow mono. */
html.theme-luxe .contact-form .form-group label {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-faint) !important;
}

/* Inputs / selects / textareas — flat, hairline, warm bone type. */
html.theme-luxe .contact-form .form-group input,
html.theme-luxe .contact-form .form-group select,
html.theme-luxe .contact-form .form-group textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--luxe-line) !important;
  border-radius: 0 !important;
  padding: 12px 4px !important;
  color: var(--luxe-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.005em !important;
  transition: border-color var(--luxe-dur-base) var(--luxe-ease) !important;
}
html.theme-luxe .contact-form .form-group input:focus,
html.theme-luxe .contact-form .form-group select:focus,
html.theme-luxe .contact-form .form-group textarea:focus {
  border-bottom-color: var(--luxe-text) !important;
  box-shadow: none !important;
  outline: none !important;
}
html.theme-luxe .contact-form .form-group input::placeholder,
html.theme-luxe .contact-form .form-group textarea::placeholder {
  color: var(--luxe-text-faint) !important;
  font-style: italic !important;
}
html.theme-luxe .contact-form .form-group select option {
  background: var(--luxe-bg-elevated) !important;
  color: var(--luxe-text) !important;
}
html.theme-luxe .contact-form .form-group textarea {
  border: 1px solid var(--luxe-line) !important;
  padding: 14px 16px !important;
  min-height: 140px !important;
}
html.theme-luxe .contact-form .form-group textarea:focus {
  border-color: var(--luxe-text) !important;
}

/* Submit button — when not wrapped in rainbow-halo (defensive); when it
 * IS wrapped, the existing rainbow-pill rules win and we don't touch it. */
html.theme-luxe .submit-btn:not(.rainbow-btn-inner) {
  background: transparent !important;
  border: 1px solid var(--luxe-text) !important;
  color: var(--luxe-text) !important;
  font-family: 'Big Shoulders Display', sans-serif !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 14px 32px !important;
  box-shadow: none !important;
  transition: background var(--luxe-dur-base) var(--luxe-ease),
              color var(--luxe-dur-base) var(--luxe-ease) !important;
}
html.theme-luxe .submit-btn:not(.rainbow-btn-inner):hover {
  background: var(--luxe-text) !important;
  color: var(--luxe-bg-0) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Success message — quiet confirmation. */
html.theme-luxe .success-msg i {
  color: var(--luxe-cat-green) !important;
}
html.theme-luxe .success-msg h2 {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: var(--luxe-track-display) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text) !important;
}
html.theme-luxe .success-msg p {
  color: var(--luxe-text-muted) !important;
}

html.theme-luxe .email-alt {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.06em !important;
  color: var(--luxe-text-faint) !important;
  margin-top: 24px !important;
}

/* ---------------------------------------------------------------------
 * v3.4 — demo.html
 * Video-centric. Frame the video like a gallery piece.
 * -------------------------------------------------------------------*/
html.theme-luxe .demo-hero {
  padding: 56px 24px 40px !important;
}
html.theme-luxe .demo-stack {
  max-width: 920px !important;
  gap: 16px !important;
}
html.theme-luxe .demo-title {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.2rem, 5vw, 4rem) !important;
  letter-spacing: var(--luxe-track-display) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text) !important;
  line-height: 1 !important;
}
html.theme-luxe .demo-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  line-height: var(--luxe-leading-body) !important;
  color: var(--luxe-text-muted) !important;
  max-width: 640px !important;
}

/* Duration badge — desaturated, hairline pill. */
html.theme-luxe .duration-badge {
  background: transparent !important;
  border: 1px solid var(--luxe-line) !important;
  color: var(--luxe-text-faint) !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  border-radius: 0 !important;
}

/* Video frame — gallery treatment. */
html.theme-luxe .video-wrapper {
  border-radius: 0 !important;
  border: 1px solid var(--luxe-line) !important;
  background: var(--luxe-bg-1) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55) !important;
  margin: 32px 0 !important;
}
html.theme-luxe .video-container {
  background: var(--luxe-bg-1) !important;
}

/* Feature pills under video — tightened, hairline, mono. */
html.theme-luxe .demo-features {
  gap: 1px !important;
  background: var(--luxe-line) !important;
  border: 1px solid var(--luxe-line) !important;
  margin: 24px 0 !important;
}
html.theme-luxe .demo-feature {
  background: var(--luxe-bg-0) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 16px 18px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  color: var(--luxe-text-muted) !important;
}
html.theme-luxe .demo-feature i {
  color: var(--luxe-cat-amber) !important;
}

/* CTA — preserve the rainbow-halo, just make sure btn inside reads. */
html.theme-luxe .demo-cta {
  margin-top: 24px !important;
}

/* ---------------------------------------------------------------------
 * v3.5 — whitepaper.html
 * Conversion landing page for the PDF download.
 * -------------------------------------------------------------------*/
html.theme-luxe .whitepaper-hero {
  padding: 56px 24px 40px !important;
}
html.theme-luxe .whitepaper-stack {
  max-width: 760px !important;
  gap: 20px !important;
}
html.theme-luxe .whitepaper-title {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
  letter-spacing: var(--luxe-track-display) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text) !important;
  line-height: 1 !important;
}
html.theme-luxe .whitepaper-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  line-height: var(--luxe-leading-body) !important;
  color: var(--luxe-text-muted) !important;
  max-width: 580px !important;
}

/* PDF preview card — flat, hairline. */
html.theme-luxe .pdf-preview {
  background: transparent !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 0 !important;
  padding: 24px !important;
  margin: 16px 0 !important;
  transition: border-color var(--luxe-dur-base) var(--luxe-ease) !important;
}
html.theme-luxe .pdf-preview:hover {
  background: transparent !important;
  border-color: var(--luxe-cat-red) !important;
  transform: none !important;
  box-shadow: none !important;
}
html.theme-luxe .pdf-icon {
  color: var(--luxe-cat-red) !important;
}
html.theme-luxe .pdf-name {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: var(--luxe-text) !important;
  font-size: 1rem !important;
  margin-bottom: 6px !important;
}
html.theme-luxe .pdf-meta {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-faint) !important;
}

/* Topic pills — flat hairline, mono micro. */
html.theme-luxe .whitepaper-topics {
  margin: 20px 0 !important;
  gap: 1px !important;
  background: var(--luxe-line) !important;
  border: 1px solid var(--luxe-line) !important;
}
html.theme-luxe .whitepaper-topic {
  background: var(--luxe-bg-0) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 16px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  color: var(--luxe-text-muted) !important;
}
html.theme-luxe .whitepaper-topic i {
  color: var(--luxe-cat-amber) !important;
}

/* Pull quote — semantic terracotta accent on left rule. */
html.theme-luxe .whitepaper-quote {
  border-left: 2px solid var(--luxe-cat-red) !important;
  background: rgba(201, 115, 86, 0.04) !important;
  border-radius: 0 !important;
  padding: 20px 24px !important;
  margin: 24px 0 !important;
}
html.theme-luxe .whitepaper-quote blockquote {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-style: italic !important;
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  color: var(--luxe-text) !important;
}
html.theme-luxe .whitepaper-quote blockquote strong {
  color: var(--luxe-cat-red) !important;
  font-style: normal !important;
}

html.theme-luxe .whitepaper-pain-points {
  margin-top: 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--luxe-line) !important;
  gap: 8px !important;
}
html.theme-luxe .whitepaper-pain {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em !important;
  color: var(--luxe-text-muted) !important;
}
html.theme-luxe .whitepaper-pain i {
  color: var(--luxe-cat-red) !important;
}

html.theme-luxe .whitepaper-bridge {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text) !important;
  margin-top: 14px !important;
  display: inline-flex !important;
  border-bottom: 1px solid var(--luxe-line-strong) !important;
  padding-bottom: 4px !important;
  transition: border-color var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .whitepaper-bridge:hover {
  color: var(--luxe-text) !important;
  border-bottom-color: var(--luxe-text) !important;
}

/* ---------------------------------------------------------------------
 * v3.6 — terms.html / privacy.html
 * Long-form legal text. Treat it like a magazine article column.
 * -------------------------------------------------------------------*/
html.theme-luxe .legal-wrap {
  max-width: 720px !important;
  padding: 64px 24px 96px !important;
}
html.theme-luxe .legal-wrap h1 {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.2rem, 4vw, 3rem) !important;
  letter-spacing: var(--luxe-track-display) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text) !important;
  line-height: 1 !important;
  margin: 0 0 12px !important;
}
html.theme-luxe .legal-wrap .updated {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-faint) !important;
  margin-bottom: 40px !important;
  padding-bottom: 24px !important;
  border-bottom: 1px solid var(--luxe-line) !important;
}
html.theme-luxe .legal-wrap h2 {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-faint) !important;
  margin: 40px 0 14px !important;
}
html.theme-luxe .legal-wrap p,
html.theme-luxe .legal-wrap li {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  color: var(--luxe-text-muted) !important;
}
html.theme-luxe .legal-wrap p strong,
html.theme-luxe .legal-wrap li strong {
  color: var(--luxe-text) !important;
  font-weight: 600 !important;
}
html.theme-luxe .legal-wrap a:not(.legal-rainbow-email) {
  color: var(--luxe-text) !important;
  border-bottom: 1px solid var(--luxe-line-strong) !important;
  text-decoration: none !important;
  transition: border-color var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .legal-wrap a:not(.legal-rainbow-email):hover {
  border-bottom-color: var(--luxe-text) !important;
}
/* The .legal-rainbow-email is a deliberate "tasteful rainbow" moment —
 * leave it alone. */

/* ---------------------------------------------------------------------
 * v3.7 — public footer chrome (shared across all 7 pages)
 * The marketing footer is a dumb HTML block, no class hooks. We target
 * <footer> inside body when there's no .ttf-* nav (i.e., public pages).
 * Authenticated pages don't have a top-level <footer> in the same
 * position, so this is safe.
 * -------------------------------------------------------------------*/
html.theme-luxe body > footer {
  margin-top: 64px !important;
  padding: 32px 24px !important;
  border-top: 1px solid var(--luxe-line) !important;
  text-align: center !important;
  background: transparent !important;
}
html.theme-luxe body > footer p {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-faint) !important;
  margin: 4px 0 !important;
}
html.theme-luxe body > footer a {
  color: var(--luxe-text-muted) !important;
  text-decoration: none !important;
  transition: color var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe body > footer a:hover {
  color: var(--luxe-text) !important;
}
html.theme-luxe body > footer .footer-legal {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--luxe-line) !important;
}
html.theme-luxe body > footer .footer-legal-sep {
  color: var(--luxe-text-faint) !important;
  margin: 0 12px !important;
}

/* =====================================================================
 * v3.8 — /technique-explorer
 * ---------------------------------------------------------------------
 * Why this section exists: technique-explorer.html ships a ~625-line
 * inline <style> block built around classic blue/purple gradients,
 * shimmery borders, and slate-on-rgba surfaces. Out-of-the-box the
 * luxe overlay loses most of those battles on specificity (an inline
 * .technique-card { background: rgba(255,255,255,0.02) } beats a
 * scoped html.theme-luxe .card rule). This section overrides the
 * page-specific selectors so the surface, type, and color tones land
 * in the same neighborhood as /trends.
 *
 * Semantic colors preserved: heatmap heat-1..3 (blue/amber/red),
 * technique-badge.reports (green = present), technique-badge.first-seen
 * (amber = recent). These are signals, not decoration.
 * Decorative purple/blue/violet washes are flattened to luxe surfaces.
 * Single rainbow accent kept on .lifecycle-container::before as the
 * deliberate "one moment per page" treatment.
 * =====================================================================
 */

/* ---- Lifecycle hero panel ---- */
html.theme-luxe .lifecycle-container {
  background: var(--luxe-bg-1) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  padding: 32px !important;
  margin-bottom: 32px !important;
  position: relative !important;
  overflow: hidden !important;
}
html.theme-luxe .lifecycle-container::before {
  /* The deliberate rainbow accent — single 1px hairline at the top.
   * Was a 3px slab; thinned to read as editorial trim, not decoration. */
  height: 1px !important;
  background: var(--luxe-accent-rainbow) !important;
  opacity: 0.7 !important;
}
html.theme-luxe .lifecycle-header {
  margin-bottom: 28px !important;
}
html.theme-luxe .lifecycle-title {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-size: clamp(2rem, 4vw, 2.6rem) !important;
  font-weight: 600 !important;
  letter-spacing: var(--luxe-track-display) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text) !important;
  line-height: var(--luxe-leading-tight) !important;
}
html.theme-luxe .lifecycle-title i {
  color: var(--luxe-text-muted) !important;
  font-size: 0.7em !important;
}
html.theme-luxe .lifecycle-subtitle {
  font-family: 'Inter', sans-serif !important;
  color: var(--luxe-text-muted) !important;
  font-size: 0.85rem !important;
  margin-top: 12px !important;
}
html.theme-luxe .lifecycle-stats { gap: 32px !important; }
html.theme-luxe .lifecycle-stat-value {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  color: #d4a574 !important; /* burnished amber, matches /trends KPIs */
  letter-spacing: var(--luxe-track-display) !important;
}
html.theme-luxe .lifecycle-stat-label {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.62rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  color: var(--luxe-text-faint) !important;
  text-transform: uppercase !important;
  margin-top: 6px !important;
}

/* ---- 14-phase track (chevron arrows) ---- */
html.theme-luxe .phases-track {
  scrollbar-color: var(--luxe-line-strong) transparent !important;
  padding: 16px 0 !important;
}
html.theme-luxe .phases-track::-webkit-scrollbar-thumb {
  background: var(--luxe-line-strong) !important;
}
html.theme-luxe .phase-item {
  background: var(--luxe-bg-2) !important;
  color: var(--luxe-text-faint) !important;
  transition: all var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .phase-item:hover {
  background: var(--luxe-bg-3) !important;
  color: var(--luxe-text-muted) !important;
}
html.theme-luxe .phase-item.active {
  background: linear-gradient(135deg, #d4a574, #c8956a) !important;
  color: #0a0a10 !important;
  box-shadow: none !important;
}
html.theme-luxe .phase-item.has-techniques {
  background: var(--luxe-bg-3) !important;
  color: var(--luxe-text) !important;
}
/* Heat colors stay semantic (red = critical, amber = warm), but desaturate
 * the gradients into a single tone with a luxe-tinted border instead of a
 * harsh wash. */
html.theme-luxe .phase-item.has-techniques.heat-high {
  background: rgba(232, 81, 59, 0.18) !important;
  color: #e8513b !important;
}
html.theme-luxe .phase-item.has-techniques.heat-medium {
  background: rgba(217, 154, 74, 0.18) !important;
  color: #d99a4a !important;
}
html.theme-luxe .phase-name {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-size: 0.78rem !important;
  letter-spacing: var(--luxe-track-display) !important;
}
html.theme-luxe .phase-count {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 1.1rem !important;
}
html.theme-luxe .phase-bar {
  background: var(--luxe-line) !important;
  height: 2px !important;
}
html.theme-luxe .phase-bar-fill {
  background: linear-gradient(90deg, #d4a574, #c8956a) !important;
}

/* ---- Controls bar (search + filters + sort + view toggle) ---- */
html.theme-luxe .controls-bar { margin-bottom: 28px !important; }
html.theme-luxe .search-input {
  background: var(--luxe-bg-1) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  color: var(--luxe-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  padding: 12px 16px 12px 44px !important;
  transition: border-color var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .search-input:focus {
  outline: none !important;
  border-color: #d4a574 !important;
  background: var(--luxe-bg-1) !important;
  box-shadow: none !important;
}
html.theme-luxe .search-input::placeholder {
  color: var(--luxe-text-faint) !important;
}
html.theme-luxe .search-icon { color: var(--luxe-text-faint) !important; }
html.theme-luxe .filter-btn {
  background: transparent !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  color: var(--luxe-text-muted) !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  padding: 10px 16px !important;
  transition: all var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .filter-btn:hover {
  background: var(--luxe-bg-2) !important;
  border-color: var(--luxe-line-strong) !important;
  color: var(--luxe-text) !important;
}
html.theme-luxe .filter-btn.active {
  background: var(--luxe-text) !important;
  border-color: var(--luxe-text) !important;
  color: var(--luxe-bg-0) !important;
}
html.theme-luxe .sort-select {
  background: var(--luxe-bg-1) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  color: var(--luxe-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
}
html.theme-luxe .sort-select option {
  background: var(--luxe-bg-elevated) !important;
  color: var(--luxe-text) !important;
}
html.theme-luxe .active-filter {
  background: rgba(212, 165, 116, 0.08) !important;
  border: 1px solid rgba(212, 165, 116, 0.25) !important;
  border-radius: 2px !important;
  color: #d4a574 !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em !important;
}
html.theme-luxe .active-filter .clear-btn { color: #d4a574 !important; }

/* ---- View toggle (cards / heatmap segmented) ---- */
html.theme-luxe .view-toggle {
  background: var(--luxe-bg-1) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  padding: 0 !important;
  gap: 0 !important;
}
html.theme-luxe .view-toggle-btn {
  background: transparent !important;
  color: var(--luxe-text-muted) !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  padding: 10px 16px !important;
  border-radius: 0 !important;
  transition: all var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .view-toggle-btn:hover:not(.active) {
  background: var(--luxe-bg-2) !important;
  color: var(--luxe-text) !important;
}
html.theme-luxe .view-toggle-btn.active {
  background: var(--luxe-text) !important;
  color: var(--luxe-bg-0) !important;
}

/* ---- Technique cards ---- */
html.theme-luxe .techniques-grid { gap: 20px !important; }
html.theme-luxe .technique-card {
  background: var(--luxe-bg-1) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  transition: border-color var(--luxe-dur-fast) var(--luxe-ease),
              transform var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .technique-card:hover {
  border-color: var(--luxe-line-strong) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}
html.theme-luxe .technique-header {
  background: transparent !important;
  border-bottom: 1px solid var(--luxe-line) !important;
  padding: 18px !important;
}
html.theme-luxe .technique-id {
  background: rgba(212, 165, 116, 0.1) !important;
  color: #d4a574 !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  border-radius: 2px !important;
  letter-spacing: 0.04em !important;
}
/* Kill the shimmer animation — too "SaaS demo" for the luxe target. */
html.theme-luxe .technique-id::before { display: none !important; }
html.theme-luxe .technique-name {
  font-family: 'Inter', sans-serif !important;
  color: var(--luxe-text) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
}
html.theme-luxe .technique-badge {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.62rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  border-radius: 2px !important;
  padding: 4px 8px !important;
}
/* Keep semantic green for "this technique appears in N reports" but tone it
 * to the muted sage we use elsewhere in luxe. */
html.theme-luxe .technique-badge.reports {
  background: rgba(155, 184, 165, 0.15) !important;
  color: #9bb8a5 !important;
}
html.theme-luxe .technique-badge.first-seen {
  background: rgba(217, 154, 74, 0.15) !important;
  color: #d99a4a !important;
}
html.theme-luxe .technique-body { padding: 18px !important; }
html.theme-luxe .technique-tactics { margin-bottom: 14px !important; }
html.theme-luxe .tactic-chip {
  background: var(--luxe-bg-2) !important;
  border: 1px solid var(--luxe-line) !important;
  color: var(--luxe-text-muted) !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-radius: 2px !important;
  padding: 4px 10px !important;
}
html.theme-luxe .technique-description {
  color: var(--luxe-text-muted) !important;
  font-size: 0.85rem !important;
  line-height: 1.7 !important;
}
html.theme-luxe .report-link {
  color: var(--luxe-text-muted) !important;
  background: var(--luxe-bg-2) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em !important;
  padding: 4px 10px !important;
  transition: all var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .report-link:hover {
  color: var(--luxe-text) !important;
  background: var(--luxe-bg-3) !important;
  border-color: var(--luxe-line-strong) !important;
}
html.theme-luxe .technique-actions {
  border-top: 1px solid var(--luxe-line) !important;
  padding-top: 14px !important;
  margin-top: 14px !important;
}
html.theme-luxe .action-btn {
  background: transparent !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  color: var(--luxe-text-muted) !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.68rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  padding: 8px 14px !important;
  transition: all var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .action-btn:hover {
  background: var(--luxe-bg-2) !important;
  border-color: var(--luxe-line-strong) !important;
  color: var(--luxe-text) !important;
}
html.theme-luxe .action-btn.primary {
  background: var(--luxe-text) !important;
  border-color: var(--luxe-text) !important;
  color: var(--luxe-bg-0) !important;
}
html.theme-luxe .action-btn.primary:hover {
  background: #d4a574 !important;
  border-color: #d4a574 !important;
  color: var(--luxe-bg-0) !important;
}

/* ---- Empty / loading states ---- */
html.theme-luxe .empty-state {
  color: var(--luxe-text-faint) !important;
  padding: 96px 20px !important;
}
html.theme-luxe .empty-state i {
  color: var(--luxe-text-faint) !important;
  opacity: 0.4 !important;
}
html.theme-luxe .empty-state h3 {
  font-family: 'Big Shoulders Display', sans-serif !important;
  color: var(--luxe-text-muted) !important;
  letter-spacing: var(--luxe-track-display) !important;
  text-transform: uppercase !important;
}
html.theme-luxe .empty-state p {
  font-family: 'Inter', sans-serif !important;
  color: var(--luxe-text-faint) !important;
}
html.theme-luxe .loading-spinner {
  border: 2px solid var(--luxe-line) !important;
  border-top-color: #d4a574 !important;
  width: 40px !important;
  height: 40px !important;
}
html.theme-luxe .loading-container {
  color: var(--luxe-text-muted) !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* ---- Heatmap view ---- */
html.theme-luxe .heatmap-container {
  background: var(--luxe-bg-1) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  padding: 28px !important;
}
html.theme-luxe .heatmap-cell {
  border-radius: 2px !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.03em !important;
  transition: transform var(--luxe-dur-fast) var(--luxe-ease) !important;
}
/* Heatmap colors are SEMANTIC (frequency intensity), so we keep the scale
 * but drop the raw blue/amber/red into luxe-adjacent tones. heat-0 stays
 * a quiet bg-2; heat-1..3 read sequentially without screaming. */
html.theme-luxe .heatmap-cell.heat-0 {
  background: var(--luxe-bg-2) !important;
  color: var(--luxe-text-faint) !important;
}
html.theme-luxe .heatmap-cell.heat-1 {
  background: rgba(155, 184, 165, 0.18) !important;
  color: #9bb8a5 !important;
}
html.theme-luxe .heatmap-cell.heat-2 {
  background: rgba(217, 154, 74, 0.22) !important;
  color: #d99a4a !important;
}
html.theme-luxe .heatmap-cell.heat-3 {
  background: rgba(232, 81, 59, 0.28) !important;
  color: #e8513b !important;
}

/* =====================================================================
 * v3.9 — /apt-library
 * ---------------------------------------------------------------------
 * apt-library.html ships ~220 lines of inline <style> targeting a
 * file-explorer-style list (.apt-explorer / .apt-row / .apt-details).
 * Out of the box it renders with a #1A1A23 surface, blue technique
 * IDs, and an orange "Plan" CTA. Bring it onto luxe surfaces, replace
 * the blue accent with burnished amber, and preserve the severity
 * traffic-light (critical=red, high=amber, medium=neutral) since
 * those are signals, not decoration.
 * =====================================================================
 */

/* ---- Title row (uses .title + .tagline from styles.css) ---- */
/* Inline styles on the h1 here force display font-size larger than the
 * v3.1 hero title; that's intentional on this page (it's a list page,
 * not a marketing hero) but the inline color/family wins. The luxe
 * .title rule already covers warm bone + Big Shoulders, but the
 * inline rules here include an emoji prefix that we just leave. */
html.theme-luxe .apt-explorer + * .title,
html.theme-luxe main h1.title[style] {
  text-transform: uppercase !important;
  letter-spacing: var(--luxe-track-display) !important;
  color: var(--luxe-text) !important;
}

/* ---- Instructions panel (top tip box) ---- */
html.theme-luxe .instructions-panel {
  background: var(--luxe-bg-1) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  padding: 24px 28px !important;
  margin-bottom: 28px !important;
  position: relative !important;
}
html.theme-luxe .instructions-panel::before {
  /* Hairline accent on the left edge — same "single deliberate moment"
   * pattern we use on the lifecycle hero, but on the side instead of top. */
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 24px !important;
  bottom: 24px !important;
  width: 2px !important;
  background: #d4a574 !important;
  opacity: 0.7 !important;
}
html.theme-luxe .instructions-panel h3 {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: var(--luxe-track-display) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text) !important;
  margin: 0 0 12px !important;
}
html.theme-luxe .instructions-panel p {
  font-family: 'Inter', sans-serif !important;
  color: var(--luxe-text-muted) !important;
  font-size: 0.85rem !important;
  line-height: 1.7 !important;
}
html.theme-luxe .instructions-panel p strong {
  color: var(--luxe-text) !important;
  font-weight: 600 !important;
}

/* ---- Explorer container ---- */
html.theme-luxe .apt-explorer {
  background: var(--luxe-bg-1) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}

/* ---- Rows ---- */
html.theme-luxe .apt-row {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--luxe-line) !important;
  transition: background var(--luxe-dur-fast) var(--luxe-ease) !important;
  align-items: center !important;
}
html.theme-luxe .apt-row:last-child { border-bottom: none !important; }
html.theme-luxe .apt-row:hover {
  background: var(--luxe-bg-2) !important;
}
html.theme-luxe .apt-row-header {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-faint) !important;
  background: var(--luxe-bg-2) !important;
  border-bottom: 1px solid var(--luxe-line-strong) !important;
  padding: 14px 20px !important;
}
html.theme-luxe .apt-row-header:hover { background: var(--luxe-bg-2) !important; }

html.theme-luxe .apt-name {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--luxe-text) !important;
}
html.theme-luxe .apt-name i {
  color: var(--luxe-text-faint) !important;
  font-size: 0.75rem !important;
}
html.theme-luxe .apt-country,
html.theme-luxe .apt-motivation {
  color: var(--luxe-text-muted) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
}
html.theme-luxe .apt-techniques {
  color: #d4a574 !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  font-weight: 500 !important;
}

/* ---- Severity chips (semantic — preserve traffic light) ---- */
html.theme-luxe .apt-severity {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.62rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  border-radius: 2px !important;
  padding: 5px 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
}
html.theme-luxe .severity-critical {
  background: rgba(232, 81, 59, 0.12) !important;
  color: #e8513b !important;
  border-color: rgba(232, 81, 59, 0.35) !important;
}
html.theme-luxe .severity-high {
  background: rgba(217, 154, 74, 0.12) !important;
  color: #d99a4a !important;
  border-color: rgba(217, 154, 74, 0.35) !important;
}
html.theme-luxe .severity-medium {
  background: rgba(140, 138, 133, 0.12) !important;
  color: var(--luxe-text-muted) !important;
  border-color: var(--luxe-line-strong) !important;
}

/* ---- Action buttons ---- */
html.theme-luxe .apt-actions .btn {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.66rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  border-radius: 2px !important;
  padding: 7px 14px !important;
  transition: all var(--luxe-dur-fast) var(--luxe-ease) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
html.theme-luxe .apt-actions .btn-primary {
  background: var(--luxe-text) !important;
  color: var(--luxe-bg-0) !important;
  border: 1px solid var(--luxe-text) !important;
}
html.theme-luxe .apt-actions .btn-primary:hover {
  background: #d4a574 !important;
  border-color: #d4a574 !important;
  color: var(--luxe-bg-0) !important;
  transform: none !important;
}
html.theme-luxe .apt-actions .btn-secondary {
  background: transparent !important;
  color: var(--luxe-text-muted) !important;
  border: 1px solid var(--luxe-line) !important;
}
html.theme-luxe .apt-actions .btn-secondary:hover {
  background: var(--luxe-bg-2) !important;
  color: var(--luxe-text) !important;
  border-color: var(--luxe-line-strong) !important;
}

/* ---- Expanded details panel ---- */
html.theme-luxe .apt-details {
  background: var(--luxe-bg-0) !important;
  border-top: 1px solid var(--luxe-line-strong) !important;
  padding: 28px !important;
}
html.theme-luxe .apt-details-grid { gap: 28px !important; margin-bottom: 0 !important; }
html.theme-luxe .apt-details-section h4 {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-faint) !important;
  margin: 0 0 14px !important;
}
html.theme-luxe .apt-details-section p,
html.theme-luxe .apt-details-section div {
  font-family: 'Inter', sans-serif !important;
  color: var(--luxe-text-muted) !important;
  line-height: 1.7 !important;
  font-size: 0.88rem !important;
}

/* ---- Inner badges (techniques, targets, malware) ---- */
html.theme-luxe .technique-badge {
  background: rgba(212, 165, 116, 0.10) !important;
  color: #d4a574 !important;
  border: 1px solid rgba(212, 165, 116, 0.30) !important;
  border-radius: 2px !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.03em !important;
  padding: 4px 10px !important;
  font-weight: 500 !important;
}
html.theme-luxe .target-badge {
  background: rgba(138, 159, 184, 0.10) !important;
  color: #8a9fb8 !important;
  border: 1px solid rgba(138, 159, 184, 0.25) !important;
  border-radius: 2px !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.03em !important;
  padding: 4px 10px !important;
}
html.theme-luxe .malware-badge {
  background: rgba(232, 81, 59, 0.10) !important;
  color: #e8513b !important;
  border: 1px solid rgba(232, 81, 59, 0.25) !important;
  border-radius: 2px !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.03em !important;
  padding: 4px 10px !important;
}

/* =====================================================================
 * v3.10 — /purple-team
 * ---------------------------------------------------------------------
 * purple-team.html ships ~10 inline CSS rules and renders most of the
 * page (KPI tiles, status badges, modal, phase cards) via JS template
 * literals with inline styles. The CSS overrides below cover the
 * static selectors; JS-rendered inline styles are luxe-ified
 * separately by editing the render functions in the page.
 *
 * Semantic colors preserved: .status-detected (green = success),
 * .status-missed (red = failure), .status-executed (amber = in-flight).
 * Decorative violet/blue washes flattened to luxe surfaces.
 * =====================================================================
 */

/* ---- Exercise summary cards ---- */
html.theme-luxe .exercise-card {
  background: var(--luxe-bg-1) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  padding: 28px !important;
  margin-bottom: 20px !important;
  transition: border-color var(--luxe-dur-fast) var(--luxe-ease),
              transform var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .exercise-card:hover {
  border-color: var(--luxe-line-strong) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

/* ---- Technique rows inside exercise cards ---- */
html.theme-luxe .technique-row {
  background: var(--luxe-bg-2) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  padding: 14px 16px !important;
  margin-bottom: 6px !important;
  gap: 18px !important;
}

/* ---- Status badges (semantic traffic light) ---- */
html.theme-luxe .status-badge {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.62rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  border-radius: 2px !important;
  padding: 5px 10px !important;
  border-width: 1px !important;
  border-style: solid !important;
}
html.theme-luxe .status-pending {
  background: var(--luxe-bg-2) !important;
  color: var(--luxe-text-muted) !important;
  border-color: var(--luxe-line-strong) !important;
}
html.theme-luxe .status-executed {
  background: rgba(217, 154, 74, 0.12) !important;
  color: #d99a4a !important;
  border-color: rgba(217, 154, 74, 0.35) !important;
}
html.theme-luxe .status-detected {
  background: rgba(155, 184, 165, 0.15) !important;
  color: #9bb8a5 !important;
  border-color: rgba(155, 184, 165, 0.40) !important;
}
html.theme-luxe .status-missed {
  background: rgba(232, 81, 59, 0.12) !important;
  color: #e8513b !important;
  border-color: rgba(232, 81, 59, 0.35) !important;
}

/* ---- Lifecycle modal (Create Exercise) ---- */
html.theme-luxe dialog#lifecycleModal {
  background: var(--luxe-bg-1) !important;
  color: var(--luxe-text) !important;
  border: 1px solid var(--luxe-line-strong) !important;
  border-radius: 2px !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6) !important;
}
html.theme-luxe dialog#lifecycleModal::backdrop {
  background: rgba(6, 6, 10, 0.78) !important;
  backdrop-filter: blur(4px) !important;
}
html.theme-luxe dialog#lifecycleModal h2 {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: var(--luxe-track-display) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text) !important;
  font-size: 1.6rem !important;
}
html.theme-luxe dialog#lifecycleModal label {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-faint) !important;
}
html.theme-luxe dialog#lifecycleModal input[type="text"]#exerciseTitleInput {
  background: var(--luxe-bg-0) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  color: var(--luxe-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  padding: 12px 16px !important;
  transition: border-color var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe dialog#lifecycleModal input[type="text"]#exerciseTitleInput:focus {
  outline: none !important;
  border-color: #d4a574 !important;
}

/* ---- Phase cards inside modal ---- */
html.theme-luxe .phase-card {
  background: var(--luxe-bg-2) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  padding: 18px 20px !important;
  transition: all var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .phase-card:hover {
  background: var(--luxe-bg-3) !important;
  border-color: var(--luxe-line-strong) !important;
}
html.theme-luxe .phase-card h3 {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: var(--luxe-track-display) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text) !important;
}

/* =====================================================================
 * v3.11 — /finding-libraries
 * ---------------------------------------------------------------------
 * finding-libraries.html ships a ~370-line inline <style> block built
 * around classic blue (#3b82f6, #60a5fa), violet (#8b5cf6, #c084fc),
 * tailwind amber (#f59e0b), and a #1A1A23 surface for cards. Bring
 * everything onto luxe tones — burnished amber for brand accent,
 * desaturated plum/sage for categorical badges, luxe surfaces for
 * cards/modals/inputs. Inline button styles ("background: #f59e0b;
 * color: #000;") are removed at the source in finding-libraries.html
 * so the .btn rule and rainbow-halo escape hatch can take over.
 * =====================================================================
 */

/* ---- Title row ---- */
html.theme-luxe .library-title {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  font-weight: 600 !important;
  letter-spacing: var(--luxe-track-display) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text) !important;
}
html.theme-luxe .library-subtitle {
  font-family: 'Inter', sans-serif !important;
  color: var(--luxe-text-muted) !important;
  font-size: 0.88rem !important;
  margin-top: 8px !important;
}

/* ---- Stats bar ---- */
html.theme-luxe .stats-bar {
  background: var(--luxe-bg-1) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  padding: 24px 28px !important;
  gap: 48px !important;
  margin-bottom: 28px !important;
}
html.theme-luxe .stat-value {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  letter-spacing: var(--luxe-track-display) !important;
  color: #d4a574 !important;
}
html.theme-luxe .stat-label {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.62rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-faint) !important;
}

/* ---- Filters bar ---- */
html.theme-luxe .filters-bar {
  background: var(--luxe-bg-1) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  padding: 20px 24px !important;
  margin-bottom: 24px !important;
  gap: 20px !important;
}
html.theme-luxe .filter-label {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-faint) !important;
}
html.theme-luxe .filter-input,
html.theme-luxe .filter-select {
  background: var(--luxe-bg-0) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  color: var(--luxe-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  padding: 10px 14px !important;
  transition: border-color var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .filter-input:focus,
html.theme-luxe .filter-select:focus {
  outline: none !important;
  border-color: #d4a574 !important;
  box-shadow: none !important;
}
html.theme-luxe .filter-input::placeholder {
  color: var(--luxe-text-faint) !important;
}
html.theme-luxe .filter-select option {
  background: var(--luxe-bg-elevated) !important;
  color: var(--luxe-text) !important;
}

/* ---- Library cards ---- */
html.theme-luxe .library-card {
  background: var(--luxe-bg-1) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  padding: 24px !important;
  transition: border-color var(--luxe-dur-fast) var(--luxe-ease),
              transform var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .library-card:hover {
  border-color: var(--luxe-line-strong) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}
html.theme-luxe .library-card-title {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  letter-spacing: var(--luxe-track-display) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text) !important;
  margin: 0 0 6px !important;
}
html.theme-luxe .library-card-technique {
  font-family: 'Roboto Mono', monospace !important;
  color: #d4a574 !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 12px !important;
}
html.theme-luxe .library-card-description {
  font-family: 'Inter', sans-serif !important;
  color: var(--luxe-text-muted) !important;
  font-size: 0.88rem !important;
  line-height: 1.7 !important;
  margin-bottom: 14px !important;
}
html.theme-luxe .library-card-meta {
  border-top: 1px solid var(--luxe-line) !important;
  padding-top: 14px !important;
  margin-top: 14px !important;
  gap: 10px !important;
}

/* Tag (orange chip) → luxe burnished amber */
html.theme-luxe .library-tag {
  background: rgba(212, 165, 116, 0.10) !important;
  color: #d4a574 !important;
  border: 1px solid rgba(212, 165, 116, 0.25) !important;
  border-radius: 2px !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  padding: 3px 9px !important;
}

/* Category (violet chip) → luxe muted plum (categorical, not severity) */
html.theme-luxe .library-category {
  background: rgba(184, 157, 184, 0.10) !important;
  color: #b89db8 !important;
  border: 1px solid rgba(184, 157, 184, 0.25) !important;
  border-radius: 2px !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  padding: 3px 9px !important;
  text-transform: uppercase !important;
}

html.theme-luxe .library-usage {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em !important;
  color: var(--luxe-text-faint) !important;
}

/* Card actions row + icon buttons */
html.theme-luxe .library-card-actions {
  margin-top: 14px !important;
  gap: 6px !important;
}
html.theme-luxe .btn-icon {
  background: transparent !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  color: var(--luxe-text-muted) !important;
  font-size: 0.78rem !important;
  padding: 6px 10px !important;
  transition: all var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .btn-icon:hover {
  background: var(--luxe-bg-2) !important;
  border-color: var(--luxe-line-strong) !important;
  color: var(--luxe-text) !important;
}

/* ---- Modal (Create / Edit / View) ---- */
html.theme-luxe .modal-overlay {
  background: rgba(6, 6, 10, 0.78) !important;
  backdrop-filter: blur(4px) !important;
}
html.theme-luxe .modal-content {
  background: var(--luxe-bg-1) !important;
  border: 1px solid var(--luxe-line-strong) !important;
  border-radius: 2px !important;
  padding: 32px 36px !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6) !important;
}
html.theme-luxe .modal-header {
  margin-bottom: 28px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid var(--luxe-line) !important;
}
html.theme-luxe .modal-title {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  letter-spacing: var(--luxe-track-display) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text) !important;
}

/* ---- Form fields inside modal ---- */
html.theme-luxe .form-label {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-faint) !important;
  margin-bottom: 10px !important;
}
html.theme-luxe .form-input,
html.theme-luxe .form-textarea,
html.theme-luxe .form-select {
  background: var(--luxe-bg-0) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  color: var(--luxe-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.92rem !important;
  padding: 12px 16px !important;
  transition: border-color var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .form-input:focus,
html.theme-luxe .form-textarea:focus,
html.theme-luxe .form-select:focus {
  outline: none !important;
  border-color: #d4a574 !important;
  box-shadow: none !important;
}
html.theme-luxe .form-textarea {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.86rem !important;
  line-height: 1.7 !important;
}
html.theme-luxe .form-input::placeholder,
html.theme-luxe .form-textarea::placeholder {
  color: var(--luxe-text-faint) !important;
}

/* ---- Tag input (chip-style entry inside the form) ---- */
html.theme-luxe .tag-input-container {
  background: var(--luxe-bg-0) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  padding: 12px !important;
  min-height: 56px !important;
  transition: border-color var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .tag-input-container:focus-within {
  border-color: #d4a574 !important;
}
html.theme-luxe .tag-item {
  background: rgba(212, 165, 116, 0.12) !important;
  color: #d4a574 !important;
  border: 1px solid rgba(212, 165, 116, 0.30) !important;
  border-radius: 2px !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em !important;
  padding: 5px 10px !important;
}
html.theme-luxe .tag-remove {
  color: #e8513b !important;
  opacity: 0.7 !important;
  transition: opacity var(--luxe-dur-fast) var(--luxe-ease) !important;
}
html.theme-luxe .tag-remove:hover { opacity: 1 !important; }
html.theme-luxe .tag-input {
  background: transparent !important;
  color: var(--luxe-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
}
html.theme-luxe .tag-input::placeholder { color: var(--luxe-text-faint) !important; }

/* ---- Empty state ---- */
html.theme-luxe .empty-state-icon {
  font-size: 3rem !important;
  opacity: 0.3 !important;
  margin-bottom: 20px !important;
  filter: grayscale(0.5) !important;
}

/* ---- Loading state inside grid ---- */
html.theme-luxe .library-grid .loading {
  background: var(--luxe-bg-1) !important;
  border: 1px solid var(--luxe-line) !important;
  border-radius: 2px !important;
  padding: 60px 20px !important;
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--luxe-text-muted) !important;
  grid-column: 1 / -1 !important;
}