/* =====================================================================
 * 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.
   *
   * Contrast budget (WCAG AA requires 4.5:1 for normal text, 3:1 for
   * large/bold text) against --luxe-bg-0 (#06060a) / --luxe-bg-1
   * (#0a0a10):
   *   --luxe-text        #f4f1ea  → ~17:1   (AAA)
   *   --luxe-text-muted  #8c8a85  → ~5.8:1  (AA normal)
   *   --luxe-text-faint  #807c73  → ~4.7:1  (AA normal)  [v3.13]
   *
   * v3.13 2026-04: bumped --luxe-text-faint from #4a4844 (ratio 2.16,
   * failing WCAG AA) to #807c73. The old shade was applied to dozens
   * of user-facing labels (.hub-stat-label, .hub-tile-eyebrow,
   * .kpi-label, .kpi-trend, .chart-subtitle, .dash-page-tagline),
   * which axe-core flagged as "serious" contrast violations on
   * /libraries, /analytics, /campaigns, /trends, /ciso-dashboard and
   * /insights. The new shade keeps a clear visual hierarchy below
   * --luxe-text-muted while still reading legibly on near-black. */
  --luxe-text:        #f4f1ea;   /* primary, warm bone */
  --luxe-text-muted:  #8c8a85;   /* secondary */
  --luxe-text-faint:  #807c73;   /* tertiary, captions — WCAG AA */

  /* 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;

  /* Burnished amber — the canonical "primary CTA" surface color.
   * Sits between sev-high (#d99a4a) and a warmer brass; readable
   * against #06060a button text. Used by `.btn-cta` / `.btn-accent`
   * filled buttons. Keep this as the only branded accent surface
   * on dashboards so primary actions are instantly legible
   * page-to-page. */
  --luxe-accent-warm:  #c8a96a;
  --luxe-accent-warm-strong: #d4b67a;

  /* 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;
  /* v3.12 — flat 2.2rem instead of clamp(2.4rem, 4.5vw, 3.6rem). The
   * fluid clamp made /trends, /reports, /insights, /ciso-dashboard,
   * /novel-analytics, /enrichment-sources read 3+rem on desktop, while
   * /technique-explorer (1.8rem custom), /upload (5.5rem .title clamp),
   * and /apt-library (3rem inline) all rendered at completely different
   * scales. Locking to 2.2rem flat unifies every internal page header
   * to the same editorial weight. Mobile shrink lives below. */
  font-size: 2.2rem;
  line-height: var(--luxe-leading-tight);
  letter-spacing: var(--luxe-track-display);
  color: var(--luxe-text);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  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;
}

@media (max-width: 768px) {
  html.theme-luxe .dash-page-title { font-size: 1.65rem; }
}

/* ------------------------------------------------------------------
 * Hub component primitives — canonical desktop rules.
 *
 * These classes (.hub-grid / .hub-tile / .hub-tile-icon / -title /
 * -desc / -cta / -eyebrow / .hub-stats / .hub-stat / .hub-stat-label /
 * .hub-stat-value) were copy-pasted nearly identically across
 * libraries.html and analytics.html, and partially across
 * campaigns.html (stats only) and settings.html (with slightly
 * tighter sizing). Moving the shared variant here is a pure dedup —
 * pages inherit it from the cascade so new hub pages (or renames)
 * stay visually consistent for free.
 *
 * Scope: html.theme-luxe so we beat any stray inline declarations on
 * source order, and so the classic (non-luxe) theme keeps the same
 * "transparent" behavior it had before.
 *
 * settings.html keeps its own tighter .hub-tile variant inline
 * (padding 28px is the same; icon is 36px vs 40px, title is 1.25rem
 * vs 1.4rem). Settings' overrides use matching selectors so they
 * win on source order inside the <style> block.
 * ------------------------------------------------------------------ */
html.theme-luxe .hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 32px;
}

