/* =============================================================================
   Logic8 Design System v2 — 2026 refresh
   Loaded AFTER app.css + modern.css. Introduces a new visual vocabulary:
   Hero panels, Bento grid, KPI v2 tiles with sparklines, Segmented controls,
   Filter chips, Skeleton loaders, Pace rings, Inline edit, and refined
   page/section/empty-state primitives. Designed to be additive — new class
   prefixes don't collide with existing components.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   v2 TOKENS — refinements that elevate the existing palette
   -------------------------------------------------------------------------- */
:root {
  /* Restrained shadows — modern SaaS uses light, layered, neutral shadows */
  --v2-shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.30);
  --v2-shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -8px rgba(0,0,0,0.45);
  --v2-shadow-3: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 48px -16px rgba(0,0,0,0.55);
  --v2-shadow-hero: 0 1px 0 rgba(255,255,255,0.05) inset, 0 30px 80px -30px rgba(1,144,213,0.35);

  /* Glass surfaces */
  --v2-glass-bg: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
  --v2-glass-blur: saturate(180%) blur(20px);

  /* Hero gradient — diagonal brand-soft wash */
  --v2-hero-bg:
    radial-gradient(900px 320px at 8% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(700px 280px at 96% 110%, color-mix(in srgb, var(--accent-deep) 18%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 96%, transparent), var(--bg-elevated));

  /* Semantic delta colors */
  --v2-up-bg: color-mix(in srgb, var(--green) 14%, transparent);
  --v2-up-fg: var(--green);
  --v2-down-bg: color-mix(in srgb, var(--red) 14%, transparent);
  --v2-down-fg: var(--red);
  --v2-flat-bg: color-mix(in srgb, var(--text-muted) 12%, transparent);
  --v2-flat-fg: var(--text-secondary);

  /* Density */
  --v2-tile-pad: 22px 24px;
  --v2-tile-pad-lg: 26px 28px;
  --v2-bento-gap: 16px;

  /* Hairline divider */
  --v2-hairline: color-mix(in srgb, var(--border) 70%, transparent);
}

[data-theme='light'] {
  --v2-shadow-1: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(15,23,42,0.05);
  --v2-shadow-2: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px -8px rgba(15,23,42,0.12);
  --v2-shadow-3: 0 1px 0 rgba(255,255,255,0.6) inset, 0 20px 48px -16px rgba(15,23,42,0.16);
  --v2-shadow-hero: 0 1px 0 rgba(255,255,255,0.6) inset, 0 30px 80px -30px rgba(1,144,213,0.25);
  --v2-glass-bg: color-mix(in srgb, #ffffff 80%, transparent);
}

/* -----------------------------------------------------------------------------
   HERO PANEL — used at the top of important pages (Dashboard, Reports, etc).
   Frosted, full-bleed within the content column, with greeting + KPI strip.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--v2-hero-bg);
  box-shadow: var(--v2-shadow-hero);
  padding: 28px 30px 24px;
  margin-bottom: 22px;
  isolation: isolate;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 60%, transparent) 22%,
    color-mix(in srgb, var(--accent-strong) 70%, transparent) 50%,
    color-mix(in srgb, var(--accent) 60%, transparent) 78%,
    transparent 100%);
  opacity: 0.55;
  pointer-events: none;
}
.hero-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.hero-lede h1 {
  font-size: clamp(28px, 2.4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.030em;
  line-height: 1.05;
  margin: 0 0 6px;
}
.hero-lede h1 .accent {
  background: var(--brand-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-lede p {
  font-size: 14px;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* KPI strip inside the hero — divided cells, no card chrome */
.hero-kpis {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--v2-hairline);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.hero-kpi {
  padding: 4px 22px;
  border-left: 1px solid var(--v2-hairline);
  min-width: 0;
}
.hero-kpi:first-child { padding-left: 0; border-left: 0; }
.hero-kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-kpi-label svg { width: 12px; height: 12px; opacity: 0.7; }
.hero-kpi-value {
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  font-feature-settings: 'tnum';
  line-height: 1.1;
  margin-bottom: 4px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.hero-kpi-sub {
  font-size: 12.5px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
@media (max-width: 900px) {
  .hero-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-kpi { padding: 4px 16px; }
  .hero-kpi:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hero-kpi:nth-child(n+3) { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--v2-hairline); }
}

/* Delta chip — used inline beside KPIs */
.delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 7px 2px 5px;
  border-radius: 999px;
  line-height: 1.4;
  font-feature-settings: 'tnum';
}
.delta svg { width: 11px; height: 11px; }
.delta.up { background: var(--v2-up-bg); color: var(--v2-up-fg); }
.delta.down { background: var(--v2-down-bg); color: var(--v2-down-fg); }
.delta.flat { background: var(--v2-flat-bg); color: var(--v2-flat-fg); }

/* -----------------------------------------------------------------------------
   BENTO GRID — 12-column system for varied tile sizes
   -------------------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--v2-bento-gap);
  margin-bottom: var(--v2-bento-gap);
}
.tile-12 { grid-column: span 12; }
.tile-8  { grid-column: span 8; }
.tile-7  { grid-column: span 7; }
.tile-6  { grid-column: span 6; }
.tile-5  { grid-column: span 5; }
.tile-4  { grid-column: span 4; }
.tile-3  { grid-column: span 3; }
.tile-row-2 { grid-row: span 2; }
@media (max-width: 1180px) {
  .tile-8, .tile-7 { grid-column: span 12; }
  .tile-6 { grid-column: span 12; }
  .tile-5 { grid-column: span 6; }
  .tile-4 { grid-column: span 6; }
  .tile-3 { grid-column: span 6; }
}
@media (max-width: 720px) {
  .tile-6, .tile-5, .tile-4, .tile-3 { grid-column: span 12; }
}

/* Tile — refined card primitive for use inside .bento */
.tile {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: var(--v2-tile-pad);
  box-shadow: var(--v2-shadow-1);
  display: flex;
  flex-direction: column;
  min-width: 0;
  isolation: isolate;
  transition: border-color 200ms cubic-bezier(0.16,1,0.3,1), box-shadow 200ms cubic-bezier(0.16,1,0.3,1);
}
.tile.tile-lg { padding: var(--v2-tile-pad-lg); }
.tile.tile-flush { padding: 0; }
.tile.tile-glass {
  background: var(--v2-glass-bg);
  backdrop-filter: var(--v2-glass-blur);
  -webkit-backdrop-filter: var(--v2-glass-blur);
}
.tile.tile-hover:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-strong));
  box-shadow: var(--v2-shadow-2);
}

.tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  min-height: 22px;
}
.tile-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tile-eyebrow svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
  opacity: 0.9;
}
.tile-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.tile-title svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}
.tile-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 7px;
  transition: background 130ms, color 130ms;
}
.tile-action:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.tile-action svg { width: 14px; height: 14px; }

.tile-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* -----------------------------------------------------------------------------
   KPI TILE v2 — eyebrow, big tabular value, sparkline, delta + sub
   -------------------------------------------------------------------------- */
.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.kpi-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kpi-eyebrow svg { width: 13px; height: 13px; opacity: 0.85; }
.kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.kpi-value {
  font-size: clamp(28px, 2.2vw, 34px);
  font-weight: 700;
  letter-spacing: -0.030em;
  color: var(--text-primary);
  font-feature-settings: 'tnum';
  line-height: 1.05;
}
.kpi-value-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  font-feature-settings: 'tnum';
}
.kpi-sub {
  font-size: 12.5px;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kpi-spark {
  height: 36px;
  margin-top: 8px;
}
.kpi-spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.kpi-spark .spark-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kpi-spark .spark-fill {
  fill: url(#sparkGradient);
  opacity: 0.55;
}

/* -----------------------------------------------------------------------------
   PACE RING — radial gauge for progress / health
   -------------------------------------------------------------------------- */
.pace-ring {
  --size: 132px;
  --stroke: 12px;
  --pct: 70;
  width: var(--size);
  height: var(--size);
  position: relative;
  flex-shrink: 0;
}
.pace-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pace-ring .pace-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: var(--stroke);
}
.pace-ring .pace-fg {
  fill: none;
  stroke: url(#paceGradient);
  stroke-width: var(--stroke);
  stroke-linecap: round;
  stroke-dasharray: calc(var(--pct) * 3.14159 * (var(--size) - var(--stroke)) / 100), 10000;
  transition: stroke-dasharray 600ms cubic-bezier(0.16,1,0.3,1);
}
.pace-ring.is-amber .pace-fg { stroke: var(--gold); }
.pace-ring.is-red   .pace-fg { stroke: var(--red); }
.pace-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.pace-ring-pct {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-feature-settings: 'tnum';
  color: var(--text-primary);
  line-height: 1;
}
.pace-ring-sub {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  margin-top: 6px;
  font-weight: 600;
}

/* -----------------------------------------------------------------------------
   SEGMENTED CONTROL — replacement for "row of toggled btn-primary" pattern
   -------------------------------------------------------------------------- */
.seg {
  display: inline-flex;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.seg-btn {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 130ms, color 130ms, box-shadow 130ms;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.seg-btn svg { width: 14px; height: 14px; }
.seg-btn:hover { color: var(--text-primary); }
.seg-btn.is-active {
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: var(--v2-shadow-1);
}
.seg-btn .seg-count {
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb, var(--text-muted) 15%, transparent);
  color: var(--text-secondary);
  padding: 1px 6px;
  border-radius: 999px;
  font-feature-settings: 'tnum';
}
.seg-btn.is-active .seg-count {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

/* -----------------------------------------------------------------------------
   FILTER CHIP — removable filter token (use alongside segmented control)
   -------------------------------------------------------------------------- */
.chip-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  color: var(--text-primary);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
}
.chip-filter .chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  border: 0;
  cursor: pointer;
  transition: background 130ms;
}
.chip-filter .chip-x:hover { background: color-mix(in srgb, var(--accent) 32%, transparent); }
.chip-filter .chip-x svg { width: 11px; height: 11px; }

/* -----------------------------------------------------------------------------
   SEARCH INPUT — leading icon + kbd hint
   -------------------------------------------------------------------------- */
.search-input {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 12px 0 36px;
  height: 36px;
  min-width: 240px;
  transition: border-color 130ms, box-shadow 130ms;
}
.search-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.search-input > svg {
  position: absolute;
  left: 12px;
  width: 15px;
  height: 15px;
  color: var(--text-muted);
}
.search-input input {
  background: transparent;
  border: 0;
  outline: 0;
  flex: 1;
  font: inherit;
  font-size: 13.5px;
  color: var(--text-primary);
  padding: 0;
  min-width: 0;
}
.search-input input::placeholder { color: var(--text-muted); }
.search-input kbd {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--bg-card-hover);
  color: var(--text-muted);
  border: 1px solid var(--border);
  margin-left: 8px;
  font-weight: 600;
}

/* -----------------------------------------------------------------------------
   SKELETON LOADERS — shimmer placeholders
   -------------------------------------------------------------------------- */
.sk {
  display: block;
  background: linear-gradient(90deg,
    var(--bg-card) 0%,
    var(--bg-card-hover) 50%,
    var(--bg-card) 100%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.6s ease-in-out infinite;
  border-radius: 8px;
}
.sk-line   { height: 14px; width: 100%; border-radius: 4px; }
.sk-line.sk-sm { height: 10px; }
.sk-line.sk-lg { height: 22px; border-radius: 6px; }
.sk-block  { height: 100px; border-radius: 14px; }
.sk-circle { width: 36px; height: 36px; border-radius: 50%; }
.sk-tile {
  height: 132px;
  border-radius: 16px;
  border: 1px solid var(--border);
}
@keyframes sk-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* -----------------------------------------------------------------------------
   ACTIVITY WEEK STRIP — 7-day mini calendar with activity dots
   -------------------------------------------------------------------------- */
.weekstrip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}
.weekstrip-day {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  transition: border-color 130ms, background 130ms;
}
.weekstrip-day.is-today {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-input));
}
.weekstrip-day.is-today::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: var(--brand-accent-gradient);
  border-radius: 10px 10px 0 0;
}
.weekstrip-dow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.weekstrip-day.is-today .weekstrip-dow { color: var(--accent); }
.weekstrip-dom {
  font-size: 18px;
  font-weight: 700;
  font-feature-settings: 'tnum';
  color: var(--text-primary);
  line-height: 1;
}
/* Phones: tighter cells so 7 days genuinely fit a 375px screen. */
@media (max-width: 480px) {
  .weekstrip { gap: 4px; }
  .weekstrip-day { padding: 8px 2px 6px; gap: 4px; min-width: 0; }
  .weekstrip-dom { font-size: 15px; }
}
.weekstrip-dots {
  display: flex;
  gap: 3px;
  height: 6px;
  margin-top: 2px;
}
.weekstrip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
}
.weekstrip-dot.is-done { background: var(--green); }
.weekstrip-dot.is-late { background: var(--red); }
.weekstrip-count {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  font-feature-settings: 'tnum';
}

