/* stx role tokens — override any of these to re-theme by meaning. */
:root {
  --stx-fg: oklch(20.5% 0 0);
  --stx-fg-strong: oklch(37.1% 0 0);
  --stx-fg-muted: oklch(43.9% 0 0);
  --stx-fg-soft: oklch(55.6% 0 0);
  --stx-fg-subtle: oklch(70.8% 0 0);
  --stx-surface: oklch(98.5% 0 0);
  --stx-surface-raised: oklch(97% 0 0);
  --stx-surface-sunken: oklch(92.2% 0 0);
  --stx-panel: #fff;
  --stx-field: #fff;
  --stx-page: oklch(98.5% 0 0);
  --stx-content: #fff;
  --stx-surface-hover: oklch(97% 0 0);
  --stx-surface-raised-hover: oklch(92.2% 0 0);
  --stx-surface-sunken-hover: oklch(87% 0 0);
  --stx-field-hover: oklch(98.5% 0 0);
  --stx-link: oklch(62.3% 0.214 259.815);
  --stx-link-hover: oklch(54.6% 0.245 262.881);
  --stx-inverse: oklch(20.5% 0 0);
  --stx-inverse-ink: #fff;
  --stx-line: oklch(92.2% 0 0);
  --stx-line-strong: oklch(87% 0 0);
  --stx-line-hover: oklch(70.8% 0 0);
  --stx-accent: oklch(54.6% 0.245 262.881);
  --stx-info: oklch(60.9% 0.126 221.723);
  --stx-danger: oklch(57.7% 0.245 27.325);
  --stx-success: oklch(62.7% 0.194 149.214);
  --stx-warning: oklch(68.1% 0.162 75.834);
  --stx-accent-solid: oklch(62.3% 0.214 259.815);
  --stx-info-solid: oklch(71.5% 0.143 215.221);
  --stx-danger-solid: oklch(63.7% 0.237 25.331);
  --stx-success-solid: oklch(72.3% 0.219 149.579);
  --stx-warning-solid: oklch(79.5% 0.184 86.047);
  --stx-accent-solid-hover: oklch(54.6% 0.245 262.881);
  --stx-info-solid-hover: oklch(60.9% 0.126 221.723);
  --stx-danger-solid-hover: oklch(57.7% 0.245 27.325);
  --stx-success-solid-hover: oklch(62.7% 0.194 149.214);
  --stx-warning-solid-hover: oklch(68.1% 0.162 75.834);
  --stx-accent-ink: #fff;
  --stx-info-ink: oklch(20.5% 0 0);
  --stx-danger-ink: #fff;
  --stx-success-ink: oklch(20.5% 0 0);
  --stx-warning-ink: oklch(20.5% 0 0);
  --stx-accent-soft: oklch(93.2% 0.032 255.585);
  --stx-accent-soft-ink: oklch(42.4% 0.199 265.638);
  --stx-info-soft: oklch(95.6% 0.045 203.388);
  --stx-info-soft-ink: oklch(45% 0.085 224.283);
  --stx-danger-soft: oklch(93.6% 0.032 17.717);
  --stx-danger-soft-ink: oklch(44.4% 0.177 26.899);
  --stx-success-soft: oklch(96.2% 0.044 156.743);
  --stx-success-soft-ink: oklch(44.8% 0.119 151.328);
  --stx-warning-soft: oklch(97.3% 0.071 103.193);
  --stx-warning-soft-ink: oklch(47.6% 0.114 61.907);
  --stx-secondary: oklch(55.8% 0.288 302.321);
  --stx-secondary-solid: oklch(62.7% 0.265 303.9);
  --stx-secondary-solid-hover: oklch(55.8% 0.288 302.321);
  --stx-secondary-ink: #fff;
  --stx-secondary-soft: oklch(94.6% 0.033 307.174);
  --stx-secondary-soft-ink: oklch(43.8% 0.218 303.724);
  --stx-danger-fg: oklch(39.6% 0.141 25.723);
  --stx-danger-fg-subtle: oklch(80.8% 0.114 19.571);
  --stx-danger-line: oklch(80.8% 0.114 19.571);
  --stx-danger-focus: oklch(63.7% 0.237 25.331);
}
.dark {
  --stx-fg: oklch(97% 0 0);
  --stx-fg-strong: oklch(87% 0 0);
  --stx-fg-muted: oklch(70.8% 0 0);
  --stx-fg-soft: oklch(70.8% 0 0);
  --stx-fg-subtle: oklch(55.6% 0 0);
  --stx-surface: oklch(26.9% 0 0);
  --stx-surface-raised: oklch(37.1% 0 0);
  --stx-surface-sunken: oklch(37.1% 0 0);
  --stx-panel: oklch(26.9% 0 0);
  --stx-field: oklch(37.1% 0 0);
  --stx-page: oklch(20.5% 0 0);
  --stx-content: oklch(20.5% 0 0);
  --stx-surface-hover: oklch(37.1% 0 0);
  --stx-surface-raised-hover: oklch(43.9% 0 0);
  --stx-surface-sunken-hover: oklch(43.9% 0 0);
  --stx-field-hover: oklch(43.9% 0 0);
  --stx-link: oklch(70.7% 0.165 254.624);
  --stx-link-hover: oklch(80.9% 0.105 251.813);
  --stx-inverse: oklch(37.1% 0 0);
  --stx-inverse-ink: #fff;
  --stx-line: oklch(37.1% 0 0);
  --stx-line-strong: oklch(43.9% 0 0);
  --stx-line-hover: oklch(55.6% 0 0);
  --stx-accent: oklch(70.7% 0.165 254.624);
  --stx-info: oklch(78.9% 0.154 211.53);
  --stx-danger: oklch(70.4% 0.191 22.216);
  --stx-success: oklch(79.2% 0.209 151.711);
  --stx-warning: oklch(85.2% 0.199 91.936);
  --stx-accent-solid: oklch(54.6% 0.245 262.881);
  --stx-info-solid: oklch(60.9% 0.126 221.723);
  --stx-danger-solid: oklch(57.7% 0.245 27.325);
  --stx-success-solid: oklch(62.7% 0.194 149.214);
  --stx-warning-solid: oklch(68.1% 0.162 75.834);
  --stx-accent-solid-hover: oklch(48.8% 0.243 264.376);
  --stx-info-solid-hover: oklch(52% 0.105 223.128);
  --stx-danger-solid-hover: oklch(50.5% 0.213 27.518);
  --stx-success-solid-hover: oklch(52.7% 0.154 150.069);
  --stx-warning-solid-hover: oklch(55.4% 0.135 66.442);
  --stx-accent-ink: #fff;
  --stx-info-ink: oklch(20.5% 0 0);
  --stx-danger-ink: #fff;
  --stx-success-ink: oklch(20.5% 0 0);
  --stx-warning-ink: oklch(20.5% 0 0);
  --stx-accent-soft: oklch(37.9% 0.146 265.522);
  --stx-accent-soft-ink: oklch(88.2% 0.059 254.128);
  --stx-info-soft: oklch(39.8% 0.07 227.392);
  --stx-info-soft-ink: oklch(91.7% 0.08 205.041);
  --stx-danger-soft: oklch(39.6% 0.141 25.723);
  --stx-danger-soft-ink: oklch(88.5% 0.062 18.334);
  --stx-success-soft: oklch(39.3% 0.095 152.535);
  --stx-success-soft-ink: oklch(92.5% 0.084 155.995);
  --stx-warning-soft: oklch(42.1% 0.095 57.708);
  --stx-warning-soft-ink: oklch(94.5% 0.129 101.54);
  --stx-secondary: oklch(71.4% 0.203 305.504);
  --stx-secondary-solid: oklch(55.8% 0.288 302.321);
  --stx-secondary-solid-hover: oklch(49.6% 0.265 301.924);
  --stx-secondary-ink: #fff;
  --stx-secondary-soft: oklch(38.1% 0.176 304.987);
  --stx-secondary-soft-ink: oklch(90.2% 0.063 306.703);
  --stx-danger-fg: oklch(80.8% 0.114 19.571);
  --stx-danger-fg-subtle: oklch(63.7% 0.237 25.331);
  --stx-danger-line: oklch(57.7% 0.245 27.325);
  --stx-danger-focus: oklch(70.4% 0.191 22.216);
}
/* stx shape tokens — a radius by what the thing is. */
:root {
  --stx-radius-control: 0.375rem;
  --stx-radius-panel: 0.5rem;
  --stx-radius-pill: 9999px;
}
/* stx density tokens — how much room a control or a table cell takes. */
:root {
  --stx-control-px: 1rem;
  --stx-control-py: 0.5rem;
  --stx-control-text: 1rem;
  --stx-control-leading: 1.5rem;
  --stx-cell-px: 1.5rem;
  --stx-cell-py: 1rem;
  --stx-cell-text: 0.875rem;
  --stx-cell-leading: 1.25rem;
  --stx-cell-head-py: 0.75rem;
  --stx-cell-head-text: 0.75rem;
  --stx-cell-head-leading: 1rem;
}
@layer tc-base {
/*
! Tailwind CSS Preflight | MIT License | https://tailwindcss.com
*/

/*
  The fallback is a neutral grey, not currentColor.

  currentColor makes every border whose colour was never set take the TEXT
  colour, which is near-black on a light page and near-white on a dark one.
  That is never what an author means by a divider: the divide-* and
  border-width utilities set a width and no colour, so a plain divide-y
  rendered as a heavy black rule instead of a hairline.

  It also punished the obvious workaround. Setting border-color on a parent
  does not reach divide-* children, because divide targets
  "> :not([hidden]) ~ :not([hidden])" and the child declaration from this
  block wins.

  Tailwind preflight resolves this the same way (its default is gray-200).
  --border-color stays the escape hatch: set it once on :root, or per
  theme, and every uncoloured border follows.
*/
*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--border-color, #e5e7eb);
}

::before,
::after {
  --tc-content: '';
}

html,
:host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  line-height: inherit;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: var(--border-color, inherit);
  border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
select {
  text-transform: none;
}

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

dialog {
  padding: 0;
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: color-mix(in oklab, currentColor 50%, transparent);
}

button,
[role="button"] {
  cursor: pointer;
}

:disabled {
  cursor: default;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none;
}
}