html.theme-luxe .hub-tile {
  display: flex;
  flex-direction: column;
  background: var(--luxe-bg-1);
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  padding: 28px;
  text-decoration: none;
  color: inherit;
  min-height: 200px;
  transition: border-color 220ms cubic-bezier(0.22,0.61,0.36,1),
              background 220ms cubic-bezier(0.22,0.61,0.36,1),
              transform 220ms cubic-bezier(0.22,0.61,0.36,1);
}
html.theme-luxe .hub-tile:hover {
  border-color: var(--luxe-line-strong);
  background: var(--luxe-bg-2);
  transform: translateY(-2px);
}

html.theme-luxe .hub-tile-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--luxe-bg-0);
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  color: var(--luxe-accent-warm, #c8a96a);
  font-size: 1.1rem;
  margin-bottom: 20px;
}

html.theme-luxe .hub-tile-eyebrow {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--luxe-text-faint);
  margin: 0 0 8px;
}

html.theme-luxe .hub-tile-title {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--luxe-text);
  margin: 0 0 12px;
}

html.theme-luxe .hub-tile-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--luxe-text-muted);
  margin: 0 0 20px;
  flex: 1;
}

html.theme-luxe .hub-tile-cta {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--luxe-accent-warm, #c8a96a);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
html.theme-luxe .hub-tile:hover .hub-tile-cta {
  gap: 12px;
}

/* Stat strip — the small KPI row above the tile grid. Used by
 * libraries (Techniques / Findings / APT Groups) and campaigns
 * (Active / Total / Correlations). */
html.theme-luxe .hub-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 24px;
}
html.theme-luxe .hub-stat {
  background: var(--luxe-bg-0);
  border: 1px solid var(--luxe-line);
  border-radius: 2px;
  padding: 18px 20px;
}
html.theme-luxe .hub-stat-label {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--luxe-text-faint);
  margin: 0 0 8px;
}
html.theme-luxe .hub-stat-value {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--luxe-text);
}
html.theme-luxe .hub-stat-value.is-loading { color: var(--luxe-text-faint); }

/* ------------------------------------------------------------------
 * Mobile-phone polish for the header rhythm. The desktop layout puts
 * title + tagline on the left and dash-page-actions (filters, pills,
 * etc.) flush right. On a 360–480px viewport that side-by-side layout
 * either compresses the actions into illegibility or pushes them off-
 * screen. Stacking + left-aligning gives the title room and keeps the
 * actions tappable. Hub pages use html.theme-luxe so we get specificity
 * over their inline .hub-wrap rules without !important.
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
  html.theme-luxe .dash-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 24px;
    margin-bottom: 32px;
  }
  html.theme-luxe .dash-page-actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  /* Hub pages: tighten gutter + top spacing so phones don't waste a
     full screen of padding before the first tile. */
  html.theme-luxe .hub-wrap {
    padding: 32px 16px 56px !important;
  }

  /* ------------------------------------------------------------------
   * Hub-tile mobile pass.
   *
   * Each hub page (libraries, analytics, settings, campaigns) defines
   * .hub-tile / .hub-grid / .hub-section / .hub-stats inline, scoped at
   * the desktop breakpoint. Their tile padding (28px), title size
   * (1.25–1.4rem), section margin (48px), and grid gap (16px) all add
   * up to a lot of dead vertical space at 360–480px viewports — the
   * "first tile is one full swipe down" problem. These overrides
   * tighten the rhythm without changing the desktop look at all.
   *
   * Specificity: scoped via html.theme-luxe so we beat the inline
   * .hub-tile rules without needing !important everywhere. The grid
   * gap and section margin DO use !important because their inline
   * declarations don't include the html.theme-luxe prefix and would
   * otherwise tie on specificity and lose to source order.
   * ------------------------------------------------------------------ */
  html.theme-luxe .hub-tile {
    padding: 20px;
    min-height: 0;
  }
  html.theme-luxe .hub-tile-icon {
    margin-bottom: 14px;
  }
  html.theme-luxe .hub-tile-title {
    font-size: 1.15rem;
    margin-bottom: 8px;
  }
  html.theme-luxe .hub-tile-desc {
    font-size: 0.85rem;
    margin-bottom: 14px;
  }
  html.theme-luxe .hub-tile-eyebrow {
    margin-bottom: 6px;
  }
  html.theme-luxe .hub-grid {
    gap: 12px !important;
    margin-top: 20px !important;
  }
  html.theme-luxe .hub-section {
    margin-top: 32px !important;
  }
  html.theme-luxe .hub-section-head {
    margin-bottom: 14px;
  }

  /* Hub stats — go 2-up at phone width instead of dropping to a single
     column (which makes the page feel loose and doubles its height). */
  html.theme-luxe .hub-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 18px !important;
  }
  html.theme-luxe .hub-stat {
    padding: 12px 14px;
  }
  html.theme-luxe .hub-stat-value {
    font-size: 1.4rem;
  }

  /* Instructions panel — desktop padding is 24px 28px; tighten so we
     keep more room for the inner copy on a 358px-wide container. */
  html.theme-luxe .instructions-panel {
    padding: 18px 18px !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;
  /* flex-wrap so 4 time-range buttons (30/90/180/365d) can reflow onto
   * a second row on narrow phones instead of pushing past the viewport.
   * Used on /trends and /ciso-dashboard. */
  flex-wrap: wrap;
  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;
  /* flex-wrap so narrow viewports (≤~430px) can reflow tab buttons onto
   * a second row instead of forcing horizontal scroll. Mirrors the
   * .tab-strip fix on the hub pages. Used by /trends, /ciso-dashboard,
   * and any other page that builds on the dash tab pattern. */
  flex-wrap: wrap;
  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;
  /* min-width: 0 prevents descendants (wide min-content tables, default
   * 300px canvases, long code blocks) from forcing the panel wider than
   * its grid/flex parent. */
  min-width: 0;
  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);
}
/* Tighter panel padding on phones — 28px on each side eats 56px of a
 * 390px viewport, leaving barely enough room for a chart canvas. */