/* Hover tooltip — rich list of activities for the day.
   display:none while hidden — an opacity-0 box still counts as scrollable
   overflow, and the 220px tips were forcing horizontal page scroll on phones. */
.weekstrip-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 220px;
  max-width: 300px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 10px 12px;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 130ms ease, transform 130ms ease;
  text-align: left;
}
.weekstrip-day:hover .weekstrip-tip,
.weekstrip-day:focus-within .weekstrip-tip {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Edge alignment so tooltips don't clip at week start/end */
.weekstrip-day:first-child .weekstrip-tip {
  left: 0;
  transform: translateX(0) translateY(4px);
}
.weekstrip-day:first-child:hover .weekstrip-tip,
.weekstrip-day:first-child:focus-within .weekstrip-tip {
  transform: translateX(0) translateY(0);
}
.weekstrip-day:last-child .weekstrip-tip {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(4px);
}
.weekstrip-day:last-child:hover .weekstrip-tip,
.weekstrip-day:last-child:focus-within .weekstrip-tip {
  transform: translateX(0) translateY(0);
}
.weekstrip-tip-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.weekstrip-tip-empty {
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
}
.weekstrip-tip-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
}
.weekstrip-tip-item + .weekstrip-tip-item {
  margin-top: 2px;
}
.weekstrip-tip-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 6px;
  flex-shrink: 0;
}
.weekstrip-tip-pip.is-done { background: var(--green); }
.weekstrip-tip-pip.is-late { background: var(--red); }
.weekstrip-tip-body { min-width: 0; flex: 1; }
.weekstrip-tip-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  word-break: break-word;
}
.weekstrip-tip-meta {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* -----------------------------------------------------------------------------
   TIMELINE — refined recent-activity list
   -------------------------------------------------------------------------- */
.tl {
  display: flex;
  flex-direction: column;
  position: relative;
}
.tl::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: var(--border);
}
.tl-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  position: relative;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.tl-icon svg { width: 15px; height: 15px; }
.tl-body { min-width: 0; flex: 1; }
.tl-summary {
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.4;
}
.tl-meta {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* -----------------------------------------------------------------------------
   TARGET ROW v2 — name + value/target + bar with semantic color
   -------------------------------------------------------------------------- */
.tgt {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 0;
  border-bottom: 1px solid var(--v2-hairline);
}
.tgt:last-child { border-bottom: 0; padding-bottom: 0; }
.tgt:first-child { padding-top: 0; }
.tgt-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.tgt-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.tgt-vals { font-size: 12.5px; color: var(--text-secondary); font-feature-settings: 'tnum'; white-space: nowrap; }
.tgt-vals .tgt-cur { color: var(--text-primary); font-weight: 600; }
.tgt-bar {
  position: relative;
  height: 5px;
  border-radius: 999px;
  background: var(--bg-input);
  overflow: hidden;
}
.tgt-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width 600ms cubic-bezier(0.16,1,0.3,1);
}
.tgt.is-warn .tgt-bar-fill { background: var(--gold); }
.tgt.is-danger .tgt-bar-fill { background: var(--red); }
.tgt.is-good .tgt-bar-fill { background: linear-gradient(90deg, var(--accent), var(--accent-strong)); }

/* -----------------------------------------------------------------------------
   AI SUGGESTION CARD v2 — confident header, tight body, inline actions
   -------------------------------------------------------------------------- */
.sugg2 {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 130ms;
}
.sugg2:hover { border-color: var(--border-strong); }
.sugg2-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sugg2-type {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
}
.sugg2-type svg { width: 11px; height: 11px; }
.sugg2-type.is-accent  { background: var(--accent-soft); color: var(--accent); }
.sugg2-type.is-gold    { background: var(--gold-soft);   color: var(--gold); }
.sugg2-type.is-purple  { background: var(--purple-soft); color: var(--purple); }
.sugg2-type.is-red     { background: var(--red-soft);    color: var(--red); }
.sugg2-type.is-muted   { background: var(--bg-card-hover); color: var(--text-secondary); }
.sugg2-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); line-height: 1.35; }
.sugg2-body  { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.sugg2-actions { display: flex; gap: 6px; margin-top: 4px; }

/* -----------------------------------------------------------------------------
   REFINED ACTION BUTTONS — restraint, semantic meaning
   The existing .btn-primary stays as the hero CTA. These are alternatives.
   -------------------------------------------------------------------------- */
.btn-soft {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.btn-soft:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}

/* Destructive icon-button — subtle by default, red on hover. Use for "delete" rows */
.btn-del {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: background 130ms, color 130ms, border-color 130ms;
  padding: 0;
}
.btn-del svg { width: 15px; height: 15px; }
.btn-del:hover {
  background: var(--red-soft);
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 28%, transparent);
}
.btn-del:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent);
}

/* Inline ghost-icon button used inside tables / list rows */
.btn-row-icon {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 130ms, color 130ms;
  padding: 0;
}
.btn-row-icon svg { width: 14px; height: 14px; }
.btn-row-icon:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
.btn-row-icon.is-danger:hover {
  background: var(--red-soft);
  color: var(--red);
}

/* -----------------------------------------------------------------------------
   EMPTY STATE v2 — confident, branded, with CTA
   -------------------------------------------------------------------------- */
.empty2 {
  text-align: center;
  padding: 60px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: 16px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 4%, transparent));
}
.empty2-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.empty2-icon svg { width: 26px; height: 26px; }
.empty2-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.012em;
  margin-bottom: 6px;
}
.empty2-body {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 380px;
  margin: 0 auto 18px;
}

/* -----------------------------------------------------------------------------
   PAGE HEADER v2 — tighter, with optional breadcrumbs + meta strip
   -------------------------------------------------------------------------- */
.ph2 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.ph2-lede h1 {
  font-size: clamp(24px, 1.9vw, 30px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 4px;
}
.ph2-lede p {
  font-size: 13.5px;
  color: var(--text-secondary);
  max-width: 60ch;
}
.ph2-crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.ph2-crumb svg { width: 11px; height: 11px; }
.ph2-actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* -----------------------------------------------------------------------------
   SECTION HEADER (above content groups inside a page)
   -------------------------------------------------------------------------- */
.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 24px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--v2-hairline);
}
.sec-head h2 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
.sec-head-sub {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   PILL — refined neutral chip for inline meta data (assignee, owner, etc)
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg-card-hover);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--border);
  letter-spacing: 0;
  line-height: 1.5;
}
.chip svg { width: 11px; height: 11px; }
.chip.is-accent { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.chip.is-green  { background: var(--green-soft); color: var(--green); border-color: color-mix(in srgb, var(--green) 22%, transparent); }
.chip.is-gold   { background: var(--gold-soft); color: var(--gold);  border-color: color-mix(in srgb, var(--gold) 22%, transparent); }
.chip.is-red    { background: var(--red-soft); color: var(--red);    border-color: color-mix(in srgb, var(--red) 22%, transparent); }

/* -----------------------------------------------------------------------------
   ACTIVITY MINI-CARD v2 — used inside tiles
   -------------------------------------------------------------------------- */
.act {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  transition: border-color 130ms, background 130ms, transform 130ms;
}
.act:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-input));
}
.act-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.act-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}
.act-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.act-meta svg { width: 11px; height: 11px; }

/* -----------------------------------------------------------------------------
   CHART WRAP — give charts a consistent inner padding + min-height
   -------------------------------------------------------------------------- */
.chart-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 240px;
}
.chart-wrap canvas { width: 100% !important; height: 100% !important; }

/* -----------------------------------------------------------------------------
   PROOFING — Page-enter stagger (overrides the modern.css all-at-once enter)
   -------------------------------------------------------------------------- */
@keyframes v2-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-page-root][data-page="dashboard"] > * {
  animation: v2-enter 420ms cubic-bezier(0.16,1,0.3,1) both;
}
[data-page-root][data-page="dashboard"] > *:nth-child(1) { animation-delay: 0ms; }
[data-page-root][data-page="dashboard"] > *:nth-child(2) { animation-delay: 60ms; }
[data-page-root][data-page="dashboard"] > *:nth-child(3) { animation-delay: 120ms; }
[data-page-root][data-page="dashboard"] > *:nth-child(4) { animation-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
  [data-page-root][data-page="dashboard"] > * { animation: none; }
}

/* -----------------------------------------------------------------------------
   GLOBAL: tighten existing .btn so the new ones blend with it
   (Light touch — only tightens shadow + transform that competes with v2 tiles)
   -------------------------------------------------------------------------- */
.tile .btn,
.hero .btn { box-shadow: none; }
.tile .btn:hover,
.hero .btn:hover { box-shadow: var(--v2-shadow-1); transform: none; }
.hero .btn-primary { transform: none; }
.hero .btn-primary:hover { transform: translateY(-1px); }

/* -----------------------------------------------------------------------------
   UTILITY — visually-hidden but accessible
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* =============================================================================
   AURORA COMMAND — 2026 design language overlay
   ----------------------------------------------------------------------------
   Loaded LAST, so it wins. Establishes a refined fintech / command-centre look:
   layered cool-neutral surfaces, brand-driven accent + indigo/violet secondary
   accents used as gradients and glows, softer layered shadows, larger radii,
   vibrant gradient KPI cards, premium forms / icon buttons / segmented controls,
   airy tables with status dots and gradient progress, and a polished modal.
   Everything keys off the existing brand vars so the owner palette still drives
   the accent. No HTML/class changes — pure restyle (+ additive utilities).
   ============================================================================= */

