/*
 * Cronsure design system — "Precision — Refined."
 *
 * Status: LOCKED. Source of truth: docs/design/DESIGN.md (tokens/components)
 * and docs/design/concepts/direction-1-refined.html (the approved visual
 * reference this file is ported from verbatim). Do not invent new values —
 * update DESIGN.md and the concept file together first.
 *
 * Infra-grade, developer-premium. Dark-primary UI with one sharp signal-blue
 * accent, a secondary violet accent, and category hues (blue/teal/violet/
 * amber) used for data, never decoration. Two color systems that never
 * overlap: semantic health colors (ok/failing/degraded/running/disabled)
 * answer "how is it doing?"; category hues answer "what kind of thing is
 * this?". Health signal is always icon + text + color — never color alone.
 */

/* ---------- 1. TOKENS ---------- */
:root{
  /* type */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --text-xs: 0.6875rem;   /* 11px — eyebrows, micro labels */
  --text-sm: 0.8125rem;   /* 13px — secondary UI text */
  --text-base: 0.875rem;  /* 14px — default UI text */
  --text-md: 1rem;        /* 16px — body / marketing */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.375rem;    /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.5rem;     /* 40px */
  --text-display: 3.75rem;/* 60px */

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  --leading-tight: 1.12;
  --leading-snug: 1.32;
  --leading-normal: 1.5;
  --leading-relaxed: 1.68;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;

  /* spacing scale (4px base) */
  --space-05: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* radii — deliberately tight, not soft/consumer-rounded */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* layout */
  --container-marketing: 1180px;
  --container-app: 1360px;
  --topbar-h: 64px;
  --container-narrow: 760px;
  --sidebar-w: 232px;

  /* motion */
  --ease: cubic-bezier(.16,1,.3,1);
  --dur-fast: 110ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;

  /* z-index */
  --z-toolbar: 500;
  --z-dropdown: 400;
  --z-toast: 600;
}

/* ---- DARK (default / primary theme) ---- */
:root, :root[data-theme="dark"]{
  color-scheme: dark;
  --bg: #0a0c11;
  --bg-elevated: #10131a;
  --surface: #12151c;
  --surface-2: #171b23;
  --surface-3: #1d222c;
  --surface-hover: #1a1e27;
  --border: #242a34;
  --border-strong: #333a46;
  --text: #e8eaef;
  --text-secondary: #9aa1ae;
  --text-tertiary: #666e7c;
  --text-on-accent: #ffffff;

  --accent: #3b6ef6;
  --accent-hover: #5b87ff;
  --accent-active: #2e5ad9;
  --accent-text: #7fa0ff;
  --accent-soft-bg: rgba(59,110,246,0.14);
  --accent-soft-border: rgba(59,110,246,0.36);

  /* secondary brand accent — violet. Used for secondary highlights, active
     states and data-viz alongside signal-blue. Deliberately NOT teal/amber
     so it never reads as a health-semantic color. */
  --accent2: #8f7cf6;
  --accent2-hover: #a695ff;
  --accent2-active: #7563e0;
  --accent2-text: #b3a4ff;
  --accent2-soft-bg: rgba(143,124,246,0.14);
  --accent2-soft-border: rgba(143,124,246,0.36);
  --accent2-glow: rgba(143,124,246,0.10);

  /* category / data-viz accents — for distinguishing kinds of activity
     (stat tiles, sparklines, list-row cues). Deliberately distinct hues
     from the 5 semantic health colors below so status and category never
     get confused. cat-blue = --accent, cat-violet = --accent2. */
  --cat-blue-solid: var(--accent);
  --cat-blue-soft-bg: var(--accent-soft-bg);
  --cat-blue-soft-border: var(--accent-soft-border);
  --cat-blue-text: var(--accent-text);

  --cat-teal-solid: #22c3e6;
  --cat-teal-soft-bg: rgba(34,195,230,0.14);
  --cat-teal-soft-border: rgba(34,195,230,0.36);
  --cat-teal-text: #6fdcf5;

  --cat-violet-solid: var(--accent2);
  --cat-violet-soft-bg: var(--accent2-soft-bg);
  --cat-violet-soft-border: var(--accent2-soft-border);
  --cat-violet-text: var(--accent2-text);

  --cat-amber-solid: #e0a53c;
  --cat-amber-soft-bg: rgba(224,165,60,0.14);
  --cat-amber-soft-border: rgba(224,165,60,0.34);
  --cat-amber-text: #f0c274;

  --ok-solid: #34d399;
  --ok-soft-bg: rgba(52,211,153,0.13);
  --ok-soft-border: rgba(52,211,153,0.32);
  --ok-soft-text: #5fe3b4;

  --failing-solid: #f77066;
  --failing-soft-bg: rgba(247,112,102,0.14);
  --failing-soft-border: rgba(247,112,102,0.36);
  --failing-soft-text: #ff9089;

  --degraded-solid: #f5b03f;
  --degraded-soft-bg: rgba(245,176,63,0.14);
  --degraded-soft-border: rgba(245,176,63,0.34);
  --degraded-soft-text: #f8c46a;

  --running-solid: #2dd4bf;
  --running-soft-bg: rgba(45,212,191,0.14);
  --running-soft-border: rgba(45,212,191,0.34);
  --running-soft-text: #5fe6d4;

  --disabled-solid: #8b93a1;
  --disabled-soft-bg: rgba(139,147,161,0.13);
  --disabled-soft-border: rgba(139,147,161,0.28);
  --disabled-soft-text: #a4abb7;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  --grid-line: rgba(255,255,255,0.035);
}

