/* Cronly design system — theme layer on top of Tabler 1.7.4.
   Tokens are ported 1:1 from design/…/Cronly App.dc.html (LIGHT, DARK, statusVars). */

:root, [data-bs-theme="light"] {
  --bg: oklch(.972 .008 350);
  --surface: oklch(.997 .003 350);
  --surface-2: oklch(.948 .008 350);
  --line: oklch(.905 .01 350);
  --ink: oklch(.2 .016 350);
  --muted: oklch(.5 .013 350);
  --primary: oklch(.55 .2 350);
  --primary-hover: oklch(.49 .2 350);
  --primary-text: oklch(.5 .2 350);
  --primary-soft: oklch(.55 .2 350 / .08);
  --primary-line: oklch(.55 .2 350 / .35);
  --on-primary: #fff;
  --shadow: 0 1px 2px oklch(.2 .02 350 / .05), 0 2px 8px oklch(.2 .02 350 / .03);
  --overlay: oklch(.2 .02 350 / .4);
  --menu-shadow: 0 16px 40px oklch(.2 .02 350 / .18);
  --ok: oklch(0.54 0.16 150); --ok-text: oklch(0.47 0.16 150); --ok-soft: oklch(0.54 0.16 150 / 0.1); --ok-line: oklch(0.54 0.16 150 / .38); --on-ok: #fff;
  --warn: oklch(.85 .15 82); --warn-text: oklch(0.5 0.15 72); --warn-soft: oklch(0.74 0.15 72 / 0.1); --warn-line: oklch(0.74 0.15 72 / .38); --on-warn: oklch(.3 .07 70);
  --down: oklch(0.56 0.2 27); --down-text: oklch(0.5 0.2 27); --down-soft: oklch(0.56 0.2 27 / 0.1); --down-line: oklch(0.56 0.2 27 / .38); --on-down: #fff;
  --degraded: oklch(.8 .13 60); --degraded-text: oklch(0.5 0.16 55); --degraded-soft: oklch(0.64 0.16 55 / 0.1); --degraded-line: oklch(0.64 0.16 55 / .38); --on-degraded: oklch(.3 .09 45);
  --pending: oklch(0.56 0.12 250); --pending-text: oklch(0.48 0.12 250); --pending-soft: oklch(0.56 0.12 250 / 0.1); --pending-line: oklch(0.56 0.12 250 / .38); --on-pending: #fff;
  --paused: oklch(.55 .01 350); --paused-text: oklch(.48 .01 350); --paused-soft: oklch(.55 .01 350 / .1); --paused-line: oklch(.55 .01 350 / .35); --on-paused: #fff;
  --code-bg: #1e293b; --code-ink: #e2e8f0; --code-muted: #94a3b8; --code-line: #334155; --code-btn: #0f172a;
  color-scheme: light;

  --tblr-primary: var(--primary);
  --tblr-primary-rgb: 191, 42, 130;
  --tblr-primary-fg: var(--on-primary);
  --tblr-danger: var(--down);
  --tblr-danger-rgb: 208, 44, 42;
  --tblr-success: var(--ok);
  --tblr-success-rgb: 0, 135, 54;
  --tblr-body-bg: var(--bg);
  --tblr-body-bg-rgb: 250, 244, 246;
}

[data-bs-theme="dark"] {
  --bg: oklch(.165 .011 350);
  --surface: oklch(.205 .011 350);
  --surface-2: oklch(.26 .011 350);
  --line: oklch(.3 .011 350);
  --ink: oklch(.96 .005 350);
  --muted: oklch(.72 .01 350);
  --primary: oklch(.74 .17 350);
  --primary-hover: oklch(.8 .14 350);
  --primary-text: oklch(.8 .14 350);
  --primary-soft: oklch(.74 .17 350 / .12);
  --primary-line: oklch(.74 .17 350 / .4);
  --on-primary: oklch(.18 .03 350);
  --shadow: none;
  --overlay: oklch(0 0 0 / .6);
  --menu-shadow: 0 16px 40px oklch(0 0 0 / .5);
  --ok: oklch(0.78 0.16 150); --ok-text: oklch(0.82 0.16 150); --ok-soft: oklch(0.78 0.16 150 / 0.15); --ok-line: oklch(0.78 0.16 150 / .38); --on-ok: oklch(.18 .03 150);
  --warn: oklch(0.82 0.15 72); --warn-text: oklch(0.85 0.15 72); --warn-soft: oklch(0.82 0.15 72 / 0.15); --warn-line: oklch(0.82 0.15 72 / .38); --on-warn: oklch(.18 .03 72);
  --down: oklch(0.7 0.2 27); --down-text: oklch(0.76 0.2 27); --down-soft: oklch(0.7 0.2 27 / 0.15); --down-line: oklch(0.7 0.2 27 / .38); --on-down: oklch(.18 .03 27);
  --degraded: oklch(0.8 0.16 55); --degraded-text: oklch(0.83 0.16 55); --degraded-soft: oklch(0.8 0.16 55 / 0.15); --degraded-line: oklch(0.8 0.16 55 / .38); --on-degraded: oklch(.18 .03 55);
  --pending: oklch(0.76 0.12 250); --pending-text: oklch(0.8 0.12 250); --pending-soft: oklch(0.76 0.12 250 / 0.15); --pending-line: oklch(0.76 0.12 250 / .38); --on-pending: oklch(.18 .03 250);
  --paused: oklch(.62 .01 350); --paused-text: oklch(.75 .01 350); --paused-soft: oklch(.62 .01 350 / .16); --paused-line: oklch(.62 .01 350 / .4); --on-paused: oklch(.16 0 0);
  color-scheme: dark;

  --tblr-primary-rgb: 247, 121, 186;
  --tblr-danger-rgb: 255, 96, 86;
  --tblr-success-rgb: 95, 211, 127;
  --tblr-body-bg-rgb: 18, 12, 15;
}

:root, [data-bs-theme] {
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
  --tblr-font-sans-serif: var(--sans);
  --tblr-font-monospace: var(--mono);
  --tblr-body-font-family: var(--sans);
  --tblr-body-color: var(--ink);
  --tblr-emphasis-color: var(--ink);
  --tblr-secondary-color: var(--muted);
  --tblr-muted: var(--muted);
  --tblr-bg-surface: var(--surface);
  --tblr-bg-surface-secondary: var(--surface-2);
  --tblr-bg-surface-tertiary: var(--surface-2);
  --tblr-border-color: var(--line);
  --tblr-border-color-translucent: var(--line);
  --tblr-link-color: var(--primary-text);
  --tblr-link-hover-color: var(--primary-hover);
  --tblr-border-radius: 12px;
  --tblr-card-border-radius: 18px;
  --page-pad: 32px;
  --h1: 30px;
  --topbar-h: 64px;
  --sidebar-w: 248px;
  --tabbar-h: 0px;
}
@media (max-width: 1023.98px) { :root, [data-bs-theme] { --page-pad: 24px; } }
@media (max-width: 639.98px) { :root, [data-bs-theme] { --page-pad: 16px; --h1: 24px; --topbar-h: 56px; --tabbar-h: 70px; } }

/* ---------- Base ---------- */
html, body { background: var(--bg); }
body {
  margin: 0; color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--primary-text); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: none; } /* Tabler underlines every a:hover (sidebar, table rows, button links); prose links opt back in below */
h1, h2, h3, h4 { color: var(--ink); letter-spacing: -.02em; }
button, input, select, textarea { font-family: inherit; }
::selection { background: var(--primary-soft); }
.cr-mono, code, kbd, pre { font-family: var(--mono); }
.cr-muted { color: var(--muted); }
.cr-ink { color: var(--ink); }
.cr-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cr-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cr-hidden { display: none !important; }
.text-ok { color: var(--ok-text) !important; } .text-down { color: var(--down-text) !important; }
.text-warn { color: var(--warn-text) !important; } .text-degraded { color: var(--degraded-text) !important; }

/* ---------- Buttons ---------- */
.btn {
  --tblr-btn-border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-weight: 600; font-size: 14px; line-height: 1;
  box-shadow: none; white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--primary-soft); border-color: var(--primary); }
.btn .ti { font-size: 17px; margin: 0; }
.btn-primary, .btn-primary:focus { background: var(--primary); border-color: transparent; color: var(--on-primary); font-weight: 700; padding: 0 16px; }
.btn-primary:hover, .btn-primary:active { background: var(--primary-hover) !important; color: var(--on-primary) !important; border-color: transparent !important; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--primary-text); font-weight: 700; padding: 0 12px; }
.btn-ghost:hover { background: var(--primary-soft); color: var(--primary-text); border-color: transparent; }
.btn-danger-outline { color: var(--down-text); }
.btn-danger-outline:hover { background: var(--down-soft); color: var(--down-text); }
.btn-danger, .btn-danger:focus { background: var(--down); color: var(--on-down); border-color: transparent; font-weight: 700; padding: 0 16px; }
.btn-danger:hover { background: var(--down); color: var(--on-down); filter: brightness(.95); border-color: transparent; }
.btn-success { background: var(--ok); color: var(--on-ok); border-color: transparent; font-weight: 700; }
.btn-sm { height: 30px; padding: 0 12px; font-size: 13px; }
.btn-sm .ti { font-size: 15px; }
.btn-lg { height: 46px; padding: 0 20px; font-size: 15px; }
.btn-icon { width: 38px; padding: 0; position: relative; }
.btn-icon.btn-sm { width: 30px; }
.btn-icon .ti { font-size: 18px; }
.btn:disabled, .btn.disabled { background: var(--surface-2); color: var(--muted); border-color: transparent; opacity: 1; cursor: not-allowed; }
.btn.is-loading { opacity: .75; pointer-events: none; }
.btn.is-loading .ti { animation: cr-spin 1s linear infinite; }
.btn-block { width: 100%; }
@keyframes cr-spin { to { transform: rotate(360deg); } }
.cr-count-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--down); color: var(--on-down); font-size: 10.5px; font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--surface);
}