:root {
  /* --- Brand-derived accent stops. EVERYTHING vibrant is built from the
     owner's brand palette (--brand-primary/--brand-accent/--brand-deep, which
     /api/brand-settings/css injects) via color-mix, so the whole UI re-tints
     automatically when the owner changes their brand colour in Settings. We do
     NOT hardcode any decorative hue. --brand-* fall back to the legacy --accent
     ramp if the brand CSS hasn't loaded yet. --- */
  --au-b1: var(--brand-primary, var(--accent));        /* primary stop  */
  --au-b2: var(--brand-accent,  var(--accent-strong));  /* mid stop      */
  --au-b3: var(--brand-deep,    var(--accent-deep));    /* deep stop     */
  /* Tonal variations of the SAME brand hue for KPI-card variety */
  --au-b-light: color-mix(in srgb, var(--au-b1) 78%, #ffffff);  /* lighter brand */
  --au-b-deep:  color-mix(in srgb, var(--au-b3) 80%, #0b1020);   /* darker brand  */
  --au-b-warm:  color-mix(in srgb, var(--au-b2) 72%, var(--brand-success, var(--green))); /* brand shifted toward success */
  --au-b-cool:  color-mix(in srgb, var(--au-b3) 78%, var(--brand-info, var(--accent-strong))); /* brand shifted toward info */

  /* --- Layered surfaces. :root values target the (default) light theme. --- */
  --au-canvas: #F4F6FB;
  --au-surface: #FFFFFF;
  --au-surface-2: #F7F9FC;
  --au-hairline: color-mix(in srgb, var(--border) 78%, transparent);

  /* --- Radii --- */
  --au-r-card: 18px;
  --au-r-card-lg: 20px;
  --au-r-control: 11px;
  --au-r-control-sm: 9px;

  /* --- Layered soft shadow scale (tuned for light fintech) --- */
  --au-shadow-xs: 0 1px 2px rgba(16,24,48,0.05);
  --au-shadow-sm: 0 1px 2px rgba(16,24,48,0.05), 0 2px 6px rgba(16,24,48,0.05);
  --au-shadow-md: 0 2px 4px rgba(16,24,48,0.04), 0 10px 24px -8px rgba(16,24,48,0.14);
  --au-shadow-lg: 0 4px 8px rgba(16,24,48,0.05), 0 24px 48px -16px rgba(16,24,48,0.22);
  --au-shadow-xl: 0 8px 16px rgba(16,24,48,0.06), 0 40px 80px -24px rgba(16,24,48,0.30);
  --au-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  --au-ring-danger: 0 0 0 3px color-mix(in srgb, var(--red) 24%, transparent);

  /* --- Motion --- */
  --au-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --au-t: 160ms var(--au-ease);
  --au-t-slow: 220ms var(--au-ease);

  /* --- Soft semantic tints (bg) --- */
  --au-green-bg: color-mix(in srgb, var(--green) 13%, var(--au-surface));
  --au-amber-bg: color-mix(in srgb, var(--amber) 15%, var(--au-surface));
  --au-red-bg:   color-mix(in srgb, var(--red) 12%, var(--au-surface));
  --au-blue-bg:  color-mix(in srgb, var(--accent-strong) 13%, var(--au-surface));
}

[data-theme='light'] {
  --au-canvas: #F4F6FB;
  --au-surface: #FFFFFF;
  --au-surface-2: #F7F9FC;
}

[data-theme='dark'] {
  --au-canvas: #080C18;
  --au-surface: #0F1828;
  --au-surface-2: #0B1322;
  --au-hairline: color-mix(in srgb, var(--border) 90%, transparent);

  --au-shadow-xs: 0 1px 2px rgba(0,0,0,0.40);
  --au-shadow-sm: 0 1px 2px rgba(0,0,0,0.40), 0 2px 8px rgba(0,0,0,0.32);
  --au-shadow-md: 0 2px 6px rgba(0,0,0,0.40), 0 12px 28px -10px rgba(0,0,0,0.60);
  --au-shadow-lg: 0 4px 10px rgba(0,0,0,0.40), 0 28px 56px -18px rgba(0,0,0,0.70);
  --au-shadow-xl: 0 10px 20px rgba(0,0,0,0.45), 0 48px 90px -26px rgba(0,0,0,0.80);

  --au-green-bg: color-mix(in srgb, var(--green) 18%, var(--au-surface));
  --au-amber-bg: color-mix(in srgb, var(--amber) 20%, var(--au-surface));
  --au-red-bg:   color-mix(in srgb, var(--red) 18%, var(--au-surface));
  --au-blue-bg:  color-mix(in srgb, var(--accent-strong) 20%, var(--au-surface));
}

/* -----------------------------------------------------------------------------
   CANVAS — faint cool off-white (or deep navy) + very subtle accent glow + grid
   -------------------------------------------------------------------------- */
body { background: var(--au-canvas); }

body::before {
  background:
    radial-gradient(1000px 720px at 6% -4%, color-mix(in srgb, var(--au-b1) 11%, transparent), transparent 60%),
    radial-gradient(900px 680px at 100% 104%, color-mix(in srgb, var(--au-b3) 10%, transparent), transparent 62%),
    radial-gradient(620px 520px at 88% 4%, color-mix(in srgb, var(--au-b2) 8%, transparent), transparent 66%) !important;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--text-muted) 16%, transparent) 0.6px, transparent 0.6px);
  background-size: 26px 26px;
  opacity: 0.30;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
}
[data-theme='dark'] body::after { opacity: 0.16; }

/* -----------------------------------------------------------------------------
   TYPE — distinctive display font for large headings; body stays Inter
   -------------------------------------------------------------------------- */
h1, .hero-lede h1, .ph2-lede h1, .page-header .lede h1, .kpi-value, .stat-tile .stat-value {
  font-family: 'Space Grotesk', var(--brand-font-heading, var(--font-sans));
}
.page-header .lede h1 { font-size: clamp(26px, 2.2vw, 32px); font-weight: 700; letter-spacing: -0.03em; }

/* =============================================================================
   BUTTONS
   ============================================================================= */
.btn {
  border-radius: var(--au-r-control);
  padding: 10px 17px;
  font-weight: 600;
  letter-spacing: -0.006em;
  background: var(--au-surface);
  border: 1px solid var(--border);
  color: var(--text-primary);
  box-shadow: var(--au-shadow-xs);
  transition: transform var(--au-t), background var(--au-t), border-color var(--au-t), box-shadow var(--au-t), color var(--au-t);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--au-shadow-sm); background: var(--au-surface-2); border-color: var(--border-strong); }
.btn:active { transform: translateY(0); box-shadow: var(--au-shadow-xs); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: var(--au-ring); }
.btn svg { width: 16px; height: 16px; }
[data-theme='dark'] .btn {
  background: color-mix(in srgb, var(--au-surface) 92%, #fff 4%);
  border-color: var(--border-strong);
}
[data-theme='dark'] .btn:hover { background: color-mix(in srgb, var(--au-surface) 78%, #fff 8%); border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong)); }
[data-theme='dark'] .btn-ghost:hover, [data-theme='dark'] .btn.ghost:hover { background: color-mix(in srgb, #fff 8%, transparent); }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-primary, var(--accent)) 0%, var(--brand-accent, var(--accent-strong)) 100%);
  border: 1px solid transparent;
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 18px -4px color-mix(in srgb, var(--accent) 55%, transparent);
}
.btn-primary:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary, var(--accent)) 88%, #fff) 0%, color-mix(in srgb, var(--brand-accent, var(--accent-strong)) 88%, #fff) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 10px 26px -6px color-mix(in srgb, var(--accent) 62%, transparent);
  color: #fff;
}
.btn-primary:focus-visible { box-shadow: var(--au-ring), 0 6px 18px -4px color-mix(in srgb, var(--accent) 55%, transparent); }

.btn-danger {
  background: linear-gradient(135deg, #F2545B 0%, var(--red) 100%);
  border-color: transparent; color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 6px 18px -4px color-mix(in srgb, var(--red) 50%, transparent);
}
.btn-danger:hover { background: linear-gradient(135deg, #EF4F57 0%, #DC2626 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 10px 26px -6px color-mix(in srgb, var(--red) 56%, transparent); color:#fff; }
.btn-danger:focus-visible { box-shadow: var(--au-ring-danger); }

.btn-success {
  background: linear-gradient(135deg, color-mix(in srgb, var(--green) 86%, #fff) 0%, var(--green) 100%);
  border-color: transparent; color:#fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 6px 18px -4px color-mix(in srgb, var(--green) 50%, transparent);
}
.btn-success:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 10px 26px -6px color-mix(in srgb, var(--green) 56%, transparent); }

.btn-ghost, .btn.ghost {
  background: transparent; border-color: transparent; box-shadow: none; color: var(--text-secondary);
}
.btn-ghost:hover, .btn.ghost:hover {
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  border-color: transparent; color: var(--text-primary); box-shadow: none; transform: none;
}

.btn-soft {
  background: color-mix(in srgb, var(--accent) 13%, var(--au-surface));
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow: none;
}
.btn-soft:hover { background: color-mix(in srgb, var(--accent) 20%, var(--au-surface)); color: var(--accent); }

.btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: var(--au-r-control-sm); }
.btn-lg { padding: 12px 22px; font-size: 15px; border-radius: 13px; }

/* =============================================================================
   ICON BUTTONS — circular ghost, muted icon then tinted hover; destructive = red
   ============================================================================= */
.icon-btn, .btn-icon, .btn.btn-icon {
  width: 36px; height: 36px; padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: none;
  transition: background var(--au-t), color var(--au-t), border-color var(--au-t), transform var(--au-t);
}
.icon-btn:hover, .btn-icon:hover, .btn.btn-icon:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border-color: transparent;
  transform: none;
}
.icon-btn:focus-visible, .btn-icon:focus-visible { outline: none; box-shadow: var(--au-ring); }
.icon-btn svg, .btn-icon svg { width: 17px; height: 17px; }

.modal-header .icon-btn[data-modal-close] {
  width: 38px; height: 38px; color: var(--text-muted);
}
.modal-header .icon-btn[data-modal-close]:hover {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  color: var(--red);
}

.btn-del, .btn-row-icon.is-danger, .icon-btn.is-danger {
  border-radius: 50%;
  background: transparent; border: 1px solid transparent; color: var(--text-muted);
}
.btn-del:hover, .btn-row-icon.is-danger:hover, .icon-btn.is-danger:hover {
  background: color-mix(in srgb, var(--red) 13%, transparent);
  color: var(--red); border-color: transparent;
}
.btn-del:focus-visible { outline:none; box-shadow: var(--au-ring-danger); }

/* =============================================================================
   FORMS — soft-filled modern fields, ~43px, refined focus ring
   ============================================================================= */
.input, .select, .textarea {
  background: var(--au-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--au-r-control);
  padding: 11px 14px;
  font-size: 14px;
  color: var(--text-primary);
  box-shadow: none;
  transition: border-color var(--au-t), background var(--au-t), box-shadow var(--au-t);
}
[data-theme='dark'] .input, [data-theme='dark'] .select, [data-theme='dark'] .textarea {
  background: color-mix(in srgb, var(--au-surface) 70%, #000);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: 0.75; }
.input:hover:not(:focus):not(:disabled),
.select:hover:not(:focus):not(:disabled),
.textarea:hover:not(:focus):not(:disabled) { border-color: var(--border-strong); background: var(--au-surface); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  background: var(--au-surface);
  border-color: var(--accent);
  box-shadow: var(--au-ring);
}
.input:disabled, .select:disabled, .textarea:disabled {
  opacity: 1; cursor: not-allowed; color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 8%, var(--au-surface-2));
}
.input[readonly], .textarea[readonly] {
  background: color-mix(in srgb, var(--text-muted) 7%, var(--au-surface-2));
  color: var(--text-secondary);
}
.input, .select, input[type="date"], input[type="time"], input[type="datetime-local"] { min-height: 43px; }
.textarea { min-height: 96px; }

.select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 13px 13px;
  padding-right: 38px; cursor: pointer;
}

.label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 7px; display: block;
}

/* =============================================================================
   CHECKBOXES / RADIOS / TOGGLES — accent fill, smooth check, focus ring
   ============================================================================= */
input[type="checkbox"]:not([data-no-style]),
input[type="radio"]:not([data-no-style]) {
  width: 19px; height: 19px;
  background: var(--au-surface);
  border: 1.5px solid var(--border-strong);
  box-shadow: var(--au-shadow-xs);
  transition: background var(--au-t), border-color var(--au-t), box-shadow var(--au-t), transform var(--au-t);
}
input[type="checkbox"]:not([data-no-style]) { border-radius: 6px; }
input[type="checkbox"]:not([data-no-style]):hover,
input[type="radio"]:not([data-no-style]):hover { border-color: var(--accent); }
input[type="checkbox"]:not([data-no-style]):checked,
input[type="radio"]:not([data-no-style]):checked,
input[type="checkbox"]:not([data-no-style]):indeterminate {
  background: linear-gradient(135deg, var(--brand-primary, var(--accent)), var(--brand-accent, var(--accent-strong)));
  border-color: transparent;
  box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--accent) 45%, transparent);
}
input[type="checkbox"]:not([data-no-style]):focus-visible,
input[type="radio"]:not([data-no-style]):focus-visible { outline:none; box-shadow: var(--au-ring); }

.switch span { background: var(--border-strong); }
.switch input:checked + span { background: linear-gradient(135deg, var(--brand-primary, var(--accent)), var(--brand-accent, var(--accent-strong))); }
.switch span::before { box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.switch input:focus-visible + span { box-shadow: var(--au-ring); }

/* =============================================================================
   CARDS
   ============================================================================= */
.card, .tile {
  background: var(--au-surface);
  border: 1px solid var(--au-hairline);
  border-radius: var(--au-r-card);
  box-shadow: var(--au-shadow-sm);
  transition: border-color var(--au-t-slow), transform var(--au-t-slow), box-shadow var(--au-t-slow);
}
.card.hoverable:hover, .tile.tile-hover:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--au-hairline));
  box-shadow: var(--au-shadow-md);
}
.card-title svg, .tile-title svg, .tile-eyebrow svg { color: var(--accent); }