/* ---- LIGHT ---- */
:root[data-theme="light"]{
  color-scheme: light;
  --bg: #f5f6fb;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f2f8;
  --surface-3: #e9ebf3;
  --surface-hover: #edeff6;
  --border: #e1e3ec;
  --border-strong: #ccd0dc;
  --text: #13151a;
  --text-secondary: #565b66;
  --text-tertiary: #878d99;
  --text-on-accent: #ffffff;

  --accent: #2952d9;
  --accent-hover: #1f42bd;
  --accent-active: #1a3799;
  --accent-text: #2952d9;
  --accent-soft-bg: rgba(41,82,217,0.10);
  --accent-soft-border: rgba(41,82,217,0.30);

  /* secondary brand accent — violet */
  --accent2: #6d3fd6;
  --accent2-hover: #5c33bd;
  --accent2-active: #4d2aa1;
  --accent2-text: #6d3fd6;
  --accent2-soft-bg: rgba(109,63,214,0.10);
  --accent2-soft-border: rgba(109,63,214,0.30);
  --accent2-glow: rgba(109,63,214,0.06);

  /* category / data-viz accents — see dark-theme block for rationale.
     NOTE (QA pass, DESIGN.md §7): soft-bg alphas were bumped from the
     original 7-8% and cat-teal/cat-amber's soft-text darkened further —
     those two were flagged as the worst light-mode contrast offenders.
     Verified: soft-text-on-(soft-bg-over-white) now sits at ~5.4:1-7.7:1,
     comfortably above WCAG AA's 4.5:1 for small text (was ~5.6-6.2:1
     before, a thinner margin, with the boldest gains going to teal/amber). */
  --cat-blue-solid: var(--accent);
  --cat-blue-soft-bg: var(--accent-soft-bg);
  --cat-blue-soft-border: var(--accent-soft-border);
  --cat-blue-text: var(--accent-text);

  --cat-teal-solid: #0e7f97;
  --cat-teal-soft-bg: rgba(14,127,151,0.13);
  --cat-teal-soft-border: rgba(14,127,151,0.32);
  --cat-teal-text: #084f5e;

  --cat-violet-solid: var(--accent2);
  --cat-violet-soft-bg: var(--accent2-soft-bg);
  --cat-violet-soft-border: var(--accent2-soft-border);
  --cat-violet-text: var(--accent2-text);

  --cat-amber-solid: #9c6510;
  --cat-amber-soft-bg: rgba(156,101,16,0.13);
  --cat-amber-soft-border: rgba(156,101,16,0.32);
  --cat-amber-text: #6b4406;

  --ok-solid: #17835a;
  --ok-soft-bg: rgba(23,131,90,0.12);
  --ok-soft-border: rgba(23,131,90,0.30);
  --ok-soft-text: #146849;

  --failing-solid: #c22a1f;
  --failing-soft-bg: rgba(194,42,31,0.11);
  --failing-soft-border: rgba(194,42,31,0.28);
  --failing-soft-text: #a3241a;

  --degraded-solid: #a15a06;
  --degraded-soft-bg: rgba(161,90,6,0.13);
  --degraded-soft-border: rgba(161,90,6,0.30);
  --degraded-soft-text: #8a4c05;

  --running-solid: #0f7d70;
  --running-soft-bg: rgba(15,125,112,0.13);
  --running-soft-border: rgba(15,125,112,0.30);
  --running-soft-text: #0c665b;

  --disabled-solid: #666d79;
  --disabled-soft-bg: rgba(102,109,121,0.10);
  --disabled-soft-border: rgba(102,109,121,0.26);
  --disabled-soft-text: #565c66;

  --shadow-sm: 0 1px 2px rgba(20,22,28,.05);
  --shadow-md: 0 6px 20px rgba(20,22,28,.08), 0 1px 3px rgba(20,22,28,.06);
  --shadow-lg: 0 20px 48px rgba(20,22,28,.12), 0 2px 8px rgba(20,22,28,.06);
  --grid-line: rgba(20,22,28,0.035);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin:0; background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: var(--text-base);
  line-height: var(--leading-normal); -webkit-font-smoothing: antialiased;
  overflow-x: hidden; width: 100%;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
h1,h2,h3,h4,p,figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; }
a{ color: inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
table{ border-collapse: collapse; width:100%; }
input,select,textarea,button{ font-size: 100%; color: inherit; }
::selection{ background: var(--accent-soft-bg); color: var(--text); }

:focus{ outline:none; }
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.icon{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.mono{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.visually-hidden{ position:absolute!important; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.text-secondary{ color: var(--text-secondary); }
.text-tertiary{ color: var(--text-tertiary); }

/* inline validation error summary at the top of a form (distinct from the
   toast-region flash — this one lists field errors, doesn't auto-dismiss) */
.flash{ padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: var(--leading-snug); margin-bottom: var(--space-5); border:1px solid; }
.flash ul{ margin: 6px 0 0 18px; }
.flash-alert{ background: var(--failing-soft-bg); border-color: var(--failing-soft-border); color: var(--failing-soft-text); }
.flash-notice{ background: var(--ok-soft-bg); border-color: var(--ok-soft-border); color: var(--ok-soft-text); }
.flash-warn{ background: var(--degraded-soft-bg); border-color: var(--degraded-soft-border); color: var(--degraded-soft-text); }
.flash-warn a{ color: inherit; text-decoration: underline; }

/* fine dot-grid texture — signature "precision" backdrop, used sparingly */
.grid-texture{
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* corner-bracket "instrument readout" motif — signature detail of this direction */
.brackets{ position:relative; }
.brackets::before,.brackets::after{
  content:""; position:absolute; width:10px; height:10px; pointer-events:none;
  border-color: var(--border-strong); transition: border-color var(--dur-base) var(--ease);
}
.brackets::before{ top:-1px; left:-1px; border-top:1.5px solid; border-left:1.5px solid; border-top-left-radius:3px; }
.brackets::after{ bottom:-1px; right:-1px; border-bottom:1.5px solid; border-right:1.5px solid; border-bottom-right-radius:3px; }
.brackets:hover::before,.brackets:hover::after{ border-color: var(--accent); }

/* ---------- 3. THEME TOGGLE (§5.15) ---------- */
.theme-toggle{
  display:flex; align-items:center; gap:6px; appearance:none; cursor:pointer;
  background: var(--surface-2); border:1px solid var(--border); color: var(--text-secondary);
  padding: 6px 10px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight:var(--w-medium);
  transition: all var(--dur-fast) var(--ease); flex-shrink:0;
}
.theme-toggle:hover{ color:var(--text); border-color: var(--border-strong); }
.theme-toggle .icon{ width:14px; height:14px; }

/* ---------- 4. PRIMITIVES: buttons, inputs, badges, chips ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-size: var(--text-sm); font-weight: var(--w-medium); line-height:1;
  padding: 9px 14px; border-radius: var(--radius-md); border:1px solid transparent;
  cursor:pointer; white-space:nowrap; transition: all var(--dur-fast) var(--ease);
}
.btn .icon{ width:15px; height:15px; }
.btn-primary{ background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.btn-primary:hover{ background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:active{ background: var(--accent-active); }
.btn-secondary{ background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-secondary:hover{ background: var(--surface-hover); border-color: var(--border-strong); }
.btn-ghost{ background: transparent; color: var(--text-secondary); }
.btn-ghost:hover{ background: var(--surface-hover); color: var(--text); }
.btn-danger{ background: transparent; color: var(--failing-solid); border-color: var(--failing-soft-border); }
.btn-danger:hover{ background: var(--failing-soft-bg); }
.btn-lg{ padding: 12px 22px; font-size: var(--text-base); border-radius: var(--radius-md); }
.btn-sm{ padding: 6px 10px; font-size: var(--text-xs); }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.row-actions{ display:flex; gap:var(--space-2); justify-content:flex-end; }

.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field label{ font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--text); display:flex; align-items:center; gap:6px;}
.field .hint{ font-size: var(--text-xs); color: var(--text-tertiary); }
.field.has-error .input, .field.has-error .select{ border-color: var(--failing-soft-border); }
.field.has-error .hint{ color: var(--failing-soft-text); }
.field-error{ font-size: var(--text-xs); color: var(--failing-soft-text); margin:0; }
.inline-form{ display:inline; margin:0; }
.input, .select{
  width:100%; background: var(--surface-2); border:1px solid var(--border); color: var(--text);
  padding: 9px 11px; border-radius: var(--radius-md); font-size: var(--text-sm);
  transition: all var(--dur-fast) var(--ease);
}
.input::placeholder{ color: var(--text-tertiary); }
.input:hover, .select:hover{ border-color: var(--border-strong); }
.input:focus, .select:focus{ border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft-bg); }
.input-mono{ font-family: var(--font-mono); }
.input-group{ display:flex; }
.input-group .select{ flex:0 0 auto; width:auto; border-top-right-radius:0; border-bottom-right-radius:0; border-right:none; }
.input-group .input{ border-top-left-radius:0; border-bottom-left-radius:0; }

.switch{ position:relative; display:inline-flex; width:36px; height:21px; flex-shrink:0; border:none; background:none; padding:0; cursor:pointer; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch .track{ position:absolute; inset:0; background: var(--surface-3); border:1px solid var(--border-strong); border-radius: var(--radius-full); transition: all var(--dur-base) var(--ease); }
.switch .thumb{ position:absolute; top:2px; left:2px; width:15px; height:15px; background: var(--text-tertiary); border-radius:50%; transition: all var(--dur-base) var(--ease); }
.switch input:checked + .track{ background: var(--accent-soft-bg); border-color: var(--accent); }
.switch input:checked + .track .thumb{ transform: translateX(15px); background: var(--accent); }
.switch input:focus-visible + .track{ outline:2px solid var(--accent); outline-offset:2px; }
/* jobs/monitors "enabled" toggle submits via a plain form button (server
   round-trip, no client-side JS state) rather than a checkbox input, so it
   reads its own aria-checked attribute instead of relying on :checked. */
.switch[aria-checked="true"] .track{ background: var(--accent-soft-bg); border-color: var(--accent); }
.switch[aria-checked="true"] .thumb{ transform: translateX(15px); background: var(--accent); }
.switch:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.checkbox-row{ display:flex; align-items:center; gap:9px; font-size: var(--text-sm); color: var(--text); cursor:pointer; }
.checkbox-row input{ width:16px; height:16px; accent-color: var(--accent); }

/* health badge — icon + text + color, never color alone */
.badge{
  display:inline-flex; align-items:center; gap:6px; font-size: var(--text-xs); font-weight: var(--w-semibold);
  padding: 4px 9px; border-radius: var(--radius-full); border:1px solid transparent; letter-spacing: 0.01em;
}
.badge .icon{ width:12px; height:12px; }
.badge-ok{ background: var(--ok-soft-bg); color: var(--ok-soft-text); border-color: var(--ok-soft-border); }
.badge-failing{ background: var(--failing-soft-bg); color: var(--failing-soft-text); border-color: var(--failing-soft-border); }
.badge-degraded{ background: var(--degraded-soft-bg); color: var(--degraded-soft-text); border-color: var(--degraded-soft-border); }
.badge-running{ background: var(--running-soft-bg); color: var(--running-soft-text); border-color: var(--running-soft-border); }
.badge-disabled{ background: var(--disabled-soft-bg); color: var(--disabled-soft-text); border-color: var(--disabled-soft-border); }
.badge-solid{ color:#fff; border-color: transparent; }
.badge-solid.badge-ok{ background: var(--ok-solid); color:#04150e;}
.badge-solid.badge-failing{ background: var(--failing-solid); color:#210503;}
.badge-solid.badge-degraded{ background: var(--degraded-solid); color:#221200;}

.dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; display:inline-block; }
.dot-ok{ background: var(--ok-solid); }
.dot-failing{ background: var(--failing-solid); }
.dot-degraded{ background: var(--degraded-solid); }
.dot-running{ background: var(--running-solid); box-shadow:0 0 0 0 var(--running-soft-border); animation: pulse-ring 1.8s var(--ease) infinite; }
.dot-disabled{ background: var(--disabled-solid); }
@keyframes pulse-ring{
  0%{ box-shadow:0 0 0 0 var(--running-soft-border); }
  70%{ box-shadow:0 0 0 6px rgba(45,212,191,0); }
  100%{ box-shadow:0 0 0 0 rgba(45,212,191,0); }
}

.chip{
  display:inline-flex; align-items:center; gap:6px; font-size: var(--text-sm); font-weight: var(--w-medium);
  padding: 7px 12px; border-radius: var(--radius-md); border:1px solid var(--border); background: var(--surface-2);
  color: var(--text-secondary); cursor:pointer; transition: all var(--dur-fast) var(--ease);
}
.chip:hover{ border-color: var(--border-strong); color: var(--text); }
.chip[aria-pressed="true"]{ background: var(--accent-soft-bg); border-color: var(--accent-soft-border); color: var(--accent-text); }
.chip .mono{ font-size: var(--text-xs); }

.card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); min-width:0; }
.panel-title{ display:flex; align-items:center; justify-content:space-between; padding: var(--space-4) var(--space-5); border-bottom:1px solid var(--border); }
.panel-title h3{ font-size: var(--text-sm); font-weight: var(--w-semibold); }
.panel-title .count{ font-family: var(--font-mono); color: var(--text-tertiary); font-size: var(--text-xs); }

/* Numbered pagination footer for the full run-history page. */
.pager{ padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); }
.pager__pages{ display:flex; align-items:center; gap: 6px; flex-wrap:wrap; font-size: var(--text-sm); }
.pager__page, .pager__step{ display:inline-flex; align-items:center; justify-content:center; min-width: 30px; height: 30px;
  padding: 0 8px; border:1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary);
  font-family: var(--font-mono); text-decoration:none; }
.pager__page:hover, .pager__step:hover{ border-color: var(--border-strong); color: var(--text-primary); }
.pager__page.is-current{ background: var(--accent-soft-bg, var(--degraded-soft-bg)); border-color: var(--signal, var(--accent)); color: var(--text-primary); font-weight: var(--w-semibold); }
.pager__step.is-disabled{ opacity: .4; pointer-events:none; }
.pager__gap{ color: var(--text-tertiary); padding: 0 2px; }
.pager__note{ margin: var(--space-3) 0 0; font-size: var(--text-xs); }

/* Day separator inside the run-history table — a subtle sticky-ish header row
   that repeats only when the calendar day changes. */
.data-table tr.run-day-sep td{ padding:6px var(--space-4); background:var(--surface-sunken, var(--surface));
  color:var(--text-tertiary); font-size:var(--text-xs); font-weight:var(--w-semibold);
  text-transform:uppercase; letter-spacing:var(--tracking-wider); border-top:1px solid var(--border); }

/* Searchable timezone combobox (timezone-select controller enhances a <select>). */
.tz-combobox{ position:relative; }
.tz-combobox__list{ position:absolute; z-index:40; top:calc(100% + 4px); left:0; right:0; margin:0; padding:4px;
  list-style:none; max-height:280px; overflow-y:auto; background:var(--surface-raised, var(--surface));
  border:1px solid var(--border-strong, var(--border)); border-radius:var(--radius-md);
  box-shadow:0 12px 32px rgba(0,0,0,.28); }
.tz-combobox__option{ padding:8px 10px; border-radius:var(--radius-sm); font-family:var(--font-mono);
  font-size:var(--text-sm); color:var(--text-secondary); cursor:pointer; white-space:nowrap; }
.tz-combobox__option.is-active{ background:var(--degraded-soft-bg); color:var(--text-primary); }
.tz-combobox__empty{ padding:10px; color:var(--text-tertiary); font-size:var(--text-sm); }

/* Audit-page day stepper: prev/next + jump-to-date. */
.date-nav{ display:flex; align-items:center; gap: var(--space-3); flex-wrap:wrap; margin-bottom: var(--space-5); }
.date-nav__form{ display:flex; align-items:center; gap: var(--space-2); }
.date-nav .is-disabled{ opacity: .4; pointer-events:none; }

.tooltip-label{ font-size: var(--text-xs); text-transform:uppercase; letter-spacing: var(--tracking-wider); color: var(--text-tertiary); font-weight: var(--w-semibold); }

/* primary-column emphasis for table rows (job/monitor/token/user name) —
   used across jobs, monitors, api_tokens and settings tables; was missing
   from the stylesheet so names rendered unstyled instead of standing out
   from the muted secondary columns next to them. */
.cell-strong{ font-weight: var(--w-medium); color: var(--text); }

/* skeleton / loading state */
.skeleton{ position:relative; overflow:hidden; background: var(--surface-3); border-radius: var(--radius-sm); }
.skeleton::after{
  content:""; position:absolute; inset:0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: shimmer 1.6s infinite;
}
:root[data-theme="light"] .skeleton::after{ background: linear-gradient(90deg, transparent, rgba(20,22,28,.05), transparent); }
@keyframes shimmer{ 100%{ transform: translateX(100%); } }

/* toast */
.toast-region{ position: fixed; bottom: 20px; right:20px; z-index: var(--z-toast); display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.toast{
  display:flex; align-items:center; gap:9px; background: var(--surface-3); border:1px solid var(--border-strong);
  color: var(--text); padding: 10px 14px; border-radius: var(--radius-md); font-size: var(--text-sm); box-shadow: var(--shadow-lg);
  animation: toast-in var(--dur-slow) var(--ease);
}
.toast .icon{ color: var(--ok-solid); width:16px;height:16px; }
@keyframes toast-in{ from{ opacity:0; transform: translateY(8px) scale(.98);} to{ opacity:1; transform:none; } }

/* sparkline */
.sparkline{ display:block; }
.sparkline path.line{ fill:none; stroke: var(--ok-solid); stroke-width:1.6; }
.sparkline path.area{ fill: var(--ok-solid); opacity:.09; }

/* collapsible / progressive disclosure */
details.disclosure{ border:1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); overflow:hidden; }
details.disclosure > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px; font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--text);
}
details.disclosure > summary::-webkit-details-marker{ display:none; }
details.disclosure > summary .chevron{ transition: transform var(--dur-base) var(--ease); color: var(--text-tertiary); width:15px; height:15px; }
details.disclosure[open] > summary .chevron{ transform: rotate(180deg); }
details.disclosure .disclosure-body{ padding: 0 14px 16px; border-top:1px solid var(--border); padding-top:14px; }

.code-block{
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary);
  padding: 13px 14px; overflow-x:auto; position:relative; line-height:var(--leading-relaxed);
  white-space: pre; tab-size: 2;
}
.code-block .k{ color: var(--accent-text); }
.code-block .s{ color: var(--ok-soft-text); }

.table-wrap{ overflow-x:auto; border-radius: var(--radius-lg); border:1px solid var(--border); }
table.data-table{ min-width: 720px; }
table.data-table th{
  text-align:left; font-size: var(--text-xs); text-transform:uppercase; letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary); font-weight: var(--w-semibold); padding: 10px 16px; background: var(--surface-2);
  border-bottom: 1px solid var(--border); position: sticky; top:0; white-space:nowrap;
}
table.data-table td{ padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: var(--text-sm); white-space:nowrap; }
table.data-table tbody tr{ transition: background var(--dur-fast) var(--ease); cursor:default; }
table.data-table tbody tr:hover{ background: var(--surface-hover); }
table.data-table tbody tr:last-child td{ border-bottom:none; }
table.data-table tbody tr.is-clickable{ cursor:pointer; }

