/* gptzzz.ai 夜轨 Night Orbit — shared components (from the design system's bundle.css). Needs gz-tokens.css. */
/* GPTZZZ · 夜轨 Night Orbit — component styles.
   Every value comes from tokens.css (tokens.json). Night chrome (rail, nav band,
   footer, code wells, the auth door) is marked data-theme="dark" so the dark
   token values apply inside it in both themes. */

.gz-root,
.gz-root * { box-sizing: border-box; }
.gz-root {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--gz-text-2);
  background: var(--gz-canvas);
  font-variant-numeric: tabular-nums;
}
:is(html.dark, [data-theme="dark"]) .gz-root, .gz-night { -webkit-font-smoothing: antialiased; }
.gz-mono { font-family: var(--font-mono); }
.gz-t1 { color: var(--gz-text-1); }
.gz-t3 { color: var(--gz-text-3); }
.gz-t4 { color: var(--gz-text-4); }
.gz-cyan { color: var(--gz-cyan); }
.gz-violet { color: var(--gz-violet); }
.gz-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.gz-stack { display: flex; flex-direction: column; gap: var(--space-3); }
::selection { background: var(--gz-selection); color: var(--gz-text-1); }

/* ---------- Wordmark ---------- */
.gz-wordmark { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0; color: var(--gz-text-1); white-space: nowrap; }
.gz-wordmark b { font-weight: 700; color: var(--gz-cyan); }
.gz-logo { display: inline-block; width: 28px; height: 28px; border-radius: 8px; background: var(--gz-night) center / cover no-repeat; flex: none; }

/* ---------- Orbit Node 轨道节点 (signature) ---------- */
.gz-node {
  --gz-node-w: 18px; --gz-node-h: 9px; --gz-node-ring: 1.25px; --gz-node-core: 2.75px;
  position: relative; display: inline-block; flex: none;
  width: var(--gz-node-w); height: var(--gz-node-h);
  vertical-align: middle;
}
.gz-node::before {
  content: ""; position: absolute; inset: 0;
  border: var(--gz-node-ring) solid var(--gz-cyan-mark);
  border-radius: 50%;
  transform: rotate(-24deg);
}
.gz-node::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: calc(var(--gz-node-core) * 2); height: calc(var(--gz-node-core) * 2);
  margin: calc(var(--gz-node-core) * -1) 0 0 calc(var(--gz-node-core) * -1);
  border-radius: 50%; background: var(--gz-violet);
}
.gz-node.is-live::before { animation: gz-precess 2.4s linear infinite; }
.gz-node--lg { --gz-node-w: 48px; --gz-node-h: 22px; --gz-node-ring: 1.5px; --gz-node-core: 7px; }
.gz-node--quiet::before { border-color: var(--gz-text-4); }
@keyframes gz-precess { from { transform: rotate(-24deg); } to { transform: rotate(336deg); } }

/* ---------- Orbit Edge 轨道描边 (max one per screen) ----------
   Border and background are !important so the edge survives on elements whose own class
   (.gz-card, .gz-readout, .gz-composer) sets a background later in this file.
   Change the fill only through --gz-edge-fill. */
.gz-orbit-edge {
  --gz-edge-fill: var(--gz-card);
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--gz-edge-fill), var(--gz-edge-fill)) padding-box,
    linear-gradient(135deg, var(--gz-orbit-a), var(--gz-orbit-b)) border-box !important;
}
.gz-orbit-hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--gz-orbit-a) 20%, var(--gz-orbit-b) 80%, transparent); opacity: .45; }