/* =============================================================================
   KPI / STAT CARDS — vibrant gradient tiles (the hero moment)
   Use: <div class="kpi-card tone-accent"> ... </div>
   ============================================================================= */
.kpi-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--au-r-card-lg);
  padding: 20px 22px;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--au-shadow-md);
  isolation: isolate;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 132px;
  transition: transform var(--au-t-slow), box-shadow var(--au-t-slow);
}
.kpi-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,0.22), transparent 55%),
    radial-gradient(120% 100% at 0% 100%, rgba(0,0,0,0.16), transparent 60%);
  pointer-events: none;
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--au-shadow-lg); }

.kpi-card .kpi-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kpi-card .kpi-card-label {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.86);
}
.kpi-card .kpi-card-chip {
  width: 42px; height: 42px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.26);
  color: #fff;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.kpi-card .kpi-card-chip svg { width: 21px; height: 21px; }
.kpi-card .kpi-card-value {
  font-family: 'Space Grotesk', var(--brand-font-heading, var(--font-sans));
  font-size: clamp(28px, 2.4vw, 34px); font-weight: 700; letter-spacing: -0.02em;
  font-feature-settings: 'tnum'; line-height: 1; color: #fff;
}
.kpi-card .kpi-card-trend {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.92);
}
.kpi-card .kpi-card-trend svg { width: 14px; height: 14px; }
.kpi-card .kpi-trend-pill {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(255,255,255,0.20); border-radius: 999px; padding: 2px 8px;
}

/* Gradient tones — ALL derived from the owner's brand palette via color-mix so
   they re-tint automatically when the brand accent changes. The variety between
   tiles comes from lighter / deeper / warm / cool shifts of the SAME brand hue,
   not from foreign colours. tone-accent is the canonical brand gradient. */
.tone-accent  { background: linear-gradient(135deg, var(--au-b1) 0%, var(--au-b2) 55%, var(--au-b3) 100%); }
.tone-bright  { background: linear-gradient(140deg, var(--au-b-light) 0%, var(--au-b1) 60%, var(--au-b2) 100%); }
.tone-deep    { background: linear-gradient(140deg, var(--au-b2) 0%, var(--au-b3) 55%, var(--au-b-deep) 100%); }
.tone-cool    { background: linear-gradient(140deg, var(--au-b2) 0%, var(--au-b-cool) 60%, var(--au-b3) 100%); }
.tone-warm    { background: linear-gradient(140deg, var(--au-b1) 0%, var(--au-b-warm) 60%, var(--au-b2) 100%); }
/* Back-compat aliases so older tone names still resolve to brand gradients */
.tone-indigo  { background: linear-gradient(140deg, var(--au-b2) 0%, var(--au-b3) 100%); }
.tone-violet  { background: linear-gradient(140deg, var(--au-b3) 0%, var(--au-b-deep) 100%); }
.tone-emerald { background: linear-gradient(140deg, var(--au-b1) 0%, var(--au-b-warm) 100%); }
.tone-sky     { background: linear-gradient(140deg, var(--au-b-light) 0%, var(--au-b2) 100%); }

.kpi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.stat-tile {
  background: var(--au-surface);
  border: 1px solid var(--au-hairline);
  border-radius: var(--au-r-card);
  box-shadow: var(--au-shadow-sm);
}
.stat-tile .stat-value { font-family: 'Space Grotesk', var(--brand-font-heading, var(--font-sans)); }

/* =============================================================================
   TABLES — airy rows, refined sticky header, hover
   ============================================================================= */
.table-wrap {
  background: var(--au-surface);
  border: 1px solid var(--au-hairline);
  border-radius: var(--au-r-card);
  box-shadow: var(--au-shadow-sm);
  overflow-x: auto; overflow-y: hidden;
}
table.data th, table.data td { padding: 13px 18px; border-bottom: 1px solid var(--au-hairline); }
table.data thead th {
  font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase; font-weight: 700;
  color: var(--text-muted);
  background: var(--au-surface-2);
  border-bottom: 1px solid var(--border-strong);
}
[data-theme='dark'] table.data thead th { background: color-mix(in srgb, var(--au-surface) 70%, #000); }
table.data tbody tr { transition: background var(--au-t); }
table.data tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
table.data td.num, table.data th.num { text-align: right; font-feature-settings: 'tnum'; }

/* =============================================================================
   STATUS PILLS — soft tinted bg + leading dot
   ============================================================================= */
.pill {
  border-radius: 999px;
  padding: 4px 11px 4px 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  border: 1px solid transparent;
  gap: 6px;
}
.pill-accent, .pill-cyan, .pill-teal { background: color-mix(in srgb, var(--accent) 13%, var(--au-surface)); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 24%, transparent); }
.pill-green  { background: var(--au-green-bg); color: var(--green); border-color: color-mix(in srgb, var(--green) 26%, transparent); }
.pill-amber, .pill-gold { background: var(--au-amber-bg); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 28%, transparent); }
.pill-red    { background: var(--au-red-bg); color: var(--red); border-color: color-mix(in srgb, var(--red) 26%, transparent); }
.pill-purple { background: color-mix(in srgb, var(--purple) 14%, var(--au-surface)); color: var(--purple); border-color: color-mix(in srgb, var(--purple) 26%, transparent); }
.pill-blue   { background: var(--au-blue-bg); color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent-strong) 26%, transparent); }
.pill-orange { background: color-mix(in srgb, var(--orange) 14%, var(--au-surface)); color: var(--orange); border-color: color-mix(in srgb, var(--orange) 26%, transparent); }
.pill-muted  { background: color-mix(in srgb, var(--text-muted) 12%, var(--au-surface)); color: var(--text-secondary); border-color: var(--au-hairline); }
.pill-brand  { background: linear-gradient(135deg, var(--brand-primary, var(--accent)), var(--brand-accent, var(--accent-strong))); color:#fff; border-color: transparent; box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 50%, transparent); }

.pill[class*="pill-"]:not(.pill-brand)::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
  flex-shrink: 0;
}

/* =============================================================================
   PROGRESS BARS — gradient fills
   ============================================================================= */
.tgt-bar, .dash-bar-track {
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  border-radius: 999px;
}
.tgt-bar-fill, .dash-bar-fill {
  background: linear-gradient(90deg, var(--brand-primary, var(--accent)), var(--brand-accent, var(--accent-strong)));
  border-radius: 999px;
}
.tgt.is-warn .tgt-bar-fill { background: linear-gradient(90deg, var(--amber), var(--orange)); }
.tgt.is-danger .tgt-bar-fill { background: linear-gradient(90deg, #F2545B, var(--red)); }
.tgt.is-good .tgt-bar-fill { background: linear-gradient(90deg, var(--green), var(--accent)); }

.progress {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
}
.progress > span, .progress-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-primary, var(--accent)), var(--brand-accent, var(--accent-strong)));
  transition: width var(--au-t-slow);
}
/* Status-coloured fills so the gradient (span) convention matches the legacy
   (div) one — keeps colour-coded progress consistent across both. */
.progress.success > span, .progress.is-good > span { background: linear-gradient(90deg, var(--green, #10B981), color-mix(in srgb, var(--green, #10B981) 60%, var(--accent))); }
.progress.warn > span, .progress.is-warn > span { background: linear-gradient(90deg, var(--amber, #F59E0B), color-mix(in srgb, var(--amber, #F59E0B) 70%, #f5d142)); }
.progress.danger > span, .progress.is-danger > span { background: linear-gradient(90deg, var(--red, #EF4444), color-mix(in srgb, var(--red, #EF4444) 70%, #ff8a5c)); }

/* =============================================================================
   SEGMENTED CONTROL + FILTER PILL ROWS
   ============================================================================= */
.seg {
  background: var(--au-surface-2);
  border: 1px solid var(--au-hairline);
  border-radius: var(--au-r-control);
  padding: 4px;
}
[data-theme='dark'] .seg { background: color-mix(in srgb, var(--au-surface) 60%, #000); }
.seg-btn {
  border-radius: 8px; color: var(--text-secondary); font-weight: 600;
  transition: background var(--au-t), color var(--au-t), box-shadow var(--au-t);
}
.seg-btn:hover { color: var(--text-primary); }
.seg-btn.is-active {
  background: linear-gradient(135deg, var(--brand-primary, var(--accent)), var(--brand-accent, var(--accent-strong)));
  color: #fff;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 50%, transparent);
}
.seg-btn.is-active .seg-count { background: rgba(255,255,255,0.24); color: #fff; }
.seg-btn:focus-visible { outline: none; box-shadow: var(--au-ring); }

.filter-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; padding: 4px; background: var(--au-surface-2); border:1px solid var(--au-hairline); border-radius: var(--au-r-control); }
.filter-pill, .filter-pills > .pill {
  cursor: pointer; border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600;
  background: transparent; color: var(--text-secondary); border: 1px solid transparent;
  text-transform: none; letter-spacing: 0;
  transition: background var(--au-t), color var(--au-t), box-shadow var(--au-t);
}
.filter-pill::before, .filter-pills > .pill::before { display: none !important; }
.filter-pill:hover, .filter-pills > .pill:hover { color: var(--text-primary); }
.filter-pill.is-active, .filter-pill.active, .filter-pills > .pill.is-active, .filter-pills > .pill.active {
  background: linear-gradient(135deg, var(--brand-primary, var(--accent)), var(--brand-accent, var(--accent-strong)));
  color: #fff; box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* =============================================================================
   MODAL — blur scrim, larger radius, layered shadow, smooth scale+fade
   ============================================================================= */
.modal-backdrop {
  background: color-mix(in srgb, var(--bg-base) 64%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  animation: au-scrim-in 220ms var(--au-ease);
}
@keyframes au-scrim-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--au-surface);
  border: 1px solid var(--au-hairline);
  border-radius: 20px;
  box-shadow: var(--au-shadow-xl);
  animation: au-modal-in 240ms var(--au-ease);
}
@keyframes au-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.975); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header { padding: 20px 22px 16px; border-bottom: 1px solid var(--au-hairline); }
.modal-header h2 { font-family: 'Space Grotesk', var(--brand-font-heading, var(--font-sans)); font-size: 18px; letter-spacing: -0.01em; }
.modal-body { padding: 22px; }
.modal-footer { padding: 16px 22px; border-top: 1px solid var(--au-hairline); background: var(--au-surface-2); }
[data-theme='dark'] .modal-footer { background: color-mix(in srgb, var(--au-surface) 70%, #000); }
@media (prefers-reduced-motion: reduce) {
  .modal, .modal-backdrop { animation: none; }
}

.modal-body { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-muted) 45%, transparent) transparent; }
.modal-body::-webkit-scrollbar { width: 10px; }
.modal-body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 38%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
.modal-body::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-muted) 55%, transparent); background-clip: padding-box; }

/* =============================================================================
   GLOBAL — slim scrollbars, focus rings, links, empty state
   ============================================================================= */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-muted) 38%, transparent) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-muted) 32%, transparent);
  border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-muted) 50%, transparent); background-clip: padding-box; }