/* ---------- 5. LAYOUT: marketing nav / app shell ---------- */
.container{ max-width: var(--container-marketing); margin:0 auto; padding: 0 var(--space-6); }
.container-app{ max-width: var(--container-app); margin:0 auto; padding: 0 var(--space-6); }

.mkt-nav{ position:sticky; top:0; z-index:50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom:1px solid var(--border); }
.mkt-nav__inner{ display:flex; align-items:center; gap: var(--space-8); padding: var(--space-4) 0; }
.brand{ display:flex; align-items:center; gap:9px; font-weight: var(--w-semibold); font-size: var(--text-md); letter-spacing: var(--tracking-tight); }
.brand-mark{ width:26px; height:26px; color: var(--accent); }
/* Response-check config rows (job form) + result display (execution history). */
.check-row{ display:flex; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap:wrap; }
.check-row .input{ flex:1; min-width:130px; }
.check-row .select{ flex:0 0 auto; }
/* Create/edit job — smart single-page cards */
.form-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4); }
.form-card__title{ font-size: var(--text-md); font-weight: var(--w-semibold); letter-spacing: -.01em; margin: 0 0 var(--space-1); }
.form-card__hint{ color: var(--text-secondary); font-size: var(--text-sm); margin: 0 0 var(--space-4); }
.form-card--accent{ border-color: var(--accent-soft-border); }
.form-card--details{ padding: 0; }
.form-card--details > summary{ padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; color: var(--text-secondary); }
.form-card--details > summary::-webkit-details-marker{ display: none; }
.form-card--details[open] > summary{ color: var(--text); }
.form-card__body{ padding: 0 var(--space-5) var(--space-5); }
.rule-group{ display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-5); }
.rule__lead{ display: block; font-weight: var(--w-semibold); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.rule__row{ display: flex; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap: wrap; }
.rule__row .select{ flex: 1; min-width: 130px; }
.rule__row .input{ flex: 1; min-width: 100px; }
.rule__note{ color: var(--text-tertiary); font-size: var(--text-xs); margin: var(--space-1) 0 0; }
.btn-test{ background: var(--accent-soft-bg); border:1px solid var(--accent-soft-border); color: var(--accent-text); }
.pill{ display:inline-flex; gap:6px; align-items:center; background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-full); padding:3px 10px; font-size: var(--text-xs); }
.pill .v{ color: var(--text-tertiary); font-family: var(--font-mono); max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.test-bar{ display:flex; align-items:center; gap: var(--space-3); margin-bottom: var(--space-3); }
.test-status{ font-size: var(--text-sm); }
.test-fields{ display:flex; flex-wrap:wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.test-fields:empty{ display:none; }
.field-pill{ cursor:pointer; background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-full); padding:3px 10px; font-size: var(--text-xs); display:inline-flex; gap:6px; align-items:center; font-family:inherit; color: var(--text); }
.field-pill:hover{ border-color: var(--accent); background: var(--surface-hover); }
.field-pill .fv{ color: var(--text-tertiary); max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.extract-chip{ font-size: var(--text-xs); margin-right: var(--space-3); white-space:nowrap; }
.data-table tbody tr.is-idle > td{ opacity: .48; }
.data-table tbody tr.is-idle:hover > td{ opacity: .72; }
.filter-active{ font-weight: var(--w-semibold); color: var(--accent-text); }

/* Execution response/error body in the expanded run row. */
.response-excerpt{ font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin: var(--space-1) 0 var(--space-3); max-height: 200px; overflow: auto; white-space: pre-wrap; word-break: break-word; }

/* Cronsure brand logo — gradient clock in a rounded tile (matches the favicon). */
.brand-logo{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:7px; background:linear-gradient(150deg, var(--accent), var(--accent2)); flex:none; box-shadow: var(--shadow-sm); }
.brand-logo svg{ width:15px; height:15px; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.mkt-nav__links{ display:flex; gap: var(--space-6); font-size: var(--text-sm); color: var(--text-secondary); }
.mkt-nav__links a{ transition: color var(--dur-fast) var(--ease); padding: 6px 0; }
.mkt-nav__links a:hover{ color: var(--text); }
.mkt-nav__actions{ margin-left:auto; display:flex; align-items:center; gap:12px; }

/* app shell — full-width top bar (alternative to sidebar+inset-topbar) */
.app-shell{ display:flex; flex-direction:column; min-height: 100vh; }

/* Admin "view as user" banner — full-bleed warning strip above everything. */
.impersonation-banner{ display:flex; align-items:center; gap: var(--space-3); padding: 10px var(--space-5);
  background: var(--warn-surface, #7c2d12); color: var(--warn-text, #fff);
  font-size: var(--text-sm); font-weight: var(--w-medium); }
.impersonation-banner .icon{ width:18px; height:18px; flex:none; }
.impersonation-banner strong{ font-weight: var(--w-semibold); }
.impersonation-banner__exit,
.impersonation-banner__action{ background: rgba(255,255,255,.16); color:#fff; border:none; }
.impersonation-banner__exit:hover,
.impersonation-banner__action:hover{ background: rgba(255,255,255,.28); }
/* The forms are the flex items (button_to wraps each button), so the push has
   to sit on the form — a margin on the button itself would do nothing. */
.impersonation-banner__push{ margin-left:auto; }
/* Write mode armed: a categorically different surface, not a darker shade of
   the same one, so it can never be mistaken for the read-only default. */
.impersonation-banner--writing{ background: var(--failing-solid); color:#fff;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.28); }

/* Full-bleed top bar: spans the entire viewport width, above the sidebar/main
   split, so it carries its own elevated surface + bottom border rather than
   inheriting one from a column beneath it. Height is a fixed token (rather
   than padding-derived auto height) so the sidebar below can anchor its
   sticky offset to the same value instead of measuring it at runtime. */
.app-topbar{
  display:flex; align-items:center; gap: var(--space-4); height: var(--topbar-h); flex-shrink:0;
  padding: 0 var(--space-8); background: var(--bg-elevated); border-bottom:1px solid var(--border);
  position: sticky; top:0; z-index: var(--z-toolbar);
}
.app-topbar .brand{ flex-shrink:0; }
.app-topbar__search{ flex:1; max-width:360px; position:relative; }
.app-topbar__search .icon{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:14px; height:14px; color: var(--text-tertiary); }
.app-topbar__search input{ padding-left:32px; }
.app-topbar__actions{ margin-left:auto; display:flex; align-items:center; gap: var(--space-4); flex-shrink:0; }
/* Signed-in user chip: initials avatar + email, clearer than a bare monogram. */
.user-chip{ display:flex; align-items:center; gap:8px; }
.user-chip__email{ font-size:var(--text-xs); color:var(--text-secondary); max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:640px){ .user-chip__email{ display:none; } }

/* Row below the top bar: nav sidebar (left) + main content (right). */
.app-body{ display:flex; flex:1; min-height:0; }
.app-sidebar{
  width: var(--sidebar-w); flex-shrink:0; background: var(--bg-elevated); border-right:1px solid var(--border);
  padding: var(--space-5) var(--space-3); display:flex; flex-direction:column; gap: var(--space-6);
  position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y:auto;
}
.app-sidebar__nav{ display:flex; flex-direction:column; gap:2px; }
.app-sidebar__nav a{
  display:flex; align-items:center; gap:10px; padding: 8px 10px; border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease);
}
.app-sidebar__nav a .icon{ width:16px; height:16px; color: var(--text-tertiary); }
.app-sidebar__nav a:hover{ background: var(--surface-hover); color: var(--text); }
.app-sidebar__nav a.active{ background: var(--accent-soft-bg); color: var(--accent-text); }
.app-sidebar__nav a.active .icon{ color: var(--accent-text); }
.app-sidebar__nav a .count{ margin-left:auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
.app-sidebar__section-label{ font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-wider); color:var(--text-tertiary); font-weight:var(--w-semibold); padding: 0 10px; margin-bottom:4px; }
.app-sidebar__footer{ margin-top:auto; padding:12px 10px; border-top:1px solid var(--border); font-size:var(--text-xs); color:var(--text-tertiary); display:flex; align-items:center; gap:6px; overflow:hidden; white-space:nowrap; }
.app-sidebar__footer > .mono{ overflow:hidden; text-overflow:ellipsis; }
.app-sidebar__plan{ margin-left:auto; color:var(--accent-text); text-decoration:none; padding:2px 6px; border:1px solid var(--accent-soft-border); border-radius:var(--radius-full); background:var(--accent-soft-bg); }

.app-main{ flex:1; min-width:0; }
.app-content{ padding: var(--space-8); }

.page-header{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom: var(--space-6); gap: var(--space-4); flex-wrap:wrap; min-width:0; }
.page-header h1{ font-size: var(--text-2xl); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); }
.page-header .sub{ color: var(--text-secondary); font-size: var(--text-sm); margin-top:4px; overflow-wrap:anywhere; }
.page-header > div{ min-width:0; }
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size: var(--text-sm); color: var(--text-tertiary); margin-bottom: var(--space-3); }
.breadcrumb a:hover{ color: var(--text); }
.breadcrumb .icon{ width:13px; height:13px; }

/* ================================================================
   MARKETING LANDING
   ================================================================ */
.hero{ padding: var(--space-24) 0 var(--space-16); position:relative; }
.hero__grid{ position:absolute; inset:0 0 auto 0; height:640px; background-image:
    radial-gradient(ellipse 60% 50% at 50% 0%, var(--accent-soft-bg), transparent 70%),
    radial-gradient(ellipse 40% 40% at 88% 18%, var(--accent2-glow), transparent 72%),
    linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 92%);
  mask-image: linear-gradient(to bottom, black 0%, transparent 92%);
  pointer-events:none;
}
.hero__inner{ position:relative; display:grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); align-items:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--accent-text); background: var(--accent-soft-bg); border:1px solid var(--accent-soft-border);
  padding: 5px 10px 5px 8px; border-radius: var(--radius-full); letter-spacing: var(--tracking-normal); margin-bottom: var(--space-5);
}
.hero h1{ font-size: var(--text-display); font-weight: var(--w-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin-bottom: var(--space-5); }
.hero h1 em{ font-style:normal; color: var(--accent-text); }
.hero p.lead{ font-size: var(--text-lg); color: var(--text-secondary); line-height: var(--leading-relaxed); max-width: 46ch; margin-bottom: var(--space-8); }
.hero__ctas{ display:flex; gap: var(--space-3); align-items:center; margin-bottom: var(--space-8); }
.hero__meta{ display:flex; gap: var(--space-6); font-size: var(--text-xs); color: var(--text-tertiary); font-family: var(--font-mono); }
.hero__meta span{ display:flex; align-items:center; gap:6px; }
.hero__meta .icon{ width:13px; height:13px; color: var(--ok-solid); }

/* hero visual: live console panel */
.console{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); overflow:hidden;
}
.console__bar{ display:flex; align-items:center; gap:8px; padding: 11px 14px; border-bottom:1px solid var(--border); background: var(--surface-2); }
.console__dot{ width:9px; height:9px; border-radius:50%; background: var(--border-strong); }
.console__title{ margin-left:8px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
.console__body{ padding: var(--space-5); display:flex; flex-direction:column; gap: var(--space-3); }
.console__row{ display:flex; align-items:center; gap:10px; font-size: var(--text-sm); padding: 9px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border:1px solid var(--border); }
.console__row .name{ font-weight: var(--w-medium); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.console__row .meta{ font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }
.console__prompt{ font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); border-top:1px dashed var(--border); padding-top: var(--space-3); margin-top:4px; }
.console__prompt .accent{ color: var(--accent-text); }
.console__prompt .caret{ display:inline-block; width:6px; height:12px; background: var(--accent); margin-left:2px; vertical-align:middle; animation: caret-blink 1s step-end infinite; }
@keyframes caret-blink{ 50%{ opacity:0; } }

section{ padding: var(--space-20) 0; }
.section-head{ max-width: 620px; margin: 0 auto var(--space-12); text-align:center; }
.section-head .tooltip-label{ display:block; margin-bottom: var(--space-3); }
.section-head h2{ font-size: var(--text-3xl); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-3); }
.section-head p{ color: var(--text-secondary); font-size: var(--text-md); line-height: var(--leading-relaxed); }