/* ---------- Cards ---------- */
.card, .cr-card {
  --tblr-card-bg: var(--surface); --tblr-card-border-color: var(--line);
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); min-width: 0;
}
.cr-card--pad { padding: 20px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.card-header, .cr-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 0;
  padding: 14px 18px; border-bottom: 1px solid var(--line); background: transparent;
}
.card-title, .cr-card__title { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.cr-card__meta { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.card-body, .cr-card__body { padding: 18px; }
.cr-card__foot { padding: 12px 18px; border-top: 1px solid var(--line); }

/* ---------- Status pills ---------- */
.cr-pill, .cr-soft {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; flex-shrink: 0; justify-self: start; font-family: var(--sans);
}
.cr-pill .ti, .cr-soft .ti { font-size: 14px; }
.cr-pill--lg { gap: 6px; height: 34px; padding: 0 15px 0 11px; font-size: 15px; }
.cr-pill--lg .ti { font-size: 18px; }
.cr-pill--ok { background: var(--ok); color: var(--on-ok); }
.cr-pill--warn { background: var(--warn); color: var(--on-warn); }
.cr-pill--down { background: var(--down); color: var(--on-down); }
.cr-pill--degraded { background: var(--degraded); color: var(--on-degraded); }
.cr-pill--pending { background: var(--pending); color: var(--on-pending); }
.cr-pill--paused { background: var(--paused); color: var(--on-paused); }
.cr-soft--ok { background: var(--ok-soft); color: var(--ok-text); }
.cr-soft--warn { background: var(--warn-soft); color: var(--warn-text); }
.cr-soft--down { background: var(--down-soft); color: var(--down-text); }
.cr-soft--degraded { background: var(--degraded-soft); color: var(--degraded-text); }
.cr-soft--pending { background: var(--pending-soft); color: var(--pending-text); }
.cr-soft--paused { background: var(--paused-soft); color: var(--paused-text); }
.cr-type {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.cr-badge-count { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); font-size: 11px; font-weight: 700; color: var(--ink); }

/* ---------- Check strip ---------- */
.cr-strip { display: flex; gap: 2px; height: 18px; min-width: 0; }
.cr-strip--lg { height: 32px; }
.cr-strip--sm { height: 14px; }
.cr-strip__cell { flex: 1; min-width: 2px; height: 100%; border-radius: 2px; background: var(--line); }
.cr-strip--lg .cr-strip__cell { border-radius: 3px; }
.cr-strip__cell--ok { background: var(--ok); }
.cr-strip__cell--warn { background: var(--warn); }
.cr-strip__cell--down { background: var(--down); }
.cr-strip__cell--degraded { background: var(--degraded); }
.cr-strip__cell--pending { background: var(--pending); }
.cr-strip__cell--paused, .cr-strip__cell--empty { background: var(--line); }
.cr-strip__cell--empty { opacity: .55; }
.cr-strip__axis { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ---------- Usage bar ---------- */
.cr-bar { height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.cr-bar__fill { height: 100%; border-radius: 3px; background: var(--primary); }
.cr-bar--warn .cr-bar__fill { background: var(--warn); }
.cr-bar--down .cr-bar__fill { background: var(--down); }

/* ---------- Stat tile ---------- */
.cr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 12px; }
@media (max-width: 639.98px) { .cr-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.cr-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
  padding: 14px; display: grid; gap: 9px; align-content: start; color: var(--ink); min-width: 0;
}
a.cr-tile:hover { border-color: var(--primary-line); color: var(--ink); }
.cr-tile__label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.cr-tile__label .ti { font-size: 17px; }
.cr-tile__n { display: flex; align-items: baseline; gap: 5px; }
.cr-tile__n span { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.cr-tile__n small { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cr-tile__note { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--muted); min-width: 0; }
.cr-tile__note .ti { font-size: 15px; flex-shrink: 0; }
.cr-tile__note.is-strong { font-weight: 700; }
.cr-tile__note--ok { color: var(--ok-text); } .cr-tile__note--warn { color: var(--warn-text); }
.cr-tile__note--down { color: var(--down-text); } .cr-tile__note--degraded { color: var(--degraded-text); }
.cr-tile__note--pending { color: var(--pending-text); } .cr-tile__note--paused { color: var(--paused-text); }

/* ---------- Page header ---------- */
.cr-page-header { display: grid; gap: 12px; margin-bottom: 20px; }
.cr-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; flex-wrap: wrap; }
.cr-crumbs a { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.cr-crumbs a:hover { color: var(--ink); }
.cr-crumbs .ti { font-size: 14px; }
.cr-crumbs .is-current { color: var(--ink); }
.cr-page-header__row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.cr-page-header__title { display: flex; gap: 14px; align-items: center; min-width: 0; flex: 1 1 320px; }
.cr-page-header__icon {
  width: 50px; height: 50px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  display: grid; place-items: center; flex-shrink: 0;
}
.cr-page-header__icon .ti { font-size: 24px; }
.cr-page-header__text { display: grid; gap: 5px; min-width: 0; }
.cr-page-header h1 { margin: 0; font-size: var(--h1); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; overflow-wrap: anywhere; }
.cr-page-header h1.cr-mono { letter-spacing: -.02em; }
.cr-page-header__sub { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); min-width: 0; }
.cr-page-header__actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 859.98px) {
  .cr-page-header__actions { width: 100%; }
  .cr-page-header__actions .btn { flex: 1 1 0; }
}
.cr-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.cr-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.cr-live.is-stale .cr-live__dot { background: var(--paused); box-shadow: 0 0 0 3px var(--paused-soft); }

/* ---------- Status hero ---------- */
.cr-hero {
  border-radius: 22px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow);
  padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 20px 32px; align-items: center;
}
.cr-hero--down { background: var(--down-soft); border-color: var(--down-line); }
.cr-hero--warn, .cr-hero--exp { background: var(--warn-soft); border-color: var(--warn-line); }
.cr-hero--crit { background: var(--down-soft); border-color: var(--down-line); }
.cr-hero--degraded { background: var(--degraded-soft); border-color: var(--degraded-line); }
.cr-hero--ok { background: var(--ok-soft); border-color: var(--ok-line); }
.cr-hero--paused, .cr-hero--pending { background: var(--surface); }
.cr-hero__main { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.cr-hero__big { margin: 4px 0 0; font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.cr-hero__sub { font-size: 14px; color: var(--muted); }
.cr-hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.cr-stat__label { font-size: 12px; color: var(--muted); font-weight: 500; }
.cr-stat__value { font-family: var(--mono); font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin-top: 2px; }
.cr-stat__sub { font-size: 12px; color: var(--muted); }
@media (max-width: 859.98px) { .cr-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) { .cr-hero { padding: 18px; border-radius: 20px; } .cr-hero__big { font-size: 34px; } .cr-stat__value { font-size: 18px; } }

/* ---------- Copy field & code ---------- */
.cr-copy { display: grid; gap: 6px; min-width: 0; }
.cr-copy__label { font-size: 13px; font-weight: 700; }
.cr-copy__row { display: flex; gap: 8px; min-width: 0; }
.cr-copy__value {
  flex: 1; min-width: 0; display: flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 14px;
  background: var(--bg); border: 1px solid var(--line); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: 42px;
}
.cr-copy__btn { height: 44px; padding: 0 18px; }
.cr-copy.is-copied .cr-copy__value { border-color: var(--ok-line); }
.cr-copy.is-copied .cr-copy__btn { background: var(--ok) !important; color: var(--on-ok) !important; }
.cr-code { position: relative; border-radius: 14px; background: var(--code-bg); color: var(--code-ink); min-width: 0; }
.cr-code__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 0 16px; font-family: var(--mono); font-size: 11.5px; color: var(--code-muted); }
.cr-code__bar span { flex: 1; }
.cr-code__copy {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--code-line); background: var(--code-btn); color: var(--code-ink); font-size: 12px; font-weight: 600; cursor: pointer;
}
.cr-code pre { margin: 0; padding: 10px 16px 16px; overflow-x: auto; font-size: 12.5px; line-height: 1.7; white-space: pre; color: var(--code-ink); background: transparent; border: 0; }
.cr-code pre code { color: inherit; background: none; padding: 0; font-size: inherit; }
code.cr-inline { padding: 2px 6px; border-radius: 6px; background: var(--surface-2); color: var(--ink); font-size: .92em; }

/* ---------- Forms ---------- */
.form-label, .cr-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.form-label .cr-muted, .cr-label .cr-muted { font-weight: 500; }
.form-control, .form-select {
  height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background-color: var(--bg);
  color: var(--ink); font-size: 14px; box-shadow: none; transition: border-color .12s, box-shadow .12s;
}
.form-control.cr-mono, .cr-mono.form-control { font-size: 13.5px; }
textarea.form-control { height: auto; min-height: 72px; padding: 10px 14px; line-height: 1.6; resize: vertical; }
.form-control::placeholder { color: var(--muted); opacity: .7; }
.form-control:focus, .form-select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); background-color: var(--surface); color: var(--ink); outline: 0;
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--down); background-image: none; }
.form-select {
  appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6l6 -6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 17px;
}
.form-hint, .cr-hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.invalid-feedback, .cr-error { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--down-text); margin-top: 6px; }
.cr-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.cr-field .form-label { margin: 0; }
.cr-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 639.98px) { .cr-form-grid { grid-template-columns: minmax(0, 1fr); } }
.cr-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; }
.cr-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cr-switch__track { width: 40px; height: 24px; border-radius: 999px; background: var(--line); position: relative; flex-shrink: 0; transition: background .15s; }
.cr-switch__track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); transition: left .15s; }
.cr-switch input:checked + .cr-switch__track { background: var(--primary); }
.cr-switch input:checked + .cr-switch__track::after { left: 19px; background: var(--on-primary); }
.cr-switch input:focus-visible + .cr-switch__track { box-shadow: 0 0 0 3px var(--primary-soft); }
.form-check-input { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line); background-color: var(--bg); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

/* Segmented control */
.cr-seg { display: inline-flex; padding: 3px; background: var(--surface-2); border-radius: 999px; gap: 2px; justify-self: start; max-width: 100%; overflow-x: auto; }
.cr-seg__opt, .cr-seg > button, .cr-seg > a, .cr-seg > label {
  height: 30px; padding: 0 12px; border-radius: 999px; border: 0; background: transparent; color: var(--muted);
  font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap;
}
.cr-seg .ti { font-size: 15px; }
.cr-seg .is-active, .cr-seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px oklch(0 0 0 / .14); }
.cr-seg--lg .cr-seg__opt, .cr-seg--lg > button, .cr-seg--lg > label { height: 32px; padding: 0 14px; }
.cr-seg label { padding: 0; }
.cr-seg label input { position: absolute; opacity: 0; pointer-events: none; }
.cr-seg label span { height: 100%; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 999px; }
.cr-seg--lg label span { padding: 0 14px; }
/* Choice chips (language tabs) */
.cr-choices { display: flex; gap: 6px; flex-wrap: wrap; }
.cr-choice {
  height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink);
  font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; cursor: pointer;
}
.cr-choice.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* Tabs */
.cr-tabs, .nav-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.cr-tabs a, .cr-tabs button, .nav-tabs .nav-link {
  padding: 10px 0; font-size: 14px; font-weight: 600; color: var(--muted); border: 0; background: none; white-space: nowrap;
  display: inline-flex; gap: 6px; align-items: center; cursor: pointer; border-radius: 0;
}
.cr-tabs .is-active, .nav-tabs .nav-link.active { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--primary); background: none; }