/* ---------- Buttons ---------- */
.gz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 16px; border-radius: var(--radius-md);
  border: 1px solid transparent; background: transparent;
  font: 500 14px/1 var(--font-sans); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s, filter .12s;
}
.gz-btn:focus-visible { outline: 2px solid var(--gz-focus); outline-offset: 2px; }
.gz-btn:disabled, .gz-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; filter: none; }
.gz-btn--sm { height: 30px; padding: 0 12px; font-size: 13px; border-radius: var(--radius-sm); }
.gz-btn--lg { height: 40px; padding: 0 20px; }
.gz-btn--icon { width: 36px; padding: 0; }
.gz-btn--icon.gz-btn--sm { width: 28px; height: 28px; }
.gz-btn--block { width: 100%; }
.gz-btn svg { width: 16px; height: 16px; }

.gz-btn--primary { background: var(--gz-violet-fill); color: var(--gz-on-accent); }
.gz-btn--primary:hover { background: var(--gz-violet-hover); }
:is(html.dark, [data-theme="dark"]) .gz-btn--primary, .gz-btn--primary:is(html.dark, [data-theme="dark"]) {
  background: linear-gradient(135deg, var(--gz-grad-start), var(--gz-grad-mid) 55%, var(--gz-grad-end));
}
:is(html.dark, [data-theme="dark"]) .gz-btn--primary:hover { box-shadow: var(--gz-glow); filter: brightness(1.06); }
:is(html.dark, [data-theme="dark"]) .gz-btn--primary:active { transform: translateY(1px); }

.gz-btn--secondary { background: var(--gz-raised); border-color: var(--gz-line-strong); color: var(--gz-text-2); }
.gz-btn--secondary:hover { background: var(--gz-hover); border-color: var(--gz-line-control); }
:is(html.dark, [data-theme="dark"]) .gz-btn--secondary { border-color: var(--gz-line-control); color: var(--gz-text-2); }
.gz-btn--ghost { color: var(--gz-text-2); }
.gz-btn--ghost:hover { background: var(--gz-hover); }
.gz-btn--danger { background: var(--gz-danger-solid); color: var(--gz-on-accent); }
:is(html.dark, [data-theme="dark"]) .gz-btn--danger { color: var(--gz-code); }
.gz-btn--danger:hover { filter: brightness(.92); }
:is(html.dark, [data-theme="dark"]) .gz-btn--danger:hover { filter: brightness(1.08); }
.gz-btn--success { background: var(--gz-success-fill); color: var(--gz-on-accent); }
:is(html.dark, [data-theme="dark"]) .gz-btn--success { color: var(--gz-code); }
.gz-btn--link { height: auto; padding: 0; color: var(--gz-violet); }
.gz-btn--link:hover { color: var(--gz-violet-hover); }

/* ---------- Form controls ---------- */
.gz-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gz-label { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--gz-text-2); }
.gz-hint { font-size: 12px; line-height: 1.5; color: var(--gz-text-4); }
.gz-error { font-size: 12px; line-height: 1.5; color: var(--gz-danger); }
.gz-error::before { content: "■ "; }
.gz-input, .gz-select, .gz-textarea {
  width: 100%; height: 36px; padding: 8px 12px; border-radius: var(--radius-md);
  border: 1px solid var(--gz-line-control); background: var(--gz-raised);
  color: var(--gz-text-1); font: 400 14px/1.4 var(--font-sans);
  transition: border-color .12s, box-shadow .12s;
}
.gz-textarea { height: auto; min-height: 96px; line-height: 1.7; resize: vertical; }
.gz-input::placeholder, .gz-textarea::placeholder { color: var(--gz-text-4); }
.gz-input:hover, .gz-select:hover, .gz-textarea:hover { border-color: var(--gz-text-4); }
.gz-input:focus, .gz-select:focus, .gz-textarea:focus, .gz-input.is-focus {
  outline: none; border-color: var(--gz-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gz-focus) 22%, transparent);
}
.gz-input.is-error { border-color: var(--gz-danger); background: var(--gz-danger-tint); }
.gz-input:disabled { background: var(--gz-sunken); color: var(--gz-text-disabled); }
.gz-input--mono { font-family: var(--font-mono); font-size: 13px; }
.gz-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--gz-text-2); }
.gz-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--gz-violet-fill); }
.gz-switch { position: relative; width: 36px; height: 20px; border-radius: var(--radius-pill); background: var(--gz-switch-off); border: 0; padding: 0; cursor: pointer; flex: none; }
.gz-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--gz-on-accent); transition: transform .15s; }
.gz-switch[aria-checked="true"] { background: var(--gz-violet-fill); }
.gz-switch[aria-checked="true"]::after { transform: translateX(16px); }