@layer tc-base {
:root {
  color-scheme: light;
  --bg: #fbfbfa;
  --surface: #ffffff;
  --surface-2: #f2f3f1;
  --fg: #0b0f0d;
  --muted: #5c6864;
  --border: rgba(11, 15, 13, 0.1);
  --border-strong: rgba(11, 15, 13, 0.18);
  --accent: #2563eb;
  --accent-fg: #ffffff;
  --accent-soft: rgba(37, 99, 235, 0.09);
  --success: #059669;
  --success-soft: rgba(5, 150, 105, 0.12);
  --violet: #6d5efc;
  --amber: #d97706;
  --amber-soft: rgba(217, 119, 6, 0.12);
  --danger: #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.09);
  --shadow: 0 20px 50px -18px rgba(11, 15, 13, 0.22);
  --radius: 16px;
  --radius-sm: 10px;
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #080b0a;
    --surface: #101413;
    --surface-2: #161b19;
    --fg: #f2f5f3;
    --muted: #97a39d;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.15);
    --accent: #60a5fa;
    --accent-fg: #071630;
    --accent-soft: rgba(96, 165, 250, 0.14);
    --success: #2fe6a6;
    --success-soft: rgba(47, 230, 166, 0.14);
    --violet: #a196ff;
    --amber: #fbbf24;
    --amber-soft: rgba(251, 191, 36, 0.13);
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, 0.12);
    --shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.55);
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080b0a;
  --surface: #101413;
  --surface-2: #161b19;
  --fg: #f2f5f3;
  --muted: #97a39d;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
  --accent: #60a5fa;
  --accent-fg: #071630;
  --accent-soft: rgba(96, 165, 250, 0.14);
  --success: #2fe6a6;
  --success-soft: rgba(47, 230, 166, 0.14);
  --violet: #a196ff;
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.13);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.55);
}
}