/* Channel chips */
.cr-channels { display: grid; gap: 10px; }
.cr-channels__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; user-select: none;
}
.cr-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cr-chip .ti { font-size: 16px; }
.cr-chip__check { display: none; }
.cr-chip.is-on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-text); }
.cr-chip.is-on .cr-chip__check { display: inline-block; }
.cr-chip.is-off { opacity: .6; }
.cr-chip.is-setup { border-style: dashed; color: var(--muted); }
.cr-chip:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--primary-soft); }
.cr-channels__summary { margin: 0; font-size: 12.5px; color: var(--muted); }
.cr-channels__summary a { font-weight: 700; }

/* ---------- Callouts ---------- */
.cr-callout { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); font-size: 13px; }
.cr-callout > .ti { font-size: 19px; margin-top: 1px; flex-shrink: 0; }
.cr-callout > div { display: grid; gap: 2px; min-width: 0; }
.cr-callout strong { font-size: 13.5px; font-weight: 700; }
.cr-callout span { font-size: 12.5px; color: var(--muted); }
.cr-callout--warn { background: var(--warn-soft); border-color: var(--warn-line); }
.cr-callout--warn > .ti, .cr-callout--warn strong { color: var(--warn-text); }
.cr-callout--down { background: var(--down-soft); border-color: var(--down-line); }
.cr-callout--down > .ti, .cr-callout--down strong { color: var(--down-text); }
.cr-callout--ok { background: var(--ok-soft); border-color: var(--ok-line); }
.cr-callout--ok > .ti, .cr-callout--ok strong { color: var(--ok-text); }
.cr-callout--info { background: var(--primary-soft); border-color: var(--primary-line); }
.cr-callout--info > .ti, .cr-callout--info strong { color: var(--primary-text); }
.cr-flash { margin-bottom: 16px; }