/* ---------- Card / panel ---------- */
.gz-card { background: var(--gz-card); border: 1px solid var(--gz-line); border-radius: var(--radius-lg); box-shadow: var(--gz-shadow-card); min-width: 0; }
.gz-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 16px 20px; border-bottom: 1px solid var(--gz-line-faint); }
.gz-card__title { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--gz-text-1); }
.gz-card__body { padding: 20px; }
.gz-card__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: 12px 20px; background: var(--gz-sunken); border-top: 1px solid var(--gz-line); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.gz-card--hover:hover { border-color: var(--gz-line-strong); }

/* ---------- Stat tile + readout strip ---------- */
.gz-stat { display: flex; gap: 14px; padding: 18px 20px; }
.gz-stat__icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; flex: none; background: var(--gz-violet-tint); color: var(--gz-violet); }
.gz-stat__icon svg { width: 20px; height: 20px; }
.gz-stat__icon--ok { background: var(--gz-success-tint); color: var(--gz-success); }
.gz-stat__icon--cyan { background: var(--gz-cyan-tint); color: var(--gz-cyan); }
.gz-stat__icon--warn { background: var(--gz-warning-tint); color: var(--gz-warning); }
.gz-stat__label { font-size: 12px; font-weight: 500; color: var(--gz-text-3); }
.gz-stat__value { font-size: 26px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; color: var(--gz-text-1); }
.gz-stat__sub { font-size: 12px; color: var(--gz-text-4); }
.gz-up { color: var(--gz-success); } .gz-up::before { content: "▲ "; font-size: 10px; }
.gz-down { color: var(--gz-danger); } .gz-down::before { content: "▼ "; font-size: 10px; }

.gz-readout { display: grid; grid-template-columns: repeat(var(--gz-cells, 4), minmax(0, 1fr)); background: var(--gz-card); border: 1px solid var(--gz-line); border-radius: var(--radius-lg); }
.gz-readout > div { padding: 14px 18px; border-left: 1px solid var(--gz-line); min-width: 0; }
.gz-readout > div:first-child { border-left: 0; }
.gz-readout dt { font-size: 12px; color: var(--gz-text-3); }
.gz-readout dd { margin: 2px 0 0; font-size: 22px; line-height: 1.25; font-weight: 600; color: var(--gz-text-1); }
.gz-readout dd small { font-size: 13px; font-weight: 400; color: var(--gz-text-4); margin-left: 2px; }
@media (max-width: 560px) {
  .gz-readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gz-readout > div:nth-child(odd) { border-left: 0; }
  .gz-readout > div:nth-child(n+3) { border-top: 1px solid var(--gz-line); }
}

/* ---------- Status chips ---------- */
.gz-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font: 500 12px/1 var(--font-sans); white-space: nowrap;
  background: var(--gz-sunken); color: var(--gz-text-3);
}
.gz-chip::before { content: ""; width: 6px; height: 6px; flex: none; background: currentColor; }
.gz-chip--ok { background: var(--gz-success-tint); color: var(--gz-success); }
.gz-chip--ok::before { border-radius: 50%; }
.gz-chip--warn { background: transparent; border-color: var(--gz-warning-mark); color: var(--gz-warning); }
.gz-chip--warn::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 7px; }
.gz-chip--bad { background: var(--gz-danger-solid); color: var(--gz-on-accent); }
:is(html.dark, [data-theme="dark"]) .gz-chip--bad { color: var(--gz-code); }
.gz-chip--info { background: var(--gz-cyan-tint); color: var(--gz-cyan); }
.gz-chip--info::before { background: transparent; border: 1.5px solid currentColor; border-radius: 50%; }
.gz-chip--neutral::before { border-radius: 1px; opacity: .6; }
.gz-chip--primary { background: var(--gz-violet-tint); color: var(--gz-violet-on-tint); border-color: var(--gz-violet-line); }
.gz-chip--primary::before { display: none; }
.gz-chip--plain::before { display: none; }
.gz-chip .gz-node { margin-left: -2px; }
.gz-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gz-success-mark); }
.gz-dot--warn { background: var(--gz-warning-mark); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 9px; } .gz-dot--bad { background: var(--gz-danger-solid); border-radius: 2px; }