/* jobs vs monitors */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap: var(--space-6); }
.duo-card{ padding: var(--space-8); position:relative; }
.duo-card__icon{ width:38px; height:38px; border-radius: var(--radius-md); display:flex; align-items:center; justify-content:center; margin-bottom: var(--space-5); }
.duo-card__icon .icon{ width:19px; height:19px; }
.duo-card.jobs .duo-card__icon{ background: var(--accent-soft-bg); color: var(--accent-text); border:1px solid var(--accent-soft-border); }
.duo-card.monitors .duo-card__icon{ background: var(--running-soft-bg); color: var(--running-soft-text); border:1px solid var(--running-soft-border); }
.duo-card h3{ font-size: var(--text-xl); font-weight: var(--w-semibold); margin-bottom: var(--space-2); letter-spacing:var(--tracking-tight);}
.duo-card p{ color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); margin-bottom: var(--space-5); }
.duo-flow{ display:flex; align-items:center; gap:10px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); background: var(--surface-2); border:1px solid var(--border); padding: var(--space-3); border-radius: var(--radius-md); overflow-x:auto; max-width:100%; }
.duo-flow .node{ padding:4px 8px; border-radius: var(--radius-xs); background: var(--surface-3); color: var(--text); white-space:nowrap; flex-shrink:0; }
.duo-flow .icon{ width:14px; height:14px; flex-shrink:0; color: var(--text-tertiary); }