a:not(.btn):not(.nav-item) {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transition: color var(--au-t);
}
a:not(.btn):not(.nav-item):hover { color: color-mix(in srgb, var(--accent) 80%, var(--text-primary)); }

a:focus-visible { outline: none; box-shadow: var(--au-ring); border-radius: 4px; }

.empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--au-r-card);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 4%, transparent));
}
.empty svg { color: var(--accent); }
.empty2-icon { border-radius: 16px; }

/* =============================================================================
   AURORA POLISH PASS — 2026 (Phase A: buttons + spacing + mobile/PWA)
   Loaded last so it wins. Pure restyle + responsive; no markup/JS changes.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   BUTTONS v3 — premium, tactile, crisp. Establishes one rhythm across sizes.
   -------------------------------------------------------------------------- */
:root {
  --btn-h: 40px;
  --btn-h-sm: 34px;
  --btn-h-lg: 48px;
  --btn-gap: 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-h);
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.006em;
  border-radius: 11px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 140ms var(--au-ease),
    background 160ms var(--au-ease),
    border-color 160ms var(--au-ease),
    box-shadow 160ms var(--au-ease),
    color 160ms var(--au-ease),
    filter 160ms var(--au-ease);
}
.btn svg { width: 16.5px; height: 16.5px; stroke-width: 2; flex-shrink: 0; }

/* Neutral / secondary button — soft raised surface with a crisp hairline */
.btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-soft):not(.btn-ghost):not(.ghost):not(.icon-btn):not(.btn-icon) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--au-surface) 100%, #fff 0%), var(--au-surface-2));
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset, var(--au-shadow-xs);
}
[data-theme='dark'] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-soft):not(.btn-ghost):not(.ghost):not(.icon-btn):not(.btn-icon) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--au-surface) 86%, #fff 8%), color-mix(in srgb, var(--au-surface) 96%, #000));
  border-color: var(--border-strong);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset, var(--au-shadow-xs);
}
.btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-soft):not(.btn-ghost):not(.ghost):not(.icon-btn):not(.btn-icon):hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong));
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset, var(--au-shadow-sm);
}
[data-theme='dark'] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-soft):not(.btn-ghost):not(.ghost):not(.icon-btn):not(.btn-icon):hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--au-surface) 74%, #fff 12%), color-mix(in srgb, var(--au-surface) 90%, #000));
}
.btn:active { transform: translateY(0.5px) scale(0.99); }

/* PRIMARY — rich brand gradient, layered depth, inner highlight, gloss sweep */
.btn-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 16%, transparent), transparent 42%),
    linear-gradient(135deg, var(--brand-primary, var(--accent)) 0%, var(--brand-accent, var(--accent-strong)) 100%);
  border: 1px solid transparent;
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.28) inset,
    0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent) inset,
    0 2px 4px -1px color-mix(in srgb, var(--accent) 30%, transparent),
    0 8px 22px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.18) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 620ms var(--au-ease);
  pointer-events: none;
}
.btn-primary:hover {
  transform: translateY(-1.5px);
  filter: saturate(1.05) brightness(1.04);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.34) inset,
    0 0 0 1px color-mix(in srgb, var(--accent) 46%, transparent) inset,
    0 3px 6px -1px color-mix(in srgb, var(--accent) 36%, transparent),
    0 14px 34px -8px color-mix(in srgb, var(--accent) 66%, transparent);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary:active { transform: translateY(0); filter: saturate(1) brightness(0.98); }