/* ---------- Data table ---------- */
.gz-table-wrap { background: var(--gz-card); border: 1px solid var(--gz-line); border-radius: var(--radius-lg); overflow: auto; }
.gz-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 20px; color: var(--gz-text-2); }
.gz-table th { position: sticky; top: 0; z-index: 1; height: 34px; padding: 0 12px; text-align: left; white-space: nowrap; background: var(--gz-sunken); color: var(--gz-text-3); font-size: 12px; font-weight: 500; letter-spacing: .02em; border-bottom: 1px solid var(--gz-line-strong); }
.gz-table td { padding: 9px 12px; border-bottom: 1px solid var(--gz-line-faint); white-space: nowrap; }
.gz-table tbody tr:last-child td { border-bottom: 0; }
.gz-table tbody tr:hover { background: var(--gz-hover); }
.gz-table tr.is-selected { background: var(--gz-violet-tint); box-shadow: inset 0 0 0 1px var(--gz-violet-line); }
.gz-table .num { text-align: right; }
.gz-table .key { color: var(--gz-text-1); font-weight: 500; }
.gz-table .mono { font-family: var(--font-mono); font-size: 12.5px; }
.gz-table .unit { color: var(--gz-text-4); margin-left: 2px; }
.gz-table .acts { text-align: right; opacity: .6; }
.gz-table tr:hover .acts, .gz-table tr:focus-within .acts { opacity: 1; }

/* ---------- Tabs / segmented ---------- */
.gz-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--gz-line); }
.gz-tab { position: relative; height: 40px; padding: 0; border: 0; background: none; font: 500 14px/40px var(--font-sans); color: var(--gz-text-3); cursor: pointer; }
.gz-tab:hover { color: var(--gz-text-2); }
.gz-tab[aria-selected="true"] { color: var(--gz-text-1); }
.gz-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gz-violet); }
.gz-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--gz-sunken); }
.gz-seg button { height: 30px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid transparent; background: none; font: 500 13px/1 var(--font-sans); color: var(--gz-text-3); cursor: pointer; }
.gz-seg button[aria-pressed="true"] { background: var(--gz-raised); color: var(--gz-text-1); border-color: var(--gz-line); }
.gz-seg--mono button { font-family: var(--font-mono); font-size: 12px; }