/* feature grid */
.feature-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; }
.feature{ background: var(--surface); padding: var(--space-7); min-width:0; }
.feature__icon{ width:30px; height:30px; color: var(--accent-text); margin-bottom: var(--space-4); }
.feature__icon--accent2{ color: var(--accent2-text); }
.feature h4{ font-size: var(--text-md); font-weight: var(--w-semibold); margin-bottom: var(--space-2); }
.feature p{ font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); }

/* integrations strip */
.integrations{ display:flex; flex-wrap:wrap; gap: var(--space-3); justify-content:center; }
.integration-mark{
  display:flex; align-items:center; gap:9px; padding: 10px 16px; border:1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--text-secondary);
  transition: all var(--dur-base) var(--ease);
}
.integration-mark:hover{ border-color: var(--border-strong); color: var(--text); transform: translateY(-1px); }
.integration-mark .icon{ width:17px; height:17px; }

/* pricing */
.pricing-grid{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-5); max-width:820px; margin-inline:auto; }
.pricing-card{ padding: var(--space-7); display:flex; flex-direction:column; gap: var(--space-5); }
.pricing-card.featured{ border-color: var(--accent-soft-border); background: linear-gradient(180deg, var(--accent-soft-bg), transparent 40%); position:relative; }
.pricing-card__badge{ position:absolute; top:-11px; left: var(--space-7); background: var(--accent); color:#fff; font-size:var(--text-xs); font-weight:var(--w-semibold); padding:3px 9px; border-radius: var(--radius-full); }
.pricing-card h4{ font-size: var(--text-md); font-weight:var(--w-semibold); }
.pricing-card .price{ font-size: var(--text-3xl); font-weight: var(--w-bold); font-family: var(--font-mono); letter-spacing:var(--tracking-tight);}
.pricing-card .price span{ font-size: var(--text-sm); color: var(--text-tertiary); font-weight: var(--w-regular); font-family: var(--font-sans); }
.pricing-card ul{ display:flex; flex-direction:column; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); flex:1; }
.pricing-card li{ display:flex; gap:8px; align-items:flex-start; }
.pricing-card li .icon{ width:14px; height:14px; color: var(--ok-solid); margin-top:2px; flex-shrink:0; }
.pricing-note{ margin:var(--space-4) auto 0; max-width:820px; color:var(--text-tertiary); font-size:var(--text-xs); text-align:center; }