@layer tc-base {
html:has(meta[name="stx-layout-group"][content="default"]), html:has(meta[name="stx-layout-group"][content="default"]) * { box-sizing: border-box; }
html:has(meta[name="stx-layout-group"][content="default"]) { background: var(--bg); }
html:has(meta[name="stx-layout-group"][content="default"])[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html:has(meta[name="stx-layout-group"][content="default"])[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
html:has(meta[name="stx-layout-group"][content="default"]):not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
html:has(meta[name="stx-layout-group"][content="default"]):not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
}

html:has(meta[name="stx-layout-group"][content="default"]) {
    body {
      min-width: 320px;
      min-height: 100vh;
      margin: 0;
      color: var(--fg);
      background: var(--bg);
      font-family: var(--font-body);
      font-size: 15px;
      transition: background-color 0.2s ease, color 0.2s ease;
    }
    a { color: inherit; text-decoration: none; }
    ::selection { background: var(--accent-soft); }
    .app-shell {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
    }

    /* ------------------------------------------------------------------ */

    /* Navigation (mirrors the marketing .site-nav)                        */

    /* ------------------------------------------------------------------ */
    .app-nav {
      position: sticky;
      top: 0;
      z-index: 40;
      border-bottom: 1px solid var(--border);
      background: color-mix(in srgb, var(--bg) 78%, transparent);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .app-nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 64px;
      gap: 1rem;
    }
    .brand {
      display: inline-flex;
      gap: 0.6rem;
      align-items: center;
      min-width: 0;
    }
    .brand-mark {
      display: grid;
      flex: 0 0 auto;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 8px;
      color: var(--accent-fg);
      background: var(--accent);
    }
    .brand-mark svg { width: 16px; height: 16px; }
    .brand-name {
      font-family: var(--font-display);
      font-size: 1.08rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      line-height: 1;
    }
    .app-links {
      display: flex;
      gap: 0.35rem;
      align-items: center;
    }
    .app-links a {
      padding: 0.45rem 0.9rem;
      border-radius: 999px;
      color: var(--muted);
      font-size: 0.9rem;
      font-weight: 500;
    }
    .app-links a:hover { color: var(--fg); background: var(--surface-2); }
    .app-links a.active {
      color: var(--accent);
      font-weight: 600;
      background: var(--accent-soft);
    }

    /* Overview only counts when you are actually ON /dashboard.
       The router re-derives these classes on the client after every
       navigation and its rule is `cur.startsWith(href)`, so "/dashboard"
       matches every dashboard route and Overview lit up next to whichever
       section you were really in -- two highlighted tabs, everywhere.
       It adds `exact-active` alongside `active` when the paths match
       exactly, so requiring both here narrows Overview to its own page
       while every other tab keeps the prefix match that (correctly) lights
       Monitors on /dashboard/monitors/new.
       Done in CSS rather than with data-stx-active-class on the link:
       StxLink emits its own default active-class attributes, and an
       override added on the element lands SECOND, where the HTML parser
       ignores it. */
    .app-links a[href="/dashboard"].active:not(.exact-active) {
      color: var(--muted);
      font-weight: 500;
      background: transparent;
    }
    .app-nav-right {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      min-width: 0;
    }
    .app-user {
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--muted);
      font-size: 0.82rem;
    }
    .app-nav-right form { display: contents; }
    .theme-toggle {
      display: inline-grid;
      place-items: center;
      width: 36px;
      height: 36px;
      flex: 0 0 auto;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--fg);
      background: var(--surface);
      cursor: pointer;
    }
    .theme-toggle:hover { border-color: var(--border-strong); }
    .theme-toggle svg { width: 16px; height: 16px; }
    .theme-toggle .icon-sun { display: none; }

    /* ------------------------------------------------------------------ */

    /* Buttons (marketing .button, plus a danger variant)                  */

    /* ------------------------------------------------------------------ */
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      min-height: 40px;
      padding: 0 1.05rem;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      color: var(--fg);
      font: inherit;
      font-size: 0.88rem;
      font-weight: 600;
      background: var(--surface);
      cursor: pointer;
      white-space: nowrap;
    }
    .button:hover { border-color: var(--fg); }
    .button:active { transform: translateY(1px); }
    .button.primary {
      border-color: var(--accent);
      color: var(--accent-fg);
      background: var(--accent);
    }
    .button.primary:hover { filter: brightness(1.05); border-color: var(--accent); }
    .button.danger {
      border-color: transparent;
      color: var(--danger);
      background: var(--danger-soft);
    }
    .button.danger:hover { border-color: var(--danger); }
    .button.sm { min-height: 32px; padding: 0 0.75rem; font-size: 0.8rem; }

    /* ------------------------------------------------------------------ */

    /* Page header                                                         */

    /* ------------------------------------------------------------------ */
    .page-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1.5rem;
      flex-wrap: wrap;
      padding: 2.25rem 0 1.5rem;
    }
    .page-head h1 {
      margin: 0 0 0.35rem;
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 2.6vw, 1.9rem);
      font-weight: 600;
      letter-spacing: -0.015em;
      line-height: 1.1;
    }
    .page-head .meta {
      margin: 0;
      color: var(--muted);
      font-size: 0.9rem;
    }
    .page-head .meta .mono { font-family: var(--font-mono); font-size: 0.82rem; }
    .page-head .actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
    .crumb {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      margin-bottom: 0.6rem;
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 500;
    }
    .crumb a:hover { color: var(--accent); }

    /* ------------------------------------------------------------------ */

    /* Stat cards                                                          */

    /* ------------------------------------------------------------------ */
    .stat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 0.9rem;
      margin: 0 0 1.5rem;
    }
    .stat-card {
      padding: 1rem 1.15rem;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
    }
    .stat-card dt {
      margin: 0 0 0.4rem;
      color: var(--muted);
      font-size: 0.76rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .stat-card dd {
      margin: 0;
      font-family: var(--font-display);
      font-size: 1.65rem;
      font-weight: 600;
      line-height: 1;
    }
    .stat-card dd small {
      color: var(--muted);
      font-family: var(--font-body);
      font-size: 0.78rem;
      font-weight: 500;
    }
    .stat-card .ok { color: var(--success); }
    .stat-card .warn { color: var(--amber); }
    .stat-card .bad { color: var(--danger); }

    /* ------------------------------------------------------------------ */

    /* Filter chips                                                        */

    /* ------------------------------------------------------------------ */
    .filter-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1.25rem;
      margin: 0 0 1.25rem;
    }
    .filter-group {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.35rem;
    }
    .filter-group .lbl {
      margin-right: 0.35rem;
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .chip {
      display: inline-block;
      padding: 0.32rem 0.8rem;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--muted);
      font-size: 0.8rem;
      font-weight: 500;
      background: var(--surface);
    }
    .chip:hover { color: var(--fg); border-color: var(--border-strong); }
    .chip.active {
      color: var(--accent-fg);
      border-color: var(--accent);
      background: var(--accent);
      font-weight: 600;
    }

    /* ------------------------------------------------------------------ */

    /* Data cards, tables, rows                                            */

    /* ------------------------------------------------------------------ */
    .card {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      overflow: hidden;
    }
    .card + .card { margin-top: 1.25rem; }
    .card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.9rem 1.25rem;
      border-bottom: 1px solid var(--border);
    }
    .card-head h2, .card-head h3 {
      margin: 0;
      font-family: var(--font-display);
      font-size: 0.98rem;
      font-weight: 600;
    }
    .card-head .sub { color: var(--muted); font-size: 0.82rem; }
    .card-body { padding: 1.25rem; }
    .card-foot {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.75rem 1rem;
      padding: 0 1.25rem 1.25rem;
    }
    .card-foot form { margin: 0; }
    .card-foot .sub {
      flex: 1 1 18rem;
      margin: 0;
      color: var(--muted);
      font-size: 0.85rem;
      line-height: 1.5;
    }
    .card-copy {
      margin: 0 0 0.75rem;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.6;
    }
    .card-copy:last-child { margin-bottom: 0; }
    .code-block + .card-copy, details > .card-copy { margin-top: 0.75rem; }

    /* Row-list table: a header row + link rows, marketing preview-card DNA */
    .rows { display: block; }
    .trow {
      display: grid;
      gap: 1rem;
      align-items: center;
      padding: 0.85rem 1.25rem;
      border-bottom: 1px solid var(--border);
    }
    .trow:last-child { border-bottom: 0; }
    .rows .thead {
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      background: var(--surface-2);
      border-bottom: 1px solid var(--border);
    }
    a.trow:hover { background: var(--surface-2); }
    .tcell { min-width: 0; }
    .tcell .name { font-weight: 600; font-size: 0.92rem; }
    .tcell .sub {
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 0.76rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .tcell.num {
      text-align: right;
      font-family: var(--font-mono);
      font-size: 0.82rem;
      color: var(--muted);
      font-variant-numeric: tabular-nums;
    }
    .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Status pills: the homepage's status-dot language, as a labeled pill */
    .pill {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.28rem 0.7rem;
      border-radius: 999px;
      font-size: 0.78rem;
      font-weight: 600;
      white-space: nowrap;
    }
    .pill .dot { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto; }
    .pill-up { color: var(--success); background: var(--success-soft); }
    .pill-up .dot { background: var(--success); }
    .pill-degraded { color: var(--amber); background: var(--amber-soft); }
    .pill-degraded .dot { background: var(--amber); }
    .pill-down { color: var(--danger); background: var(--danger-soft); }
    .pill-down .dot { background: var(--danger); }
    .pill-unknown { color: var(--muted); background: var(--surface-2); }
    .pill-unknown .dot { background: var(--border-strong); }

    /* Uptime bars (public status page DNA) */
    .uptime-bars { display: flex; gap: 2px; align-items: stretch; height: 30px; }
    .uptime-bars span { flex: 1 1 0; min-width: 1px; border-radius: 2px; background: var(--success); opacity: 0.85; }
    .uptime-bars span.warn { background: var(--amber); }
    .uptime-bars span.down { background: var(--danger); }
    .uptime-bars span.unknown { background: var(--border-strong); opacity: 0.45; }
    .spark { display: flex; align-items: flex-end; gap: 2px; height: 22px; }
    .spark span { width: 3px; border-radius: 1px; background: var(--success); opacity: 0.55; }

    /* ------------------------------------------------------------------ */

    /* Forms                                                               */

    /* ------------------------------------------------------------------ */
    .field { margin-bottom: 1rem; }
    .field label, .field .label {
      display: block;
      margin-bottom: 0.35rem;
      font-size: 0.82rem;
      font-weight: 600;
    }

    /* Help text is muted and small wherever it appears. This used to be scoped
       to `.field .help`, so the copy under a card — the alert-routing note, the
       assertions explainer, the delete warning — matched body text in size and
       contrast and shouted over the thing it was explaining. The margin stays
       field-scoped: outside a field the surrounding layout owns the spacing. */
    .help { color: var(--muted); font-size: 0.8rem; line-height: 1.55; }
    .field .help { margin-top: 0.35rem; }
    .input, .select, .textarea {
      width: 100%;
      min-height: 42px;
      padding: 0.55rem 0.85rem;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      color: var(--fg);
      font: inherit;
      font-size: 0.9rem;
      background: var(--bg);
    }
    .textarea { min-height: 0; }
    .input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 0.75; }
    .input:focus, .select:focus, .textarea:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .form-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1rem;
    }

    /* ------------------------------------------------------------------ */

    /* Readouts, code blocks, dialogs                                      */

    /* ------------------------------------------------------------------ */

    /* These began as monitors/[id].stx page styles and were copied onto the
       server pages and settings/cloud by markup alone. A view's <style> is
       not shared, so they rendered bare there. Anything two pages use lives
       here; tests/unit/dashboard-styles.test.ts holds that line. */
    .subhead {
      margin: 0 0 0.6rem;
      color: var(--muted);
      font-size: 0.76rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .kv {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1rem 1.25rem;
      margin: 0;
    }
    .kv dt {
      margin: 0 0 0.35rem;
      color: var(--muted);
      font-size: 0.76rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .kv dd {
      margin: 0;
      font-size: 0.92rem;
      font-weight: 600;
      overflow-wrap: anywhere;
    }
    .kv dd.big { font-family: var(--font-display); font-size: 1.65rem; }

    /* The marketing site's oss-code surface: intentionally dark in both themes. */
    .code-block {
      margin: 0;
      padding: 1rem;
      border-radius: var(--radius-sm);
      background: #0d1210;
      color: #8ce8bb;
      font-family: var(--font-mono);
      font-size: 0.78rem;
      line-height: 1.6;
      overflow-x: auto;
    }

    /* Copy affordance for .code-block. The wrapper and the button are attached by
       the script at the end of this partial, not written into the five call sites
       across the two views that have them — a copy button cannot do anything
       without JS, so building it in JS costs nothing and keeps the markup to the
       command itself. Colours are the code surface's own, not the page tokens:
       .code-block is deliberately dark in both themes, so a panel-coloured button
       would sit on it as a light patch. */
    .code-wrap { position: relative; }
    .code-wrap > .code-block { padding-right: 4.75rem; }
    .copy-btn {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      padding: 0.3rem 0.55rem;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(140, 232, 187, 0.28);
      background: rgba(13, 18, 16, 0.92);
      color: #8ce8bb;
      font-family: var(--font-mono);
      font-size: 0.68rem;
      line-height: 1;
      cursor: pointer;
      transition: border-color 0.12s ease, background-color 0.12s ease;
    }
    .copy-btn:hover { border-color: rgba(140, 232, 187, 0.62); background: rgba(140, 232, 187, 0.12); }
    .copy-btn:focus-visible { outline: 2px solid #8ce8bb; outline-offset: 2px; }

    /* Dialog shell and chrome, shared by every dashboard dialog. Styled through
       the same tokens as the cards, so it inherits both themes rather than
       needing a second palette. */
    .dlg {
      width: min(46rem, calc(100vw - 2rem));
      padding: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius, 14px);
      background: var(--surface);
      color: var(--fg);
      box-shadow: 0 24px 60px -20px rgba(11, 15, 13, 0.4);
    }

    /* Closed dialogs stay out of the flow whatever the UA stylesheet says. */
    .dlg:not([open]) { display: none; }
    .dlg::backdrop { background: rgba(11, 15, 13, 0.55); }
    .dlg form { margin: 0; }
    .dlg-head {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
      padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border);
    }
    .dlg-head h3 { margin: 0; font-size: 1.05rem; }
    .dlg-head .sub { display: block; margin-top: 0.2rem; font-size: 0.85rem; color: var(--muted); }
    .dlg-x {
      display: inline-flex; align-items: center; justify-content: center; flex: none;
      width: 32px; height: 32px; padding: 0; cursor: pointer;
      border: 1px solid transparent; border-radius: 8px;
      background: transparent; color: var(--muted);
    }
    .dlg-x:hover { border-color: var(--border); color: var(--fg); background: var(--surface-2); }
    .dlg-x svg { width: 17px; height: 17px; }

    /* Long lists scroll inside the dialog rather than pushing its footer past
       the bottom of the viewport. */
    .dlg-body { padding: 1.25rem; max-height: min(60vh, 32rem); overflow-y: auto; }
    .dlg-foot {
      display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem;
      padding: 0.9rem 1.25rem; border-top: 1px solid var(--border); background: var(--surface-2);
      border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;
    }

    /* Flash banners (post-redirect feedback) */
    .flash {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      margin: 0 0 1.25rem;
      padding: 0.8rem 1.1rem;
      border: 1px solid var(--accent);
      border-radius: var(--radius-sm);
      color: var(--accent);
      font-size: 0.88rem;
      font-weight: 500;
      background: var(--accent-soft);
    }
    .flash.error { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }

    /* Type tags: quiet bordered labels so the type column reads as metadata */
    .tag {
      display: inline-block;
      padding: 0.18rem 0.55rem;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      background: var(--surface-2);
      white-space: nowrap;
    }

    /* Mini check-history ticks for table rows (newest on the right) */
    .ticks { display: inline-flex; gap: 2px; align-items: stretch; height: 16px; }
    .ticks span { width: 4px; border-radius: 1px; background: var(--success); opacity: 0.8; }
    .ticks span.warn { background: var(--amber); }
    .ticks span.down { background: var(--danger); }
    .ticks span.unknown { background: var(--border-strong); opacity: 0.5; }
    .mono { font-family: var(--font-mono); }

    /* Floating chart tooltip, driven by .chart-hit rects (see the script
       at the end of this partial). */
    .chart-tip {
      position: fixed;
      z-index: 70;
      display: none;
      padding: 0.4rem 0.65rem;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      color: var(--fg);
      background: var(--surface);
      box-shadow: var(--shadow);
      font-family: var(--font-mono);
      font-size: 0.76rem;
      pointer-events: none;
      white-space: nowrap;
    }
    .chart-hit { cursor: crosshair; }
    .app-foot {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: 2rem 0 2.5rem;
      color: var(--muted);
      font-size: 0.8rem;
    }
  @media (max-width: 860px) {
      .app-shell { width: min(100% - 32px, 720px); }
      .app-nav-inner { flex-wrap: wrap; padding: 0.5rem 0; }
      .app-links {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: 0.25rem;
        scroll-snap-type: inline proximity;
        scrollbar-width: none;
      }
      .app-links::-webkit-scrollbar { display: none; }
      .app-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        scroll-snap-align: start;
      }
      .brand { min-height: 44px; }
      .theme-toggle { width: 44px; height: 44px; }
      .dlg-x { width: 44px; height: 44px; }
      .button, .button.sm, .team-switch > summary, .team-switch-item, .chip {
        min-height: 44px;
      }
      .chip { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; }

      /* 16px is the floor below which iOS Safari zooms a focused field. */
      .input, .select, .textarea { min-height: 44px; font-size: 16px; }
      .app-user { display: none; }
      .page-head { flex-direction: column; align-items: flex-start; }

      /* Fixed column tracks can't fit a phone; tables scroll in-frame. */
      .card.scroll-x { overflow-x: auto; }
      .card.scroll-x .trow { min-width: 780px; }
  }
}
}