/* ---------- Floating layers ---------- */
.gz-menu { background: var(--gz-raised); border-radius: var(--radius-lg); box-shadow: var(--gz-shadow-pop); padding: 4px; min-width: 200px; }
.gz-menu__item { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 13.5px; color: var(--gz-text-2); }
.gz-menu__item:hover { background: var(--gz-hover); }
.gz-menu__item.is-selected { background: var(--gz-violet-tint); color: var(--gz-violet-on-tint); }
.gz-menu__item.is-selected::after { content: "✓"; margin-left: auto; color: var(--gz-violet); }
.gz-kbd { margin-left: auto; font: 11px var(--font-mono); color: var(--gz-text-4); border: 1px solid var(--gz-line); border-radius: var(--radius-xs); padding: 1px 5px; }
.gz-tooltip { display: inline-block; padding: 6px 8px; border-radius: var(--radius-sm); font-size: 12px; line-height: 1.4; background: var(--gz-text-1); color: var(--gz-canvas); }
.gz-modal { background: var(--gz-raised); border-radius: var(--radius-xl); box-shadow: var(--gz-shadow-modal); max-width: 520px; width: 100%; overflow: hidden; }
.gz-modal__head { padding: 16px 20px; border-bottom: 1px solid var(--gz-line-faint); font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--gz-text-1); }
.gz-modal__body { padding: 20px; color: var(--gz-text-2); }
.gz-modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; background: var(--gz-sunken); border-top: 1px solid var(--gz-line); }
.gz-scrim { background: var(--gz-scrim); }
.gz-toast { position: relative; display: flex; align-items: flex-start; gap: 10px; width: 340px; max-width: 100%; padding: 12px 14px 14px; border-radius: 10px; background: var(--gz-raised); border: 1px solid var(--gz-line); box-shadow: var(--gz-shadow-pop); font-size: 13.5px; line-height: 1.5; color: var(--gz-text-1); overflow: hidden; }
.gz-toast__glyph { flex: none; width: 14px; font-size: 12px; line-height: 20px; text-align: center; }
.gz-toast--ok .gz-toast__glyph { color: var(--gz-success); } .gz-toast--ok .gz-toast__glyph::before { content: "●"; }
.gz-toast--warn .gz-toast__glyph { color: var(--gz-warning); } .gz-toast--warn .gz-toast__glyph::before { content: "▲"; }
.gz-toast--bad .gz-toast__glyph { color: var(--gz-danger); } .gz-toast--bad .gz-toast__glyph::before { content: "■"; }
.gz-toast--info .gz-toast__glyph { color: var(--gz-cyan); } .gz-toast--info .gz-toast__glyph::before { content: ""; display: inline-block; width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 50%; vertical-align: -1px; }
.gz-toast__bar { position: absolute; left: 0; bottom: 0; height: 2px; background: currentColor; }
.gz-toast--ok .gz-toast__bar { color: var(--gz-success-mark); width: 62%; }
.gz-toast--info .gz-toast__bar { color: var(--gz-cyan-mark); width: 40%; }
.gz-toast--warn .gz-toast__bar, .gz-toast--bad .gz-toast__bar { display: none; } /* warnings and errors stay until closed */
.gz-toast__meta { display: block; font-size: 12px; color: var(--gz-text-4); }

/* ---------- Code, inline code, key well ---------- */
.gz-code { background: var(--gz-code); border: 1px solid var(--gz-line); border-radius: var(--radius-md); overflow: hidden; color: var(--gz-code-text); }
.gz-code__head { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--gz-line-faint); font: 11px var(--font-mono); color: var(--gz-code-comment); }
.gz-code pre { margin: 0; padding: 14px 16px; overflow-x: auto; font: 13px/1.7 var(--font-mono); white-space: pre; }
.gz-code .k { color: var(--gz-code-keyword); } .gz-code .s { color: var(--gz-code-string); }
.gz-code .n { color: var(--gz-code-number); } .gz-code .c { color: var(--gz-code-comment); }
.gz-code .u { color: var(--gz-code-text); font-weight: 600; }
.gz-icode { white-space: nowrap; font: .9em var(--font-mono); padding: 1px 5px; border-radius: var(--radius-xs); background: var(--gz-inline-code-bg); color: var(--gz-violet-on-tint); }
.gz-keywell { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 12px; border-radius: var(--radius-md); background: var(--gz-code); border: 1px solid var(--gz-line); font: 13px var(--font-mono); color: var(--gz-code-string); }
.gz-keywell span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Empty state, pagination, bars ---------- */
.gz-empty { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 240px; padding: 24px; text-align: center; }
.gz-empty__title { font-size: 15px; font-weight: 600; color: var(--gz-text-1); }
.gz-empty__desc { max-width: 32em; font-size: 13px; color: var(--gz-text-3); }
.gz-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; font-size: 13px; }
.gz-pager__meta { margin-right: auto; font-size: 12px; color: var(--gz-text-4); }
.gz-pager a, .gz-pager span.gap { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: var(--radius-sm); color: var(--gz-text-2); text-decoration: none; border: 1px solid transparent; }
.gz-pager a:hover { background: var(--gz-hover); }
.gz-pager a[aria-current="page"] { background: var(--gz-violet-tint); color: var(--gz-violet-on-tint); border-color: var(--gz-violet-line); }
.gz-pager span.gap { color: var(--gz-text-4); }
.gz-bar { height: 6px; border-radius: var(--radius-pill); background: var(--gz-track); overflow: hidden; flex: 1; }
.gz-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--gz-violet-fill); }
:is(html.dark, [data-theme="dark"]) .gz-bar > i { background: linear-gradient(90deg, var(--gz-orbit-a), var(--gz-orbit-b)); }
.gz-bar.is-high > i { background: var(--gz-warning-mark); }
.gz-bar.is-out > i { background: var(--gz-danger-solid); }
.gz-uptime { display: flex; align-items: flex-end; gap: 2px; height: 36px; }
.gz-uptime i { width: 6px; height: 28px; border-radius: 2px; background: var(--gz-success-mark); }
.gz-uptime i.deg { height: 20px; background: var(--gz-warning-mark); }
.gz-uptime i.down { height: 32px; margin-top: -4px; background: var(--gz-danger-solid); }
.gz-uptime i.none { height: 12px; background: var(--gz-line-strong); }