/* billing */
.billing-stack{ display:flex; flex-direction:column; gap:var(--space-6); max-width:900px; }
.billing-current__body{ padding:var(--space-5); display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-5); flex-wrap:wrap; }
.billing-plan-name{ font-size:var(--text-xl); font-weight:var(--w-semibold); letter-spacing:var(--tracking-tight); }
.billing-plan-detail{ margin:var(--space-2) 0 0; color:var(--text-secondary); font-size:var(--text-sm); }
.billing-usage{ padding:var(--space-5); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5) var(--space-8); }
.billing-usage-row{ display:flex; flex-direction:column; gap:var(--space-2); }
.billing-usage-row__label,.billing-allowance{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); font-size:var(--text-sm); }
.billing-usage-row__label span:first-child,.billing-allowance span{ color:var(--text-secondary); }
.billing-usage-bar{ height:6px; overflow:hidden; border-radius:var(--radius-full); background:var(--surface-3); }
.billing-usage-bar span{ display:block; height:100%; border-radius:inherit; background:var(--cat-blue-solid); }
.billing-section-head{ margin-bottom:var(--space-5); }
.billing-section-head h2{ font-size:var(--text-xl); font-weight:var(--w-semibold); }
.billing-section-head p{ margin:var(--space-1) 0 0; color:var(--text-secondary); font-size:var(--text-sm); }
.billing-plan-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5); }
.billing-checkout-actions{ display:flex; flex-direction:column; gap:var(--space-2); }
.billing-checkout-form{ width:100%; }
.is-static{ cursor:default; pointer-events:none; }
.billing-unavailable{ margin:calc(var(--space-2) * -1) 0 0; color:var(--text-tertiary); font-size:var(--text-xs); text-align:center; }
.quota-note{ margin:calc(var(--space-3) * -1) 0 var(--space-5); padding:var(--space-3) var(--space-4); display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); border:1px solid var(--accent-soft-border); border-radius:var(--radius-md); background:var(--accent-soft-bg); color:var(--text-secondary); font-size:var(--text-sm); }
.quota-note a{ color:var(--accent-text); font-weight:var(--w-medium); }
.billing-activation{ margin:0; }

/* footer */
.mkt-footer{ border-top:1px solid var(--border); padding: var(--space-16) 0 var(--space-10); }
.mkt-footer__grid{ display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-8); margin-bottom: var(--space-12); }
.mkt-footer__col h5{ font-size: var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-wider); color: var(--text-tertiary); margin-bottom: var(--space-4); font-weight:var(--w-semibold); }
.mkt-footer__col ul{ display:flex; flex-direction:column; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); }
.mkt-footer__col ul a:hover{ color: var(--text); }
.mkt-footer__bottom{ display:flex; justify-content:space-between; align-items:center; padding-top: var(--space-8); border-top:1px solid var(--border); font-size: var(--text-xs); color: var(--text-tertiary); }

/* ================================================================
   ONBOARDING
   ================================================================ */
.onb-shell{ min-height:100vh; display:flex; flex-direction:column; }
.onb-topbar{ display:flex; align-items:center; justify-content:space-between; padding: var(--space-5) var(--space-8); border-bottom:1px solid var(--border); }
.onb-steps{ display:flex; align-items:center; gap: var(--space-2); }
.onb-step{ display:flex; align-items:center; gap:8px; font-size: var(--text-sm); color: var(--text-tertiary); }
.onb-step__dot{ width:20px; height:20px; border-radius:50%; border:1.5px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:10px; font-weight:var(--w-semibold); color:var(--text-tertiary); }
.onb-step.done .onb-step__dot{ background: var(--ok-solid); border-color: var(--ok-solid); color:#04150e; }
.onb-step.active{ color: var(--text); }
.onb-step.active .onb-step__dot{ border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft-bg); }
.onb-step__line{ width:32px; height:1px; background: var(--border-strong); }

.onb-body{ flex:1; padding: var(--space-12) var(--space-8); }
.onb-grid{ max-width:1060px; margin:0 auto; display:grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-10); align-items:start; }
.onb-head{ margin-bottom: var(--space-8); }
.onb-head h1{ font-size: var(--text-2xl); font-weight: var(--w-semibold); letter-spacing:var(--tracking-tight); margin-bottom:6px; }
.onb-head p{ color: var(--text-secondary); font-size: var(--text-sm); }

.preset-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-7); }
.preset-card{
  display:flex; flex-direction:column; gap:10px; padding: var(--space-4); border:1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-2); cursor:pointer; transition: all var(--dur-fast) var(--ease); text-align:left; min-width:0;
}
.preset-card:hover{ border-color: var(--border-strong); background: var(--surface-hover); }
.preset-card[aria-pressed="true"]{ border-color: var(--accent); background: var(--accent-soft-bg); box-shadow: 0 0 0 1px var(--accent) inset; }
.preset-card__icon{ width:26px; height:26px; border-radius: var(--radius-sm); background: var(--surface-3); display:flex; align-items:center; justify-content:center; }
.preset-card__icon .icon{ width:14px; height:14px; }
.preset-card__name{ font-size: var(--text-sm); font-weight: var(--w-semibold); }
.preset-card__desc{ font-size: var(--text-xs); color: var(--text-tertiary); line-height:1.4; }

.form-section{ display:flex; flex-direction:column; gap: var(--space-5); margin-bottom: var(--space-6); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.token-callout{
  display:flex; gap:10px; align-items:flex-start; background: var(--accent-soft-bg); border:1px solid var(--accent-soft-border);
  color: var(--accent-text); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); line-height:var(--leading-snug);
}
.token-callout .icon{ width:16px; height:16px; margin-top:2px; flex-shrink:0; }
.token-callout strong{ color: var(--text); }

.schedule-toggle{ display:inline-flex; padding:3px; background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-md); gap:2px; }
.schedule-toggle button{ appearance:none; border:none; background:transparent; color:var(--text-secondary); padding:6px 12px; border-radius:var(--radius-sm); font-size:var(--text-sm); font-weight:var(--w-medium); cursor:pointer; }
.schedule-toggle button[aria-selected="true"]{ background: var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.preset-chips{ display:flex; flex-wrap:wrap; gap:8px; }

.next-runs-panel{ position:sticky; top: 76px; }
.next-runs-list{ display:flex; flex-direction:column; }
.next-run-row{ display:flex; align-items:center; gap:10px; padding: 12px var(--space-5); border-bottom:1px solid var(--border); font-size:var(--text-sm); }
.next-run-row:last-child{ border-bottom:none; }
.next-run-row .idx{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-tertiary); width:16px; }
.next-run-row .when{ flex:1; }
.next-run-row .rel{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--text-tertiary); }
.next-runs-summary{ padding: var(--space-4) var(--space-5); background: var(--surface-2); border-bottom:1px solid var(--border); }
.next-runs-summary .cron-expr{ font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-text); background: var(--accent-soft-bg); border:1px solid var(--accent-soft-border); padding:3px 8px; border-radius: var(--radius-sm); display:inline-block; margin-bottom:6px; }
.next-runs-summary p{ font-size: var(--text-xs); color: var(--text-tertiary); }
.cron-expr{ font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-text); background: var(--accent-soft-bg); border:1px solid var(--accent-soft-border); padding:3px 8px; border-radius: var(--radius-sm); display:inline-block; }
.onb-footer-actions{ display:flex; justify-content:space-between; align-items:center; max-width:1060px; margin: var(--space-8) auto 0; }

/* ================================================================
   APP HOME / ACTIVITY OVERVIEW
   ================================================================ */
.rollup-banner{
  display:flex; align-items:center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg);
  margin-bottom: var(--space-6); border:1px solid;
}
.rollup-banner.attention{ background: var(--degraded-soft-bg); border-color: var(--degraded-soft-border); }
.rollup-banner.ok{ background: var(--ok-soft-bg); border-color: var(--ok-soft-border); }
.rollup-banner__icon{ width:34px; height:34px; border-radius: var(--radius-md); flex-shrink:0; display:flex; align-items:center; justify-content:center; background: var(--degraded-solid); color:#221200; }
.rollup-banner.ok .rollup-banner__icon{ background: var(--ok-solid); color:#04150e; }
.rollup-banner__icon .icon{ width:18px; height:18px; }
.rollup-banner__text strong{ font-size: var(--text-md); display:block; }
.rollup-banner__text span{ font-size: var(--text-sm); color: var(--text-secondary); }
.rollup-banner__action{ margin-left:auto; }

.stat-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.stat-tile{ padding: var(--space-5); display:flex; flex-direction:column; gap: var(--space-3); position:relative; border-top: 2px solid var(--border); }
.stat-tile__top{ display:flex; align-items:center; justify-content:space-between; }
.stat-tile__icon{ width:28px; height:28px; border-radius: var(--radius-sm); display:flex; align-items:center; justify-content:center; background: var(--surface-2); color: var(--text-secondary); border:1px solid transparent; }
.stat-tile__icon .icon{ width:15px; height:15px; }
.stat-tile__delta{ font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ok-solid); }
.stat-tile__value{ font-family: var(--font-mono); font-size: var(--text-3xl); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); line-height:1; }
.stat-tile__label{ font-size: var(--text-sm); color: var(--text-secondary); }
.stat-tile__spark{ display:block; margin-top:2px; width:100%; height:26px; }
.stat-tile__spark path.line{ fill:none; stroke-width:1.6; }
.stat-tile__spark path.area{ opacity:.14; }