/* ---------- Tables ---------- */
.cr-table { width: 100%; }
.cr-table__head, .cr-table__row {
  display: grid; grid-template-columns: var(--cols, 96px minmax(0, 1fr) 140px 160px 40px); gap: 12px; align-items: center; padding: 11px 18px;
}
.cr-table__head {
  padding-top: 9px; padding-bottom: 9px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
.cr-table__row { border-bottom: 1px solid var(--line); color: var(--ink); }
.cr-table__row:last-child { border-bottom: 0; }
a.cr-table__row:hover, .cr-table__row.is-link:hover { background: var(--surface-2); color: var(--ink); cursor: pointer; }
.cr-cell-main { display: grid; gap: 3px; min-width: 0; }
.cr-cell-main__name { font-family: var(--mono); font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-cell-main__sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-metric { font-family: var(--mono); font-size: 13px; font-weight: 600; white-space: nowrap; display: grid; gap: 2px; min-width: 0; }
.cr-metric small { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.cr-metric--down { color: var(--down-text); font-weight: 800; } .cr-metric--crit { color: var(--down-text); font-weight: 800; }
.cr-metric--warn, .cr-metric--exp { color: var(--warn-text); font-weight: 800; } .cr-metric--degraded { color: var(--degraded-text); font-weight: 800; }
.cr-row-menu { justify-self: end; }
/* Classic Bootstrap tables used for logs/history */
.table { --tblr-table-bg: transparent; color: var(--ink); margin: 0; }
.table > :not(caption) > * > * { padding: 11px 18px; border-bottom-color: var(--line); background: transparent; color: inherit; }
.table thead th { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: transparent; padding-top: 9px; padding-bottom: 9px; }
.table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 679.98px) {
  .cr-table__head { display: none; }
  .cr-table__row { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; padding: 12px 14px; }
  .cr-table__row > .cr-cell-status { grid-column: 2; grid-row: 1; justify-self: end; }
  .cr-table__row > .cr-cell-main { grid-column: 1; grid-row: 1; }
  .cr-table__row > .cr-metric { grid-column: 2; grid-row: 2; justify-self: end; text-align: right; }
  .cr-table__row > .cr-cell-extra { grid-column: 1; grid-row: 2; }
  .cr-table__row > .cr-strip, .cr-table__row > .cr-cell-strip { grid-column: 1 / -1; height: 14px; }
  .cr-table__row > .cr-row-menu, .cr-table__row > .cr-hide-sm { display: none; }
  .cr-table-scroll { overflow-x: auto; }
}

/* ---------- Dropdowns, toasts, modals ---------- */
.dropdown-menu {
  --tblr-dropdown-bg: var(--surface); --tblr-dropdown-border-color: var(--line);
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--menu-shadow); padding: 6px; min-width: 220px;
}
.dropdown-item {
  display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; border-radius: 12px; font-size: 14px; color: var(--ink); background: none; border: 0; width: 100%; text-align: left;
}
.dropdown-item .ti { font-size: 18px; color: var(--muted); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--ink); }
.dropdown-item.is-danger, .dropdown-item.is-danger .ti { color: var(--down-text); }
.dropdown-divider { height: 1px; background: var(--line); margin: 6px 4px; border: 0; opacity: 1; }
.dropdown-header { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 4px; }
.cr-toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2000; display: grid; gap: 10px; justify-items: center; pointer-events: none; }
@media (max-width: 639.98px) { .cr-toasts { bottom: calc(86px + env(safe-area-inset-bottom)); } }
.cr-toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--bg);
  font-size: 14px; font-weight: 600; box-shadow: var(--menu-shadow); pointer-events: auto; animation: cr-toast-in .18s ease-out; max-width: calc(100vw - 32px);
}
.cr-toast .ti { font-size: 18px; }
.cr-toast--ok .ti { color: var(--ok); }
.cr-toast--down { background: var(--down); color: var(--on-down); }
.cr-toast--down .ti { color: inherit; }
@keyframes cr-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.modal { --tblr-modal-bg: var(--surface); --tblr-backdrop-bg: var(--overlay); }
.modal-backdrop { background: var(--overlay); }
.modal-backdrop.show { opacity: 1; }
.modal-content { background: var(--surface); border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 24px 60px oklch(0 0 0 / .25); overflow: hidden; color: var(--ink); }
.modal-header { border-bottom: 1px solid var(--line); padding: 16px 20px; }
.modal-title { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 0; padding: 16px 20px 20px; gap: 8px; }
.cr-modal-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-text); }
.cr-modal-icon--down { background: var(--down-soft); color: var(--down-text); }
.cr-modal-icon .ti { font-size: 22px; }
.cr-confirm__body { padding: 20px 20px 4px; display: grid; gap: 10px; }
.cr-confirm__title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.cr-confirm__text { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0; }
.cr-confirm__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px 20px; }
@media (max-width: 639.98px) {
  .modal-dialog { margin: 0; position: fixed; left: 0; right: 0; bottom: 0; max-width: none; transform: none !important; display: flex; align-items: flex-end; min-height: 0; }
  .modal.fade .modal-dialog { transform: translateY(24px) !important; transition: transform .2s ease-out; }
  .modal.show .modal-dialog { transform: none !important; }
  .modal-content { border-radius: 24px 24px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .cr-confirm__actions { flex-direction: column-reverse; }
  .cr-confirm__actions .btn { width: 100%; height: 44px; }
}

/* ---------- Empty state & limit ---------- */
.cr-empty { padding: 36px; border-radius: 16px; border: 1px dashed var(--line); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: start; background: var(--surface); } /* minmax: content must not widen the box past the screen */
@media (max-width: 639.98px) { .cr-empty { padding: 22px; } }
.cr-empty__icon { width: 46px; height: 46px; border-radius: 14px; background: var(--primary-soft); color: var(--primary-text); display: grid; place-items: center; }
.cr-empty__icon .ti { font-size: 24px; }
.cr-empty__title { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.cr-empty__body { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 560px; }
.cr-empty__steps { margin: 4px 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cr-empty__steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.cr-empty__steps li span { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.cr-empty__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-empty__after { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--muted); }
.cr-limit { padding: 20px; border-radius: 16px; background: var(--primary-soft); border: 1px solid var(--primary-line); display: grid; gap: 12px; }
.cr-limit__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cr-limit__count { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--down-text); }
.cr-limit h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.cr-limit p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.cr-limit__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.cr-near-limit { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--warn-soft); font-size: 13px; }
.cr-near-limit .ti { font-size: 16px; color: var(--warn-text); }
.cr-near-limit strong { color: var(--warn-text); }

/* ---------- Key/value lists ---------- */
.cr-kv { display: grid; }
.cr-kv__row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); align-items: baseline; }
.cr-kv__row:last-child { border-bottom: 0; }
.cr-kv__k { font-size: 13px; color: var(--muted); }
.cr-kv__v { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.cr-kv__v.is-down { color: var(--down-text); }
@media (max-width: 559.98px) { .cr-kv__row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.cr-settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px 20px; padding: 18px; }
.cr-settings-grid dt { font-size: 12px; color: var(--muted); font-weight: 500; margin-bottom: 4px; }
.cr-settings-grid dd { margin: 0; font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }

/* ---------- Layout helpers ---------- */
.cr-stack { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.cr-cols-main { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; }
.cr-cols-half { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 1199.98px) { .cr-cols-main { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 959.98px) { .cr-cols-half { grid-template-columns: minmax(0, 1fr); } }
.cr-list { display: grid; }
.cr-list__item { display: flex; gap: 12px; align-items: flex-start; padding: 13px 18px; border-bottom: 1px solid var(--line); color: var(--ink); min-width: 0; }
.cr-list__item:last-child { border-bottom: 0; }
a.cr-list__item:hover { background: var(--surface-2); color: var(--ink); }
.cr-bubble { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--surface-2); color: var(--muted); }
.cr-bubble .ti { font-size: 16px; }
.cr-bubble--ok { background: var(--ok-soft); color: var(--ok-text); } .cr-bubble--warn { background: var(--warn-soft); color: var(--warn-text); }
.cr-bubble--down { background: var(--down-soft); color: var(--down-text); } .cr-bubble--degraded { background: var(--degraded-soft); color: var(--degraded-text); }
.cr-bubble--pending { background: var(--pending-soft); color: var(--pending-text); } .cr-bubble--paused { background: var(--paused-soft); color: var(--paused-text); }
.cr-pagination { display: flex; gap: 6px; align-items: center; justify-content: space-between; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* ---------- Component sheet page ---------- */
.cr-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.cr-sheet-col { background: var(--bg); color: var(--ink); border-radius: 28px; padding: 24px; display: grid; gap: 18px; box-shadow: 0 0 0 1px oklch(0 0 0 / .06); }
.cr-sheet-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.cr-sheet-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cr-sheet-card__head span:last-child { font-family: var(--mono); font-size: 11px; color: var(--muted); }
@media (max-width: 1199.98px) { .cr-sheet-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- App shell ---------- */
.cr-shell { display: flex; min-height: 100vh; }
.cr-sidebar {
  width: var(--sidebar-w); flex-shrink: 0; display: flex; flex-direction: column; background: var(--surface);
  border-right: 1px solid var(--line); height: 100vh; position: sticky; top: 0; z-index: 50;
}
.cr-sidebar__brand { height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 20px; flex-shrink: 0; }
.cr-sidebar__close { display: none !important; margin-left: auto; width: 36px; height: 36px; border: 0; background: var(--surface-2); }
.cr-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.cr-logo:hover { color: var(--ink); }
.cr-logo__mark { display: flex; align-items: center; gap: 2px; height: 22px; }
.cr-logo__mark i { width: 4px; border-radius: 2px; background: var(--primary); display: block; }
.cr-logo__mark i:nth-child(1) { height: 8px; } .cr-logo__mark i:nth-child(2) { height: 21px; }
.cr-logo__mark i:nth-child(3) { height: 12px; } .cr-logo__mark i:nth-child(4) { height: 5px; }
.cr-logo__word { font-size: 21px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.cr-nav { flex: 1; overflow-y: auto; padding: 6px 12px 12px; display: flex; flex-direction: column; gap: 18px; }
.cr-nav__group { display: grid; gap: 2px; }
.cr-nav__title { padding: 0 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cr-nav__item { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--ink); }
.cr-nav__item > .ti { font-size: 19px; }
.cr-nav__item > span:first-of-type { flex: 1; }
.cr-nav__item:hover { background: var(--surface-2); color: var(--ink); }
.cr-nav__item.is-active { font-weight: 700; color: var(--primary-text); background: var(--primary-soft); }
.cr-nav__badge { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px 0 5px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.cr-nav__badge .ti { font-size: 12px; }
.cr-plan { margin: 0 12px 12px; padding: 14px; border-radius: 18px; background: var(--surface-2); display: grid; gap: 11px; flex-shrink: 0; }
.cr-plan__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cr-plan__head strong { font-size: 14px; font-weight: 800; }
.cr-plan__head span { font-size: 11px; color: var(--muted); }
.cr-plan__row { display: grid; gap: 5px; }
.cr-plan__line { display: flex; justify-content: space-between; font-size: 12px; gap: 8px; }
.cr-plan__line span:first-child { color: var(--muted); font-weight: 600; }
.cr-plan .cr-bar { height: 4px; background: var(--line); }
.cr-plan__cta { height: 34px; width: 100%; }
.cr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.cr-topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h); display: flex; align-items: center; gap: 10px;
  padding: 0 var(--page-pad); background: var(--bg); border-bottom: 1px solid var(--line);
}
.cr-topbar__burger, .cr-topbar__logo, .cr-topbar__search-icon { display: none !important; }
.cr-topbar__crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; white-space: nowrap; overflow: hidden; }
.cr-topbar__crumbs a { color: var(--muted); } .cr-topbar__crumbs a:hover { color: var(--ink); }
.cr-topbar__crumbs .ti { font-size: 14px; flex-shrink: 0; }
.cr-topbar__crumbs .is-current { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.cr-topbar__spacer { flex: 1; }
.cr-search-trigger {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--muted); width: 320px; font-size: 14px; cursor: pointer; flex-shrink: 1; min-width: 0;
}
.cr-search-trigger .ti { font-size: 17px; }
.cr-search-trigger span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-search-trigger kbd, .cr-palette kbd { font-family: var(--mono); font-size: 11px; padding: 3px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 0; box-shadow: none; }
.cr-avatar { width: 38px; height: 38px; border-radius: 999px; border: 0; background: var(--primary-soft); color: var(--primary-text); font-size: 15px; font-weight: 800; cursor: pointer; flex-shrink: 0; }
.cr-dropdown { position: relative; }
.cr-dropdown > .dropdown-menu { position: absolute; right: 0; left: auto; top: 48px; display: none; z-index: 40; margin: 0; }
.cr-dropdown > .dropdown-menu.show { display: block; }
.cr-dropdown > .dropdown-menu-start { left: 0; right: auto; }
.cr-bell { width: 360px; padding: 0 !important; overflow: hidden; border-radius: 18px !important; }
.cr-bell__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cr-bell__head strong { font-size: 15px; font-weight: 800; } .cr-bell__head span { font-size: 12px; }
.cr-bell__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); align-items: start; color: var(--ink); }
.cr-bell__item:hover { background: var(--surface-2); color: var(--ink); }
.cr-bell__text { display: grid; gap: 2px; min-width: 0; }
.cr-bell__title { font-size: 13.5px; font-weight: 600; }
.cr-bell__sub { font-size: 12px; color: var(--muted); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-bell__time { font-size: 11.5px; color: var(--muted); }
.cr-bell__all { display: block; padding: 12px 16px; text-align: center; font-size: 13px; font-weight: 700; }
.cr-bell__empty { padding: 24px 16px; text-align: center; color: var(--muted); display: grid; gap: 6px; justify-items: center; border-bottom: 1px solid var(--line); }
.cr-bell__empty .ti { font-size: 22px; }
.cr-usermenu { width: 240px; }
.cr-usermenu__head { padding: 10px 12px 12px; display: grid; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 6px; min-width: 0; }
.cr-usermenu__head strong { font-size: 14px; font-weight: 700; } .cr-usermenu__head span { font-size: 12px; color: var(--muted); }
.cr-content {
  flex: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding: var(--page-pad);
  padding-bottom: calc(var(--page-pad) + var(--tabbar-h)); display: flex; flex-direction: column; gap: 20px; min-width: 0;
}
.cr-content > .cr-page-header { margin-bottom: 0; }
.cr-content > .cr-flash { margin-bottom: 0; }
.cr-tabbar { display: none; }
.cr-drawer-overlay { display: none; }
.cr-tabbar__item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border: 0; background: none; color: var(--muted); font-size: 11px; font-weight: 700; min-height: 48px; cursor: pointer; }
.cr-tabbar__item:hover { color: var(--ink); }
.cr-tabbar__item.is-active { color: var(--primary-text); }
.cr-tabbar__icon { position: relative; display: grid; place-items: center; }
.cr-tabbar__icon .ti { font-size: 23px; }
.cr-tabbar__badge { position: absolute; top: -4px; right: -11px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; font-size: 10px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
@media (max-width: 1023.98px) {
  .cr-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 288px; transform: translateX(-105%); transition: transform .22s ease; }
  .cr-drawer-open .cr-sidebar { transform: none; box-shadow: 0 20px 60px oklch(0 0 0 / .3); }
  .cr-drawer-open .cr-drawer-overlay { display: block; position: fixed; inset: 0; z-index: 45; background: var(--overlay); }
  .cr-sidebar__close { display: grid !important; }
  .cr-topbar__burger { display: inline-flex !important; }
  .cr-search-trigger { display: none; }
  .cr-topbar__search-icon { display: inline-flex !important; }
}
@media (max-width: 639.98px) {
  .cr-topbar { gap: 8px; }
  .cr-topbar__burger { display: none !important; }
  .cr-topbar__logo { display: inline-flex !important; gap: 8px; }
  .cr-topbar__logo .cr-logo__word { font-size: 20px; }
  .cr-topbar__logo .cr-logo__mark { height: 20px; }
  .cr-topbar__crumbs { display: none; }
  .cr-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); }
  .cr-dropdown > .cr-bell, .cr-dropdown > .cr-usermenu { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar-h) + 6px); width: auto; }
}

/* ---------- Search palette ---------- */
.cr-palette .modal-dialog { max-width: 560px; margin-top: 10vh; }
.cr-palette__input { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.cr-palette__input .ti { font-size: 20px; color: var(--muted); }
.cr-palette__input input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 16px; min-width: 0; }
.cr-palette__results { max-height: 60vh; overflow-y: auto; padding: 6px; }
.cr-palette__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; color: var(--ink); }
.cr-palette__item.is-active, .cr-palette__item:hover { background: var(--surface-2); color: var(--ink); }
.cr-palette__empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 14px; }
@media (max-width: 639.98px) { .cr-palette .modal-dialog { margin-top: 0; } }

/* ---------- Public layout ---------- */
.cr-public__bar { height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 var(--page-pad); border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 30; }
.cr-public__main { max-width: 1200px; margin: 0 auto; padding: var(--page-pad); }