@media (max-width: 640px) {
  html.theme-luxe .chart-panel,
  html.theme-luxe .panel {
    padding: 18px;
  }
}

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 / loading states.
 *
 * Single canonical block — covers the design-system layout (typography,
 * spacing, max-width) AND the production-tuned padding/colors that used
 * to live in a duplicate block in the technique-explorer override section.
 *
 * No `!important` here on purpose: the selector `html.theme-luxe .empty-state`
 * already beats any plain `.empty-state` page rule on specificity, and we
 * deliberately let pages opt-in to tighter padding via inline style (e.g.
 * apt-library.html uses `style="padding: 60px 20px"` for its initial spinner).
 * -------------------------------------------------------------------*/
html.theme-luxe .empty-state {
  text-align: center;
  padding: 96px 20px;
  /* Muted (not faint) so the message reads on elevated card surfaces
   * (e.g. empty rows inside .logs-table on #1a1a26) where faint falls
   * below WCAG AA. */
  color: var(--luxe-text-muted);
}
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-muted);
  letter-spacing: var(--luxe-track-display);
  text-transform: uppercase;
}
html.theme-luxe .empty-state p {
  margin: 0 auto;
  max-width: 380px;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  line-height: 1.65;
  /* Muted (not faint) to stay readable on elevated card surfaces
   * (#1a1a26) where faint fails WCAG AA. */
  color: var(--luxe-text-muted);
}
html.theme-luxe .loading-spinner {
  border: 2px solid var(--luxe-line);
  border-top-color: #d4a574;
  width: 40px;
  height: 40px;
}
html.theme-luxe .loading-container {
  color: var(--luxe-text-muted);
  font-family: 'Roboto Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------
 * 7. Buttons — universal luxe button system.
 *
 * Hierarchy (from least to most prominent):
 *   .btn / .btn-primary / .btn-ghost ........ tertiary / utility (ghost outline)
 *   .btn-cta / .btn-accent .................. primary CTA (filled amber)
 *   .rainbow-halo > .btn .................... focal hero CTA (white pill,
 *                                              animated rainbow ring)
 *   .btn-danger / .btn-delete ............... destructive (red)
 *
 * All variants share the same shape, font, and motion language so
 * the page-to-page cohesion holds even when individual pages
 * historically tried to roll their own inline-styled buttons.
 *
 * `!important` on visual properties is intentional — many legacy
 * pages still ship inline `style="background: #f59e0b; color: #000;"`
 * overrides that would otherwise break cohesion. The canonical class
 * always wins.
 * -------------------------------------------------------------------*/
html.theme-luxe .btn,
html.theme-luxe .btn-primary,
html.theme-luxe .btn-ghost,
html.theme-luxe .empty-state .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  margin-top: 20px;
  background: transparent !important;
  border: 1px solid var(--luxe-line-strong) !important;
  border-radius: 2px !important;
  color: var(--luxe-text) !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;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer;
  box-shadow: none !important;
  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) !important;
}
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 !important;
  background: var(--luxe-text) !important;
  border-color: var(--luxe-text) !important;
  transform: none !important;
}
html.theme-luxe .btn-ghost {
  border-color: var(--luxe-line) !important;
  color: var(--luxe-text-muted) !important;
}
html.theme-luxe .btn-ghost:hover {
  color: #06060a !important;
  background: var(--luxe-text) !important;
  border-color: var(--luxe-text) !important;
}