/* stat tile category accents — each metric gets its own hue: soft tinted
   backdrop wash + colored icon chip + a thin top accent bar, so the four
   activity metrics read as distinct at a glance rather than four identical
   gray boxes. Kept subtle: a gradient wash, not a solid fill. */
.stat-tile--blue{ border-top-color: var(--cat-blue-solid); background: linear-gradient(180deg, var(--cat-blue-soft-bg), var(--surface) 65%); }
.stat-tile--blue .stat-tile__icon{ background: var(--cat-blue-soft-bg); color: var(--cat-blue-text); border-color: var(--cat-blue-soft-border); }
.stat-tile--blue .stat-tile__spark .line{ stroke: var(--cat-blue-solid); }
.stat-tile--blue .stat-tile__spark .area{ fill: var(--cat-blue-solid); }

.stat-tile--teal{ border-top-color: var(--cat-teal-solid); background: linear-gradient(180deg, var(--cat-teal-soft-bg), var(--surface) 65%); }
.stat-tile--teal .stat-tile__icon{ background: var(--cat-teal-soft-bg); color: var(--cat-teal-text); border-color: var(--cat-teal-soft-border); }
.stat-tile--teal .stat-tile__spark .line{ stroke: var(--cat-teal-solid); }
.stat-tile--teal .stat-tile__spark .area{ fill: var(--cat-teal-solid); }

.stat-tile--violet{ border-top-color: var(--cat-violet-solid); background: linear-gradient(180deg, var(--cat-violet-soft-bg), var(--surface) 65%); }
.stat-tile--violet .stat-tile__icon{ background: var(--cat-violet-soft-bg); color: var(--cat-violet-text); border-color: var(--cat-violet-soft-border); }
.stat-tile--violet .stat-tile__spark .line{ stroke: var(--cat-violet-solid); }
.stat-tile--violet .stat-tile__spark .area{ fill: var(--cat-violet-solid); }

.stat-tile--amber{ border-top-color: var(--cat-amber-solid); background: linear-gradient(180deg, var(--cat-amber-soft-bg), var(--surface) 65%); }
.stat-tile--amber .stat-tile__icon{ background: var(--cat-amber-soft-bg); color: var(--cat-amber-text); border-color: var(--cat-amber-soft-border); }
.stat-tile--amber .stat-tile__spark .line{ stroke: var(--cat-amber-solid); }
.stat-tile--amber .stat-tile__spark .area{ fill: var(--cat-amber-solid); }

/* category cue — thin colored left border + tinted icon chip, used on list
   rows (recent runs, mini health list) to hint at WHAT a job is without
   competing with the health badge's color (which says HOW it's doing). */
.cat-cue{ border-left: 3px solid transparent; }
.cat-cue--blue{ border-left-color: var(--cat-blue-solid); }
.cat-cue--teal{ border-left-color: var(--cat-teal-solid); }
.cat-cue--violet{ border-left-color: var(--cat-violet-solid); }
.cat-cue--amber{ border-left-color: var(--cat-amber-solid); }

.cat-chip--blue{ background: var(--cat-blue-soft-bg) !important; color: var(--cat-blue-text) !important; border-color: var(--cat-blue-soft-border) !important; }
.cat-chip--teal{ background: var(--cat-teal-soft-bg) !important; color: var(--cat-teal-text) !important; border-color: var(--cat-teal-soft-border) !important; }
.cat-chip--violet{ background: var(--cat-violet-soft-bg) !important; color: var(--cat-violet-text) !important; border-color: var(--cat-violet-soft-border) !important; }
.cat-chip--amber{ background: var(--cat-amber-soft-bg) !important; color: var(--cat-amber-text) !important; border-color: var(--cat-amber-soft-border) !important; }

.dash-grid{ display:grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-5); align-items:start; }
.feed-row{ display:flex; align-items:center; gap: var(--space-3); padding: 13px var(--space-5); border-bottom:1px solid var(--border); }
.feed-row:last-child{ border-bottom:none; }
.feed-row__icon{ width:30px; height:30px; border-radius: var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.feed-row__icon .icon{ width:15px; height:15px; }
.feed-row__body{ flex:1; min-width:0; }
.feed-row__title{ font-size: var(--text-sm); font-weight: var(--w-medium); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feed-row__sub{ font-size: var(--text-xs); color: var(--text-tertiary); display:flex; gap:8px; align-items:center; margin-top:2px; }
.feed-row__time{ font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); white-space:nowrap; }

.side-stack{ display:flex; flex-direction:column; gap: var(--space-5); min-width:0; }
.quick-actions{ display:flex; flex-direction:column; gap:8px; padding: var(--space-4); }
.mini-health-list{ display:flex; flex-direction:column; }
.mini-health-row{ display:flex; align-items:center; gap:9px; padding:10px var(--space-5); border-bottom:1px solid var(--border); font-size:var(--text-sm); }
.mini-health-row:last-child{ border-bottom:none; }
.mini-health-row .name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini-health-row .sub{ font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); }

.empty-state{ display:flex; flex-direction:column; align-items:center; text-align:center; gap: var(--space-3); padding: var(--space-8) var(--space-5); }
.empty-state__icon{ width:36px; height:36px; color: var(--text-tertiary); }
.empty-state h4{ font-size: var(--text-sm); font-weight: var(--w-semibold); }
.empty-state p{ font-size: var(--text-xs); color: var(--text-tertiary); max-width:22ch; line-height:1.5; }

/* ================================================================
   JOB DETAIL
   ================================================================ */