/* ---------- Auth ---------- */
.cr-auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; background: var(--bg); color: var(--ink); }
.cr-auth__brand {
  background: var(--bg); color: var(--ink); padding: 40px 56px; display: flex; flex-direction: column; justify-content: space-between;
  gap: 32px; min-height: 100vh; position: sticky; top: 0; height: 100vh;
}
.cr-logo--lg .cr-logo__mark { gap: 3px; height: 26px; }
.cr-logo--lg .cr-logo__mark i { width: 5px; border-radius: 3px; }
.cr-logo--lg .cr-logo__mark i:nth-child(1) { height: 9px; } .cr-logo--lg .cr-logo__mark i:nth-child(2) { height: 25px; }
.cr-logo--lg .cr-logo__mark i:nth-child(3) { height: 14px; } .cr-logo--lg .cr-logo__mark i:nth-child(4) { height: 6px; }
.cr-logo--lg .cr-logo__word { font-size: 25px; letter-spacing: -.045em; }
.cr-auth__pitch { display: grid; gap: 28px; max-width: 520px; }
.cr-auth__pitch-text { display: grid; gap: 14px; }
.cr-auth__pitch h1 { margin: 0; font-size: 46px; font-weight: 800; letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
.cr-auth__pitch p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--muted); }
.cr-auth__glimpse { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.cr-auth__glimpse-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.cr-auth__glimpse-head > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.cr-auth__glimpse-head .cr-mono { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.cr-auth__glimpse-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.cr-auth__glimpse-row .cr-cell-main__name { font-size: 13px; }
.cr-auth__glimpse-row .cr-cell-main__sub { font-size: 11.5px; }
.cr-auth__glimpse-row > .cr-mono { font-size: 12.5px; }
.cr-auth__glimpse-strip { padding: 12px 16px; }
.cr-auth__glimpse-strip .cr-strip { height: 16px; }
.cr-auth__facts { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; color: var(--muted); }
.cr-auth__main { position: relative; display: flex; align-items: center; justify-content: center; padding: 48px 32px; }
.cr-auth__theme { position: absolute; top: 16px; right: 16px; }
.cr-auth__col { width: 100%; max-width: 400px; display: grid; gap: 22px; }
.cr-auth__head { display: grid; gap: 6px; }
.cr-auth__head h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.cr-auth__head p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.cr-auth__badge { width: 56px; height: 56px; border-radius: 18px; background: var(--primary-soft); color: var(--primary-text); display: grid; place-items: center; }
.cr-auth__badge .ti { font-size: 28px; }
.cr-auth__oauth { display: grid; gap: 10px; }
.cr-auth__oauth--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cr-auth__btn-oauth { height: 46px; font-size: 15px; gap: 10px; }
.cr-auth__btn-oauth .ti { font-size: 19px; }
.cr-auth__or { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted); }
.cr-auth__or::before, .cr-auth__or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.cr-auth__form, .cr-auth__stack { display: grid; gap: 14px; }
.cr-auth__input { height: 46px; padding: 0 16px; border-radius: 14px; background-color: var(--surface); font-size: 15px; }
.cr-auth__input.is-invalid { box-shadow: 0 0 0 3px var(--down-soft); }
.cr-auth__label-row { display: flex; justify-content: space-between; align-items: baseline; }
.cr-auth__label-row a { font-size: 13px; font-weight: 700; }
.cr-auth__submit { height: 48px; font-size: 15px; gap: 8px; margin-top: 4px; width: 100%; }
.cr-auth__resend { height: 46px; font-size: 14.5px; }
.cr-auth__switch { margin: 0; font-size: 14px; color: var(--muted); text-align: center; }
.cr-auth__switch a { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.cr-auth__fine { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; text-align: center; }
.cr-auth__fine a { color: var(--ink); font-weight: 600; }
.cr-auth__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-family: var(--mono); font-size: 11px; padding-top: 8px; border-top: 1px solid var(--line); }
.cr-auth__legal a { color: var(--muted); }
.cr-pw { position: relative; display: block; }
.cr-pw .form-control { padding-right: 46px; }
.cr-pw__toggle { position: absolute; right: 6px; top: 5px; width: 36px; height: 36px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.cr-pw__toggle .ti { font-size: 18px; }
.cr-strength { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 4px; align-items: center; }
.cr-strength i { height: 5px; border-radius: 3px; background: var(--line); }
.cr-strength span { font-size: 12px; font-weight: 700; margin-left: 6px; color: var(--muted); white-space: nowrap; }
.cr-strength[data-level="1"] i:nth-child(-n+1) { background: var(--down); } .cr-strength[data-level="1"] span { color: var(--down-text); }
.cr-strength[data-level="2"] i:nth-child(-n+2) { background: var(--warn); } .cr-strength[data-level="2"] span { color: var(--warn-text); }
.cr-strength[data-level="3"] i:nth-child(-n+3), .cr-strength[data-level="4"] i { background: var(--ok); }
.cr-strength[data-level="3"] span, .cr-strength[data-level="4"] span { color: var(--ok-text); }
.cr-captcha { position: relative; display: flex; align-items: center; min-height: 60px; padding: 6px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.cr-captcha altcha-widget {
  flex: 1; --altcha-max-width: 100%; --altcha-border-width: 0; --altcha-border-radius: 8px;
  --altcha-color-base: transparent; --altcha-color-border: var(--line); --altcha-color-text: var(--ink);
  --altcha-color-border-focus: var(--primary); --altcha-color-error-text: var(--down-text); --altcha-color-footer-bg: transparent;
}
.cr-captcha > .cr-mono { font-size: 10.5px; color: var(--muted); }
.cr-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 979.98px) {
  .cr-auth { grid-template-columns: minmax(0, 1fr); }
  .cr-auth__brand { min-height: 0; height: auto; position: static; padding: 20px; justify-content: center; }
  .cr-auth__pitch, .cr-auth__facts { display: none; }
  .cr-auth__main { align-items: flex-start; padding: 32px 20px calc(32px + env(safe-area-inset-bottom)); }
}
.cr-tile__flag { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.cr-tile__flag--warn { color: var(--warn-text); } .cr-tile__flag--down { color: var(--down-text); }

/* ---------- Dashboard ---------- */
.cr-dash-head { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; justify-content: space-between; }
.cr-dash-head__title { display: grid; gap: 4px; }
.cr-dash-head__title > span { font-size: 14px; }
.cr-dash-head h1 { margin: 0; font-size: var(--h1); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.cr-dash-head__actions { display: flex; gap: 10px; align-items: center; }
@media (max-width: 859.98px) { .cr-dash-head__actions { width: 100%; justify-content: space-between; } }
.cr-banner { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 28px; padding: 20px 22px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); }
.cr-banner--down { background: var(--down-soft); border-color: var(--down-line); }
.cr-banner--warn { background: var(--warn-soft); border-color: var(--warn-line); }
.cr-banner--degraded { background: var(--degraded-soft); border-color: var(--degraded-line); }
.cr-banner--ok { background: var(--ok-soft); border-color: var(--ok-line); }
.cr-banner--pending, .cr-banner--paused { background: var(--surface); }
.cr-banner__main { display: flex; gap: 14px; align-items: center; min-width: 0; }
.cr-banner__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex-shrink: 0; background: var(--ok); color: var(--on-ok); }
.cr-banner__icon .ti { font-size: 27px; }
.cr-banner--down .cr-banner__icon { background: var(--down); color: var(--on-down); }
.cr-banner--warn .cr-banner__icon { background: var(--warn); color: var(--on-warn); }
.cr-banner--degraded .cr-banner__icon { background: var(--degraded); color: var(--on-degraded); }
.cr-banner__text { display: grid; gap: 4px; min-width: 0; }
.cr-banner__title { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.cr-banner__sub { font-size: 14px; color: var(--muted); line-height: 1.4; overflow-wrap: anywhere; }
@media (max-width: 639.98px) { .cr-banner__title { font-size: 21px; } }
.cr-banner__stats { display: grid; gap: 10px; align-content: center; }
.cr-segbar { display: flex; gap: 3px; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.cr-segbar__seg { min-width: 6px; flex-basis: 0; }
.cr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.cr-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.cr-legend b { font-weight: 800; }
.cr-legend .ti { font-size: 15px; }
.cr-legend__swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--primary); }
.cr-exp { display: grid; gap: 4px; }
.cr-exp__bar { display: block; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.cr-exp__bar > span { display: block; height: 100%; border-radius: 3px; }
.cr-exp > .cr-mono { font-size: 11px; color: var(--muted); }
.cr-alert-row__text { display: grid; gap: 3px; min-width: 0; flex: 1; }
.cr-alert-row__title { font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.cr-alert-row__title .cr-mono { font-size: 13px; }
.cr-alert-row__sub { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.cr-alert-row__time { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cr-activity { display: grid; gap: 14px; }
.cr-chart { position: relative; height: 170px; display: flex; align-items: flex-end; gap: 3px; border-bottom: 1px solid var(--line); background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 42.5px; }
.cr-chart__col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; min-width: 2px; }
.cr-chart__ok { background: var(--primary); border-radius: 3px 3px 0 0; opacity: .9; }
.cr-chart__fail { background: var(--down); border-radius: 3px 3px 0 0; }
.cr-chart__fail + .cr-chart__ok { border-radius: 0; }
.cr-chart__axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.cr-feed { padding: 6px 0; }
.cr-feed__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 9px 18px; align-items: center; }
.cr-feed__text { font-size: 13.5px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.cr-feed__text .cr-mono { font-size: 12.5px; font-weight: 600; }
.cr-feed__time { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cr-welcome__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; width: 100%; margin-top: 4px; }
.cr-welcome__item { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.cr-welcome__item:hover { border-color: var(--primary-line); color: var(--ink); }
.cr-welcome__item > span:last-child { display: grid; gap: 2px; }
.cr-welcome__item strong { font-size: 14px; }
.cr-welcome__item small { font-size: 12.5px; }

/* ---------- List pages ---------- */
.cr-listhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 18px 40px; align-items: end; }
@media (max-width: 859.98px) { .cr-listhead { grid-template-columns: minmax(0, 1fr); } }
.cr-listhead__text { display: grid; gap: 6px; max-width: 660px; }
.cr-listhead h1 { margin: 0; font-size: var(--h1); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.cr-listhead p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.45; }
.cr-listhead__side { display: flex; gap: 20px; align-items: center; min-width: 0; }
.cr-listhead__side .btn { height: 40px; padding: 0 18px; }
.cr-usage { display: grid; gap: 8px; flex: 1; min-width: 0; }
.cr-usage__line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; }
.cr-usage__n { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.cr-usage .cr-bar { height: 6px; }
.cr-usage__line > span { white-space: nowrap; }
@media (max-width: 639.98px) { .cr-listhead__side { flex-wrap: wrap; gap: 12px; } .cr-listhead__side .cr-usage { flex: 1 1 100%; } .cr-listhead__side .btn { flex: 1 1 auto; justify-content: center; } }
.cr-limitbar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center; padding: 18px 20px; border-radius: 20px; background: var(--primary-soft); border: 1px solid var(--primary-line); }
.cr-limitbar__icon { width: 44px; height: 44px; border-radius: 14px; background: var(--surface); display: grid; place-items: center; color: var(--primary-text); }
.cr-limitbar__icon .ti { font-size: 22px; }
.cr-limitbar__body { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; min-width: 0; }
.cr-limitbar__body > div:first-child { display: grid; gap: 4px; max-width: 620px; }
.cr-limitbar__body strong { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.cr-limitbar__body span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.cr-limitbar__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-empty--lg { border-radius: 22px; gap: 22px; }
.cr-empty--lg .cr-empty__icon { width: 54px; height: 54px; border-radius: 16px; }
.cr-empty--lg .cr-empty__icon .ti { font-size: 28px; }
.cr-empty__lead { display: grid; gap: 8px; max-width: 560px; }
.cr-empty--lg .cr-empty__title { font-size: 24px; letter-spacing: -.03em; line-height: 1.15; }
.cr-empty--lg .cr-empty__body { font-size: 15px; }
.cr-empty__stepcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; width: 100%; max-width: 820px; }
.cr-empty__stepcards > div { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--surface-2); font-size: 14px; line-height: 1.4; }
.cr-empty__stepcards .cr-mono { width: 26px; height: 26px; border-radius: 999px; background: var(--surface); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.cr-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cr-search-input { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); min-width: 0; margin: 0; }
.cr-search-input .ti { font-size: 16px; color: var(--muted); }
.cr-search-input input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--ink); font-size: 14px; }
.cr-toolbar__count { font-size: 12px; }
.cr-nomatch { padding: 32px 18px; display: grid; gap: 6px; justify-items: center; text-align: center; font-size: 13px; color: var(--muted); }
.cr-nomatch .ti { font-size: 24px; } .cr-nomatch strong { font-size: 14px; color: var(--ink); }
.cr-table__row > a.cr-cell-main { color: var(--ink); }
.cr-vol { display: flex; align-items: flex-end; gap: 2px; height: 22px; }
.cr-vol i { flex: 1; background: var(--primary); opacity: .85; border-radius: 2px 2px 0 0; min-width: 2px; }
.cr-toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink); font-size: 13px; font-weight: 700; }
.cr-toggle .cr-switch__track { width: 34px; height: 20px; }
.cr-toggle .cr-switch__track::after { width: 14px; height: 14px; }
.cr-toggle.is-on .cr-switch__track { background: var(--primary); }
.cr-toggle.is-on .cr-switch__track::after { left: 17px; background: var(--on-primary); }
.cr-row-menu__btn { border-color: transparent; background: transparent; color: var(--muted); }