/* ---------- Breadcrumb, TOC, price ---------- */
.gz-crumb { display: flex; flex-wrap: wrap; gap: 6px; font: 12px/1.5 var(--font-mono); color: var(--gz-text-4); }
.gz-crumb a { color: inherit; text-decoration: none; }
.gz-crumb a:hover { text-decoration: underline; }
.gz-crumb .sep { color: var(--gz-line-strong); }
.gz-crumb .here { font-family: var(--font-sans); color: var(--gz-text-2); }
.gz-toc { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--gz-text-3); }
.gz-toc a { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.gz-toc a.sub { padding-left: 12px; }
.gz-toc a[aria-current="true"] { color: var(--gz-text-1); }
.gz-price { display: inline-flex; align-items: baseline; gap: 8px; }
.gz-price s { font-size: 13px; color: var(--gz-text-4); }
.gz-price strong { font-size: 15px; font-weight: 600; color: var(--gz-text-1); }
.gz-price em { font-style: normal; font-size: 12px; color: var(--gz-text-4); }

/* ---------- Prose + callouts ---------- */
.gz-prose { max-width: 40em; font-size: 16px; line-height: 1.85; color: var(--gz-text-read); }
.gz-prose h1 { margin: 0 0 12px; font-size: 30px; line-height: 1.35; font-weight: 600; color: var(--gz-text-1); text-wrap: balance; }
.gz-prose h2 { margin: 2.2em 0 .6em; font-size: 22px; line-height: 1.45; font-weight: 600; color: var(--gz-text-1); }
.gz-prose h3 { margin: 1.8em 0 .5em; font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--gz-text-1); }
.gz-prose p { margin: 0 0 1em; }
.gz-prose a { color: var(--gz-violet); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gz-violet) 45%, transparent); text-underline-offset: 3px; }
.gz-prose a:hover { text-decoration-color: currentColor; }
.gz-prose li::marker { color: var(--gz-violet); }
.gz-prose blockquote { position: relative; margin: 1.2em 0; padding-left: 1.25em; color: var(--gz-text-3); }
.gz-prose blockquote::before { content: "“"; position: absolute; left: -4px; top: -6px; font-size: 28px; line-height: 1; color: var(--gz-violet); }
.gz-callout { position: relative; margin: 1.6em 0; padding: 16px 18px 14px; border: 1px solid var(--gz-line); border-radius: var(--radius-md); background: var(--gz-card); font-size: 14.5px; line-height: 1.75; color: var(--gz-text-2); }
.gz-callout > b { position: absolute; top: -9px; left: 14px; padding: 0 6px; background: var(--gz-read); font: 500 11px/18px var(--font-mono); letter-spacing: .04em; color: var(--gz-cyan); }
.gz-callout--warn > b { color: var(--gz-warning); } .gz-callout--bad > b { color: var(--gz-danger); }
.gz-eyebrow { font: 500 11px/1.4 var(--font-mono); letter-spacing: .06em; color: var(--gz-cyan); text-transform: uppercase; }