.health-banner{
  display:flex; align-items:center; gap: var(--space-5); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg);
  border:1px solid; margin-bottom: var(--space-6);
}
.health-banner.failing{ background: var(--failing-soft-bg); border-color: var(--failing-soft-border); }
.health-banner.degraded{ background: var(--degraded-soft-bg); border-color: var(--degraded-soft-border); }
.health-banner.ok{ background: var(--ok-soft-bg); border-color: var(--ok-soft-border); }
.health-banner.disabled{ background: var(--disabled-soft-bg); border-color: var(--disabled-soft-border); }
.health-banner__icon{ width:42px; height:42px; border-radius: var(--radius-md); flex-shrink:0; display:flex; align-items:center; justify-content:center; background: var(--failing-solid); color:#210503; }
.health-banner.degraded .health-banner__icon{ background: var(--degraded-solid); color:#221200; }
.health-banner.ok .health-banner__icon{ background: var(--ok-solid); color:#04150e; }
.health-banner.disabled .health-banner__icon{ background: var(--disabled-solid); color:#fff; }
.health-banner__icon .icon{ width:22px; height:22px; }
.health-banner__body{ flex:1; }
.health-banner__body h2{ font-size: var(--text-lg); font-weight: var(--w-semibold); margin-bottom:3px; }
.health-banner__body p{ font-size: var(--text-sm); color: var(--text-secondary); }
.health-banner__body p .mono{ color: var(--text); }
.health-banner__actions{ display:flex; gap: var(--space-2); flex-shrink:0; }

.meta-row{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border:1px solid var(--border); border-radius: var(--radius-lg); overflow:hidden; margin-bottom: var(--space-6); }
.meta-cell{ background: var(--surface); padding: var(--space-4) var(--space-5); min-width:0; }
.meta-cell .tooltip-label{ display:block; margin-bottom:6px; }
.meta-cell .val{ font-size: var(--text-sm); font-weight: var(--w-medium); display:flex; align-items:center; gap:6px; }
.meta-cell .val.mono{ font-family: var(--font-mono); }

.detail-grid{ display:grid; grid-template-columns: 1.7fr 1fr; gap: var(--space-5); align-items:start; }

.attempt-toggle{ background:none; border:none; color:var(--text-tertiary); cursor:pointer; display:flex; align-items:center; padding:0; }
.attempt-toggle .icon{ width:14px; height:14px; transition: transform var(--dur-base) var(--ease); }
tr.is-expanded .attempt-toggle .icon{ transform: rotate(90deg); }
.attempts-row td{ padding:0; background: var(--surface-2); }
.attempts-row .attempts-inner{ padding: var(--space-3) var(--space-5) var(--space-4) 52px; display:flex; flex-direction:column; gap:8px; }
.attempt-line{ display:flex; align-items:center; gap:10px; font-size: var(--text-xs); color: var(--text-secondary); }
.attempt-line .mono{ color: var(--text-tertiary); }
.drift{ font-family: var(--font-mono); font-size: var(--text-xs); padding:2px 6px; border-radius: var(--radius-xs); }
.drift.ok-drift{ color: var(--ok-solid); background: var(--ok-soft-bg); }
.drift.warn-drift{ color: var(--degraded-solid); background: var(--degraded-soft-bg); }

/* job detail — 7-day success/latency trend, colored (not gray) sparklines */
.trend-card__body{ padding: var(--space-4) var(--space-5); display:flex; flex-direction:column; gap: var(--space-4); }
.trend-row{ display:flex; align-items:center; gap: var(--space-3); }
.trend-row__label{ display:flex; align-items:center; gap:7px; font-size: var(--text-xs); color: var(--text-secondary); white-space:nowrap; flex-shrink:0; width:96px; }
.trend-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.trend-spark{ flex:1; height:26px; min-width:0; }
.trend-spark path.line{ fill:none; stroke-width:1.6; }
.trend-spark path.area{ opacity:.14; }
.trend-spark--ok .line{ stroke: var(--ok-solid); }
.trend-spark--ok .area{ fill: var(--ok-solid); }
.trend-spark--violet .line{ stroke: var(--cat-violet-solid); }
.trend-spark--violet .area{ fill: var(--cat-violet-solid); }
.trend-row__value{ font-size: var(--text-sm); font-weight: var(--w-semibold); color: var(--text); flex-shrink:0; width:36px; text-align:right; }

.curl-block{ position:relative; }
.copy-btn{
  position:absolute; top:10px; right:10px; display:flex; align-items:center; gap:6px;
  background: var(--surface-3); border:1px solid var(--border-strong); color: var(--text-secondary);
  font-size: var(--text-xs); padding: 6px 9px; border-radius: var(--radius-sm); cursor:pointer; transition: all var(--dur-fast) var(--ease);
}
.copy-btn:hover{ color: var(--text); background: var(--surface-hover); }
.copy-btn .icon{ width:13px; height:13px; }
.copy-btn.copied{ color: var(--ok-solid); border-color: var(--ok-soft-border); }

/* ================================================================
   AUTH SCREENS (sign in / sign up / password reset)
   ================================================================ */
.auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding: var(--space-6); position:relative; }
.auth-shell .theme-toggle{ position:absolute; top: var(--space-6); right: var(--space-6); }
.auth-card{ width:100%; max-width: 380px; padding: var(--space-8); display:flex; flex-direction:column; gap: var(--space-6); }
.auth-card .brand{ justify-content:center; }
.auth-card__head{ text-align:center; }
.auth-card__head h1{ font-size: var(--text-xl); font-weight: var(--w-semibold); letter-spacing: var(--tracking-tight); margin-bottom:6px; }
.auth-card__head p{ font-size: var(--text-sm); color: var(--text-secondary); }
.auth-card form{ display:flex; flex-direction:column; gap: var(--space-4); }
.auth-card__footer{ text-align:center; font-size: var(--text-sm); color: var(--text-secondary); }
.auth-card__footer a{ color: var(--accent-text); font-weight: var(--w-medium); }
.auth-card__footer a:hover{ text-decoration:underline; }
.auth-alert{
  display:flex; gap:9px; align-items:flex-start; font-size: var(--text-sm); line-height: var(--leading-snug);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
}
.auth-alert.alert{ background: var(--failing-soft-bg); border:1px solid var(--failing-soft-border); color: var(--failing-soft-text); }
.auth-alert.notice{ background: var(--ok-soft-bg); border:1px solid var(--ok-soft-border); color: var(--ok-soft-text); }
.auth-alert .icon{ width:15px; height:15px; margin-top:2px; flex-shrink:0; }

/* signup password UX: reveal toggle, strength meter, live criteria, match */
.pw-field{ position:relative; display:flex; }
.pw-field .input{ flex:1; padding-right: 40px; }
.pw-reveal{
  position:absolute; top:0; right:0; height:100%; width:38px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; color: var(--text-tertiary);
}
.pw-reveal:hover{ color: var(--text-secondary); }
.pw-reveal .icon{ width:17px; height:17px; }

.pw-meter{ display:flex; align-items:center; gap: var(--space-2); }
.pw-meter[hidden]{ display:none; }
.pw-meter__track{ flex:1; height:4px; border-radius: var(--radius-full); background: var(--surface-2); overflow:hidden; }
.pw-meter__fill{ height:100%; width:0; border-radius: var(--radius-full); transition: width .18s ease, background-color .18s ease; }
.pw-meter__label{ font-size: var(--text-xs); font-weight: var(--w-medium); min-width: 42px; text-align:right; }
.pw-meter.is-weak   .pw-meter__fill{ background: var(--failing-solid); }
.pw-meter.is-weak   .pw-meter__label{ color: var(--failing-soft-text); }
.pw-meter.is-fair   .pw-meter__fill,
.pw-meter.is-good   .pw-meter__fill{ background: var(--cat-amber-solid); }
.pw-meter.is-fair   .pw-meter__label,
.pw-meter.is-good   .pw-meter__label{ color: var(--cat-amber-text); }
.pw-meter.is-strong .pw-meter__fill{ background: var(--ok-solid); }
.pw-meter.is-strong .pw-meter__label{ color: var(--ok-soft-text); }

.pw-criteria{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 5px; }
.pw-criteria li{ display:flex; align-items:center; gap:7px; font-size: var(--text-xs); color: var(--text-tertiary); }
.pw-criteria li .icon{ width:14px; height:14px; flex-shrink:0; }
.pw-criteria li .icon--no{ color: var(--text-tertiary); }
.pw-criteria li .icon--yes{ display:none; color: var(--ok-solid); }
.pw-criteria li.met{ color: var(--text-secondary); }
.pw-criteria li.met .icon--no{ display:none; }
.pw-criteria li.met .icon--yes{ display:inline; }

/* responsive */
@media (max-width: 980px){
  .hero__inner{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns: repeat(2,1fr); }
  .pricing-grid{ grid-template-columns: 1fr; }
  .billing-plan-grid{ grid-template-columns:1fr; }
  .duo{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns: repeat(2,1fr); }
  .dash-grid{ grid-template-columns:1fr; }
  .onb-grid{ grid-template-columns:1fr; }
  .meta-row{ grid-template-columns: repeat(2,1fr); }
  .detail-grid{ grid-template-columns:1fr; }
  .app-sidebar{ display:none; }
  .mkt-footer__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .form-row{ grid-template-columns:1fr; }
  .preset-grid{ grid-template-columns:1fr 1fr; }
  .feature-grid, .mkt-footer__grid{ grid-template-columns:1fr; }
  .hero h1{ font-size: 2.4rem; }
  .meta-row{ grid-template-columns:1fr 1fr; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .mkt-nav__links{ display:none; }
  .mkt-nav__inner{ gap: var(--space-3); }
  .hero__meta{ flex-wrap:wrap; row-gap:8px; }
  .hero__ctas{ flex-wrap:wrap; }
  .onb-steps{ display:none; }
  .onb-topbar .btn{ font-size: var(--text-xs); padding:6px 8px; }
  .app-topbar__search{ max-width:none; }
  .app-topbar{ gap: var(--space-2); padding: 0 var(--space-4); }
  .app-content{ padding: var(--space-4); }
  .page-header{ align-items:flex-start; }
  .health-banner, .rollup-banner{ flex-wrap:wrap; }
  .health-banner__actions{ width:100%; justify-content:flex-start; }
  .auth-card{ padding: var(--space-6); }
  .billing-usage{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------- */
/* Reduced motion                                                          */
/* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}