/* ---------- Detail & form helpers ---------- */
.d-contents { display: contents !important; }
.cr-icon-plain { border-color: transparent; background: transparent; color: var(--muted); width: 26px; height: 26px; }
.cr-card__row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.cr-strip--xl { height: 34px; }
.cr-statgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cr-statbox { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); display: grid; gap: 6px; }
.cr-statbox span { font-size: 12px; font-weight: 600; color: var(--muted); }
.cr-statbox strong { font-size: 24px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
@media (max-width: 639.98px) { .cr-statbox strong { font-size: 18px; } }
.cr-latency { display: grid; gap: 8px; }
.cr-latency__plot { position: relative; height: 170px; padding-left: 52px; }
.cr-latency__plot svg { position: relative; width: 100%; height: 170px; display: block; overflow: visible; }
.cr-latency__grid { position: absolute; left: 52px; right: 0; top: 0; bottom: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 50%; border-bottom: 1px solid var(--line); }
.cr-latency__y { position: absolute; left: 0; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.cr-latency__x { display: flex; justify-content: space-between; padding-left: 52px; font-size: 11px; color: var(--muted); }
.cr-latency__note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--down-text); font-weight: 600; }
.cr-verdict { display: flex; align-items: center; gap: 8px; padding: 12px 18px; font-size: 13px; font-weight: 700; background: var(--surface-2); }
.cr-verdict .ti { font-size: 16px; }
.cr-verdict--down { background: var(--down-soft); color: var(--down-text); }
.cr-verdict--ok { background: var(--ok-soft); color: var(--ok-text); }
.cr-verdict--degraded { background: var(--degraded-soft); color: var(--degraded-text); }
.cr-verdict--warn { background: var(--warn-soft); color: var(--warn-text); }
.cr-chiplist { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-minichip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--surface-2); font-family: var(--sans); font-size: 12.5px; font-weight: 600; }
.cr-minichip .ti { font-size: 15px; }
.cr-form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
@media (max-width: 1099.98px) { .cr-form-layout { grid-template-columns: minmax(0, 1fr); } .cr-form-aside { display: none; } }
.cr-form-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cr-form-main .cr-card--pad { gap: 18px; }
.cr-form-aside { position: sticky; top: calc(var(--topbar-h) + 20px); display: grid; gap: 14px; }
.cr-summary-row { display: grid; gap: 3px; }
.cr-summary-row span { font-size: 12px; font-weight: 600; color: var(--muted); }
.cr-summary-row strong { font-size: 14px; font-weight: 600; }
.cr-after { padding: 16px; border-radius: 18px; background: var(--surface-2); display: grid; gap: 6px; }
.cr-after span { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.cr-after p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cr-form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cr-form-actions .btn { height: 42px; }
.cr-note { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.45; }
.cr-note .ti { font-size: 16px; margin-top: 1px; }
.cr-note b { color: var(--ink); font-weight: 600; }
.cr-form-grid--host { grid-template-columns: minmax(0, 1fr) 140px; }
@media (max-width: 639.98px) { .cr-form-grid--host { grid-template-columns: minmax(0, 1fr); } }
.cr-seg--radio label.is-active span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px oklch(0 0 0 / .14); }
.cr-inline-fields { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; font-weight: 600; }
.cr-btn-soft { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary-text); font-weight: 700; }
.cr-btn-soft:hover { background: var(--primary-soft); color: var(--primary-text); filter: brightness(.97); }
.cr-ok-line { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ok-text); }
.cr-runs { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); margin-top: 12px; }
.cr-runs > div { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 13px; }
.cr-runs__title { font-size: 12px; font-weight: 700; color: var(--muted); }
.cr-hero__strip { display: grid; gap: 5px; margin-top: 6px; width: 100%; }
.cr-hero__strip .cr-mono { font-size: 11px; color: var(--muted); }
.cr-strip--md { height: 22px; }
.cr-pingurl { border-radius: 20px; border: 1px solid var(--primary-line); background: var(--primary-soft); padding: 18px; display: grid; gap: 12px; }
.cr-pingurl .cr-copy__value { height: 48px; line-height: 46px; background: var(--surface); font-size: 14px; font-weight: 500; }
.cr-pingurl .cr-copy__btn { height: 48px; font-size: 15px; padding: 0 20px; }
.cr-snippet-tabs { padding: 12px 18px; overflow-x: auto; flex-wrap: nowrap; }
.cr-hdr-rows { display: grid; gap: 8px; }
.cr-hdr-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 38px; gap: 8px; }
.cr-hdr-row .form-control { height: 40px; font-size: 13px; }
.cr-hdr-row .btn-icon { height: 40px; border-radius: 12px; color: var(--muted); }
.cr-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 859.98px) { .cr-form-grid--3 { grid-template-columns: minmax(0, 1fr); } }
.cr-reqline { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); font-size: 13.5px; }
.cr-method { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; background: var(--surface-2); color: var(--ink); flex-shrink: 0; }
.cr-method--get { background: var(--ok-soft); color: var(--ok-text); }
.cr-method--post { background: var(--pending-soft); color: var(--pending-text); }
.cr-method--put, .cr-method--patch { background: var(--warn-soft); color: var(--warn-text); }
.cr-method--delete { background: var(--down-soft); color: var(--down-text); }
.cr-rule { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.cr-rule .ti { font-size: 18px; color: var(--ok-text); }
.cr-rule .cr-mono { font-size: 13px; font-weight: 400; overflow-wrap: anywhere; }
@media (max-width: 639.98px) {
  .cr-page-header__actions .btn { flex: 1 1 calc(50% - 4px); }
}

/* ---------- Webhook inbox ---------- */
.cr-fwdline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; }
.cr-fwdline .ti { font-size: 17px; color: var(--muted); }
.cr-inbox { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1023.98px) { .cr-inbox { grid-template-columns: minmax(0, 1fr); } }
.cr-reqlist__items { padding: 6px; display: grid; gap: 2px; max-height: 720px; overflow-y: auto; }
.cr-reqitem { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; color: var(--ink); }
.cr-reqitem:hover { background: var(--surface-2); color: var(--ink); }
.cr-reqitem.is-active { background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary-line); }
.cr-reqitem__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cr-reqitem__ev { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-reqitem__sub { display: flex; gap: 10px; font-size: 12px; color: var(--muted); padding-left: 56px; }
.cr-reqitem__sub > span:last-child { display: inline-flex; align-items: center; gap: 4px; }
.cr-reqitem__sub .ti { font-size: 14px; }
.cr-reqdetail__head { padding: 16px 18px; display: grid; gap: 12px; border-bottom: 1px solid var(--line); }
.cr-reqdetail__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cr-reqdetail__title .cr-mono { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.cr-reqdetail__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--muted); }
.cr-reqdetail__meta > span { display: inline-flex; align-items: center; gap: 5px; }
.cr-reqdetail__meta .ti { font-size: 14px; }
.cr-reqdetail__tabs { padding: 0 18px; }
.cr-ai { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--primary-soft); border: 1px solid var(--primary-line); }
.cr-ai__title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--primary-text); }
.cr-ai__text { font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.cr-kv--box { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cr-kv--box .cr-kv__row { padding: 10px 14px; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); }
.cr-emptybox { padding: 22px; border-radius: 14px; border: 1px dashed var(--line); text-align: center; font-size: 13.5px; color: var(--muted); }

/* ---------- Expiry detail (SSL / domains) ---------- */
.cr-hero__big small { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-left: 8px; }
.cr-hero__side { display: grid; gap: 18px; min-width: 0; }
.cr-validity { display: grid; gap: 6px; }
.cr-validity__ends { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cr-validity__track { position: relative; height: 8px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); }
.cr-validity__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; }
.cr-validity__now { position: absolute; top: -5px; width: 3px; height: 16px; border-radius: 2px; background: var(--ink); transform: translateX(-50%); }
.cr-validity__tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.cr-validity__marks { position: relative; height: 14px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.cr-validity__marks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.cr-remind { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.cr-remind > .ti { font-size: 17px; color: var(--muted); }
.cr-remind.is-sent > .ti { color: var(--ok); }
.cr-remind.is-next > .ti { color: var(--warn); }
.cr-remind__when { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--muted); }
.cr-remind-foot { padding: 12px 18px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 639.98px) { .cr-hero__big small { font-size: 18px; } }

/* ---------- Automation rule builder ---------- */
.cr-step { display: flex; align-items: center; gap: 10px; }
.cr-step h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.cr-step__tag { height: 26px; min-width: 32px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; background: var(--primary); color: var(--on-primary); }
.cr-step__tag--soft { background: var(--surface-2); color: var(--ink); }
.cr-evgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.cr-evopt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 14px; font-weight: 600; cursor: pointer; }
.cr-evopt input, .cr-radio input { position: absolute; opacity: 0; pointer-events: none; }
.cr-evopt .ti { font-size: 18px; }
.cr-evopt:hover, .cr-radio:hover { background: var(--surface-2); }
.cr-evopt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-text); }
.cr-evopt:has(input:focus-visible), .cr-radio:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--primary-soft); }
.cr-radiolist { display: grid; gap: 8px; }
.cr-radio { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; min-width: 0; }
.cr-radio__ring { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; display: grid; place-items: center; }
.cr-radio:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.cr-radio:has(input:checked) .cr-radio__ring { border-color: var(--primary); }
.cr-radio:has(input:checked) .cr-radio__ring::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.cr-radio__text { display: grid; gap: 2px; min-width: 0; }
.cr-radio__name { font-family: var(--mono); font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.cr-radio__name--sans { font-family: var(--sans); font-size: 14px; }
.cr-radio__sub { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-radiolist--scroll { max-height: 440px; overflow-y: auto; padding-right: 2px; }
.cr-flow-arrow { display: flex; justify-content: center; color: var(--muted); margin: -8px 0; font-size: 20px; }
.cr-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cr-preview__kw { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--muted); }
.cr-preview__chip { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--primary-line); background: var(--primary-soft); color: var(--primary-text); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.cr-preview__chip.cr-mono { font-weight: 600; }
.cr-varchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cr-varchips > span:first-child { font-size: 12px; font-weight: 600; color: var(--muted); }
.cr-varchip { height: 24px; padding: 0 8px; border-radius: 8px; border: 0; background: var(--surface-2); color: var(--ink); font-family: var(--mono); font-size: 11.5px; display: inline-flex; align-items: center; cursor: pointer; }
.cr-varchip:hover { background: var(--primary-soft); color: var(--primary-text); }
.cr-urlrow { display: flex; gap: 8px; align-items: center; }
.cr-urlrow > .cr-method { flex-shrink: 0; }
.cr-step-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cr-rule-line { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.btn-test { border-color: var(--primary-line); background: var(--primary-soft); color: var(--primary-text); }
@media (max-width: 639.98px) { .cr-evgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cr-evopt { padding: 8px 10px; font-size: 13px; } }
.cr-details summary { cursor: pointer; font-size: 13px; font-weight: 700; width: max-content; }
.cr-details[open] summary { margin-bottom: 10px; }
@media (max-width: 639.98px) { .cr-step-head .cr-seg { flex-wrap: wrap; width: 100%; border-radius: 16px; } .cr-step-head .cr-seg label { flex: 1 1 auto; } .cr-step-head .cr-seg label span { justify-content: center; } }

/* ---------- Alert channels ---------- */
.cr-chgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.cr-chcard { padding: 18px; display: grid; gap: 12px; }
.cr-chcard__head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.cr-chcard__icon { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); display: grid; place-items: center; font-size: 21px; }
.cr-chcard__head strong { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.cr-chcard__head .cr-mono { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-chcard__blurb { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.cr-chdest { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.cr-chdest:first-of-type { border-top: 0; padding-top: 0; }
.cr-chdest__name { font-size: 13.5px; font-weight: 700; display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.cr-chdest__name .cr-mono { font-size: 12px; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-chcard__used { font-size: 12px; font-weight: 700; color: var(--muted); }
.cr-chcard__used.is-ink { color: var(--ink); }
.cr-chcard__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cr-chcard__chips .cr-minichip { font-family: var(--mono); }
.cr-chcard__chips > span:not(.cr-minichip) { font-size: 12px; color: var(--muted); }
.cr-chcard__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.cr-chcard__foot .cr-toggle { font-size: 14px; font-weight: 600; }
.cr-chcard__add { justify-self: start; border: 0; background: none; padding: 0; color: var(--primary-text); font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.cr-tgcode { font-family: var(--mono); font-size: 30px; font-weight: 700; letter-spacing: .12em; text-align: center; padding: 14px; border-radius: 14px; background: var(--surface-2); }

/* ---------- Alerts ---------- */
.cr-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cr-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.cr-state--down::before { background: var(--down); }
.cr-state--warn::before { background: var(--warn); }
.cr-state--down, .cr-state--warn { color: var(--ink); }
.cr-sentto { display: inline-flex; gap: 8px; color: var(--muted); font-size: 16px; }
.cr-sentto .is-failed { color: var(--down-text); }
.cr-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cr-filters .form-select { width: auto; min-width: 170px; }
.cr-pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
.cr-pager__nums { display: flex; gap: 6px; flex-wrap: wrap; }
.cr-pager__nums .btn.is-current { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.cr-hero__msg { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; overflow-wrap: anywhere; }
.cr-hero__state { font-size: 13px; font-weight: 700; }
.cr-timeline { display: grid; padding: 14px 18px; }
.cr-tl { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 14px; }
.cr-tl:last-child { padding-bottom: 0; }
.cr-tl:not(:last-child)::after { content: ''; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; background: var(--line); }
.cr-tl__icon { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; background: var(--surface-2); color: var(--muted); }
.cr-tl__icon--ok { background: var(--ok-soft); color: var(--ok-text); }
.cr-tl__icon--down, .cr-tl__icon--crit { background: var(--down-soft); color: var(--down-text); }
.cr-tl__icon--warn, .cr-tl__icon--exp { background: var(--warn-soft); color: var(--warn-text); }
.cr-tl__icon--primary { background: var(--primary-soft); color: var(--primary-text); }
.cr-tl__time { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cr-tl__text { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.cr-delivery { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.cr-delivery:last-child { border-bottom: 0; }
.cr-delivery__icon { width: 38px; height: 38px; border-radius: 11px; background: var(--surface-2); display: grid; place-items: center; font-size: 18px; }
.cr-delivery strong { display: block; font-size: 14px; }
.cr-delivery .cr-mono { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.cr-delivery__status { text-align: right; font-size: 12.5px; font-weight: 700; display: grid; gap: 2px; justify-items: end; }
.cr-delivery__status .cr-mono { font-weight: 400; }
.cr-msg { padding: 16px 18px; display: grid; gap: 8px; }
.cr-msg strong { font-size: 14px; }
.cr-msg pre { margin: 0; padding: 0; border: 0; background: none; border-radius: 0; font-family: var(--mono); font-size: 12.5px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- AI assistant ---------- */
.cr-ai-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: stretch; min-height: 0; }
.cr-ai-list { display: flex; flex-direction: column; gap: 4px; padding: 10px; min-height: 0; max-height: calc(100vh - 230px); overflow-y: auto; }
.cr-ai-list .btn-primary { width: 100%; justify-content: center; margin-bottom: 8px; }
.cr-ai-list__label { padding: 6px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cr-ai-conv { position: relative; display: grid; gap: 2px; padding: 10px 40px 10px 12px; border-radius: 14px; color: var(--ink); min-width: 0; }
.cr-ai-conv:hover { background: var(--surface-2); color: var(--ink); }
.cr-ai-conv.is-active { background: var(--primary-soft); }
.cr-ai-conv.is-active .cr-ai-conv__title { color: var(--primary-text); }
.cr-ai-conv__title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-ai-conv__time { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.cr-ai-conv .cr-row-menu { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.cr-ai-chat { display: flex; flex-direction: column; min-height: 520px; height: calc(100vh - 230px); overflow: hidden; }
.cr-ai-chat__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 800; min-width: 0; }
.cr-ai-chat__head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-ai-chat__list-btn { display: none; }
.cr-ai-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.cr-ai-user { align-self: flex-end; max-width: min(80%, 620px); padding: 10px 16px; border-radius: 18px 18px 6px 18px; background: var(--primary); color: var(--on-primary); font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.cr-ai-bot { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; max-width: 760px; }
.cr-ai-bot__icon { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-text); font-size: 16px; }
.cr-ai-md { font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; min-width: 0; }
.cr-ai-md > :first-child { margin-top: 0; } .cr-ai-md > :last-child { margin-bottom: 0; }
.cr-ai-md p, .cr-ai-md ul, .cr-ai-md ol { margin: 0 0 10px; }
.cr-ai-md ul, .cr-ai-md ol { padding-left: 20px; }
.cr-ai-md li { margin: 4px 0; }
.cr-ai-md :not(pre) > code { font-family: var(--mono); font-size: 12.5px; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); }
.cr-ai-md .cr-code { margin: 10px 0; }
.cr-ai-md table { border-collapse: collapse; font-size: 13px; margin: 8px 0; } .cr-ai-md th, .cr-ai-md td { border: 1px solid var(--line); padding: 4px 8px; }
.cr-ai-md a { text-decoration: underline; }
.cr-ai-thinking { color: var(--muted); font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }
.cr-ai-empty { margin: auto; display: grid; justify-items: center; gap: 14px; text-align: center; max-width: 520px; padding: 20px 0; }
.cr-ai-empty__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-text); font-size: 26px; }
.cr-ai-empty strong { display: block; font-size: 18px; font-weight: 800; } .cr-ai-empty span { color: var(--muted); font-size: 14px; }
.cr-ai-starters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.cr-ai-starter { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
.cr-ai-starter:hover { border-color: var(--primary-line); background: var(--primary-soft); }
.cr-ai-starter .ti { font-size: 18px; color: var(--primary-text); }
.cr-ai-composer { padding: 12px 14px 10px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.cr-ai-composer form { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface-2); }
.cr-ai-composer form:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.cr-ai-composer textarea { flex: 1; border: 0; background: none; resize: none; outline: none; font: inherit; font-size: 14.5px; line-height: 1.45; padding: 8px 0; max-height: 160px; color: var(--ink); }
.cr-ai-composer .btn-send { width: 40px; height: 40px; border-radius: 50%; padding: 0; display: grid; place-items: center; flex-shrink: 0; }
.cr-ai-composer__note { text-align: center; font-size: 11.5px; color: var(--muted); }
.cr-ai-limit { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 10px; border-radius: 14px; background: var(--down-soft); color: var(--down-text); font-size: 13px; font-weight: 600; }
.cr-ai-backdrop { display: none; }
@media (max-width: 859.98px) {
  .cr-ai-shell { grid-template-columns: minmax(0, 1fr); }
  .cr-ai-list { position: fixed; z-index: 1050; top: 0; bottom: 0; left: 0; width: min(320px, 86vw); max-height: none; border-radius: 0 20px 20px 0; transform: translateX(-105%); transition: transform .2s; }
  .cr-ai-shell.is-list-open .cr-ai-list { transform: none; }
  .cr-ai-shell.is-list-open .cr-ai-backdrop { display: block; position: fixed; inset: 0; z-index: 1040; background: var(--overlay); }
  .cr-ai-chat__list-btn { display: inline-grid; }
  .cr-ai-chat { height: calc(100dvh - 330px); min-height: 420px; }
  .cr-ai-composer textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cr-ai-starters { grid-template-columns: minmax(0, 1fr); }
}
.cr-spin { animation: cr-spin 1s linear infinite; display: inline-block; }

/* ---------- Settings ---------- */
.cr-settings-head h1 { margin: 0 0 14px; font-size: var(--h1, 32px); font-weight: 800; letter-spacing: -.03em; }
.cr-settings-head .cr-tabs a { display: inline-flex; align-items: center; gap: 7px; }
.cr-settings-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 859.98px) { .cr-settings-cols { grid-template-columns: minmax(0, 1fr); } }
.cr-signin { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); }
.cr-signin > .ti { font-size: 22px; }
.cr-signin strong { display: block; font-size: 14px; }
.cr-signin span { font-size: 12.5px; color: var(--muted); }
.cr-danger-card { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--down-line); background: var(--down-soft); }
.cr-danger-card strong { display: block; color: var(--down-text); font-size: 14.5px; }
.cr-danger-card span { font-size: 13px; color: var(--muted); }
.cr-keyrow { display: grid; grid-template-columns: minmax(0, 1fr) auto 170px auto; gap: 14px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); }
.cr-keyrow strong { display: block; font-size: 14px; }
.cr-keyrow .cr-mono { font-size: 12.5px; color: var(--muted); }
.cr-keyrow__meta { font-size: 12px; color: var(--muted); line-height: 1.5; }
.cr-keyrow__actions { display: flex; gap: 6px; }
@media (max-width: 719.98px) { .cr-keyrow { grid-template-columns: minmax(0, 1fr) auto; } .cr-keyrow__meta { grid-column: 1; } .cr-keyrow__actions { grid-column: 1 / -1; } }
.cr-scope { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 700; white-space: nowrap; }
.cr-planhead { display: grid; gap: 10px; }
.cr-planhead__name { display: flex; align-items: baseline; gap: 10px; }
.cr-planhead__name strong { font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.cr-planhead__meta { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.cr-planhead__meta .ti { margin-right: 6px; }
.cr-usagegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.cr-usagegrid > div { display: grid; gap: 6px; }
.cr-usagegrid .cr-usage__line { font-size: 13px; }
.cr-plancards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 959.98px) { .cr-plancards { grid-template-columns: minmax(0, 1fr); } }
.cr-plancard { padding: 20px; display: grid; gap: 12px; align-content: start; }
.cr-plancard.is-current { border: 2px solid var(--primary); background: var(--primary-soft); }
.cr-plancard__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cr-plancard__head strong { font-size: 17px; font-weight: 800; }
.cr-plancard__price { display: flex; align-items: baseline; gap: 6px; }
.cr-plancard__price strong { font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.cr-plancard__price span { font-size: 13px; color: var(--muted); }
.cr-plancard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14px; }
.cr-plancard li { display: flex; gap: 8px; align-items: center; }
.cr-plancard li .ti { color: var(--primary-text); }
.cr-plancard .btn { width: 100%; justify-content: center; }
.cr-badge-current { height: 24px; padding: 0 10px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; }
.cr-pref { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); }
.cr-pref strong { display: block; font-size: 14px; }
.cr-pref span { font-size: 12.5px; color: var(--muted); }
.cr-pref .cr-switch { font-size: 13px; }

/* ---------- API docs ---------- */
.cr-docs-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-docs-fact { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; color: var(--muted); }
.cr-docs-fact .cr-mono { color: var(--ink); }
.cr-docs { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.cr-docs-nav { padding: 10px; display: grid; gap: 2px; position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow-y: auto; }
.cr-docs-nav__group { padding: 12px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cr-docs-nav button { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 10px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; color: var(--ink); }
.cr-docs-nav button:hover { background: var(--surface-2); }
.cr-docs-nav button.is-active { background: var(--primary-soft); }
.cr-docs-nav button > span:last-child { font-family: var(--mono); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-docs-nav button.cr-docs-nav__plain { grid-template-columns: minmax(0, 1fr); font-size: 13.5px; font-weight: 600; }
.cr-verb { display: inline-flex; justify-content: center; height: 22px; align-items: center; padding: 0 6px; border-radius: 6px; font-family: var(--mono); font-size: 11px; font-weight: 700; background: var(--ok-soft); color: var(--ok-text); }
.cr-verb--post { background: var(--primary-soft); color: var(--primary-text); }
.cr-verb--put, .cr-verb--patch { background: var(--warn-soft); color: var(--warn-text); }
.cr-verb--delete { background: var(--down-soft); color: var(--down-text); }
.cr-docs-main { display: grid; gap: 16px; min-width: 0; }
.cr-docs-ep h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.cr-docs-ep__path { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-family: var(--mono); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.cr-docs-ep__path .cr-verb { height: 26px; padding: 0 10px; font-size: 12px; }
.cr-params { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cr-params__row { display: grid; grid-template-columns: minmax(130px, 1fr) 64px 76px minmax(0, 2fr); gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; align-items: baseline; }
.cr-params__row:first-child { border-top: 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); }
.cr-params__row .cr-mono { font-size: 12.5px; }
.cr-params__req { font-size: 11px; font-weight: 700; color: var(--down-text); margin-left: 6px; }
.cr-docs-code { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cr-codes { display: grid; }
.cr-codes > div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 13.5px; }
.cr-codes .cr-mono { font-weight: 700; }
@media (max-width: 1099.98px) { .cr-docs-code { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 859.98px) { .cr-docs { grid-template-columns: minmax(0, 1fr); } .cr-docs-nav { position: static; max-height: 300px; } .cr-params__row { grid-template-columns: minmax(0, 1fr) 70px; } .cr-params__row > :nth-child(2), .cr-params__row > :nth-child(3) { display: none; } }

/* ---------- Support ---------- */
.cr-ticket { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 90px; gap: 14px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line); color: var(--ink); }
.cr-ticket:first-child { border-top: 0; }
.cr-ticket:hover { background: var(--surface-2); color: var(--ink); }
.cr-ticket strong { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-ticket span { font-size: 12.5px; color: var(--muted); }
.cr-ticket__time { text-align: right; font-family: var(--mono); font-size: 12.5px; }
@media (max-width: 639.98px) { .cr-ticket { grid-template-columns: minmax(0, 1fr) auto; } .cr-ticket > :first-child, .cr-ticket__time { display: none; } }
.cr-thread { display: grid; gap: 14px; }
.cr-msgcard { padding: 16px 18px; display: grid; gap: 10px; }
.cr-msgcard.is-support { border-color: var(--primary-line); background: var(--primary-soft); }
.cr-msgcard__head { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.cr-msgcard__head strong { font-size: 14px; }
.cr-msgcard__body { font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.cr-attachments { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-attachment { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; color: var(--ink); max-width: 100%; }
.cr-attachment > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.cr-attachment .cr-muted { font-family: var(--mono); font-size: 11.5px; }

/* ---------- Admin ---------- */
.cr-admin-head { display: grid; gap: 6px; margin-bottom: 14px; }
.cr-admin-head h1 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: var(--h1, 32px); font-weight: 800; letter-spacing: -.03em; }
.cr-staff { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.cr-admin-head p { margin: 0; color: var(--muted); font-size: 14px; }
.cr-urow { display: grid; grid-template-columns: minmax(0, 1fr) auto 120px 110px auto 36px; gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); }
.cr-urow strong { display: block; font-family: var(--mono); font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-urow > div > span { font-size: 12.5px; color: var(--muted); }
.cr-urow .cr-mono.cr-muted { font-size: 13px; }
.cr-urow--nodes { grid-template-columns: minmax(0, 1fr) auto 150px 100px auto 36px; }
@media (max-width: 859.98px) { .cr-urow, .cr-urow--nodes { grid-template-columns: minmax(0, 1fr) auto auto; } .cr-urow > :nth-child(2), .cr-urow > :nth-child(3), .cr-urow > :nth-child(5) { display: none; } }
.cr-planpill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-2); }
.cr-planpill--pro { background: var(--primary-soft); color: var(--primary-text); }
.cr-planpill--business { background: var(--primary); color: var(--on-primary); }
.cr-logstream { border-radius: 18px; background: var(--code-bg); color: var(--code-ink); padding: 14px 18px; font-family: var(--mono); font-size: 12.5px; overflow-x: auto; }
.cr-logline { display: grid; grid-template-columns: 112px 52px 210px minmax(0, 1fr); gap: 14px; padding: 6px 0; white-space: nowrap; align-items: baseline; }
.cr-logline > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.cr-logline__time { color: var(--code-muted); }
.cr-logline__lvl { font-size: 11px; font-weight: 700; }
.cr-logline__lvl--info { color: oklch(.75 .1 240); } .cr-logline__lvl--warn { color: oklch(.82 .14 85); } .cr-logline__lvl--error { color: oklch(.72 .16 25); }
.cr-logline__ev { color: oklch(.78 .12 340); overflow: hidden; text-overflow: ellipsis; }
.cr-logline a { color: inherit; } .cr-logline a:hover { text-decoration: underline; }
.cr-stattiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.cr-stattile { padding: 16px; display: grid; gap: 4px; }
.cr-stattile > span:first-child { font-size: 13px; color: var(--muted); }
.cr-stattile strong { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.cr-stattile > span:last-child { font-size: 12px; color: var(--muted); }

/* ---------- Legal pages ---------- */
.cr-legal { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; font-size: 15px; line-height: 1.65; }
.cr-legal h1 { margin: 0; font-size: var(--h1, 32px); font-weight: 800; letter-spacing: -.03em; }
.cr-legal h2 { margin: 18px 0 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.cr-legal p, .cr-legal ul { margin: 0; }
.cr-legal ul { padding-left: 22px; display: grid; gap: 4px; }
.cr-legal__meta { color: var(--muted); font-size: 13.5px; }
.cr-legal a { text-decoration: underline; }
.cr-legal table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cr-legal th, .cr-legal td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.cr-legal th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-top: 0; }
.cr-legal__foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; display: flex; gap: 16px; flex-wrap: wrap; }