@layer tc-base {
html:has(meta[name="stx-layout-group"][content="home"], meta[name="stx-layout-group"][content="marketing"]), html:has(meta[name="stx-layout-group"][content="home"], meta[name="stx-layout-group"][content="marketing"]) * { box-sizing: border-box; }
html:has(meta[name="stx-layout-group"][content="home"], meta[name="stx-layout-group"][content="marketing"]) {
    background: var(--bg);
    overflow-x: hidden;
    scroll-behavior: smooth;
  }
@keyframes brand-ping {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
    70%, 100% { box-shadow: 0 0 0 9px transparent; }
  }
@keyframes brand-beat {
    0%, 45%, 100% { transform: scale(1); }
    10% { transform: scale(1.16); }
    20% { transform: scale(1); }
    30% { transform: scale(1.1); }
    40% { transform: scale(1); }
  }
html:has(meta[name="stx-layout-group"][content="home"], meta[name="stx-layout-group"][content="marketing"])[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html:has(meta[name="stx-layout-group"][content="home"], meta[name="stx-layout-group"][content="marketing"])[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
html:has(meta[name="stx-layout-group"][content="home"], meta[name="stx-layout-group"][content="marketing"]):not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
html:has(meta[name="stx-layout-group"][content="home"], meta[name="stx-layout-group"][content="marketing"]):not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
}

html:has(meta[name="stx-layout-group"][content="home"], meta[name="stx-layout-group"][content="marketing"]) {
    body {
      min-width: 320px;
      min-height: 100vh;
      margin: 0;
      overflow-x: hidden;
      color: var(--fg);
      background: var(--bg);
      font-family: var(--font-body);
      transition: background-color 0.2s ease, color 0.2s ease;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    ::selection { background: var(--accent-soft); }
    .site-shell {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
    }

    /* ------------------------------------------------------------------ */

    /* Navigation                                                          */

    /* ------------------------------------------------------------------ */
    .site-nav {
      position: sticky;
      top: 0;
      z-index: 40;
      border-bottom: 1px solid var(--border);
      background: color-mix(in srgb, var(--bg) 78%, transparent);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 66px;
      gap: 1rem;
    }
    .brand {
      display: inline-flex;
      gap: 0.6rem;
      align-items: center;
      min-width: 0;
    }
    .brand-mark {
      position: relative;
      display: grid;
      flex: 0 0 auto;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 8px;
      color: var(--accent-fg);
      background: var(--accent);
    }

    /* Live "pulse": a radar ring emanates from the mark while the waveform
       gives a double heartbeat, so the logo reads as an active signal rather
       than a static tile. Disabled under reduced-motion. */
    .brand-mark::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      animation: brand-ping 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
    }
    .brand-mark svg { width: 16px; height: 16px; transform-origin: center; animation: brand-beat 2.6s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) {
      .brand-mark::after, .brand-mark svg { animation: none; }
  }
    .brand-name {
      font-family: var(--font-display);
      font-size: 1.12rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      line-height: 1;
    }
    .nav-links {
      display: flex;
      gap: 1.75rem;
      align-items: center;
      color: var(--muted);
      font-size: 0.9rem;
      font-weight: 500;
    }
    .nav-links a:hover { color: var(--fg); }
    .nav-links a[aria-current="true"] { color: var(--fg); }

    /* ------------------------------------------------------------------ */

    /* Mega menu (Features / Use cases hover panels)                       */

    /* ------------------------------------------------------------------ */
    .nav-item { position: relative; display: inline-flex; align-items: center; }
    .nav-item > a { display: inline-flex; align-items: center; gap: 0.28rem; }
    .nav-item > a .caret {
      width: 13px; height: 13px; opacity: 0.7;
      transition: transform 0.18s ease;
    }
    .nav-item:hover > a .caret,
    .nav-item:focus-within > a .caret { transform: rotate(180deg); }
    .nav-mega {
      position: absolute;
      top: 100%;
      left: 0;                        /* open rightward from the trigger's left edge */
      padding-top: 12px;              /* transparent bridge so hover survives the gap */
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 60;
    }
    .nav-item:hover > .nav-mega,
    .nav-item:focus-within > .nav-mega {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .nav-mega-inner {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: var(--shadow);
      padding: 1.1rem;
      transform: translateY(6px);
      transition: transform 0.18s ease;
    }
    .nav-item:hover > .nav-mega .nav-mega-inner,
    .nav-item:focus-within > .nav-mega .nav-mega-inner { transform: translateY(0); }
    .nav-mega.features .nav-mega-inner {
      display: grid;
      grid-template-columns: repeat(3, minmax(150px, 1fr));
      gap: 0.4rem 1.75rem;
      width: min(90vw, 620px);
    }
    .nav-mega.usecases .nav-mega-inner {
      display: grid;
      grid-template-columns: repeat(2, minmax(210px, 1fr));
      gap: 0.2rem 0.5rem;
      width: min(90vw, 500px);
    }
    .mega-group h5 {
      margin: 0.15rem 0 0.35rem;
      color: var(--muted);
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .mega-group a {
      display: block;
      padding: 0.32rem 0;
      color: var(--fg);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.2;
    }
    .mega-group a:hover { color: var(--accent); }
    .mega-link {
      display: grid;
      gap: 0.1rem;
      padding: 0.5rem 0.6rem;
      border-radius: var(--radius-sm);
    }
    .mega-link:hover { background: var(--surface-2); }
    .mega-link strong { color: var(--fg); font-size: 0.88rem; font-weight: 600; }
    .mega-link span { color: var(--muted); font-size: 0.78rem; line-height: 1.35; }
    .mega-foot {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem 1rem;
      margin-top: 0.6rem;
      padding-top: 0.7rem;
      border-top: 1px solid var(--border);
    }
    .mega-foot .mega-foot-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
    .mega-foot .mega-foot-links a { color: var(--muted); font-size: 0.82rem; font-weight: 500; }
    .mega-foot .mega-foot-links a:hover { color: var(--fg); }
    .mega-foot .mega-all {
      display: inline-flex; align-items: center; gap: 0.3rem;
      color: var(--accent); font-size: 0.82rem; font-weight: 600;
    }
    .mega-foot .mega-all svg { width: 14px; height: 14px; }
    .nav-right {
      display: flex;
      align-items: center;
      gap: 0.65rem;
    }

    /* Phone menu: a pure-CSS disclosure, no JS. Hidden until the desktop links
       go away at 900px, in the responsive block below. */
    .nav-menu { display: none; position: relative; }
    .nav-menu > summary {
      list-style: none;
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      cursor: pointer;
    }
    .nav-menu > summary::-webkit-details-marker { display: none; }
    .nav-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .burger, .burger::before, .burger::after {
      display: block;
      width: 18px;
      height: 1.5px;
      background: var(--fg);
      transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .burger { position: relative; }
    .burger::before { content: ""; position: absolute; top: -5px; }
    .burger::after { content: ""; position: absolute; top: 5px; }
    .nav-menu[open] .burger { background: transparent; }
    .nav-menu[open] .burger::before { transform: translateY(5px) rotate(45deg); }
    .nav-menu[open] .burger::after { transform: translateY(-5px) rotate(-45deg); }

    /* Bounded by the visible viewport: the 66px bar, the 12px gap and 12px of
       breathing room. The list is longer than a phone, so it scrolls in place;
       the page behind it is locked in the responsive block. */
    .nav-menu-panel {
      position: absolute;
      right: 0;
      top: calc(100% + 12px);
      z-index: 50;
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      min-width: 248px;
      max-height: calc(100dvh - 90px);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 0.6rem;
      background: var(--surface);
      border: 1px solid var(--border-strong);
      border-radius: var(--radius);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    }
    .nav-menu-panel a {
      padding: 0.6rem 0.7rem;
      border-radius: var(--radius-sm);
      color: var(--muted);
      font-size: 0.95rem;
      text-decoration: none;
    }
    .nav-menu-panel a:hover, .nav-menu-panel a[aria-current="true"] { color: var(--fg); background: var(--surface-2); }
    .nav-menu-panel .button { margin-top: 0.35rem; justify-content: center; }
    .nav-menu-group {
      padding: 0.7rem 0.7rem 0.25rem;
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .theme-toggle {
      display: inline-grid;
      place-items: center;
      width: 38px;
      height: 38px;
      flex: 0 0 auto;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--fg);
      background: var(--surface);
      cursor: pointer;
    }
    .theme-toggle:hover { border-color: var(--border-strong); }
    .theme-toggle svg { width: 17px; height: 17px; }
    .theme-toggle .icon-sun { display: none; }

    /* ------------------------------------------------------------------ */

    /* Buttons                                                             */

    /* ------------------------------------------------------------------ */
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      min-height: 44px;
      padding: 0 1.2rem;
      border: 1px solid var(--border-strong);
      border-radius: var(--radius-sm);
      color: var(--fg);
      font: inherit;
      font-size: 0.92rem;
      font-weight: 600;
      background: var(--surface);
      cursor: pointer;
      white-space: nowrap;
    }
    .button:hover { border-color: var(--fg); }
    .button:active { transform: translateY(1px); }
    .button svg { width: 17px; height: 17px; }
    .button.primary {
      border-color: var(--accent);
      color: var(--accent-fg);
      background: var(--accent);
    }
    .button.primary:hover { filter: brightness(1.05); border-color: var(--accent); }
    .button.wide { width: 100%; }

    /* ------------------------------------------------------------------ */

    /* Page hero (marketing subpages)                                      */

    /* ------------------------------------------------------------------ */
    .page-hero {
      max-width: 46rem;
      padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      margin-bottom: 1.5rem;
      padding: 0.4rem 0.85rem;
      border: 1px solid var(--border-strong);
      border-radius: 999px;
      color: var(--muted);
      font-size: 0.8rem;
      font-weight: 600;
    }
    .badge .dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .page-title {
      margin: 0 0 1.15rem;
      font-family: var(--font-display);
      font-size: clamp(2.1rem, 4.4vw, 3.3rem);
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.08;
    }
    .page-title .accent-word { color: var(--accent); }
    .page-lead {
      max-width: 40rem;
      margin: 0;
      color: var(--muted);
      font-size: 1.12rem;
      line-height: 1.65;
    }
    .page-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.85rem;
      margin-top: 2rem;
    }

    /* ------------------------------------------------------------------ */

    /* Sections                                                            */

    /* ------------------------------------------------------------------ */
    .section { padding: clamp(3rem, 6vw, 5rem) 0; }
    .section-head {
      max-width: 42rem;
      margin: 0 auto 2.75rem;
      text-align: center;
    }
    .section-head.left {
      margin: 0 0 2.5rem;
      text-align: left;
    }
    .eyebrow {
      display: block;
      margin-bottom: 0.75rem;
      color: var(--accent);
      font-size: 0.82rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .section-title {
      margin: 0 0 0.85rem;
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3vw, 2.4rem);
      font-weight: 600;
      letter-spacing: -0.015em;
      line-height: 1.15;
    }
    .section-copy {
      margin: 0;
      color: var(--muted);
      font-size: 1.05rem;
      line-height: 1.65;
    }
    .section-copy a {
      color: var(--fg);
      font-weight: 600;
      border-bottom: 1px solid var(--border-strong);
    }
    .section-copy a:hover { color: var(--accent); border-color: var(--accent); }

    /* Split row: text beside a panel. Cap consecutive use at two (see the
       design pre-flight); break runs with checklists, bands, or grids. */
    .split-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(2rem, 5vw, 4.5rem);
      align-items: center;
      padding: clamp(2rem, 4vw, 3rem) 0;
    }
    .split-row.flip > .split-panel { order: -1; }
    .split-copy h2, .split-copy h3 {
      margin: 0 0 0.75rem;
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 2.4vw, 1.9rem);
      font-weight: 600;
      letter-spacing: -0.01em;
      line-height: 1.2;
    }
    .split-copy p {
      margin: 0 0 1rem;
      color: var(--muted);
      font-size: 1rem;
      line-height: 1.65;
    }
    .split-copy p:last-child { margin-bottom: 0; }
    .split-copy a {
      color: var(--fg);
      font-weight: 600;
      border-bottom: 1px solid var(--border-strong);
    }
    .split-copy a:hover { color: var(--accent); border-color: var(--accent); }

    /* ------------------------------------------------------------------ */

    /* Panels: product-style data cards (mirror the real dashboard UI)     */

    /* ------------------------------------------------------------------ */
    .panel {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .panel-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1rem 1.25rem;
      border-bottom: 1px solid var(--border);
    }
    .panel-top strong {
      font-family: var(--font-display);
      font-size: 0.95rem;
      font-weight: 600;
    }
    .pill {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      color: var(--success);
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    .pill .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--success); }
    .pill.warn { color: var(--amber); }
    .pill.warn .dot { background: var(--amber); }
    .pill.down { color: #ef4444; }
    .pill.down .dot { background: #ef4444; }
    .panel-list { padding: 0.5rem; display: grid; gap: 0.15rem; }
    .panel-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.85rem 0.85rem;
      border-radius: 10px;
    }
    .panel-row:hover { background: var(--surface-2); }
    .panel-row-main {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      min-width: 0;
    }
    .panel-row-main .dot {
      flex: 0 0 auto;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--success);
      box-shadow: 0 0 0 4px var(--success-soft);
    }
    .panel-row-main .dot.warn { background: var(--amber); box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.12); }
    .panel-row-main .dot.down { background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12); }
    .panel-row-name { font-size: 0.9rem; font-weight: 600; }
    .panel-row-sub {
      font-family: var(--font-mono);
      font-size: 0.74rem;
      color: var(--muted);
    }
    .panel-row-meta {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex: 0 0 auto;
      font-size: 0.78rem;
      color: var(--muted);
    }
    .panel-body { padding: 1.25rem; }
    .spark {
      display: flex;
      align-items: flex-end;
      gap: 2px;
      height: 22px;
    }
    .spark span {
      width: 3px;
      border-radius: 1px;
      background: var(--success);
      opacity: 0.55;
    }
    .uptime-bars {
      display: flex;
      gap: 2px;
      align-items: stretch;
      height: 30px;
    }
    .uptime-bars span {
      flex: 1 1 0;
      min-width: 1px;
      border-radius: 2px;
      background: var(--success);
      opacity: 0.75;
    }
    .uptime-bars span.warn { background: var(--amber); }
    .uptime-bars span.down { background: #ef4444; }

    /* Dark terminal/code panel (multiline sibling of the homepage oss-code) */
    .code-panel {
      padding: 1.25rem 1.5rem;
      border-radius: var(--radius);
      color: #8ce8bb;
      font-family: var(--font-mono);
      font-size: 0.85rem;
      line-height: 1.7;
      background: #0d1210;
      overflow-x: auto;
    }
    .code-panel .cmt { color: #5c6864; }
    .code-panel .str { color: #c5b3ff; }
    .code-panel pre { margin: 0; font: inherit; }

    /* ------------------------------------------------------------------ */

    /* Cards & grids                                                       */

    /* ------------------------------------------------------------------ */
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.25rem;
    }
    .feature-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feature-card {
      padding: 1.85rem;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
    }
    a.feature-card { transition: border-color 0.15s ease; }
    a.feature-card:hover { border-color: var(--accent); }
    .feature-icon {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      margin-bottom: 1.35rem;
      border-radius: 11px;
      color: var(--accent);
      background: var(--accent-soft);
    }
    .feature-icon svg { width: 22px; height: 22px; }
    .feature-card h3 {
      margin: 0 0 0.5rem;
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: 600;
    }
    .feature-card p {
      margin: 0;
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.6;
    }
    .feature-card .card-more {
      display: inline-block;
      margin-top: 1rem;
      color: var(--accent);
      font-size: 0.88rem;
      font-weight: 600;
    }

    /* Checklist: dense fact rows without card chrome */
    .check-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem 2.5rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .check-list li {
      display: flex;
      align-items: flex-start;
      gap: 0.65rem;
      font-size: 0.95rem;
      line-height: 1.55;
      color: var(--muted);
    }
    .check-list li strong { color: var(--fg); font-weight: 600; }
    .check-list svg {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      margin-top: 0.15rem;
      color: var(--accent);
    }

    /* ------------------------------------------------------------------ */

    /* Comparison table                                                    */

    /* ------------------------------------------------------------------ */
    .compare-scroll {
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
    }
    .compare-table {
      width: 100%;
      min-width: 760px;
      border-collapse: collapse;
      font-size: 0.9rem;
    }
    .compare-table th,
    .compare-table td {
      padding: 0.8rem 1rem;
      border-bottom: 1px solid var(--border);
      text-align: center;
      white-space: nowrap;
    }
    .compare-table tr:last-child th,
    .compare-table tr:last-child td { border-bottom: 0; }
    .compare-table thead th {
      position: sticky;
      top: 0;
      background: var(--surface-2);
      font-family: var(--font-display);
      font-size: 0.88rem;
      font-weight: 600;
      z-index: 1;
    }
    .compare-table th[scope="row"] {
      text-align: left;
      font-weight: 500;
      color: var(--muted);
      white-space: normal;
      min-width: 180px;
    }
    .compare-table th[scope="row"] a {
      color: inherit;
      border-bottom: 1px dashed var(--border-strong);
    }
    .compare-table th[scope="row"] a:hover { color: var(--accent); border-color: var(--accent); }
    .compare-table .col-us {
      background: var(--accent-soft);
      font-weight: 600;
    }
    .compare-table thead .col-us { color: var(--accent); }
    .compare-table .group-row th {
      padding-top: 1.4rem;
      color: var(--fg);
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 0.85rem;
    }
    .cell-yes { color: var(--accent); font-weight: 700; }
    .cell-no { color: var(--muted); opacity: 0.55; }
    .cell-part { color: var(--amber); font-size: 0.82rem; font-weight: 600; }
    .table-note {
      margin: 0.85rem 0 0;
      color: var(--muted);
      font-size: 0.82rem;
    }

    /* Verdict cards ("choose X if...") */
    .verdict-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.25rem;
    }
    .verdict-card {
      padding: 1.6rem;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--surface);
    }
    .verdict-card.lead {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px var(--accent);
    }
    .verdict-card h3 {
      margin: 0 0 0.35rem;
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
    }
    .verdict-card .verdict-tag {
      display: block;
      margin-bottom: 0.85rem;
      color: var(--muted);
      font-size: 0.8rem;
    }
    .verdict-card p {
      margin: 0;
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.6;
    }

    /* ------------------------------------------------------------------ */

    /* Bands                                                               */

    /* ------------------------------------------------------------------ */
    .note-band {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 2rem;
      align-items: center;
      padding: clamp(2rem, 5vw, 3rem);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: linear-gradient(135deg, var(--surface), var(--surface-2));
    }
    .note-band h2 {
      margin: 0 0 0.75rem;
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 2.6vw, 2rem);
      font-weight: 600;
    }
    .note-band p {
      max-width: 38rem;
      margin: 0;
      color: var(--muted);
      line-height: 1.6;
    }
    .note-band .oss-code {
      padding: 1rem 1.25rem;
      border-radius: var(--radius-sm);
      color: #8ce8bb;
      font-family: var(--font-mono);
      font-size: 0.85rem;
      white-space: nowrap;
      background: #0d1210;
    }
    .cta-band {
      padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 4vw, 3rem);
      border-radius: var(--radius);
      color: #ffffff;
      text-align: center;
      background-color: #2563eb;
      background-image: linear-gradient(135deg, var(--accent), var(--violet));
    }
    .cta-band h2 {
      margin: 0 0 0.85rem;
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 3.2vw, 2.5rem);
      font-weight: 600;
    }
    .cta-band p {
      margin: 0 0 1.75rem;
      font-size: 1.05rem;
      opacity: 0.92;
    }
    .cta-band .button.primary {
      border-color: #ffffff;
      color: #0b0f0d;
      background: #ffffff;
    }
    .cta-band .actions {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.85rem;
    }
    .cta-band .button:not(.primary) {
      border-color: rgba(255, 255, 255, 0.5);
      color: #ffffff;
      background: transparent;
    }

    /* ------------------------------------------------------------------ */

    /* FAQ                                                                 */

    /* ------------------------------------------------------------------ */
    .faq-list {
      max-width: 44rem;
      margin: 0 auto;
      display: grid;
      gap: 0.75rem;
    }
    .faq-item {
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background: var(--surface);
      overflow: hidden;
    }
    .faq-item summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.1rem 1.35rem;
      list-style: none;
      font-weight: 600;
      cursor: pointer;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: "+";
      flex: 0 0 auto;
      color: var(--muted);
      font-family: var(--font-display);
      font-size: 1.3rem;
    }
    .faq-item[open] summary::after { content: "\2013"; }
    .faq-item p {
      margin: 0;
      padding: 0 1.35rem 1.25rem;
      color: var(--muted);
      line-height: 1.6;
    }

    /* ------------------------------------------------------------------ */

    /* Footer                                                              */

    /* ------------------------------------------------------------------ */
    .site-footer {
      margin-top: 1rem;
      padding: 3rem 0 2.5rem;
      border-top: 1px solid var(--border);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr repeat(4, 1fr);
      gap: 2rem;
      margin-bottom: 2.5rem;
    }
    .footer-brand p {
      max-width: 20rem;
      margin-top: 0.85rem;
      color: var(--muted);
      font-size: 0.9rem;
      line-height: 1.6;
    }
    .footer-col h4 {
      margin: 0 0 1rem;
      color: var(--muted);
      font-size: 0.82rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .footer-col ul {
      display: grid;
      gap: 0.65rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .footer-col a { font-size: 0.92rem; color: var(--fg); }
    .footer-col a:hover { color: var(--accent); }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding-top: 1.75rem;
      border-top: 1px solid var(--border);
      color: var(--muted);
      font-size: 0.85rem;
    }
    .footer-social { display: flex; gap: 0.75rem; }
    .footer-social a {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--muted);
    }
    .footer-social a:hover { color: var(--fg); border-color: var(--border-strong); }
    .footer-social svg { width: 17px; height: 17px; }

    /* ------------------------------------------------------------------ */

    /* Responsive                                                          */

    /* ------------------------------------------------------------------ */
  @media (max-width: 900px) {
      .site-shell { width: min(100% - 32px, 720px); }
      .split-row { grid-template-columns: minmax(0, 1fr); }
      .split-row.flip > .split-panel { order: 0; }
      .feature-grid,
      .feature-grid.two,
      .verdict-grid,
      .check-list {
        grid-template-columns: minmax(0, 1fr);
      }
      .note-band { grid-template-columns: minmax(0, 1fr); }
      .note-band .oss-code { white-space: normal; word-break: break-all; }
      .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .nav-links { display: none; }
      .nav-menu { display: block; }
      body:has(.nav-menu[open]) { overflow: hidden; }
  }
  @media (max-width: 560px) {
      .page-actions,
      .cta-band .actions {
        flex-direction: column;
        align-items: stretch;
      }
      .footer-grid { grid-template-columns: minmax(0, 1fr); }
      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
      }
      .nav-right { gap: 0.4rem; }
      .nav-right a.button:not(.primary) { display: none; }
      .nav-right .button.primary { padding: 0 0.85rem; font-size: 0.85rem; }
      .brand-name { font-size: 1rem; }
  }
}
}