/* DANGER / SUCCESS — matched depth language */
.btn-danger, .btn-success {
  position: relative; overflow: hidden;
  border: 1px solid transparent; color: #fff;
}
.btn-danger {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 16%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--red) 78%, #fff) 0%, var(--red) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.24) inset, 0 8px 22px -6px color-mix(in srgb, var(--red) 52%, transparent);
}
.btn-danger:hover { transform: translateY(-1.5px); filter: brightness(1.04); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 14px 34px -8px color-mix(in srgb, var(--red) 60%, transparent); color:#fff; }
.btn-success {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 16%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--green) 84%, #fff) 0%, var(--green) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.24) inset, 0 8px 22px -6px color-mix(in srgb, var(--green) 50%, transparent);
}
.btn-success:hover { transform: translateY(-1.5px); filter: brightness(1.04); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 14px 34px -8px color-mix(in srgb, var(--green) 58%, transparent); color:#fff; }
.btn-danger:active, .btn-success:active { transform: translateY(0); filter: brightness(0.98); }

/* Keep semantic fills vivid on the dark canvas (otherwise they read as neutral) */
[data-theme='dark'] .btn-danger {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 18%, transparent), transparent 44%),
    linear-gradient(135deg, color-mix(in srgb, var(--red) 88%, #fff) 0%, var(--red) 100%);
}
[data-theme='dark'] .btn-success {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 18%, transparent), transparent 44%),
    linear-gradient(135deg, color-mix(in srgb, var(--green) 92%, #fff) 0%, color-mix(in srgb, var(--green) 88%, #000) 100%);
}

/* GHOST + SOFT */
.btn-ghost, .btn.ghost { min-height: var(--btn-h); }
.btn-soft { min-height: var(--btn-h); box-shadow: 0 1px 0 color-mix(in srgb, #fff 30%, transparent) inset; }
.btn-soft:hover { transform: translateY(-1px); }

/* SIZE RHYTHM */
.btn-sm { min-height: var(--btn-h-sm); padding: 0 13px; font-size: 12.5px; border-radius: 9px; gap: 6px; }
.btn-sm svg { width: 15px; height: 15px; }
.btn-lg { min-height: var(--btn-h-lg); padding: 0 24px; font-size: 15px; border-radius: 13px; gap: 9px; }
.btn-lg svg { width: 18px; height: 18px; }

/* ICON BUTTONS — perfectly circular, balanced, crisp lucide */
.icon-btn, .btn-icon, .btn.btn-icon {
  width: 38px; height: 38px; min-height: 0;
}
.icon-btn svg, .btn-icon svg, .btn.btn-icon svg { width: 17.5px; height: 17.5px; stroke-width: 2; }
.icon-btn:active, .btn-icon:active { transform: scale(0.93); }
.btn-sm.icon-btn, .icon-btn.btn-sm { width: 34px; height: 34px; }
.btn-sm.icon-btn svg, .icon-btn.btn-sm svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-primary, .btn-danger, .btn-success, .icon-btn { transition: none; }
  .btn-primary::after { display: none; }
  .btn:hover, .btn-primary:hover, .btn-danger:hover, .btn-success:hover { transform: none; }
}

/* -----------------------------------------------------------------------------
   LUCIDE ICON CONSISTENCY — uniform stroke + crisp rendering everywhere
   -------------------------------------------------------------------------- */
svg.lucide, [data-lucide] {
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* -----------------------------------------------------------------------------
   SPACING RHYTHM — intentional, generous whitespace on key primitives
   -------------------------------------------------------------------------- */
.page-header { margin-bottom: 28px; align-items: flex-end; gap: 20px; }
.page-header .lede { gap: 7px; }
.page-header .lede p { line-height: 1.5; max-width: 64ch; }

/* Section spacing between stacked cards / grids inside a page column */
.content > .card + .card,
.content > .table-wrap + .table-wrap,
.content > .kpi-cards + .card,
.content > .card + .table-wrap,
.content > .table-wrap + .card { margin-top: 18px; }

/* Card internal padding — comfortable, not cramped */
.card { padding: 22px 24px; }
.card.is-pad-sm { padding: 16px 18px; }
.card-head, .card-header { margin-bottom: 16px; }

/* Form field spacing inside modals/forms */
.modal-body .field + .field,
.modal-body .goal-form-grid + .field,
.modal-body .field + .goal-form-grid { margin-top: 16px; }
/* …but ONLY for vertically stacked fields. Side-by-side fields (two-column
   .row layouts and form grids) are also adjacent siblings, so without this
   reset every right-hand field sat 16px lower than its left partner in every
   modal. This must out-rank the rule above (same specificity, later = wins). */
.modal-body .row > .field + .field,
.modal-body .field-row > .field + .field,
.modal-body .field-row > .field,
.modal-body .goal-form-grid .field + .field,
.modal-body .deal-form-grid .field + .field,
.modal-body .brand-grid-2 .field + .field { margin-top: 0; }
.field .label, .label { margin-bottom: 7px; }

/* =============================================================================
   MOBILE / PWA — comprehensive responsive pass (<=920px primary breakpoint)
   ============================================================================= */

/* iOS safe-area: PWA shell respects notch / home-indicator insets. */
@supports (padding: env(safe-area-inset-top)) {
  .topbar { padding-top: max(12px, env(safe-area-inset-top)); }
  .sidebar { padding-left: max(12px, env(safe-area-inset-left)); }
}

@media (max-width: 920px) {
  @supports (padding: env(safe-area-inset-bottom)) {
    .content { padding-bottom: max(96px, calc(88px + env(safe-area-inset-bottom))); }
    .topbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  }

  /* --- Drawer sidebar: enter from off-canvas with safe-area + comfy width --- */
  .sidebar {
    width: min(82vw, 300px);
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  /* --- Hamburger always reachable, 44px touch target, brand-tinted --- */
  .menu-toggle { display: inline-flex !important; align-items: center; justify-content: center; }

  /* --- Content rhythm: tighter horizontal, generous vertical --- */
  .content { padding-left: 16px; padding-right: 16px; padding-top: 22px; }

  /* --- Page header: title + actions stack, actions go full-row & wrap --- */
  .page-header { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 22px; }
  .page-header .lede h1 { font-size: 24px; }
  .ph2 { flex-direction: column; align-items: stretch; gap: 14px; }
  .ph2-actions, .hero-actions { flex-wrap: wrap; }

  /* --- KPI rows: never squished. 1 col on phones, 2 on phablets --- */
  .kpi-cards { grid-template-columns: 1fr; gap: 14px; }

  /* --- 2-column grids collapse to 1 (beats inline grid-template-columns).
     minmax(0,1fr) not 1fr: the track must be able to shrink below the content's
     intrinsic width, or a wide table inside a scroll wrapper forces the page
     into horizontal scroll. --- */
  .grid-2,
  .grid-3,
  .field-row,
  .goal-form-grid,
  .deal-form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .grid-2 > [style*="grid-column"],
  .goal-form-grid > [style*="grid-column"] { grid-column: 1 / -1 !important; }

  /* --- Card padding eases on small screens --- */
  .card { padding: 18px 16px; }

  /* --- Tables: momentum horizontal scroll inside their card; no page blowout --- */
  .table-wrap, .card:has(> table.data), .card:has(> .table-wrap) {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  table.data th, table.data td { padding: 12px 14px; }

  /* --- Filter rows / segmented controls: scroll horizontally, no ragged wrap --- */
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg-btn { flex-shrink: 0; }
  .filter-pills { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .filter-pills::-webkit-scrollbar { display: none; }
  .filter-pill, .filter-pills > .pill { flex-shrink: 0; }

  /* --- Touch targets: comfortable 44px minimum on interactive controls --- */
  .btn { min-height: 44px; padding: 0 18px; }
  .btn-sm { min-height: 40px; }
  .icon-btn, .btn-icon { width: 44px; height: 44px; }
  .seg-btn { min-height: 38px; }
  .nav-item { min-height: 44px; }
  .input, .select, .textarea { font-size: 16px; }   /* >=16px stops iOS zoom-on-focus */
  .input, .select { min-height: 46px; }

  /* --- Modals: near-full-width, sticky safe-area footer, comfy padding --- */
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal {
    width: 100%; max-width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    animation: au-modal-sheet-in 280ms var(--au-ease);
  }
  .modal.modal-lg, .modal[class*="large"] { max-height: 94vh; }
  .modal-header { padding: 18px 18px 14px; position: sticky; top: 0; z-index: 2; background: var(--au-surface); }
  .modal-body { padding: 18px; }
  .modal-footer {
    position: sticky; bottom: 0; z-index: 2;
    padding: 14px 18px max(14px, env(safe-area-inset-bottom));
    display: flex; gap: 10px;
  }
  .modal-footer .btn { flex: 1; }
  @keyframes au-modal-sheet-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) { .modal { animation: none; } }

  /* --- Hero panel eases padding on phones --- */
  .hero { padding: 22px 18px 18px; border-radius: 18px; }
  .hero-lede h1 { font-size: clamp(24px, 7vw, 30px); }
}

/* Phablet band: give KPI cards 2 columns where width allows. */
@media (min-width: 560px) and (max-width: 920px) {
  .kpi-cards { grid-template-columns: 1fr 1fr; }
}

/* AURORA END */


/* =============================================================================
   STRIPE ELEVATION — 2026 "wow" pass. Loaded LAST so it wins.
   ----------------------------------------------------------------------------
   A Stripe-calibre refinement layered on top of Aurora Command. Two ideas:

   1) ONE vibrant moment — the .hero-band: a flowing, multi-stop teal MESH
      (analogous teal/aqua/cyan derived from the owner's brand accent via
      color-mix — never hardcoded) with subtle grain + a slow 18s drift. The
      page title sits in the band; KPI cards overlap DOWN into it as white
      cards. The gradient bleeds off the top/right edges. This is the wow.

   2) RESTRAINT EVERYWHERE ELSE — body becomes near-white / barely-tinted,
      colour rationed to the band, primary buttons, links, and status accents.
      Generous Stripe spacing, hairlines over borders, soft navy-tinted shadows,
      600-weight headings with negative tracking, tabular figures.

   Everything keys off --brand-primary/--brand-accent/--accent so the whole
   thing re-tints when the owner changes their brand colour. No HTML/JS logic
   changes — markup/class additions only.
   ============================================================================= */

:root {
  /* --- Stripe 8px spacing scale --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;

  /* --- Brand mesh stops: analogous teal / aqua / cyan, all derived from the
     owner's brand hue so the band re-tints with the brand. b1=primary teal,
     aqua=brand shifted brighter, cyan=brand shifted toward info/sky. --- */
  --sx-teal: var(--brand-primary, var(--accent));
  --sx-aqua: color-mix(in srgb, var(--brand-accent, var(--accent-strong)) 70%, #14E0C0 30%);
  --sx-cyan: color-mix(in srgb, var(--brand-accent, var(--accent-strong)) 58%, #28C8FF 42%);
  --sx-deep: var(--brand-deep, var(--accent-deep));
  --sx-mint: color-mix(in srgb, var(--brand-primary, var(--accent)) 64%, #5EEAD4 36%);

  /* --- Ink + slate (not pure black) --- */
  --sx-ink:   #0A2A2E;
  --sx-slate: #425466;
  --sx-hair:  #EBEEF1;

  /* --- Soft navy-tinted shadow scale (Stripe depth) --- */
  --sx-sh-sm: 0 1px 2px rgba(10,42,46,.06);
  --sx-sh-md: 0 2px 5px rgba(10,42,46,.07), 0 8px 16px -6px rgba(10,42,46,.10);
  --sx-sh-lg: 0 8px 24px -8px rgba(10,42,46,.14), 0 16px 48px -16px rgba(10,42,46,.18);
  --sx-sh-band: 0 18px 40px -18px color-mix(in srgb, var(--sx-teal) 50%, transparent),
                0 2px 8px rgba(10,42,46,.06);

  /* --- Motion --- */
  --sx-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Lighten the working canvas toward Stripe's barely-tinted white. */
[data-theme='light'] {
  --au-canvas: #F4FBFA;
  --au-surface: #FFFFFF;
  --au-surface-2: #F6FBFB;
  --au-hairline: var(--sx-hair);
  --sx-ink:   #0A2A2E;
  --sx-slate: #425466;
}
[data-theme='dark'] {
  --sx-ink:   #EAF2F2;
  --sx-slate: #9FB2B6;
  --sx-hair:  color-mix(in srgb, var(--border) 92%, transparent);
  --sx-sh-sm: 0 1px 2px rgba(0,0,0,.40);
  --sx-sh-md: 0 2px 6px rgba(0,0,0,.40), 0 12px 28px -10px rgba(0,0,0,.55);
  --sx-sh-lg: 0 10px 30px -10px rgba(0,0,0,.55), 0 24px 60px -20px rgba(0,0,0,.65);
  --sx-sh-band: 0 24px 60px -22px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
}

/* -----------------------------------------------------------------------------
   TYPOGRAPHY — Plus Jakarta Sans headings, 600 weight, negative tracking,
   tabular figures on all numbers. Body stays Inter.
   -------------------------------------------------------------------------- */
h1, h2, h3,
.hero-lede h1, .ph2-lede h1, .page-header .lede h1,
.hero-band-title, .kpi-value, .kpi-card-value, .stat-tile .stat-value,
.modal-header h2, .card-title, .tile-title {
  font-family: var(--brand-font-heading, 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif);
}
.hero-lede h1, .ph2-lede h1, .page-header .lede h1, .hero-band-title {
  font-weight: 600;
  letter-spacing: -0.022em;
}
.hero-band-display { letter-spacing: -0.028em; }
.kpi-value, .kpi-card-value, .stat-tile .stat-value,
.hero-kpi-value, .pace-ring-pct,
td.num, th.num, .tgt-vals, .seg-count, .kpi-band-value {
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
}
body { line-height: 1.6; color: var(--sx-slate); }
[data-theme='light'] body { color: var(--sx-slate); }
.page-header .lede h1, .ph2-lede h1, .hero-lede h1 { color: var(--text-primary); }

/* -----------------------------------------------------------------------------
   THE HERO BAND — the wow centrepiece. A flowing teal mesh that bleeds off the
   top + right edges of the content column, with a grain veil + slow drift.
   Usage:
     <section class="hero-band">
       <div class="hero-band-inner">
         <div class="hero-band-head"> title + actions </div>
         <div class="hero-band-kpis"> .kpi-band cards (overlap down) </div>
       </div>
     </section>
   The .content column has 32px side padding + 104px bottom; we pull the band out
   to the column edges (and a touch past the right) so the mesh bleeds.
   -------------------------------------------------------------------------- */
.hero-band {
  position: relative;
  isolation: isolate;
  margin: -32px -32px 28px;            /* bleed to content padding edges (top/L/R) */
  padding: 0;
  border-radius: 0 0 28px 28px;
  /* NO overflow:hidden here — it amputated the bottom of the KPI deck, which is
     DESIGNED to hang past the band's edge (negative margin). The oversized mesh
     is clipped by its own .hero-band-mesh layer instead (injected by router.js
     into every .hero-band; without it the band gracefully falls back to the
     base gradient + grain). */
  /* Base diagonal sweep — teal to deep, the "anchor" hue of the flow. */
  background:
    linear-gradient(118deg, var(--sx-teal) 0%, var(--sx-aqua) 40%, var(--sx-cyan) 72%, var(--sx-deep) 100%);
  box-shadow: var(--sx-sh-band);
}
/* Clipping layer for the oversized drifting mesh: fills the band, rounds like
   it, and hides everything that pokes outside — WITHOUT clipping the band's
   real content (the KPI cards). */
.hero-band-mesh {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
/* Drifting mesh blobs — the flowing motion + the dramatic colour variation.
   Layered radial blobs (bright mint/aqua highlights, a deep pocket) that slowly
   translate/scale so the mesh feels alive. This is what makes it read as a
   flowing Stripe mesh rather than a flat block. */
.hero-band-mesh::before {
  content: '';
  position: absolute;
  inset: -40% -25% -25% -25%;
  background:
    radial-gradient(40% 70% at 14% 16%, color-mix(in srgb, var(--sx-mint) 70%, #fff 30%) 0%, transparent 58%),
    radial-gradient(34% 56% at 92% 4%, color-mix(in srgb, var(--sx-cyan) 64%, #fff 36%) 0%, transparent 56%),
    radial-gradient(50% 80% at 70% 108%, color-mix(in srgb, var(--sx-deep) 88%, #000 12%) 0%, transparent 60%),
    radial-gradient(36% 60% at 50% 50%, color-mix(in srgb, var(--sx-aqua) 78%, #fff 22%) 0%, transparent 64%);
  filter: blur(10px) saturate(1.08);
  opacity: 0.95;
  animation: sx-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
/* Grain veil — fine SVG noise, very subtle, plus a soft top inner highlight.
   inset:0 + inherited radius = it self-clips to the band's rounded shape. */
.hero-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.16) 0%, transparent 22%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: auto, 160px 160px;
  opacity: 0.5;
  mix-blend-mode: soft-light;
}
@keyframes sx-drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-band-mesh::before { animation: none; }
}

.hero-band-inner {
  position: relative;
  z-index: 1;
  padding: 40px 32px 0;                 /* generous; KPI deck adds bottom space */
}
.hero-band-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.hero-band-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  margin-bottom: 10px;
}
.hero-band-eyebrow svg { width: 13px; height: 13px; }
.hero-band-title {
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.08;
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 16px rgba(10,42,46,0.18);
}
.hero-band-sub {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.88);
  max-width: 60ch;
}
.hero-band-actions { display: inline-flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; flex-wrap: wrap; }
/* On-band buttons: glassy white so they read against the mesh. */
.hero-band-actions .btn {
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, var(--sx-sh-sm);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero-band-actions .btn:hover {
  background: rgba(255,255,255,0.26);
  border-color: rgba(255,255,255,0.4);
  color: #fff; transform: translateY(-1px);
}
.hero-band-actions .btn-primary {
  background: #fff;
  /* The on-band primary is a WHITE pill in BOTH themes, so its label must be a
     fixed dark ink — using the theme-dependent --sx-ink made the text near-white
     (invisible) on the white pill in dark mode. */
  color: #0A2A2E;
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 8px 22px -8px rgba(10,42,46,0.4);
}
.hero-band-actions .btn-primary svg { color: #0A2A2E; }
.hero-band-actions .btn-primary:hover {
  background: #fff; color: #0A2A2E;
  filter: brightness(1.0); transform: translateY(-1.5px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 14px 30px -10px rgba(10,42,46,0.46);
}
.hero-band-actions .btn-primary::after { display: none; }

/* -----------------------------------------------------------------------------
   HERO-BAND TEXT CONTRAST GUARD (critical).
   The page markup nests the eyebrow/title/sub inside `.hero-lede`, so the
   generic `.hero-lede h1` / `.hero-lede p` rules (which set dark
   --text-primary / --text-secondary for normal page headers) were WINNING on
   specificity over `.hero-band-title` / `.hero-band-sub` and painting the band
   text DARK on the vibrant gradient (unreadable in light mode; dark mode only
   looked fine because --text-primary is light there). These higher-specificity,
   theme-agnostic rules force ALL on-band text + icons to white regardless of the
   brand gradient hue, with a subtle shadow for legibility. -------------------- */
.hero-band .hero-band-title,
.hero-band .hero-lede h1,
.hero-band h1.hero-band-title {
  color: #fff;
  -webkit-text-fill-color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.18), 0 1px 16px rgba(10,42,46,0.18);
}
.hero-band .hero-band-sub,
.hero-band .hero-lede p,
.hero-band p.hero-band-sub {
  color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 2px rgba(0,0,0,.16);
}
.hero-band .hero-band-eyebrow,
.hero-band .hero-band-eyebrow svg {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 2px rgba(0,0,0,.16);
}
/* Any stray text/meta/link/icon that sits directly on the gradient (i.e. not
   inside a white KPI card or the actions cluster) must read as light too. */
.hero-band-inner > .hero-band-head .hero-lede,
.hero-band-inner > .hero-band-head .hero-lede * {
  color: #fff;
}
.hero-band-inner > .hero-band-head .hero-lede svg { color: rgba(255,255,255,0.92); }
/* Dark theme keeps the same light-on-gradient treatment (gradient is brand-hued
   in both themes), so no per-theme override is needed — these win everywhere. */

/* KPI DECK — white cards overlapping DOWN into the band. They poke past the
   band's bottom edge, casting a soft large shadow, with a faint white inner
   top-border to catch the light. */
.hero-band-kpis {
  position: relative;
  z-index: 2;
  margin: 34px 0 -28px;                 /* negative bottom = overlap past band */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.kpi-band {
  position: relative;
  background: var(--au-surface);
  border: 1px solid var(--au-hairline);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 10px 24px -10px rgba(10,42,46,0.22),
    0 24px 60px -28px rgba(10,42,46,0.28);
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  transition: transform 180ms var(--sx-ease), box-shadow 180ms var(--sx-ease);
}
[data-theme='dark'] .kpi-band {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 30px -12px rgba(0,0,0,0.5),
    0 28px 64px -30px rgba(0,0,0,0.6);
}
.kpi-band:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 16px 32px -10px rgba(10,42,46,0.26),
    0 30px 70px -28px rgba(10,42,46,0.30);
}
[data-theme='dark'] .kpi-band:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 18px 38px -12px rgba(0,0,0,0.55),
    0 34px 74px -30px rgba(0,0,0,0.66);
}
.kpi-band-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kpi-band-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.kpi-band-chip {
  width: 34px; height: 34px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.kpi-band-chip svg { width: 17px; height: 17px; }
.kpi-band-value {
  font-family: 'Plus Jakarta Sans', var(--brand-font-heading, var(--font-sans));
  font-size: clamp(24px, 2vw, 30px); font-weight: 600; letter-spacing: -0.022em;
  line-height: 1.05; color: var(--text-primary);
}
.kpi-band-sub {
  font-size: 12.5px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

/* Give the band room below for the overlapping deck (when KPIs present). */
.hero-band:has(.hero-band-kpis) { padding-bottom: 0; }
.hero-band:has(.hero-band-kpis) + * { margin-top: 44px; }

/* Plain band (no KPI deck) just needs bottom padding inside. */
.hero-band-inner:not(:has(.hero-band-kpis)) { padding-bottom: 30px; }

@media (max-width: 1180px) {
  .hero-band-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .hero-band { margin: -22px -16px 24px; border-radius: 0 0 22px 22px; }
  .hero-band-inner { padding: 22px 16px 0; }
  .hero-band-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero-band-actions { flex-wrap: wrap; }
  .hero-band-kpis { grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: -26px; }
  .hero-band:has(.hero-band-kpis) + * { margin-top: 40px; }
}
@media (max-width: 480px) {
  .hero-band-kpis { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   RESTRAINT — reconcile the always-gradient KPI cards with Stripe calm.
   Secondary KPI cards (.kpi-card) that are NOT inside a hero band become clean
   white surfaces with a hairline + soft shadow and a tinted icon chip, instead
   of loud full gradients. The vibrant gradient is reserved for the hero band.
   We keep the .kpi-card markup intact (label/value/trend) and just restyle.
   -------------------------------------------------------------------------- */
.kpi-cards:not(.kpi-cards--vibrant) .kpi-card {
  background: var(--au-surface);
  color: var(--text-primary);
  border: 1px solid var(--au-hairline);
  box-shadow: var(--sx-sh-md);
}
.kpi-cards:not(.kpi-cards--vibrant) .kpi-card::before {
  /* drop the white/black radial overlays meant for gradient tiles */
  background: none;
}
/* A thin brand accent rail down the left edge keeps them lively but calm. */
.kpi-cards:not(.kpi-cards--vibrant) .kpi-card::after {
  content: '';
  position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--sx-teal), var(--sx-cyan));
  opacity: 0.9;
}
.kpi-cards:not(.kpi-cards--vibrant) .kpi-card { padding-left: 26px; }
.kpi-cards:not(.kpi-cards--vibrant) .kpi-card-label { color: var(--text-muted); }
.kpi-cards:not(.kpi-cards--vibrant) .kpi-card-value { color: var(--text-primary); }
.kpi-cards:not(.kpi-cards--vibrant) .kpi-card-trend { color: var(--text-secondary); }
.kpi-cards:not(.kpi-cards--vibrant) .kpi-card-chip {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.kpi-cards:not(.kpi-cards--vibrant) .kpi-trend-pill {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.kpi-cards:not(.kpi-cards--vibrant) .kpi-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--au-hairline));
  box-shadow: var(--sx-sh-lg);
}

/* -----------------------------------------------------------------------------
   SURFACES — hairlines over hard borders, softer navy-tinted shadows, 12px
   radius for cards. Applies to the calm body.
   -------------------------------------------------------------------------- */
.card, .tile, .table-wrap, .stat-tile {
  border-color: var(--sx-hair);
  box-shadow: var(--sx-sh-sm);
  border-radius: 14px;
}
.card.hoverable:hover, .tile.tile-hover:hover {
  box-shadow: var(--sx-sh-md);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--sx-hair));
}
.card { padding: var(--sp-6); }

/* -----------------------------------------------------------------------------
   TABLES — airy 50px rows, hairline dividers, no zebra, generous cell padding.
   -------------------------------------------------------------------------- */
table.data th, table.data td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--sx-hair);
}
table.data tbody tr { height: 52px; }
table.data thead th {
  background: var(--au-surface);
  border-bottom: 1px solid var(--sx-hair);
  color: var(--text-muted);
  letter-spacing: 0.08em;
}
[data-theme='dark'] table.data thead th { background: var(--au-surface); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }

/* -----------------------------------------------------------------------------
   BUTTONS — nudge primary toward the Stripe pill (fully rounded).
   -------------------------------------------------------------------------- */
.btn { border-radius: 999px; }
.btn-sm { border-radius: 999px; }
.btn-lg { border-radius: 999px; }
.icon-btn, .btn-icon, .btn.btn-icon { border-radius: 50%; }
.seg, .seg-btn, .filter-pills, .filter-pill { border-radius: 999px; }
.seg-btn, .filter-pill { border-radius: 999px; }

/* INPUTS — accent border + soft accent glow ring on focus (already close in
   Aurora; tighten the ring to .25 alpha per spec). */
.input:focus, .select:focus, .textarea:focus,
.search-input:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* -----------------------------------------------------------------------------
   LINKS / PAGE HEADER spacing — generous Stripe rhythm.
   -------------------------------------------------------------------------- */
.page-header { margin-bottom: var(--sp-8); }
.page-header .lede p { color: var(--text-secondary); line-height: 1.6; }

/* -----------------------------------------------------------------------------
   SCROLL REVEAL — opacity + translateY rise, opt-in via [data-reveal].
   Cheap; respects reduced motion. JS adds .is-in via IntersectionObserver if
   present, else the no-JS fallback keeps everything visible.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 360ms var(--sx-ease), transform 360ms var(--sx-ease); }
  [data-reveal].is-in { opacity: 1; transform: none; }
}

/* STRIPE ELEVATION END */


/* =============================================================================
   ICON CHIPS + PREMIUM BUTTONS — 2026 (Novo / Decision-Making admin polish)
   ----------------------------------------------------------------------------
   Loaded LAST so it wins. Two deliverables:
   1) .icon-chip — a soft tinted rounded square/circle holding a full-colour
      lucide icon. Used everywhere an anchor icon appears (stat cards, list/row
      leads, section headers, empty states). Tones derive from brand + semantic
      colours via color-mix (brand hue never hardcoded).
   2) Premium button family — primary/secondary/soft/ghost/danger all part of
      one tactile, modern-SaaS family; compact in-table action buttons; and a
      translucent "View" badge pill for the vibrant hero gradient cards.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   ICON CHIP — the single biggest premium upgrade. Soft tinted bg + solid icon.
   <span class="icon-chip tone-accent"><i data-lucide="dollar-sign"></i></span>
   -------------------------------------------------------------------------- */
.icon-chip {
  --chip: var(--accent);                 /* tone colour (overridden per variant) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 13px;                    /* soft rounded square */
  background: color-mix(in srgb, var(--chip) 14%, transparent);
  color: var(--chip);
  border: 1px solid color-mix(in srgb, var(--chip) 18%, transparent);
  transition: background 160ms var(--sx-ease), transform 160ms var(--sx-ease), border-color 160ms var(--sx-ease);
}
.icon-chip svg, .icon-chip [data-lucide] {
  width: 20px; height: 20px; stroke-width: 2;
  color: inherit;                        /* take the chip's tone, not a parent rule */
}
/* Beat .tile-title svg / .card-title svg accent override so chip tone wins. */
.tile-title .icon-chip svg, .card-title .icon-chip svg,
.sec-head .icon-chip svg, .kpi-band-top .icon-chip svg { color: inherit; }
.icon-chip.is-round { border-radius: 50%; }
.icon-chip.chip-sm { width: 34px; height: 34px; border-radius: 10px; }
.icon-chip.chip-sm svg { width: 16px; height: 16px; }
.icon-chip.chip-lg { width: 52px; height: 52px; border-radius: 16px; }
.icon-chip.chip-lg svg { width: 24px; height: 24px; }

/* Tone variants — brand-derived + semantic. Solid icon, soft tinted bg. */
.icon-chip.tone-accent, .icon-chip.tone-brand, .icon-chip.tone-teal { --chip: var(--accent); }
.icon-chip.tone-blue   { --chip: var(--accent-strong, #0190D5); }
.icon-chip.tone-green  { --chip: var(--green, #10B981); }
.icon-chip.tone-amber, .icon-chip.tone-gold { --chip: var(--amber, #F5B041); }
.icon-chip.tone-red    { --chip: var(--red, #EF4444); }
.icon-chip.tone-violet, .icon-chip.tone-purple { --chip: var(--purple, #8B5CF6); }
.icon-chip.tone-orange { --chip: var(--orange, #F97316); }
.icon-chip.tone-muted  { --chip: var(--text-muted); }

/* A chip that lives on a vibrant gradient hero card — glassy white instead. */
.kpi-card .icon-chip, .icon-chip.on-gradient {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.26);
  color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* Make the existing .kpi-card-chip and .kpi-band-chip share the chip language. */
.kpi-band-chip {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 12px;
}

/* Hover lift when the chip is inside an interactive row/card. */
a:hover > .icon-chip, .act:hover .icon-chip, tr:hover .icon-chip,
.hoverable:hover .icon-chip, [data-reveal]:hover > .icon-chip {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--chip) 20%, transparent);
}

/* -----------------------------------------------------------------------------
   STAT CARD (Novo top-row): clean white card, icon chip in corner, big tabular
   number + label. Reuse anywhere via .stat-card markup.
   -------------------------------------------------------------------------- */
.stat-card {
  background: var(--au-surface);
  border: 1px solid var(--sx-hair);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: var(--sx-sh-md);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 180ms var(--sx-ease), box-shadow 180ms var(--sx-ease), border-color 180ms var(--sx-ease);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sx-sh-lg);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--sx-hair));
}
.stat-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stat-card-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.stat-card-value {
  font-family: 'Plus Jakarta Sans', var(--brand-font-heading, var(--font-sans));
  font-size: clamp(26px, 2.1vw, 32px); font-weight: 600; letter-spacing: -0.022em;
  line-height: 1.05; color: var(--text-primary);
  font-variant-numeric: tabular-nums lining-nums;
}
.stat-card-sub { font-size: 12.5px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }

/* -----------------------------------------------------------------------------
   "VIEW" BADGE PILL — translucent pill in the corner of vibrant gradient cards
   (Novo Revenue/Sales/Visitors). Also a generic small ghost pill.
   -------------------------------------------------------------------------- */
.badge-view {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; letter-spacing: -0.005em;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.30);
  color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background 140ms var(--sx-ease), transform 140ms var(--sx-ease);
}
.badge-view:hover { background: rgba(255,255,255,0.30); transform: translateY(-1px); color: #fff; }
.badge-view svg { width: 12px; height: 12px; }

/* -----------------------------------------------------------------------------
   PREMIUM BUTTONS — refine the family. Crisp 600 label, aligned icon, soft
   brand-tinted depth, clean hover lift + press. Pill radius (Stripe) kept.
   The base / primary / danger / success language already lives in Aurora; here
   we add the SOFT secondary, refine ghost, and add compact table actions.
   -------------------------------------------------------------------------- */
/* SECONDARY default — soft white with hairline, light + clean (not flat grey).
   Overrides the Aurora gradient-surface secondary with a calmer Novo look. */
.btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-soft):not(.btn-ghost):not(.ghost):not(.icon-btn):not(.btn-icon) {
  background: var(--au-surface);
  border: 1px solid var(--sx-hair);
  color: var(--text-primary);
  box-shadow: var(--sx-sh-sm);
}
.btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-soft):not(.btn-ghost):not(.ghost):not(.icon-btn):not(.btn-icon):hover {
  background: var(--au-surface);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--sx-hair));
  box-shadow: var(--sx-sh-md);
  color: var(--accent);
  transform: translateY(-1px);
}
[data-theme='dark'] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-soft):not(.btn-ghost):not(.ghost):not(.icon-btn):not(.btn-icon) {
  background: color-mix(in srgb, var(--au-surface) 88%, #fff 6%);
  border-color: var(--border-strong);
}

/* SOFT — pastel-tinted brand pill (the friendly secondary). */
.btn-soft {
  background: color-mix(in srgb, var(--accent) 11%, var(--au-surface));
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: none;
}
.btn-soft:hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--au-surface));
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  transform: translateY(-1px);
}

/* GHOST — quiet until hover, then soft tinted. */
.btn-ghost, .btn.ghost { color: var(--text-secondary); }
.btn-ghost:hover, .btn.ghost:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}

/* COMPACT TABLE / ROW ACTIONS — the owner's #1 complaint. Tidy soft pills or
   icon-chip-style buttons instead of flat coloured rectangles.
   Any .btn-sm sitting in a table cell becomes a clean soft pill. */
table.data td .btn-sm,
.row-actions .btn-sm,
.table-actions .btn-sm {
  background: color-mix(in srgb, var(--accent) 10%, var(--au-surface));
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  box-shadow: none;
  font-weight: 600;
}
table.data td .btn-sm:hover,
.row-actions .btn-sm:hover,
.table-actions .btn-sm:hover {
  background: color-mix(in srgb, var(--accent) 18%, var(--au-surface));
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--accent);
  transform: translateY(-1px);
}
/* Keep semantic small buttons (success/danger) vivid even inside tables. */
table.data td .btn-sm.btn-primary, .row-actions .btn-sm.btn-primary { color: #fff; }
table.data td .btn-sm.btn-success, .row-actions .btn-sm.btn-success { color: #fff; }

/* COMPACT ICON ACTION — square soft-tinted icon button for row actions.
   <button class="btn-chip" data-...><i data-lucide="pencil"></i></button> */
.btn-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent); cursor: pointer;
  transition: background 140ms var(--sx-ease), transform 140ms var(--sx-ease), border-color 140ms var(--sx-ease), color 140ms var(--sx-ease);
}
.btn-chip svg { width: 16px; height: 16px; stroke-width: 2; }
.btn-chip:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateY(-1px);
}
.btn-chip.is-danger { background: color-mix(in srgb, var(--red) 10%, transparent); border-color: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.btn-chip.is-danger:hover { background: color-mix(in srgb, var(--red) 18%, transparent); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.btn-chip.is-muted { background: color-mix(in srgb, var(--text-muted) 10%, transparent); border-color: color-mix(in srgb, var(--text-muted) 18%, transparent); color: var(--text-secondary); }
.btn-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }

/* SECTION HEADER icon — give .sec-head / .card-title leading icons a chip feel
   when wrapped in .icon-chip; bare title-icon stays subtle. */
.sec-head .icon-chip, .card-header .icon-chip { margin-right: 10px; }

/* ICON CHIPS / BUTTONS on mobile keep 44px touch comfort where tappable. */
@media (max-width: 920px) {
  .btn-chip { width: 40px; height: 40px; }
}

/* -----------------------------------------------------------------------------
   THEME-SWATCH BUTTONS (Settings -> Appearance).
   These buttons carry a `data-theme="dark"` / `data-theme="light"` ATTRIBUTE,
   which collides with the app's `[data-theme='...']` theme selectors and scopes
   the opposite theme's surface vars INSIDE the button. The result: in light mode
   the inactive "Dark" swatch became a dark pill with dark (invisible) label, and
   vice-versa. The active swatch is `.btn-primary` (already legible). Force a
   readable label/icon on the inactive swatch regardless of the var collision.
   -------------------------------------------------------------------------- */
/* Match the same long :not() chain as the base secondary-button rule so these
   win on specificity (and being later in the cascade), beating the surface-var
   collision the data-theme attribute causes on the button itself. */
.btn[data-theme="dark"]:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-soft):not(.btn-ghost):not(.ghost):not(.icon-btn):not(.btn-icon) {
  background: #0F1828;
  border-color: color-mix(in srgb, #fff 16%, transparent);
  color: #EAF2F2;
}
.btn[data-theme="dark"]:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-soft):not(.btn-ghost):not(.ghost):not(.icon-btn):not(.btn-icon) svg { color: #EAF2F2; }
.btn[data-theme="dark"]:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-soft):not(.btn-ghost):not(.ghost):not(.icon-btn):not(.btn-icon):hover {
  background: #16223A;
  border-color: color-mix(in srgb, #fff 26%, transparent);
  color: #fff;
}
.btn[data-theme="light"]:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-soft):not(.btn-ghost):not(.ghost):not(.icon-btn):not(.btn-icon) {
  background: #FFFFFF;
  border-color: #E2E8F0;
  color: #0F172A;
}
.btn[data-theme="light"]:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-soft):not(.btn-ghost):not(.ghost):not(.icon-btn):not(.btn-icon) svg { color: #0F172A; }
.btn[data-theme="light"]:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-soft):not(.btn-ghost):not(.ghost):not(.icon-btn):not(.btn-icon):hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: #0F172A;
}

/* ICON CHIPS + PREMIUM BUTTONS END */

/* ==========================================================================
   PWA 2026 — mobile-native shell
   Bottom tab bar (phones), calmer install pill placement, view transitions.
   ========================================================================== */

/* Bottom tab bar: native-app primary nav for phones. Rendered by app.js
   (setupBottomTabs) with permission-aware tabs; CSS decides visibility. */
.bottom-tabs-app { display: none; }
@media (max-width: 920px) {
  .bottom-tabs-app {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface, #0F1828) 88%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid color-mix(in srgb, var(--text, #fff) 10%, transparent);
  }
  .bottom-tabs-app .btab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 44px;
    border: 0;
    background: none;
    color: var(--text-secondary, #94A3B8);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: 12px;
    cursor: pointer;
  }
  .bottom-tabs-app .btab svg { width: 21px; height: 21px; }
  .bottom-tabs-app .btab.active { color: var(--brand-primary, #00C0A5); }
  .bottom-tabs-app .btab:active { transform: scale(.94); }
  .bottom-tabs-app .btab-center {
    flex: 0 0 62px;
    margin-top: -18px;
  }
  .bottom-tabs-app .btab-center svg {
    width: 26px; height: 26px;
    padding: 12px;
    box-sizing: content-box;
    border-radius: 50%;
    color: #fff;
    background: var(--brand-accent-gradient, linear-gradient(135deg, #00C0A5, #0190D5));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-primary, #00C0A5) 45%, transparent);
  }
  /* Keep page content, FABs and pills clear of the bar. */
  body:has(.bottom-tabs-app) .content { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body:has(.bottom-tabs-app) .chat-fab { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  body:has(.bottom-tabs-app) .pwa-install-pill,
  body:has(.bottom-tabs-app) .pwa-update-pill { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  /* The tab bar replaces itself when the drawer or chat is fullscreen. */
  .l8-chat-app .bottom-tabs-app { display: none; }
}

/* Touch targets: on coarse pointers every small button still reaches 44px. */
@media (pointer: coarse) and (max-width: 920px) {
  .btn-sm { min-height: 44px; }
  .tb-hamburger { width: 44px; height: 44px; }
}

/* Soft cross-fade between routes (View Transitions API; no-op elsewhere). */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: l8-vt-out 140ms ease both; }
  ::view-transition-new(root) { animation: l8-vt-in 180ms ease both; }
  @keyframes l8-vt-out { to { opacity: 0; } }
  @keyframes l8-vt-in { from { opacity: 0; transform: translateY(4px); } }
}