/* ---------------------------------------------------------------------
 * 7.0.1 Primary CTA — `.btn-cta` (new) and `.btn-accent` (legacy alias).
 *       Filled luxe burnished-amber pill. Use for the single most
 *       important action on a page (Save, Submit, Generate, Apply,
 *       Create, Run). Pages that already use `.btn-accent` get the
 *       upgrade automatically.
 * -------------------------------------------------------------------*/
html.theme-luxe .btn-cta,
html.theme-luxe .btn.btn-cta,
html.theme-luxe button.btn-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 22px !important;
  margin-top: 0;
  background: var(--luxe-accent-warm, #c8a96a) !important;
  border: 1px solid var(--luxe-accent-warm, #c8a96a) !important;
  border-radius: 2px !important;
  color: #06060a !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background var(--luxe-dur-base) var(--luxe-ease),
              border-color var(--luxe-dur-base) var(--luxe-ease),
              color var(--luxe-dur-base) var(--luxe-ease) !important;
}
html.theme-luxe .btn-cta:hover,
html.theme-luxe .btn.btn-cta:hover,
html.theme-luxe button.btn-cta:hover {
  background: var(--luxe-text) !important;
  border-color: var(--luxe-text) !important;
  color: #06060a !important;
  transform: none !important;
}

/* ---------------------------------------------------------------------
 * 7.0.2 Destructive — `.btn-danger` (new), aliases `.btn-delete`.
 *       Restrained luxe critical-red outline. Used for Delete, Revoke,
 *       Cancel-irreversible.
 * -------------------------------------------------------------------*/
html.theme-luxe .btn-danger,
html.theme-luxe .btn.btn-danger,
html.theme-luxe button.btn-danger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  margin-top: 0;
  background: transparent !important;
  border: 1px solid var(--luxe-sev-critical) !important;
  border-radius: 2px !important;
  color: var(--luxe-sev-critical) !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;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer;
  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 .btn-danger:hover,
html.theme-luxe .btn.btn-danger:hover,
html.theme-luxe button.btn-danger:hover {
  background: rgba(232, 81, 59, 0.08) !important;
  color: var(--luxe-sev-critical) !important;
  border-color: var(--luxe-sev-critical) !important;
  transform: none !important;
}

/* ---------------------------------------------------------------------
 * 7.0.3 Inline-style neutralizer.
 *       Many legacy pages use `<button class="btn" style="background:
 *       #f59e0b; color: #000; border: none; ...">` to imitate a
 *       primary CTA. The canonical .btn rule above already uses
 *       `!important` to win over inline styles, but a few exotic
 *       inline properties (border-radius, padding, font-size) need
 *       explicit overrides. This rule catches them and forces the
 *       canonical look. Pages that genuinely want the filled CTA
 *       should add the `.btn-cta` class instead of inline styles.
 * -------------------------------------------------------------------*/
html.theme-luxe .btn[style],
html.theme-luxe .btn-primary[style],
html.theme-luxe .btn-ghost[style] {
  border-radius: 2px !important;
  font-size: 0.7rem !important;
}
html.theme-luxe .btn-cta[style],
html.theme-luxe .btn-danger[style] {
  /* CTAs and danger keep their own rounded/sized treatment;
   * just neutralize stray inline border declarations. */
  font-size: 0.72rem !important;
}

/* ---------------------------------------------------------------------
 * 7.0.4 Global single-line guarantee.
 *       No button label should ever wrap onto two lines. Cards and
 *       grids occasionally squeeze buttons (e.g. the "Copy ID" /
 *       "View Details" actions on /technique-explorer cards) and
 *       multi-word labels like "VIEW DETAILS" or "COPY ID" used to
 *       break across two lines. Force every button-shaped control to
 *       stay on one line. This is the safety net for any button class
 *       that the individual rules above don't enumerate. (Buttons in
 *       cramped flex layouts like .technique-actions also get
 *       flex-shrink: 0 on their specific class — see .action-btn.)
 * -------------------------------------------------------------------*/
html.theme-luxe button,
html.theme-luxe a.btn,
html.theme-luxe .btn,
html.theme-luxe .btn-primary,
html.theme-luxe .btn-secondary,
html.theme-luxe .btn-ghost,
html.theme-luxe .btn-cta,
html.theme-luxe .btn-accent,
html.theme-luxe .btn-danger,
html.theme-luxe .btn-delete,
html.theme-luxe .btn-save,
html.theme-luxe .btn-test,
html.theme-luxe .btn-icon,
html.theme-luxe .btn-generate,
html.theme-luxe .action-btn,
html.theme-luxe .filter-btn,
html.theme-luxe .view-toggle-btn,
html.theme-luxe .chat-send-btn,
html.theme-luxe .subscribe-btn,
html.theme-luxe .submit-btn,
html.theme-luxe .ttf-header-btn,
html.theme-luxe .ttf-user-btn,
html.theme-luxe .ttf-theme-toggle-btn {
  white-space: nowrap !important;
}

/* ---------------------------------------------------------------------
 * 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;
  line-height: 40px !important;
  white-space: nowrap !important;
  /* Reset all margins (not just margin-top). The legacy
   * `.rainbow-ultratight > * { margin: -1px; }` rule sets all four
   * margins to -1px; if we only reset margin-top to 0, the button
   * gets pulled -1px on bottom/left/right and ends up visually
   * off-center inside the rainbow ring. Force margin: 0 on every
   * side so the inline-flex centering on the wrapper actually
   * lands the pill in the middle of the halo. */
  margin: 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;
  vertical-align: middle !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-generate — legacy class on /predictive-threat-modeling page,
 * with `.btn-techniques` / `.btn-apt` / `.btn-risk` color variants.
 * Map all of them to the canonical primary CTA so the page reads
 * the same as the rest of the app. */
html.theme-luxe .btn-generate,
html.theme-luxe .btn-generate.btn-techniques,
html.theme-luxe .btn-generate.btn-apt,
html.theme-luxe .btn-generate.btn-risk {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 22px !important;
  background: var(--luxe-accent-warm) !important;
  border: 1px solid var(--luxe-accent-warm) !important;
  border-radius: 2px !important;
  color: #06060a !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  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 .btn-generate:hover,
html.theme-luxe .btn-generate.btn-techniques:hover,
html.theme-luxe .btn-generate.btn-apt:hover,
html.theme-luxe .btn-generate.btn-risk:hover {
  background: var(--luxe-text) !important;
  border-color: var(--luxe-text) !important;
  color: #06060a !important;
  transform: none !important;
  box-shadow: none !important;
}

/* btn-accent — legacy alias for the canonical primary CTA.
 * Pages that already use `.btn-accent` (insights, plan, scheduled-reports,
 * custom-dashboards, engagements) inherit the filled luxe-amber pill
 * automatically and become visually consistent with new pages that use
 * `.btn-cta`. The base `.btn-cta` rule (section 7.0.1) handles the
 * actual styling; this alias just ensures `.btn-accent` reads the
 * same way for backward compatibility. */
html.theme-luxe .btn-accent,
html.theme-luxe button.btn-accent {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 22px !important;
  background: var(--luxe-accent-warm) !important;
  border: 1px solid var(--luxe-accent-warm) !important;
  color: #06060a !important;
  border-radius: 2px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background var(--luxe-dur-base) var(--luxe-ease),
              border-color var(--luxe-dur-base) var(--luxe-ease),
              color var(--luxe-dur-base) var(--luxe-ease) !important;
}
html.theme-luxe .btn-accent:hover,
html.theme-luxe button.btn-accent:hover {
  background: var(--luxe-text) !important;
  border-color: var(--luxe-text) !important;
  color: #06060a !important;
  transform: none !important;
}

/* ---------------------------------------------------------------------
 * 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;
  /* Muted (not faint) so headers read on raised table-header surfaces
   * (#12121b / rgba(0,0,0,0.3) over cards) where faint falls below
   * WCAG AA. */
  color: var(--luxe-text-muted);
  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;
  /* Use muted (not faint) so labels read on elevated card surfaces
   * (#1a1a26) where faint drops below WCAG AA. */
  color: var(--luxe-text-muted) !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;
  white-space: nowrap !important;
  flex-shrink: 0 !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 moved to canonical section 6 (search the file
 * for "Empty / loading states" — single source of truth lives there). */

/* ---- 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;
}

/* =====================================================================
 * v3.12 — Unified page header typography across ALL internal pages
 * ---------------------------------------------------------------------
 * Goal: every authenticated page (anything inside `.wrap.container`)
 * should render its H1 at the SAME visual weight regardless of which
 * legacy class it ships with. Audit found these page-title sizes
 * coexisting before normalization:
 *   /upload, /analytics, /engagements, /plan,
 *   /predictive-threat-modeling          → h1.title  → clamp(3rem,6vw,5.5rem)
 *   /apt-library, /purple-team           → h1.title  + inline 3rem
 *   /technique-explorer                  → .lifecycle-title → 1.8rem
 *   /finding-libraries                   → .library-title   → 2.5rem
 *   /nl-query                            → .chat-header h1  → 2.5rem
 *   /advanced-threat-intel               → .page-title      → 3rem
 *   /integrations                        → .integrations-title → 2.5rem
 *   /trends, /reports, /insights, etc.   → .dash-page-title → clamp(2.4,4.5vw,3.6rem)
 *
 * Lock everything to 2.2rem (matches the .dash-page-title rule above)
 * with the same Big Shoulders / uppercase / tracked treatment so the
 * nav between /upload → /technique-explorer → /trends → /apt-library
 * never jumps in scale.
 *
 * Scope is constrained to `.wrap.container ...` so the marketing /
 * unauthenticated `.title` (used on /index, /demo, /whitepaper, etc.)
 * keeps its hero clamp(3rem, 6vw, 5.5rem) and is NOT affected.
 * -------------------------------------------------------------------*/
html.theme-luxe .wrap.container h1.title,
html.theme-luxe .wrap.container .lifecycle-title,
html.theme-luxe .wrap.container .library-title,
html.theme-luxe .wrap.container .integrations-title,
html.theme-luxe .wrap.container .page-title,
html.theme-luxe .wrap.container .chat-header h1,
html.theme-luxe .integrations-container h1.integrations-title,
html.theme-luxe .container > .page-header > .page-title {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-weight: 600 !important;
  font-size: 2.2rem !important;
  line-height: var(--luxe-leading-tight) !important;
  letter-spacing: var(--luxe-track-display) !important;
  text-transform: uppercase !important;
  color: var(--luxe-text) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

@media (max-width: 768px) {
  html.theme-luxe .wrap.container h1.title,
  html.theme-luxe .wrap.container .lifecycle-title,
  html.theme-luxe .wrap.container .library-title,
  html.theme-luxe .wrap.container .integrations-title,
  html.theme-luxe .wrap.container .page-title,
  html.theme-luxe .wrap.container .chat-header h1,
  html.theme-luxe .integrations-container h1.integrations-title,
  html.theme-luxe .container > .page-header > .page-title {
    font-size: 1.65rem !important;
  }
}

/* Subtitle / tagline normalization. Matches .dash-page-tagline. */
html.theme-luxe .wrap.container .tagline,
html.theme-luxe .wrap.container .lifecycle-subtitle,
html.theme-luxe .wrap.container .library-subtitle,
html.theme-luxe .wrap.container .integrations-subtitle,
html.theme-luxe .wrap.container .page-subtitle,
html.theme-luxe .wrap.container .chat-header p {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 0.74rem !important;
  letter-spacing: var(--luxe-track-eyebrow) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--luxe-text-faint) !important;
  margin: 12px 0 0 !important;
}

/* Some pages wrap the H1 + subtitle in a centered .upload-header /
 * .header-row block that adds its own border and padding. Keep their
 * border but harmonize with the .dash-page-header rhythm so spacing
 * doesn't feel different page-to-page. */
html.theme-luxe .wrap.container .upload-header,
html.theme-luxe .wrap.container .header-row {
  border-bottom: 1px solid var(--luxe-line) !important;
  padding-bottom: 28px !important;
  margin-bottom: 40px !important;
  padding-top: 4px !important;
}

/* /upload is the landing page of the authenticated app and reads as a
 * "hero" rather than a dashboard, so keep its header centered (the
 * original treatment). The H1 itself is `display: flex` from the v3.12
 * normalization above, which left-anchors the icon+text inside the
 * centered block — switch the H1 to `display: inline-flex` and center
 * the parent so the type sits in the middle of the page. */
html.theme-luxe .wrap.container .upload-header {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
html.theme-luxe .wrap.container .upload-header h1.title {
  display: inline-flex !important;
  justify-content: center !important;
  text-align: center !important;
}
html.theme-luxe .wrap.container .upload-header .tagline {
  text-align: center !important;
}

/* =====================================================================
 * v3.13 — Width / overflow normalization for /technique-explorer,
 * /novel-analytics, /enrichment-sources
 * ---------------------------------------------------------------------
 * Three pages ship an inner wrapper with `max-width: 1600px`, which
 * now exceeds the `html.theme-luxe .wrap.container { max-width: 1500px }`
 * cap. The inner wrapper alone wouldn't widen the layout (it shrinks
 * to parent), but on /technique-explorer the techniques-grid is
 * `repeat(auto-fill, minmax(380px, 1fr))` which can't shrink below
 * 380px per card and forces horizontal scroll on viewports < ~1280px.
 * Cap the inner wrappers at 1500px and shrink the grid minimum so it
 * actually responds. The other two pages benefit from the same cap. */
html.theme-luxe .wrap.container > div[style*="max-width: 1600px"],
html.theme-luxe .wrap.container .novel-wrap,
html.theme-luxe .wrap.container .es-wrap {
  max-width: 100% !important;
}

html.theme-luxe .techniques-grid {
  /* Was minmax(380px, 1fr) — too rigid below ~1300px viewport, caused
   * the rightmost card to clip on /technique-explorer. */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
}

/* ============================================================================
 * Reduced motion — global safety net.
 *
 * The luxe theme ships dozens of transitions and a handful of entrance
 * animations (trends-wrap rise, rainbow halos, user-menu dropdown, mobile
 * drawer slide, Chart.js default tweens, etc.). Rather than policing each
 * one, we neuter animation + transition durations for users who explicitly
 * request reduced motion. This is the WCAG 2.3.3 "Animation from Interactions"
 * pattern and matches the approach recommended by the CSS Working Group and
 * a11y-project.
 *
 * What we preserve:
 *   - Color/opacity *end states* (transition still runs — just at 0.001ms).
 *   - Hover/focus styling (those are pseudo-class swaps, not transitions).
 *   - scroll-behavior: auto (so in-page anchor jumps don't smooth-scroll).
 *
 * What we disable:
 *   - Every CSS animation and transition duration, across every selector.
 *   - Infinite-loop animations (iteration-count: 1 stops them after one
 *     pass rather than leaving them spinning forever at near-zero duration).
 *
 * Individual component-scoped reduced-motion overrides (mobile drawer,
 * trends-wrap) remain for clarity but are now redundant with this block —
 * kept on purpose so future additions have a clear pattern to follow.
 * ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}