@layer tc-base {
@keyframes mode-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

html:has(meta[name="stx-layout-group"][content="home"]) {
  body[data-site-mode="coming-soon"] .site-content {
    display: none;
  }
  body[data-site-mode="coming-soon"].site-mode-unlocked .site-content {
    display: block;
  }
  body[data-site-mode="coming-soon"].site-mode-unlocked .mode-screen,
  body:not([data-site-mode="coming-soon"]) .mode-screen {
    display: none;
  }
  .mode-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem;
  }
  .mode-card {
    position: relative;
    width: min(680px, 100%);
    padding: clamp(2.25rem, 6vw, 4rem);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: center;
  }
  .mode-content > * {
    animation: mode-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .mode-content > *:nth-child(2) { animation-delay: 0.05s; }
  .mode-content > *:nth-child(3) { animation-delay: 0.1s; }
  .mode-content > *:nth-child(4) { animation-delay: 0.15s; }
  @media (prefers-reduced-motion: reduce) {
    .mode-content > * { animation: none; }
  }
  .mode-title {
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .mode-lead {
    margin: 0 0 0.75rem;
    color: var(--accent);
    font-weight: 600;
    font-size: 1.05rem;
  }
  .mode-copy {
    max-width: 32rem;
    margin: 0 auto;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.6;
  }
  .mode-subscribe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.75rem auto 0;
    max-width: 26rem;
  }
  .mode-subscribe input {
    flex: 1 1 12rem;
    min-height: 46px;
    padding: 0 1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--fg);
    font: inherit;
    font-size: 0.95rem;
    background: var(--bg);
  }
  .mode-subscribe input::placeholder { color: var(--muted); opacity: 0.75; }
  .mode-subscribe input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .mode-subscribe button {
    flex: 0 0 auto;
    min-height: 46px;
  }
  .mode-meta {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
  }
  .mode-textlink {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: 1px;
  }
  .mode-textlink:hover { color: var(--accent); border-color: var(--accent); }
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.95fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    padding: clamp(3rem, 8vw, 6.5rem) 0 clamp(2rem, 4vw, 3rem);
  }
  .hero-title {
    margin: 0 0 1.15rem;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 3.9rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.05;
  }
  .hero-title .accent-word { color: var(--accent); }
  .hero-copy {
    max-width: 38rem;
    margin: 0;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1.65;
  }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
  }
  .hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
  }
  .hero-stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
  }
  .hero-stat span {
    display: block;
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.82rem;
  }
  .preview-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  .preview-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
  }
  .preview-top strong {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
  }
  .preview-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--success);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .preview-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--success);
  }
  .preview-list {
    padding: 0.5rem;
    display: grid;
    gap: 0.15rem;
  }
  .preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0.85rem;
    border-radius: 10px;
  }
  .preview-row:hover { background: var(--surface-2); }
  .preview-row-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
  }
  .preview-row-main .dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--success);
    box-shadow: 0 0 0 4px var(--success-soft);
  }
  .preview-row-name {
    font-size: 0.9rem;
    font-weight: 600;
  }
  .preview-row-url {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--muted);
  }
  .preview-row-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
    font-size: 0.78rem;
    color: var(--muted);
  }
  .preview-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 22px;
  }
  .preview-chart span {
    width: 3px;
    border-radius: 1px;
    background: var(--success);
    opacity: 0.55;
  }


  /* Homepage-scale overrides of the shared .section* rules */
  .section {
    padding: clamp(3.5rem, 7vw, 6rem) 0;
  }
  .section-head {
    max-width: 40rem;
    margin: 0 auto 3rem;
    text-align: center;
  }
  .section-head.left {
    margin: 0 0 3rem;
    text-align: left;
  }
  .section-title {
    margin: 0 0 0.85rem;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.15;
  }
  .section-copy {
    margin: 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.65;
  }
  .steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
  .step em {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--border-strong);
    font-family: var(--font-display);
    font-style: normal;
    font-size: 2.1rem;
    font-weight: 600;
  }
  .step h3 {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 600;
  }
  .step p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
  }
  .showcase {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  .showcase-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
  }
  .showcase-bar .traffic-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--border-strong);
  }
  .showcase-url {
    margin-left: 0.5rem;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
  }
  .showcase-body {
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 3rem);
  }
  .showcase-banner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    color: var(--success);
    font-weight: 600;
    background: var(--success-soft);
  }
  .showcase-banner .dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--success);
  }
  .showcase-grid {
    display: grid;
    gap: 0.25rem;
  }
  .showcase-row {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border);
  }
  .showcase-row:last-child { border-bottom: 0; }
  .showcase-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .showcase-row-main {
    display: flex;
    align-items: center;
    gap: 0.65rem;
  }
  .showcase-row-main .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--success);
  }
  .showcase-uptime {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.8rem;
  }


  /* Uptime-history strip: a row of thin day-bars, mostly green with the
     odd amber/red blip. Decorative (the % label carries the real info),
     so it's aria-hidden in the markup. */
  .showcase-ticks {
    display: flex;
    gap: 2px;
    align-items: stretch;
    height: 26px;
  }
  .showcase-tick {
    flex: 1 1 0;
    min-width: 1px;
    border-radius: 2px;
    opacity: 0.9;
  }
  .oss-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    padding: clamp(2rem, 5vw, 3rem);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--surface), var(--surface-2));
  }
  .oss-band h2 {
    margin: 0 0 0.75rem;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 600;
  }
  .oss-band p {
    max-width: 34rem;
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
  }
  .oss-code {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    color: #8ce8bb;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    white-space: nowrap;
    background: #0d1210;
  }
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    max-width: 52rem;
    margin: 0 auto;
  }
  .price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
  }
  .price-card.highlighted {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), var(--shadow);
  }
  .price-card.highlighted::before {
    content: "Most popular";
    position: absolute;
    top: -12px;
    left: 2rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    color: var(--accent-fg);
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--accent);
  }
  .price-name {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
  }
  .price-value {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
  }
  .price-value strong {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 600;
  }
  .price-value span { color: var(--muted); font-size: 0.9rem; }
  .price-desc {
    margin: 0 0 1.5rem;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.55;
  }
  .price-features {
    display: grid;
    gap: 0.65rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
  }
  .price-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
  }
  .price-features svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 0.1rem;
    color: var(--accent);
  }
  .price-card .button { margin-top: auto; }


  /* Homepage footer has 4 blocks; the shared rule assumes 5 */
  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2.5rem;
  }
  @media (max-width: 900px) {
    .hero {
      grid-template-columns: minmax(0, 1fr);
      padding: 2.5rem 0 2rem;
    }
    .hero-stats {
      gap: 1.5rem;
    }
    .feature-grid,
    .steps {
      grid-template-columns: minmax(0, 1fr);
    }
    .oss-band,
    .pricing-grid {
      grid-template-columns: minmax(0, 1fr);
    }
    .oss-code {
      white-space: normal;
      word-break: break-all;
    }
  }
  @media (max-width: 560px) {
    .hero-actions,
    .cta-band .actions {
      flex-direction: column;
      align-items: stretch;
    }
  }
}
}