/* ---------- Night chrome: rail, nav band, footer ---------- */
.gz-night { background: var(--gz-night); color: var(--gz-night-text); color-scheme: dark; }
.gz-rail { width: 256px; background: var(--gz-rail); color: var(--gz-night-text); border-right: 1px solid var(--gz-line-faint); padding: 0 12px 16px; color-scheme: dark; }
.gz-rail__brand { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 4px; }
.gz-rail__brand .gz-logo { width: 34px; height: 34px; border-radius: 10px; }
.gz-rail__brand .gz-wordmark { font-size: 17px; }
.gz-rail__section { margin: 14px 8px 6px; font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--gz-text-4); }
.gz-rail__link { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--radius-md); font-size: 13.5px; font-weight: 500; color: var(--gz-night-text); text-decoration: none; }
.gz-rail__link svg { width: 18px; height: 18px; color: var(--gz-text-4); flex: none; }
.gz-rail__link:hover { background: var(--gz-raised); color: var(--gz-text-1); }
.gz-rail__link[aria-current="page"] { background: var(--gz-violet-tint); color: var(--gz-violet-on-tint); }
.gz-rail__link[aria-current="page"] svg { color: var(--gz-violet); }
.gz-rail__link .gz-node { margin-left: auto; }
.gz-navband { display: flex; align-items: center; gap: 20px; height: 64px; padding: 0 24px; background: var(--gz-night); color: var(--gz-night-text); color-scheme: dark; position: relative; }
.gz-navband::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gz-orbit-a) 20%, var(--gz-orbit-b) 80%, transparent); opacity: .45; }
.gz-navband__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.gz-navband__brand .gz-wordmark { font-size: 18px; }
.gz-navband nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.gz-navband nav a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; color: var(--gz-night-text); text-decoration: none; white-space: nowrap; }
.gz-navband nav a:hover, .gz-navband nav a[aria-current="page"] { color: var(--gz-text-1); }
.gz-shield { color: var(--gz-success); }
.gz-pill-cta { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--gz-on-accent); text-decoration: none; background: linear-gradient(120deg, var(--gz-grad-start), var(--gz-grad-mid) 45%, var(--gz-grad-end)); white-space: nowrap; }
.gz-footer { padding: 48px 24px; background: var(--gz-night); color: var(--gz-night-text); font-size: 13px; color-scheme: dark; }
.gz-footer a { color: var(--gz-night-text); text-decoration: none; }
.gz-footer a:hover { color: var(--gz-violet-on-tint); }
.gz-footer__legal { margin-top: 18px; font: 12px var(--font-mono); color: var(--gz-text-3); }

/* ---------- Product pieces: poster tile, draw tile, chat ---------- */
.gz-poster { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gz-poster__well { aspect-ratio: 4 / 3; padding: 8px; border-radius: var(--radius-md); background: var(--gz-sunken); border: 1px solid var(--gz-line); }
.gz-poster__plate { width: 100%; height: 100%; border-radius: 4px; background: var(--gz-plate); overflow: hidden; display: grid; place-items: center; }
.gz-poster__plate.is-failed { background: var(--gz-danger-tint); }
.gz-poster__model { font: 500 13px var(--font-mono); color: var(--gz-text-1); }
.gz-poster__meta { font: 12px var(--font-mono); color: var(--gz-text-4); }
.gz-hash { font: 12px var(--font-mono); color: var(--gz-cyan); }
.gz-tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gz-tile__img { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); background: var(--gz-sunken); border: 1px solid var(--gz-line); overflow: hidden; }
.gz-tile__prompt { font-size: 13px; line-height: 1.5; color: var(--gz-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gz-tile__meta { font: 12px var(--font-mono); color: var(--gz-text-4); }
.gz-bubble { margin-left: auto; max-width: 72%; padding: 10px 14px; border-radius: 12px 4px 12px 12px; background: var(--gz-violet-tint); color: var(--gz-text-1); font-size: 15px; line-height: 1.7; }
:is(html.dark, [data-theme="dark"]) .gz-bubble { background: var(--gz-raised); }
.gz-reply { font-size: 15px; line-height: 1.8; color: var(--gz-text-read); }
.gz-reply__model { font: 12px var(--font-mono); color: var(--gz-cyan); margin-bottom: 4px; }
.gz-reply__meta { margin-top: 6px; font: 12px var(--font-mono); color: var(--gz-text-4); }
.gz-composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-radius: var(--radius-lg); background: var(--gz-raised); border: 1px solid var(--gz-line-control); }
.gz-composer.gz-orbit-edge { --gz-edge-fill: var(--gz-raised); }

@media (prefers-reduced-motion: reduce) {
  .gz-node.is-live::before { animation: none; }
  .gz-btn, .gz-switch::after { transition: none; }
}

/* ---------- Additions after component review ---------- */
:is(html.dark, [data-theme="dark"]) { color-scheme: dark; }

.gz-btn { text-decoration: none; }
.gz-btn--warning { background: var(--gz-warning-fill); color: var(--gz-on-accent); }
:is(html.dark, [data-theme="dark"]) .gz-btn--warning { color: var(--gz-code); }
.gz-btn--primary .gz-node::before { border-color: var(--gz-on-accent); }
.gz-btn--primary .gz-node::after { background: var(--gz-on-accent); }
:is(html.dark, [data-theme="dark"]) .gz-btn--secondary:hover { border-color: var(--gz-text-4); }
.gz-night .gz-btn--secondary, .gz-navband .gz-btn--secondary, .gz-footer .gz-btn--secondary { background: transparent; }
.gz-select:disabled, .gz-textarea:disabled { background: var(--gz-sunken); color: var(--gz-text-disabled); }
.gz-switch:disabled { opacity: .45; cursor: not-allowed; }
.gz-seg button:hover { color: var(--gz-text-2); }
.gz-menu__item.is-selected { box-shadow: inset 0 0 0 1px var(--gz-violet-line); }
.gz-table td .gz-chip { margin: -1px 0; vertical-align: middle; }
.gz-scrim, .gz-modal { z-index: 50; }
.gz-tab:focus-visible, .gz-seg button:focus-visible, .gz-switch:focus-visible, .gz-pager a:focus-visible,
.gz-menu__item:focus-visible, .gz-toc a:focus-visible, .gz-crumb a:focus-visible, .gz-footer a:focus-visible,
.gz-prose a:focus-visible, .gz-navband__brand:focus-visible { outline: 2px solid var(--gz-focus); outline-offset: 2px; border-radius: var(--radius-xs); }
/* inside scrolling containers the ring is drawn inward so it is never clipped */
.gz-rail__link:focus-visible, .gz-navband nav a:focus-visible { outline: 2px solid var(--gz-focus); outline-offset: -2px; }
@media (max-width: 560px) {
  .gz-readout > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; }
}
/* the orbit edge must win over any component background it is combined with */
.gz-orbit-edge {
  background:
    linear-gradient(var(--gz-edge-fill), var(--gz-edge-fill)) padding-box,
    linear-gradient(135deg, var(--gz-orbit-a), var(--gz-orbit-b)) border-box !important;
}
.gz-card.gz-orbit-edge, .gz-readout.gz-orbit-edge { --gz-edge-fill: var(--gz-card); }