@layer tc-base {
html:has(meta[name="stx-layout-group"][content="auth"]), html:has(meta[name="stx-layout-group"][content="auth"]) * { box-sizing: border-box; }
@keyframes brand-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes brand-beat { 0%, 45%, 100% { transform: scale(1); } 10% { transform: scale(1.16); } 20% { transform: scale(1); } 30% { transform: scale(1.1); } 40% { transform: scale(1); } }

html:has(meta[name="stx-layout-group"][content="auth"]) {
  /* The design tokens were here, and in partials/app-head.stx and
     partials/marketing-head.stx as well -- three copies of one palette.
     They are one `paletteCss()` preflight in config/crosswind.ts now:
     rule 3 / §11.2 puts a custom property in that file and nowhere else.
     This copy was the one that had drifted -- light --danger-soft at 0.08
     where the other two said 0.09 -- and it was missing --success,
     --amber, --shadow and --font-mono, which it now gains. */
  body {
    margin: 0;
    font-family: var(--font-body); color: var(--fg); background: var(--bg);
  }

  /* The routed container. The stx router resolves its swap target as
     `document.querySelector(containerSel) || '[data-stx-content]' ||
     'main'`, and config/ui.ts sets no container override, so the
     default 'main' is what applies. This layout had no such element,
     so the lookup returned null and the router took its
     `if (!newContent) { location.href = url }` branch — every StxLink
     between /login and /register fell back to a full page load and
     looked like the router was simply off.
     The centering below moved off the body rather than being added: a
     block-level element fills the same box the body did, so .auth-card
     is still the grid item of a 100vh, 2rem-padded grid and nothing
     shifts. */
  main {
    min-height: 100vh; display: grid; place-items: center; padding: 2rem;
  }
  a { color: inherit; text-decoration: none; }
  .auth-card {
    width: min(400px, 100%); padding: clamp(1.75rem, 5vw, 2.5rem);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); box-shadow: 0 20px 50px -18px rgba(11,15,13,0.22);
  }
  .brand { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.75rem; }
  .brand-mark { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--accent-fg); background: var(--accent); }

  /* Live "pulse" — radar ring + double heartbeat so the mark reads as an active signal. Off under reduced-motion. */
  .brand-mark::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: brand-ping 2.6s cubic-bezier(0, 0, 0.2, 1) infinite; }
  .brand-mark svg { width: 16px; height: 16px; transform-origin: center; animation: brand-beat 2.6s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) {
   .brand-mark::after, .brand-mark svg { animation: none; }
  }
  .brand-name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; }
  h1 { margin: 0 0 0.4rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
  .sub { margin: 0 0 1.75rem; color: var(--muted); font-size: 0.95rem; }
  label { display: block; margin-bottom: 0.4rem; font-size: 0.85rem; font-weight: 600; }
  .field { margin-bottom: 1.1rem; }
  .hint { margin-top: 0.35rem; color: var(--muted); font-size: 0.78rem; }
   /* register */

  /* Scoped to `.field input` (specificity 0,1,1) so it beats Crosswind's
     preflight `input { padding: 0 }` (0,0,1) regardless of stylesheet
     order — otherwise the reset zeroed the padding and the placeholder sat
     flush against the border. */
  .field input {
    width: 100%; min-height: 46px; padding: 0.7rem 0.95rem; line-height: 1.4; box-sizing: border-box;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    color: var(--fg); font: inherit; font-size: 16px; background: var(--bg);
  }
  .field input::placeholder { color: var(--muted); opacity: 0.75; }
  .field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .button {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; min-height: 46px; padding: 0 1.2rem; margin-top: 0.35rem;
    border: 1px solid var(--accent); border-radius: var(--radius-sm);
    color: var(--accent-fg); font: inherit; font-size: 0.95rem; font-weight: 600;
    background: var(--accent); cursor: pointer;
  }
  .button:hover { filter: brightness(1.05); }
  .button:disabled { opacity: 0.6; cursor: default; }
  .error {
    display: none; margin-bottom: 1.1rem; padding: 0.75rem 0.9rem;
    border: 1px solid var(--danger); border-radius: var(--radius-sm);
    color: var(--danger); font-size: 0.88rem; background: var(--danger-soft);
  }
  .error.show { display: block; }
  .alt { margin-top: 1.5rem; text-align: center; color: var(--muted); font-size: 0.9rem; }
  .alt a { color: var(--accent); font-weight: 600; }
  .sso-divider {
    display: flex; align-items: center; gap: 0.75rem; margin: 1.4rem 0 1.1rem;
    color: var(--muted); font-size: 0.8rem;
  }
  .sso-divider::before, .sso-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
  .sso-buttons { display: grid; gap: 0.6rem; }
  .button.sso {
    margin-top: 0;
    border-color: var(--border-strong); color: var(--fg); background: var(--surface);
  }
  .button.sso:hover { border-color: var(--fg); filter: none; }

  /* Brand marks on the SSO buttons: data-URI backgrounds for multicolor
     logos (Google, Microsoft); currentColor masks for the monochrome
     ones so they follow the button's text color in dark mode. */
  .sso-icon { width: 18px; height: 18px; flex: none; display: inline-block; }
  .sso-icon-google { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center/contain no-repeat; }
  .sso-icon-entra { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Crect x='1' y='1' width='9' height='9' fill='%23f25022'/%3E%3Crect x='11' y='1' width='9' height='9' fill='%237fba00'/%3E%3Crect x='1' y='11' width='9' height='9' fill='%2300a4ef'/%3E%3Crect x='11' y='11' width='9' height='9' fill='%23ffb900'/%3E%3C/svg%3E") center/contain no-repeat; }
  .sso-icon-apple, .sso-icon-github, .sso-icon-okta, .sso-icon-oidc, .sso-icon-passkey {
    background-color: currentColor;
    -webkit-mask: var(--sso-mask) center/contain no-repeat;
    mask: var(--sso-mask) center/contain no-repeat;
  }
  .sso-icon-apple { --sso-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z'/%3E%3C/svg%3E"); }
  .sso-icon-github { --sso-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2z'/%3E%3C/svg%3E"); }
  .sso-icon-okta { --sso-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10z'/%3E%3C/svg%3E"); }
  .sso-icon-oidc { --sso-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3C/svg%3E"); }
  .sso-icon-passkey { --sso-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 14a2 2 0 0 1-2-2 2 2 0 0 1 2-2 2 2 0 0 1 2 2 2 2 0 0 1-2 2m5.65-4A5.99 5.99 0 0 0 7 6a6 6 0 0 0-6 6 6 6 0 0 0 6 6 5.99 5.99 0 0 0 5.65-4H17v4h4v-4h2v-4H12.65z'/%3E%3C/svg%3E"); }
  .row-between { display: flex; align-items: center; justify-content: space-between; }
  .hide { display: none !important; }
}
}

@layer tc-base {
/* Dark theme for the public status page. The page is built from
   Crosswind utilities with a light palette; these rules remap that
   bounded palette when the resolved theme is dark. Scoped to
   [data-theme="dark"] so light mode is the untouched utilities. */

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] body { background-color: #080b0a !important; color: #f2f5f3 !important; }

/* Surfaces */

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .bg-white { background-color: #161b19 !important; }

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .bg-gray-50 { background-color: #080b0a !important; }

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .bg-gray-900 { background-color: #1d2422 !important; }

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .bg-gray-300 { background-color: #3a423f !important; }

/* Text */

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .text-gray-900 { color: #f2f5f3 !important; }

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .text-gray-600 { color: #c2ccc7 !important; }

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .text-gray-500 { color: #97a39d !important; }

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .text-gray-400 { color: #737d78 !important; }

/* Borders */

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .border-gray-200 { border-color: rgba(255, 255, 255, 0.09) !important; }

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .border-gray-300 { border-color: rgba(255, 255, 255, 0.16) !important; }

/* Status accents — soft backgrounds, borders, and text tuned for dark.
   The solid status dots (bg-emerald/amber/red-500) already read well on
   a dark surface and are left vivid. */

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .bg-emerald-50 { background-color: rgba(47, 230, 166, 0.12) !important; }

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .bg-amber-50 { background-color: rgba(251, 191, 36, 0.12) !important; }

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .bg-red-50 { background-color: rgba(248, 113, 113, 0.12) !important; }

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .bg-blue-50 { background-color: rgba(96, 165, 250, 0.12) !important; }

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .border-emerald-200 { border-color: rgba(47, 230, 166, 0.28) !important; }

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .border-amber-200 { border-color: rgba(251, 191, 36, 0.28) !important; }

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .border-red-200 { border-color: rgba(248, 113, 113, 0.28) !important; }

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .border-blue-200 { border-color: rgba(96, 165, 250, 0.28) !important; }

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .text-emerald-600 { color: #34d399 !important; }

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .text-amber-600 { color: #fbbf24 !important; }

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] .text-red-600 { color: #f87171 !important; }

html:has(meta[name="stx-layout-group"][content="status"])[data-theme="dark"] body { transition: background-color 0.15s ease, color 0.15s ease !important; }

    
}

@layer tc-base {
@keyframes rt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

html:has(meta[name="stx-layout-group"][content="default"]) {
  /* ---- components/app-nav.stx ---- */
  .team-switch { position: relative; }
  .team-switch > summary {
    display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; list-style: none;
    padding: 0.35rem 0.6rem; border: 1px solid var(--border); border-radius: 999px;
    font-size: 0.85rem; font-weight: 600; color: var(--fg); background: var(--surface, transparent);
    max-width: 220px;
  }
  .team-switch > summary::-webkit-details-marker { display: none; }
  .team-switch > summary:hover { border-color: var(--border-strong); }
  .team-switch > summary svg { width: 14px; height: 14px; color: var(--muted); flex: none; }
  .team-switch-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .team-switch[open] > summary svg { transform: rotate(180deg); }
  .team-switch-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 240px; max-width: 320px;
    padding: 0.35rem; border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface); box-shadow: 0 18px 40px -14px rgba(11,15,13,0.28);
  }
  .team-switch-head { margin: 0.25rem 0.5rem 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  .team-switch-menu form { margin: 0; }
  .team-switch-item {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%;
    padding: 0.5rem 0.55rem; border: 0; border-radius: 8px; cursor: pointer;
    font: inherit; font-size: 0.9rem; text-align: left; color: var(--fg); background: transparent;
  }
  .team-switch-item:hover { background: var(--surface-2); }
  .team-switch-item.is-active { color: var(--accent); font-weight: 600; }
  .team-switch-chk { color: var(--accent); flex: none; }


  /* ---- shared ---- */

  /* Shared by more than one page, so declared once.

     `.chan-ico` was byte-identical in monitors/[id].stx and
     settings/notifications.stx; `.mon-chart` in monitors/[id].stx,
     servers/[id].stx and sites/[slug].stx, the last writing the same three
     declarations in a different order. `.mon-legend` is the monitor and server
     version -- sites/[slug].stx had its own, at a wider gap and without the
     uppercase, and that one is `.site-legend` now rather than a fourth thing
     called `.mon-legend`. While each block shipped only on its own page the
     duplication cost nothing; in one sheet it is a collision. */
  .chan-ico { display: inline-flex; vertical-align: middle; margin-right: 0.4rem; color: var(--muted); }
  .chan-ico svg { width: 18px; height: 18px; }
  .mon-chart { display: block; width: 100%; height: auto; }
  .mon-legend {
    display: flex;
    gap: 1rem;
    margin-top: 0.6rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }


  /* ---- dashboard/monitors/[id].stx ---- */

    /* Page-specific, on app-head tokens: chart sizing, chart legends, the
       channel icons and the alert-routing states. The readout grid, .subhead,
       .code-block and the dialog shell and chrome moved to app-head once the
       server pages started using them too. */

    /* Inline brand mark next to each channel type label. Monochrome,
       inherits currentColor so it reads in light + dark. */


    /* Alert routing: the card's two empty states. */
    .alert-empty {
      display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
      padding: 0.9rem 1rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
      background: var(--surface-2);
    }
    .alert-empty p { margin: 0; font-size: 0.88rem; color: var(--muted); flex: 1 1 18rem; }
    .alert-empty strong { color: var(--fg); font-weight: 600; }
    .alert-empty.is-danger { border-color: var(--danger); background: var(--danger-soft, transparent); }
    .alert-empty.is-danger strong { color: var(--danger); }


    /* The note-and-button footer. The rule divides it from the channel rows
       above, which .trow:last-child otherwise leaves borderless. */
    .alert-foot {
      display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
      border-top: 1px solid var(--border);
    }
    .alert-foot .help { margin: 0; flex: 1 1 20rem; }


    /* ---- Reporting-period picker (Fathom-style presets + calendar) ---- */
  .range-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0 0.72rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    color: var(--muted);
    font: 600 0.8125rem/1 var(--font-display, ui-sans-serif);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
  }
  .range-tool:hover { color: var(--fg); border-color: var(--accent); }
  .range-tool:active { transform: scale(0.98); }
  .range-tool:focus-visible,
  .range-link:focus-visible,
  .chrome-btn:focus-visible,
  .icon-btn:focus-visible,
  select.panel:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .range-tool.is-active { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }
  .range-tool i { width: 1rem; height: 1rem; }
  .date-menu { position: relative; }
  .date-menu > summary { list-style: none; }
  .date-menu > summary::-webkit-details-marker { display: none; }
  .date-popover {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 40;
    width: min(44rem, calc(100vw - 2.5rem));
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 18px 50px color-mix(in srgb, var(--fg) 10%, transparent);
  }

  /* Period picker: presets down the left, two months on the right. The range is
     drawn flat with rounded ends, the way Fathom's is, on the --bar wash the KPI
     bars already use so it reads as the same accent at the same strength. */
  .drp-backdrop { position: fixed; inset: 0; z-index: 39; background: transparent; cursor: default; }
  .drp { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 0.75rem; }
  .drp-presets { display: flex; flex-direction: column; gap: 0.15rem; padding-right: 0.75rem; border-right: 1px solid var(--border); }
  .drp-preset {
    display: block;
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font: 500 0.8125rem/1.2 var(--font-display, ui-sans-serif);
    text-align: left;
    cursor: pointer;
  }
  .drp-preset:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
  .drp-preset.is-active { color: var(--accent-fg); background: var(--accent); }
  .drp-cals { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .drp-head { display: grid; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr) 2rem; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; }
  .drp-nav {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
  }
  .drp-nav:hover { color: var(--fg); border-color: var(--border); }
  .drp-nav svg { width: 1rem; height: 1rem; }
  .drp-nav.is-hidden { visibility: hidden; }
  .drp-sel {
    min-width: 0;
    height: 2rem;
    padding: 0 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--fg);
    font: 600 0.8125rem/1 var(--font-display, ui-sans-serif);
  }
  .drp-dow, .drp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .drp-dow span { padding: 0.25rem 0; color: var(--muted); font: 600 0.7rem/1.2 var(--font-display, ui-sans-serif); text-align: center; }
  .drp-day {
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--fg);
    font: 500 0.8125rem/1 var(--font-mono, ui-monospace);
    cursor: pointer;
  }
  .drp-day:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
  .drp-day.is-out { color: var(--muted); }
  .drp-day.is-today { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
  .drp-day.is-range { background: var(--accent-soft); }
  .drp-day.is-edge { background: var(--accent); color: var(--accent-fg); border-radius: 8px; }
  .drp-day.is-disabled { color: var(--muted); opacity: 0.45; cursor: default; }
  .drp-day.is-disabled:hover { background: transparent; }
  .drp-day:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
  @media (max-width: 640px) {
    .date-menu { position: static; }
    .date-popover { left: 0; right: auto; width: calc(100vw - 2rem); max-height: calc(100dvh - 6rem); overflow-y: auto; overscroll-behavior: contain; }
    .drp { grid-template-columns: minmax(0, 1fr); }
    .drp-presets { flex-direction: row; flex-wrap: wrap; gap: 0.35rem; padding: 0 0 0.6rem; border-right: 0; border-bottom: 1px solid var(--border); }
    .drp-preset { width: auto; padding: 0.45rem 0.65rem; border: 1px solid var(--border); border-radius: 999px; }
    .drp-cals { grid-template-columns: minmax(0, 1fr); }
    .drp-cal.is-right { display: none; }
    .drp-cal.is-left .drp-nav.is-hidden { visibility: visible; }
    .drp-day { height: 2.5rem; }
  }


  /* ---- dashboard/monitors/index.stx ---- */
  .rt-live { color: var(--success); font-weight: 600; }
  .rt-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--success); margin-right: 0.3rem; vertical-align: baseline; animation: rt-pulse 2s ease-in-out infinite; }


  /* ---- dashboard/servers/[id].stx ---- */

  /* Page-specific, on app-head tokens: the metrics chart and its legend.
     sites/[slug].stx carries its own variant of these, so they stay per page. */


  /* ---- dashboard/sites/[slug].stx ---- */
  .chart-hit:hover { fill: var(--accent-soft); }
  .site-legend { display: flex; gap: 1.25rem; margin-top: 0.6rem; font-size: 0.8rem; font-weight: 600; }


  /* ---- dashboard/settings/cloud.stx ---- */
  .cloud-form { display: grid; gap: 1.1rem; max-width: 560px; }
  .cloud-form label { display: block; margin-bottom: 0.35rem; font-size: 0.85rem; font-weight: 600; }
  .cloud-form input {
    width: 100%; min-height: 44px; padding: 0 0.85rem; box-sizing: border-box;
    border: 1px solid var(--border-strong); border-radius: 10px;
    color: var(--fg); font: inherit; font-size: 0.93rem; background: var(--bg);
    font-family: var(--font-mono);
  }
  .cloud-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .cloud-form .help { margin-top: 0.35rem; color: var(--muted); font-size: 0.8rem; }
  .cloud-status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 600; }
  .cloud-status.ok { color: var(--status, #10b981); }
  .cloud-status.none { color: var(--muted); }
  .iam-policy { margin: 0; padding: 1rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); overflow-x: auto; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.5; }
  .perm-list { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.85rem; line-height: 1.7; }
  .perm-list code { font-family: var(--font-mono); color: var(--fg); }


  /* ---- dashboard/settings/notifications.stx ---- */

  /* Inline brand mark next to each channel type label. Monochrome,
     inherits currentColor so it reads in light + dark. */


  /* Explicit, because a display rule on the field wrapper would otherwise
     win over the hidden attribute's UA default. */
  [data-types][hidden] { display: none; }


  /* Where to find the value the fields below are asking for. */
  .setup-note {
    margin: 0 0 1rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.55;
  }
  .opt {
    margin-left: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }


  /* ---- dashboard/settings/security.stx ---- */
  .pk-msg { margin-top: 0.85rem; font-size: 0.85rem; display: none; }
  .pk-msg.show { display: block; }
  .pk-msg.ok { color: var(--success); }
  .pk-msg.err { color: var(--danger); }


  /* ---- invite/[uuid].stx ---- */

  /* The design tokens were here -- a fourth copy of the one palette, after
     partials/app-head.stx, partials/marketing-head.stx and layouts/auth.stx.
     They are one `paletteCss()` preflight in config/crosswind.ts now:
     rule 3 / §11.2 puts a custom property in that file and nowhere else.
     This copy carried auth's drift -- light --danger-soft at 0.08 against
     the other two at 0.09 -- and lacked --success, --amber, --shadow and
     --font-mono. A preflight also reaches further than this block did:
     the comment above explains that the block only applies while the page
     is on screen, which was true of the tokens too. */
  /* The dashboard sheet's own `body` rule reaches this page too -- same
     layout group -- and it sets a 15px base this page never had, because this
     view ships no @include at all and used the browser default. Restated at
     16px rather than let the move resize every line on it. Everything else
     that rule sets (margin, colour, background, family) is identical here, so
     only the size needs saying.

     And qualified by the page's own container, like the rule below it. A bare
     `body` here is later in the sheet than the dashboard's, so it won on
     order and resized every dashboard page to 16px -- the third thing this
     one page leaked into the group it shares, and the third the browser
     caught rather than the reading. */
  body:has(main.invite-shell) { font-size: 16px; }

  /* `main.invite-shell`, not `main`. The comment this rule used to carry
     explained that the page's layout belongs on its own container rather than
     on body, because min-height, display:grid, place-items and padding are
     four properties the dashboard's body rule does not set and would have
     grid-centred the whole app. Moving them to `main` fixed that only while
     this block shipped on this page alone -- in one shared sheet it is the
     same bug one element down, and it did grid-centre every dashboard page's
     main until the class was added. Caught in the browser, not by reading. */
  main.invite-shell {
    min-height: 100vh; display: grid; place-items: center; padding: 2rem;
  }
  .invite-card a { color: inherit; text-decoration: none; }
  .invite-card {
    width: min(420px, 100%); padding: clamp(1.75rem, 5vw, 2.5rem);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); box-shadow: 0 20px 50px -18px rgba(11,15,13,0.22);
  }
  .invite-card .brand { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; }
  .invite-card .brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--accent-fg); background: var(--accent); }
  .invite-card .brand-mark svg { width: 16px; height: 16px; }
  .invite-card .brand-name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; letter-spacing: inherit; line-height: inherit; }
  .invite-card h1 { margin: 0 0 0.4rem; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.01em; }
  .invite-card .sub { margin: 0 0 1.5rem; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
  .invite-card .sub strong { color: var(--fg); }
  .invite-card .role-pill { display: inline-block; margin-left: 0.35rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.78rem; font-weight: 600; }
  .invite-card label { display: block; margin-bottom: 0.4rem; font-size: 0.85rem; font-weight: 600; }
  .invite-card .field { margin-bottom: 1.1rem; }
  .invite-card input {
    width: 100%; min-height: 46px; padding: 0 0.9rem; box-sizing: border-box;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    color: var(--fg); font: inherit; font-size: 0.95rem; background: var(--bg);
  }
  .invite-card input:disabled { color: var(--muted); background: var(--surface-2); }
  .invite-card input::placeholder { color: var(--muted); opacity: 0.75; }
  .invite-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .invite-card .help { margin-top: 0.35rem; color: var(--muted); font-size: 0.8rem;  line-height: inherit; }
  .invite-card .button {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; min-height: 46px; padding: 0 1.2rem; margin-top: 0.35rem; box-sizing: border-box;
    border: 1px solid var(--accent); border-radius: var(--radius-sm);
    color: var(--accent-fg); font: inherit; font-size: 0.95rem; font-weight: 600;
    background: var(--accent); cursor: pointer;
  }
  .invite-card .button:hover { filter: brightness(1.05); border-color: var(--accent); }
  .invite-card .error {
    margin-bottom: 1.1rem; padding: 0.75rem 0.9rem;
    border: 1px solid var(--danger); border-radius: var(--radius-sm);
    color: var(--danger); font-size: 0.88rem; background: var(--danger-soft);
  }
  .invite-card .alt { margin-top: 1.5rem; text-align: center; color: var(--muted); font-size: 0.9rem; }
  .invite-card .alt a { color: var(--accent); font-weight: 600; }
}
}

.\!p-0 {
  padding: 0 !important;
}

.\!pt-\[0\.5rem\] {
  padding-top: 0.5rem !important;
}