/*
  Claudetop Design System
  Layered after styles.css. New work should prefer ds-* classes; the
  compatibility section below also polishes existing portal classes.
*/

@import url("/static/fonts/onest.css");
@import url("/static/fonts/display.css");

:root {
  --ds-font-sans: "Onest", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-display: "Onest", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 600;
  --ds-weight-heavy: 600;
  --ds-bg: #faf9f5;
  --ds-surface: #faf9f5;
  --ds-surface-raised: #faf9f5;
  --ds-surface-muted: #f5f0e8;
  --ds-surface-card: #efe9de;
  --ds-surface-strong: #e8e0d2;
  --ds-surface-dark: #181715;
  --ds-surface-dark-raised: #252320;
  --ds-on-dark: #faf9f5;
  --ds-ink: #141413;
  --ds-ink-soft: #252523;
  --ds-muted: #6c6a64;
  --ds-muted-2: #8e8b82;
  --ds-line: #e6dfd8;
  --ds-line-strong: #d7cec3;
  --ds-brand: #cc785c;
  --ds-brand-hover: #a9583e;
  --ds-jade: #5db872;
  --ds-jade-soft: #edf7ef;
  --ds-amber: #d4a017;
  --ds-amber-soft: #fbf1d7;
  --ds-rose: #c64545;
  --ds-rose-soft: #fff0f2;
  --ds-cobalt: #5db8a6;
  --ds-cobalt-soft: #edf8f6;
  --ds-radius-xs: 4px;
  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-xl: 22px;
  --ds-radius-pill: 999px;
  --ds-shadow-hairline: inset 0 1px 0 rgba(255, 255, 255, .72);
  --ds-shadow-control: inset 0 1px 0 rgba(255, 255, 255, .62);
  --ds-shadow-card: none;
  --ds-shadow-card-hover: 0 1px 3px rgba(20, 20, 19, .08);
  --ds-shadow-modal: 0 28px 90px rgba(25, 22, 18, .28);
  --ds-focus: 0 0 0 3px rgba(204, 120, 92, .18);

  --bg: var(--ds-bg);
  --bg-soft: #f5f0e8;
  --panel: var(--ds-surface);
  --panel-strong: var(--ds-surface-raised);
  --text: var(--ds-ink);
  --muted: var(--ds-muted);
  --line: var(--ds-line);
  --line-soft: #ede8df;
  --black: var(--ds-surface-dark);
  --green: var(--ds-jade);
  --red: var(--ds-rose);
  --blue: var(--ds-cobalt);
  --shadow: var(--ds-shadow-card);
  --control-shadow: var(--ds-shadow-control);
}

html { background: var(--ds-bg); }
body {
  background: var(--ds-bg);
  color: var(--ds-ink);
  font-family: var(--ds-font-sans);
  font-size: 14px;
  font-weight: var(--ds-weight-regular);
  line-height: 1.45;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  font-synthesis-weight: none;
}

button,
input,
textarea,
select {
  font-family: var(--ds-font-sans);
}

h1,
h2,
h3,
h4,
b,
strong,
th,
button {
  font-weight: var(--ds-weight-bold);
}

h1 {
  font-family: var(--ds-font-display);
  font-size: 27px;
  line-height: 1.1;
  font-weight: var(--ds-weight-heavy);
}

h2 {
  font-size: 16px;
  line-height: 1.22;
}

p,
small,
td,
input,
textarea,
select {
  font-weight: var(--ds-weight-regular);
}

code {
  font-family: var(--ds-font-mono);
  font-weight: var(--ds-weight-medium);
}

.ds-display {
  margin: 0;
  font-size: 38px;
  line-height: 1.1;
  font-family: var(--ds-font-display);
  font-weight: var(--ds-weight-heavy);
  letter-spacing: 0;
}

.ds-title {
  margin: 0;
  font-size: 26px;
  line-height: 1.18;
  font-family: var(--ds-font-display);
  font-weight: var(--ds-weight-bold);
  letter-spacing: 0;
}

.ds-subtitle {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  font-weight: var(--ds-weight-semibold);
}

.ds-body {
  margin: 0;
  color: var(--ds-muted);
  font-size: 14px;
  line-height: 1.55;
}

.ds-caption {
  margin: 0;
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.4;
  font-weight: var(--ds-weight-medium);
}

::selection { background: rgba(48, 43, 39, .14); }

:where(a, button, input, textarea, select):focus-visible {
  outline: 0;
  box-shadow: var(--ds-focus), var(--ds-shadow-control);
}

.ds-page {
  display: grid;
  gap: 18px;
}

.ds-section {
  display: grid;
  gap: 14px;
}

.ds-section-title {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
}

.ds-section-title h1,
.ds-section-title h2 {
  margin: 0 0 4px;
  letter-spacing: 0;
}

.ds-section-title p { margin: 0; color: var(--ds-muted); }

.ds-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ds-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ds-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.button-icon,
.metric-icon svg,
.book-icon svg,
.tool-icon svg,
.feature-icon svg,
.card-arrow,
.pay-logo svg,
.ds-chip-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button-icon {
  width: 14px;
  height: 14px;
}

.ds-stack { display: grid; gap: 12px; }

.ds-card {
  background: var(--ds-surface-raised);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-card);
}

.ds-card.padded { padding: 18px; }
.ds-card.soft { background: var(--ds-surface); }

.ds-card.interactive {
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.ds-card.interactive:hover {
  transform: translateY(-1px);
  border-color: var(--ds-line-strong);
  box-shadow: var(--ds-shadow-card-hover);
}

.ds-button,
.ds-icon-button,
.black-button,
.soft-button,
.muted-button,
.landing-button,
.outline-button,
.promo-row button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--ds-radius-md);
  border: 1px solid transparent;
  padding: 0 16px;
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.ds-button:active,
.black-button:active,
.soft-button:active,
.muted-button:active,
.landing-button:active,
.outline-button:active {
  transform: translateY(1px);
}

.ds-button.primary,
.black-button,
.landing-button {
  background: linear-gradient(180deg, #36312d 0%, var(--ds-brand) 100%);
  border-color: #26221f;
  color: #fff;
  box-shadow: 0 8px 16px rgba(38, 34, 30, .15), var(--ds-shadow-hairline);
}

.ds-button.primary:hover,
.black-button:hover,
.landing-button:hover {
  background: var(--ds-brand-hover);
}

.ds-button.secondary,
.soft-button,
.outline-button {
  background: var(--ds-surface);
  border-color: var(--ds-line);
  color: var(--ds-ink);
  box-shadow: var(--ds-shadow-control);
}

.ds-button.secondary:hover,
.soft-button:hover,
.outline-button:hover {
  background: #fff;
  border-color: var(--ds-line-strong);
}

.ds-button.muted,
.muted-button {
  background: linear-gradient(180deg, #aaa49a, #958e84);
  border-color: #8e877e;
  color: #fff;
  box-shadow: var(--ds-shadow-hairline);
}

.ds-button.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ds-muted);
}

.ds-button.ghost:hover {
  background: var(--ds-surface-muted);
  color: var(--ds-ink);
}

.ds-button.small,
.black-button.small,
.soft-button.small,
.muted-button.small,
.small {
  min-height: 32px;
  border-radius: var(--ds-radius-sm);
  padding: 0 13px;
  font-size: 13px;
}

.ds-icon-button,
.icon-button,
.dots {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--ds-muted);
}

.ds-icon-button:hover,
.icon-button:hover,
.dots:hover {
  background: var(--ds-surface-muted);
  border-color: var(--ds-line);
  color: var(--ds-ink);
}

.ds-input,
.copy-input,
.search-input,
input,
textarea,
select {
  min-height: 40px;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-line);
  background: var(--ds-surface);
  color: var(--ds-ink);
  padding: 0 12px;
  box-shadow: var(--ds-shadow-hairline);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.ds-input:hover,
.copy-input:hover,
.search-input:hover,
input:hover,
textarea:hover,
select:hover {
  border-color: var(--ds-line-strong);
}

.ds-input:focus,
.copy-input:focus,
.search-input:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 0;
  border-color: rgba(82, 119, 215, .5);
  box-shadow: var(--ds-focus), var(--ds-shadow-hairline);
}

.ds-label {
  display: grid;
  gap: 8px;
  color: var(--ds-ink-soft);
  font-weight: var(--ds-weight-semibold);
}

.ds-badge,
.status-pill {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-muted);
  color: var(--ds-ink-soft);
  border: 1px solid rgba(207, 199, 187, .55);
  font-size: 12px;
  font-weight: var(--ds-weight-semibold);
}

.ds-badge.success { background: var(--ds-jade-soft); color: #137553; border-color: #bee9d9; }
.ds-badge.warning { background: var(--ds-amber-soft); color: #8d5c10; border-color: #f1d79d; }
.ds-badge.danger { background: var(--ds-rose-soft); color: #aa2638; border-color: #ffd0d6; }
.ds-badge.info { background: var(--ds-cobalt-soft); color: #3253a8; border-color: #cbd8ff; }

.ds-toolbar {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: rgba(239, 235, 227, .72);
}

.ds-tabs,
.knowledge-tabs {
  display: flex;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: rgba(239, 235, 227, .78);
}

.ds-tab,
.knowledge-tabs a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: var(--ds-radius-sm);
  padding: 0 12px;
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: var(--ds-weight-semibold);
}

.ds-tab.active,
.knowledge-tabs a.active {
  background: var(--ds-surface);
  color: var(--ds-ink);
  box-shadow: var(--ds-shadow-control);
}

.ds-table,
.table-card table {
  width: 100%;
  border-collapse: collapse;
}

.ds-table th,
.table-card th {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: var(--ds-weight-semibold);
}

.ds-table th,
.ds-table td,
.table-card th,
.table-card td {
  padding: 13px 10px;
  border-bottom: 1px solid var(--ds-line);
}

.ds-table tr:hover td,
.table-card tbody tr:hover td {
  background: rgba(239, 235, 227, .32);
}

.ds-metric {
  min-height: 112px;
  position: relative;
  padding: 20px;
}

.ds-metric p,
.metric-card p {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: var(--ds-weight-semibold);
}

.ds-metric h2,
.metric-card h2 {
  color: var(--ds-ink);
  font-size: 25px;
  font-weight: var(--ds-weight-bold);
  letter-spacing: 0;
}

.ds-chip-icon,
.metric-icon,
.activity-icon,
.tool-card span,
.book-icon {
  display: inline-grid;
  place-items: center;
  border-radius: var(--ds-radius-sm);
}

.ds-chip-icon {
  width: 28px;
  height: 28px;
  background: var(--ds-surface-muted);
  color: var(--ds-muted);
}

.ds-notice,
.notice {
  border-radius: var(--ds-radius-md);
  border: 1px solid #bfe8da;
  background: #eefbf5;
  color: #146a4f;
  box-shadow: var(--ds-shadow-control);
}

.ds-notice.warning { border-color: #f1d79d; background: var(--ds-amber-soft); color: #8d5c10; }
.ds-notice.danger,
.notice.bad { border-color: #ffd0d6; background: var(--ds-rose-soft); color: #aa2638; }

.key-secret {
  width: min(1220px, 100%);
  margin: 0 auto 14px;
  display: grid;
  gap: 10px;
}

.key-secret-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.key-status {
  width: min(1220px, 100%);
  margin: 0 auto 14px;
  display: grid;
  gap: 6px;
}

.key-status span {
  color: color-mix(in srgb, currentColor 80%, var(--ds-muted));
  line-height: 1.45;
}

.key-secret[hidden],
.key-status[hidden] {
  display: none;
}

.key-secret code {
  display: block;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ds-success) 30%, var(--ds-line));
  border-radius: var(--ds-radius-sm);
  background: color-mix(in srgb, var(--ds-surface) 78%, var(--ds-success-soft));
  color: var(--ds-ink);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.quick-connect-card {
  margin-bottom: 16px;
}

.connection-lab-card {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  overflow: visible;
}

.connection-lab-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.connection-score {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 184px;
  padding: 18px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .84), transparent 58%),
    var(--ds-surface-muted);
  box-shadow: var(--ds-shadow-hairline);
}

.connection-score.ok {
  border-color: rgba(93, 184, 114, .32);
}

.connection-score.warn {
  border-color: rgba(212, 160, 23, .34);
  background: var(--ds-amber-soft);
}

.connection-score.bad {
  border-color: rgba(198, 69, 69, .28);
  background: var(--ds-rose-soft);
}

.connection-score span {
  font-size: 42px;
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0;
}

.connection-score strong {
  font-size: 17px;
  font-weight: var(--ds-weight-semibold);
}

.connection-score small {
  color: var(--ds-muted);
  line-height: 1.38;
}

.connection-score code {
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, .62);
  color: var(--ds-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connection-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.connection-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-muted);
  color: var(--ds-ink);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.connection-check:hover {
  transform: translateY(-1px);
  border-color: var(--ds-line-strong);
  background: #fff;
}

.connection-check.warn {
  border-color: rgba(212, 160, 23, .26);
}

.connection-check.bad {
  border-color: rgba(198, 69, 69, .24);
}

.connection-check strong,
.connection-check small {
  display: block;
}

.connection-check strong {
  font-weight: var(--ds-weight-semibold);
}

.connection-check small {
  margin-top: 3px;
  color: var(--ds-muted);
  line-height: 1.34;
}

.connection-check b {
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: var(--ds-weight-semibold);
  white-space: nowrap;
}

.connection-snippets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.client-setup-card {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  overflow: visible;
}

.client-setup-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.client-tabs {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
}

.client-tabs button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-muted);
  font: inherit;
  font-weight: var(--ds-weight-semibold);
  text-align: left;
  padding: 9px 11px;
}

.client-tabs button:hover,
.client-tabs button.active {
  border-color: var(--ds-line);
  background: #fff;
  color: var(--ds-ink);
  box-shadow: var(--ds-shadow-control);
}

.client-panels {
  min-width: 0;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
  padding: 16px;
}

.client-panel[hidden] {
  display: none;
}

.client-panel {
  display: grid;
  gap: 12px;
}

.client-panel h3 {
  margin: 0;
  font-size: 19px;
  font-weight: var(--ds-weight-semibold);
}

.client-panel ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  color: var(--ds-muted);
  line-height: 1.42;
}

.client-field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.client-config-box {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  padding: 13px 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, .68);
  color: var(--ds-ink);
  font: 13px/1.55 var(--ds-font-mono);
  white-space: pre;
  overflow: auto;
}

.quick-connect-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr .75fr;
  gap: 10px;
}

.connect-field,
.connect-snippet {
  min-width: 0;
  display: grid;
  gap: 7px;
  position: relative;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: color-mix(in srgb, var(--ds-surface) 78%, #fff);
  padding: 13px 46px 13px 14px;
  box-shadow: var(--ds-shadow-hairline);
}

.connect-field span,
.connect-snippet span {
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: var(--ds-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.connect-field code,
.connect-snippet code {
  min-width: 0;
  color: var(--ds-ink);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.connect-field .dots {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.connect-field.compact {
  min-height: 72px;
  padding: 11px 44px 11px 12px;
}

.connect-snippet {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-top: 10px;
  padding-right: 12px;
}

.connect-snippet span,
.connect-snippet code {
  grid-column: 1;
}

.connect-snippet .soft-button {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.key-create-card {
  margin-bottom: 16px;
}

.key-create-form {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(160px, .8fr) minmax(160px, .8fr) auto;
  gap: 10px;
  align-items: end;
}

.key-create-form label {
  display: grid;
  gap: 7px;
  font-weight: var(--ds-weight-medium);
}

.key-create-hint {
  margin: 12px 0 0;
  color: var(--ds-muted);
  font-size: 13px;
}

.key-edit-row[hidden] {
  display: none !important;
}

.key-edit-row td {
  background: rgba(246, 243, 237, .78);
  border-top: 1px solid var(--ds-line);
}

.key-edit-row:hover td {
  background: rgba(246, 243, 237, .9);
}

.key-edit-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, .45fr) auto auto;
  gap: 10px;
  align-items: end;
}

.key-edit-form label {
  display: grid;
  gap: 7px;
  font-weight: var(--ds-weight-medium);
}

.key-edit-form input {
  min-width: 0;
}

.referral-hero {
  width: min(1220px, 100%);
  margin: 0 auto 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 14px;
  padding: 26px;
  border: 1px solid #eadfce;
  border-radius: var(--ds-radius-lg);
  background:
    radial-gradient(circle at 82% 10%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 26%),
    linear-gradient(105deg, #fffdfa 0%, #faf7f0 62%, #efebe3 100%);
  box-shadow: var(--ds-shadow-card);
}

.referral-hero span,
.referral-hero p {
  color: var(--ds-muted);
}

.referral-hero code {
  display: block;
  margin: 10px 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, .68);
  color: var(--ds-ink);
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.referral-hero aside {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: rgba(255, 255, 255, .62);
}

.referral-hero strong {
  font-size: 28px;
  letter-spacing: 0;
}

.referral-layout {
  width: min(1220px, 100%);
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.referral-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 14px;
}

.referral-step span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ds-ink);
  color: white;
  font-weight: var(--ds-weight-bold);
}

.referral-step p {
  margin: 4px 0 0;
  color: var(--ds-muted);
  line-height: 1.45;
}

.activity-list.compact {
  gap: 8px;
}

.referral-card {
  display: grid;
  gap: 16px;
}

.referral-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 12px;
  align-items: start;
}

.referral-card-head p {
  margin: 6px 0 0;
  color: var(--ds-muted);
  line-height: 1.42;
}

.referral-card-head a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--ds-ink);
  text-decoration: none;
  font-weight: var(--ds-weight-bold);
}

.referral-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.referral-mini-stats div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, .62);
}

.referral-mini-stats span {
  display: block;
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.2;
}

.referral-mini-stats strong {
  display: block;
  margin-top: 8px;
  color: var(--ds-ink);
  font-size: 18px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.referral-copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

/* Compatibility layer for the existing portal */
.app-topbar {
  height: 48px;
  background: rgba(248, 246, 241, .92);
  border-bottom-color: rgba(222, 216, 206, .9);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .72);
}

.app-brand { font-weight: var(--ds-weight-bold); }

.nav-pill,
.top-chip {
  min-height: 31px;
  border-radius: var(--ds-radius-sm);
  border-color: var(--ds-line);
  background: rgba(239, 235, 227, .76);
  color: var(--ds-ink-soft);
  font-weight: var(--ds-weight-semibold);
  box-shadow: var(--ds-shadow-control);
}

.nav-pill.active {
  background: #e4ded4;
  border-color: #d3cabd;
  color: var(--ds-ink);
}

.balance-hero {
  border-radius: var(--ds-radius-lg);
  border-color: #eadfce;
  background:
    radial-gradient(circle at 78% 10%, rgba(255,255,255,.85), rgba(255,255,255,0) 28%),
    linear-gradient(100deg, #fffdfa 0%, #faf7f0 58%, #eeebe3 100%);
  box-shadow: var(--ds-shadow-card);
}

.metric-card,
.activity-card,
.compact-card,
.table-card,
.step-card,
.guide-grid article,
.guide-panel,
.tool-card {
  border-radius: var(--ds-radius-md);
  border-color: var(--ds-line);
  background: var(--ds-surface-raised);
  box-shadow: var(--ds-shadow-card);
}

.metric-card {
  isolation: isolate;
}

.metric-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,0) 58%);
  pointer-events: none;
}

.metric-icon {
  box-shadow: var(--ds-shadow-control);
}

.metric-icon svg,
.activity-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.metric-card,
.compact-card,
.activity-card,
.table-card {
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.metric-card:hover,
.compact-card:hover,
.activity-card:hover,
.table-card:hover {
  border-color: var(--ds-line-strong);
}

.quick-row {
  border-radius: var(--ds-radius-md);
  border-color: var(--ds-line);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-control);
}

.quick-row:hover {
  border-color: var(--ds-line-strong);
  box-shadow: var(--ds-shadow-card);
}

.tool-card {
  position: relative;
  overflow: hidden;
}

.tool-card::after {
  content: "";
  position: absolute;
  inset: auto -20px -34px auto;
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: rgba(48, 43, 39, .045);
  pointer-events: none;
}

.tool-card:hover {
  transform: translateY(-1px);
  border-color: var(--ds-line-strong);
  box-shadow: var(--ds-shadow-card-hover);
}

.tool-card .tool-icon,
.feature-grid .feature-icon {
  background: var(--ds-surface-muted);
  color: var(--ds-muted);
  box-shadow: var(--ds-shadow-control);
}

.tool-card .tool-icon {
  grid-row: 1 / span 2;
  grid-column: 1;
}

.tool-card strong {
  grid-column: 2;
  grid-row: 1;
}

.tool-card small {
  grid-column: 2;
  grid-row: 2;
}

.tool-card:hover .tool-icon,
.feature-grid article:hover .feature-icon {
  background: var(--ds-brand);
  color: #fff;
}

.tool-card .card-arrow {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  width: 18px;
  height: 18px;
  color: var(--ds-muted-2);
  transition: transform .16s ease, color .16s ease;
}

.tool-card:hover .card-arrow {
  transform: translateX(2px);
  color: var(--ds-ink);
}

.billing-modal {
  border-radius: var(--ds-radius-xl);
  background: var(--ds-surface-raised);
  box-shadow: var(--ds-shadow-modal);
}

.amount-grid button,
.provider-grid button {
  border-radius: var(--ds-radius-lg);
  border-color: var(--ds-line);
  background: var(--ds-surface);
}

.provider-grid button {
  min-height: 82px;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 5px;
  padding: 12px;
}

.provider-grid strong {
  font-size: 15px;
  letter-spacing: 0;
}

.provider-grid small {
  color: var(--ds-muted);
  font-size: 12px;
}

.provider-grid .pay-logo {
  min-width: 74px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  border-radius: var(--ds-radius-sm);
  color: #fff;
  font-weight: var(--ds-weight-heavy);
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

.provider-grid .pay-logo.yookassa {
  background: linear-gradient(135deg, #31106d, #5b2fd1);
}

.provider-grid .pay-logo.sbp {
  background: linear-gradient(135deg, #7a5cff, #1fbf8d);
}

.provider-grid .pay-logo.crypto {
  background: linear-gradient(135deg, #75808b, #4d5965);
}

.provider-grid .pay-logo.heleket {
  background: linear-gradient(135deg, #616a76, #313944);
  color: #ff6978;
}

.provider-grid .pay-logo svg {
  width: 19px;
  height: 19px;
}

.payment-offline {
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-muted);
}

.payment-offline strong {
  font-size: 18px;
  font-weight: var(--ds-weight-semibold);
}

.payment-offline p {
  margin: 0;
  color: var(--ds-muted);
}

.payment-offline .black-button {
  justify-self: start;
}

.payment-request-form {
  display: grid;
  gap: 12px;
}

.payment-request-note {
  margin: 2px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
  color: var(--ds-muted);
  font-size: 13px;
  line-height: 1.45;
}

.payment-note-field {
  display: grid;
  gap: 7px;
  color: var(--ds-muted);
  font-size: 13px;
}

.payment-note-field textarea {
  width: 100%;
  min-height: 74px;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-ink);
  font: inherit;
  line-height: 1.45;
}

.payment-note-field textarea:focus {
  outline: 0;
  border-color: var(--ds-ink);
  box-shadow: 0 0 0 3px rgba(46, 41, 37, .08);
}

.provider-grid button.active,
.provider-grid button[aria-pressed="true"] {
  border-color: var(--ds-ink);
  background: var(--ds-surface-raised);
  box-shadow: 0 0 0 1px var(--ds-ink), var(--ds-shadow-control);
}

.pending-payment-card {
  border-color: rgba(199, 145, 39, .35);
}

.pending-payment-list {
  display: grid;
  gap: 10px;
}

.pending-payment-list article {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
}

.pending-payment-list strong {
  display: block;
  color: var(--ds-ink);
  font-size: 16px;
}

.pending-payment-list small {
  color: var(--ds-muted);
}

.pending-payment-list em {
  display: block;
  max-width: 520px;
  margin-top: 3px;
  color: var(--ds-muted);
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payment-history-card td form {
  margin: 0;
}

.payment-ops-card table {
  min-width: 1240px;
}

.payment-note-cell {
  max-width: 260px;
  color: var(--ds-muted);
  line-height: 1.35;
}

.payment-review-actions {
  display: grid;
  gap: 8px;
  min-width: 220px;
}

.payment-review-actions form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.payment-review-actions input {
  min-width: 110px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  color: var(--ds-ink);
}

.soft-button.danger {
  color: var(--ds-danger);
  border-color: rgba(217, 63, 78, .32);
}

.amount-grid button:hover,
.provider-grid button:hover {
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-card);
}

.composer {
  border-radius: var(--ds-radius-lg);
  border-color: #d9d2c8;
  background: var(--ds-surface-raised);
  box-shadow: 0 16px 34px rgba(42, 35, 29, .07);
}

.bubble.user {
  background: linear-gradient(180deg, #37312d, var(--ds-brand));
}

.bubble.assistant {
  background: var(--ds-surface-raised);
  border-color: var(--ds-line);
}

.login-form input {
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
}

.auth-body {
  background:
    radial-gradient(circle at 50% -12%, rgba(255,255,255,.78), rgba(255,255,255,0) 32%),
    var(--ds-bg);
}

.floating-tools a {
  background: var(--ds-surface-raised);
  border-color: var(--ds-line);
  box-shadow: var(--ds-shadow-card);
}

.app-brand,
.user-name,
.nav-pill,
.top-chip,
.black-button,
.soft-button,
.muted-button,
.landing-button,
.outline-button,
.quick-row,
.status-pill,
.ds-badge,
.promo-row button,
.model-pill {
  font-weight: var(--ds-weight-semibold);
}

.black-button,
.landing-button,
.ds-button.primary {
  font-weight: var(--ds-weight-semibold);
}

.eyebrow,
.section-kicker,
.preview-balance p,
.preview-grid p,
.metric-card p,
.section-head a,
.knowledge-tabs a,
.tool-card strong,
.feature-grid h3,
.price-cards span,
.login-form label {
  font-weight: var(--ds-weight-semibold);
}

.balance-hero h1,
.metric-card h2,
.hero-copy h1,
.preview-balance strong,
.preview-grid b,
.price-cards b,
.landing-section > h2,
.pricing-band h2,
.api-strip h2,
.landing-final h2 {
  font-weight: var(--ds-weight-heavy);
}

.hero-copy h1 {
  max-width: 660px;
  font-size: 54px;
  line-height: 1.04;
  color: var(--ds-brand);
}

.hero-copy p {
  font-size: 17px;
  line-height: 1.58;
  font-weight: var(--ds-weight-regular);
}

.landing-section > h2,
.pricing-band h2,
.api-strip h2,
.landing-final h2 {
  font-size: 31px;
  line-height: 1.18;
  font-weight: var(--ds-weight-bold);
}

.feature-grid h3 {
  font-size: 17px;
  line-height: 1.3;
  font-weight: var(--ds-weight-semibold);
}

.landing-nav nav a,
.hero-badge,
.section-kicker,
.preview-top,
.preview-balance p,
.preview-balance a,
.preview-grid p,
.price-cards span {
  font-weight: var(--ds-weight-semibold);
}

.preview-balance strong {
  font-size: 32px;
  font-weight: var(--ds-weight-bold);
}

.preview-grid b,
.price-cards b {
  font-weight: var(--ds-weight-bold);
}

.landing-button,
.outline-button {
  font-weight: var(--ds-weight-semibold);
}

.chat-empty h1,
.login-shell h1,
.knowledge-title h1,
.page-title-row h1 {
  font-weight: var(--ds-weight-bold);
}

.section-head h2,
.compact-card h2,
.activity-card h2,
.table-card h2,
.guide-grid h2,
.guide-panel h2,
.billing-modal h2 {
  font-weight: var(--ds-weight-bold);
}

.amount-grid b,
.provider-grid strong,
.activity-row strong,
.model-bar,
td strong {
  font-weight: var(--ds-weight-semibold);
}

th {
  font-weight: var(--ds-weight-semibold);
}

.feature-grid article {
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.feature-grid article:hover {
  transform: translateY(-1px);
  border-color: var(--ds-line-strong);
  box-shadow: var(--ds-shadow-card-hover);
}

.feature-grid .feature-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--ds-radius-sm);
}

.book-icon {
  color: var(--ds-muted);
  box-shadow: var(--ds-shadow-control);
}

/* Design system preview */
.ds-preview-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background:
    radial-gradient(circle at 88% 12%, rgba(82,119,215,.11), rgba(82,119,215,0) 30%),
    linear-gradient(105deg, #fffdf8 0%, #f8f5ef 60%, #efebe3 100%);
  box-shadow: var(--ds-shadow-card);
}

.ds-preview-hero h1 { margin-bottom: 6px; }
.ds-preview-hero p { max-width: 620px; margin: 0; }

.ds-swatch-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.ds-swatch {
  min-height: 86px;
  display: grid;
  align-content: end;
  gap: 4px;
  padding: 12px;
  border-radius: var(--ds-radius-md);
  border: 1px solid var(--ds-line);
  box-shadow: var(--ds-shadow-control);
}

.ds-swatch b,
.ds-swatch span {
  color: inherit;
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
}

.ds-swatch span { font-size: 12px; opacity: .78; }

.ds-component-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ds-chat-preview {
  display: grid;
  gap: 10px;
  padding: 18px;
  min-height: 220px;
}

@media (max-width: 900px) {
  .ds-grid,
  .ds-grid.two,
  .ds-grid.four,
  .ds-component-showcase,
  .ds-swatch-grid {
    grid-template-columns: 1fr;
  }
}

/* Claude DESIGN.md reference layer for Claudetop */
.landing-body,
.auth-body {
  background: var(--ds-bg);
}

.landing-nav,
.app-topbar {
  background: rgba(250, 249, 245, .94);
  border-color: var(--ds-line);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.landing-nav {
  border-radius: var(--ds-radius-lg);
}

.app-topbar {
  min-height: 56px;
}

.landing-nav nav a,
.nav-pill,
.top-chip,
.quick-row,
.status-pill,
.model-pill,
.login-form label,
th {
  font-weight: var(--ds-weight-medium);
}

.black-button,
.landing-button,
.ds-button.primary {
  background: var(--ds-brand);
  border-color: var(--ds-brand);
  color: #fff;
  box-shadow: none;
}

.black-button:hover,
.landing-button:hover,
.ds-button.primary:hover {
  background: var(--ds-brand-hover);
  border-color: var(--ds-brand-hover);
}

.soft-button,
.outline-button,
.ds-button.secondary,
.promo-row button,
.quick-row,
.top-chip,
.nav-pill {
  background: var(--ds-surface);
  border-color: var(--ds-line);
  color: var(--ds-ink);
  box-shadow: none;
}

.nav-pill.active,
.top-chip.active,
.knowledge-tabs a.active,
.category-tab-active {
  background: var(--ds-surface-card);
  border-color: var(--ds-line-strong);
  color: var(--ds-ink);
}

.hero-copy h1,
.landing-section > h2,
.pricing-band h2,
.api-strip h2,
.landing-final h2,
.knowledge-title h1,
.page-title-row h1,
.login-shell h1,
.ds-preview-hero h1 {
  font-family: var(--ds-font-display);
  font-weight: var(--ds-weight-heavy);
  letter-spacing: 0;
}

.balance-hero h1,
.metric-card h2,
.ds-metric h2,
.preview-balance strong,
.preview-grid b,
.price-cards b {
  font-family: var(--ds-font-sans);
  font-weight: var(--ds-weight-bold);
}

.hero-copy h1 {
  max-width: 660px;
  font-size: 54px;
  line-height: 1.04;
}

.hero-copy p,
.landing-final p {
  color: var(--ds-muted);
  font-size: 16px;
  line-height: 1.58;
}

.hero-badge,
.section-kicker,
.eyebrow {
  color: var(--ds-brand-hover);
  background: transparent;
  border-color: var(--ds-line);
}

.landing-section,
.pricing-band,
.api-strip {
  background: var(--ds-surface);
  border-color: var(--ds-line);
  border-radius: var(--ds-radius-xl);
  box-shadow: none;
}

.feature-grid article,
.metric-card,
.activity-card,
.compact-card,
.table-card,
.step-card,
.guide-panel,
.guide-grid article,
.tool-card,
.payment-option,
.amount-grid button,
.provider-grid button,
.ds-card {
  background: var(--ds-surface-card);
  border-color: var(--ds-line);
  border-radius: var(--ds-radius-lg);
  box-shadow: none;
}

.feature-grid article:hover,
.ds-card.interactive:hover {
  transform: none;
  box-shadow: var(--ds-shadow-card-hover);
}

.hero-product {
  background: var(--ds-surface-dark);
  border-color: var(--ds-surface-dark-raised);
  border-radius: var(--ds-radius-xl);
  box-shadow: none;
  color: var(--ds-on-dark);
  transform: none;
}

.preview-top,
.preview-grid small {
  color: #a09d96;
}

.preview-balance,
.preview-grid article {
  background: var(--ds-surface-dark-raised);
  border-color: #34312c;
  color: #faf9f5;
}

.preview-balance p,
.preview-grid p {
  color: #a09d96;
}

.preview-balance strong,
.preview-grid b {
  color: #faf9f5;
}

.preview-balance a {
  background: var(--ds-brand);
  color: #fff;
}

.preview-grid span {
  background: var(--ds-brand);
}

.balance-hero {
  background: var(--ds-surface-card);
  border-color: var(--ds-line);
  box-shadow: none;
}

.billing-modal {
  background: var(--ds-bg);
  border-color: var(--ds-line);
}

.chat-layout,
.composer,
.messages .bubble,
.bubble {
  border-color: var(--ds-line);
}

.chat-sidebar {
  background: var(--ds-bg);
}

.bubble.assistant {
  background: var(--ds-surface-card);
}

.bubble.user {
  background: var(--ds-surface-dark);
  color: #faf9f5;
}

.ds-preview-hero {
  background: var(--ds-surface-card);
  box-shadow: none;
}

.ds-swatch:nth-child(1) { background: var(--ds-brand) !important; }
.ds-swatch:nth-child(2) { background: var(--ds-surface) !important; }
.ds-swatch:nth-child(3) { background: var(--ds-surface-card) !important; }

@media (max-width: 900px) {
  .hero-copy h1 {
    font-size: 40px;
    line-height: 1.08;
  }
}

/* Mobile app layer from Claudetop DESIGN.md */
.mobile-menu-trigger,
.mobile-bottom-nav,
.mobile-drawer-backdrop,
.account-sheet-backdrop,
.model-sheet-backdrop {
  display: none;
}

.model-sheet-backdrop:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 76;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 20, 19, .42);
  backdrop-filter: blur(7px);
}

.model-sheet {
  width: min(620px, 100%);
  max-height: min(680px, calc(100dvh - 48px));
  overflow: auto;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-surface-raised);
  box-shadow: var(--ds-shadow-modal);
}

.sheet-grabber {
  display: none;
}

.mobile-sheet-head {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  border-bottom: 1px solid var(--ds-line);
}

.mobile-sheet-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: var(--ds-weight-semibold);
}

.mobile-sheet-head button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: transparent;
  color: var(--ds-muted);
  font-size: 28px;
  line-height: 1;
}

.model-sheet-grid {
  min-height: 320px;
  display: grid;
  grid-template-columns: 190px 1fr;
}

.model-family-list,
.model-choice-list {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 14px;
}

.model-family-list {
  border-right: 1px solid var(--ds-line);
}

.model-family-list button,
.model-choice-list button {
  min-height: 42px;
  border: 0;
  border-radius: var(--ds-radius-md);
  background: transparent;
  color: var(--ds-ink);
  font: inherit;
  text-align: left;
  padding: 0 12px;
}

.model-family-list button.active,
.model-choice-list button.active {
  background: var(--ds-surface-card);
}

.mobile-menu-trigger svg,
.mobile-bottom-nav svg,
.mobile-drawer svg,
.account-menu svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 720px) {
  html {
    background: #f6f5f1;
  }

  body {
    min-width: 0;
    background: #f6f5f1;
    font-size: 16px;
    line-height: 1.38;
    padding-bottom: 104px;
  }

  body.mobile-layer-open {
    overflow: hidden;
  }

  .app-topbar {
    min-height: 60px;
    height: 60px;
    padding: 10px 24px;
    border-bottom: 0;
    background: rgba(246, 245, 241, .86);
    box-shadow: none;
  }

  .topbar-left {
    width: 100%;
    justify-content: flex-start;
  }

  .mobile-menu-trigger {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ds-ink);
  }

  .app-brand,
  .app-brand b,
  .nav-group,
  .top-actions,
  .floating-tools {
    display: none;
  }

  .app-page {
    width: calc(100% - 48px);
    margin: 22px auto 118px;
  }

  .notice {
    width: 100%;
    margin-bottom: 18px;
    border-radius: 20px;
    padding: 14px 16px;
    font-size: 15px;
  }

  .balance-hero {
    width: 100%;
    min-height: 390px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px;
    margin: 0 0 32px;
    padding: 42px 38px 34px;
    border-radius: 30px;
    background: #fffefb;
    border-color: #eadf8f;
    box-shadow: 0 10px 24px rgba(25, 22, 18, .07);
  }

  .balance-hero .eyebrow {
    font-size: 14px;
    color: #6f6b64;
    margin-bottom: 14px;
  }

  .balance-hero h1 {
    font-size: clamp(44px, 13vw, 58px);
    line-height: 1;
    margin-bottom: 14px;
  }

  .balance-hero p {
    max-width: 100%;
    color: var(--ds-brand-hover);
    font-size: 20px;
    line-height: 1.28;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    justify-content: stretch;
  }

  .hero-actions .soft-button:last-child {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-left: 22px;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .service-strip {
    display: grid;
    gap: 14px;
    margin: 0 0 22px;
    padding: 22px;
    border-radius: 24px;
    background: #fffefb;
    border-color: #dcd8d0;
    box-shadow: 0 8px 18px rgba(25, 22, 18, .07);
  }

  .service-strip strong {
    font-size: 20px;
  }

  .service-strip small {
    font-size: 15px;
  }

  .service-strip-items {
    justify-content: flex-start;
  }

  .black-button,
  .soft-button,
  .muted-button,
  .landing-button,
  .outline-button {
    min-height: 58px;
    border-radius: 22px;
    font-size: 18px;
    font-weight: 600;
    gap: 10px;
  }

  .small {
    min-height: 50px;
    border-radius: 18px;
    font-size: 16px;
  }

  .button-icon {
    width: 20px;
    height: 20px;
  }

  .metric-grid,
  .metric-grid.three-wide,
  .metric-grid.four-wide,
  .home-layout,
  .side-stack {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 26px;
  }

  .metric-card,
  .activity-card,
  .compact-card,
  .table-card,
  .step-card,
  .guide-panel,
  .guide-grid article,
  .tool-card {
    border-radius: 28px;
    background: #fffefb;
    border-color: #dcd8d0;
    box-shadow: 0 8px 18px rgba(25, 22, 18, .07);
  }

  .metric-card {
    min-height: 220px;
    padding: 46px 34px 30px;
  }

  .metric-card.flat {
    min-height: 164px;
  }

  .metric-card p,
  .compact-card p {
    font-size: 20px;
    font-weight: 400;
    color: #5b5853;
    margin-bottom: 18px;
  }

  .metric-card h2 {
    font-size: clamp(34px, 9vw, 44px);
    line-height: 1;
    margin-bottom: 12px;
  }

  .metric-card span {
    font-size: 17px;
    color: #6a665f;
  }

  .metric-icon {
    right: 32px;
    top: 36px;
    width: 28px;
    height: 28px;
    background: transparent !important;
  }

  .sparkline {
    height: 86px;
    gap: 0;
    margin: 20px 0 4px;
    align-items: end;
  }

  .sparkline span {
    min-height: 4px;
    border-radius: 4px;
    background: #12a47e;
  }

  .activity-card,
  .compact-card,
  .table-card {
    padding: 30px 32px;
  }

  .section-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: start;
    margin-bottom: 34px;
  }

  .section-head h2,
  .compact-card h2 {
    font-size: 24px;
    line-height: 1.15;
    margin-bottom: 10px;
  }

  .section-head p {
    font-size: 20px;
    line-height: 1.45;
  }

  .section-head a {
    font-size: 18px;
    font-weight: 500;
  }

  .activity-list {
    gap: 22px;
  }

  .activity-row {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 20px;
  }

  .activity-icon {
    width: 52px;
    height: 52px;
    font-size: 22px;
  }

  .activity-row strong {
    font-size: 22px;
    line-height: 1.18;
  }

  .activity-row small {
    font-size: 17px;
    line-height: 1.25;
  }

  .activity-row b {
    font-size: 20px;
    font-weight: 500;
  }

  .model-bar {
    font-size: 20px;
    gap: 8px 12px;
    margin-top: 20px;
  }

  .model-bar i {
    height: 8px;
  }

  .quick-row {
    min-height: 58px;
    display: flex;
    align-items: center;
    border-radius: 18px;
    padding: 0 22px;
    font-size: 22px;
    font-weight: 500;
    background: #fffefb;
  }

  .copy-input,
  .search-input,
  input,
  textarea,
  select {
    min-height: 54px;
    border-radius: 20px;
    font-size: 18px;
  }

  .page-title-row {
    display: grid;
    gap: 16px;
    margin: 36px 0 28px;
  }

  .page-title-row h1 {
    font-family: var(--ds-font-sans);
    font-size: 36px;
    line-height: 1.08;
    font-weight: 700;
  }

  .page-title-row p {
    font-size: 22px;
    line-height: 1.38;
  }

  .page-keys .page-title-row {
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .page-keys .page-title-row p {
    max-width: 230px;
  }

  .page-keys .page-title-row form {
    align-self: center;
  }

  .table-card {
    overflow: hidden;
  }

  .page-keys .table-card table,
  .page-keys .table-card thead,
  .page-keys .table-card tbody,
  .page-transactions .table-card table,
  .page-transactions .table-card thead,
  .page-transactions .table-card tbody,
  .page-logs .table-card table,
  .page-logs .table-card thead,
  .page-logs .table-card tbody {
    width: 100%;
    min-width: 0;
    display: block;
  }

  .page-keys .table-card tr {
    display: grid;
    grid-template-columns: 1.15fr 1.15fr .85fr 34px;
    align-items: center;
  }

  .page-keys .table-card th:nth-child(3),
  .page-keys .table-card th:nth-child(4),
  .page-keys .table-card td:nth-child(3),
  .page-keys .table-card td:nth-child(4) {
    display: none;
  }

  .page-transactions .table-card tr {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
  }

  .page-transactions .table-card th:nth-child(4),
  .page-transactions .table-card th:nth-child(5),
  .page-transactions .table-card td:nth-child(4),
  .page-transactions .table-card td:nth-child(5) {
    display: none;
  }

  .page-logs .table-card tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
  }

  .page-logs .table-card th:nth-child(1),
  .page-logs .table-card th:nth-child(3),
  .page-logs .table-card th:nth-child(6),
  .page-logs .table-card td:nth-child(1),
  .page-logs .table-card td:nth-child(3),
  .page-logs .table-card td:nth-child(6) {
    display: none;
  }

  th,
  td {
    padding: 18px 10px;
    font-size: 18px;
    line-height: 1.26;
  }

  th {
    font-size: 18px;
    color: #68645d;
    font-weight: 500;
  }

  td code {
    font-size: 16px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .status-pill {
    min-height: 36px;
    height: 36px;
    border-radius: 18px;
    padding: 0 14px;
    font-size: 17px;
  }

  .dots {
    width: 34px;
    height: 34px;
  }

  .filters,
  .section-head .search-input {
    min-width: 0;
  }

  .filters {
    display: grid;
    grid-template-columns: 1fr;
  }

  .page-chat .app-page {
    width: 100%;
    margin: 0;
  }

  .page-chat .app-topbar {
    background: transparent;
  }

  .chat-layout {
    width: 100%;
    min-height: calc(100dvh - 84px);
    margin: 0;
    display: block;
  }

  .chat-sidebar {
    display: none;
  }

  .chat-stage {
    min-height: calc(100dvh - 164px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 34px;
    padding: 118px 24px 120px;
  }

  .chat-empty {
    align-self: center;
    margin: 0;
    max-width: 330px;
  }

  .chat-empty h1 {
    font-size: 30px;
    line-height: 1.08;
    font-weight: 700;
  }

  .chat-empty p {
    font-size: 20px;
    line-height: 1.42;
  }

  .chat-readiness {
    width: calc(100% - 48px);
    display: grid;
    gap: 14px;
    margin: -12px auto 0;
    padding: 18px;
    border-radius: 24px;
    background: #fffefb;
    border-color: #dcd8d0;
    box-shadow: 0 8px 18px rgba(25, 22, 18, .07);
  }

  .chat-readiness-main strong {
    font-size: 18px;
  }

  .chat-readiness-main small {
    font-size: 15px;
  }

  .chat-readiness-meta {
    justify-content: flex-start;
  }

  .messages {
    width: calc(100% - 32px);
    max-height: 46dvh;
  }

  .bubble {
    max-width: 86%;
    border-radius: 22px;
    padding: 14px 16px;
    font-size: 16px;
  }

  .composer {
    width: calc(100% - 48px);
    min-height: 128px;
    border-radius: 24px;
    padding: 22px 22px 18px;
    box-shadow: 0 10px 22px rgba(25, 22, 18, .12);
  }

  .composer textarea {
    min-height: 42px;
    font-size: 20px;
  }

  .composer-tools {
    display: flex;
  }

  .chat-tool-button,
  .send-button {
    width: 38px;
    height: 38px;
    border-radius: 99px;
  }

  .model-pill {
    height: 38px;
    max-width: 176px;
    font-size: 16px;
  }

  .send-button svg,
  .chat-tool-button svg {
    width: 20px;
    height: 20px;
  }

  .model-sheet-backdrop:not([hidden]),
  .account-sheet-backdrop:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 76;
    display: grid;
    align-items: end;
    background: rgba(20, 20, 19, .46);
    backdrop-filter: blur(7px);
  }

  .mobile-drawer-backdrop:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 76;
    display: block;
    background: rgba(20, 20, 19, .52);
    backdrop-filter: blur(4px);
  }

  .mobile-drawer {
    width: min(77vw, 360px);
    height: 100dvh;
    padding: 42px 24px calc(120px + env(safe-area-inset-bottom));
    background: #fffefb;
    box-shadow: 18px 0 44px rgba(20, 20, 19, .18);
  }

  .mobile-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .mobile-sheet-head h2 {
    font-family: var(--ds-font-sans);
    font-size: 22px;
    font-weight: 700;
    margin: 0;
  }

  .mobile-sheet-head button,
  .account-card button {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 99px;
    background: transparent;
    color: #34312c;
    font-size: 34px;
    line-height: 1;
  }

  .mobile-drawer-primary {
    min-height: 68px;
    display: grid;
    place-items: center;
    margin: 54px 6px 22px;
    border-radius: 24px;
    background: var(--ds-surface-dark);
    color: #fff;
    font-size: 22px;
    font-weight: 500;
    box-shadow: 0 8px 18px rgba(20, 20, 19, .14);
  }

  .mobile-drawer-line {
    height: 1px;
    margin: 0 6px 20px;
    background: var(--ds-line);
  }

  .mobile-drawer > a:not(.mobile-drawer-primary) {
    min-height: 54px;
    display: flex;
    align-items: center;
    font-size: 21px;
    font-weight: 500;
  }

  .account-sheet,
  .model-sheet {
    width: 100%;
    max-height: calc(100dvh - 96px);
    overflow: auto;
    border-radius: 28px 28px 0 0;
    background: #fffefb;
    box-shadow: 0 -20px 70px rgba(20, 20, 19, .18);
    padding: 18px 24px calc(124px + env(safe-area-inset-bottom));
  }

  .sheet-grabber {
    width: 64px;
    height: 6px;
    display: block;
    margin: 0 auto 22px;
    border-radius: 99px;
    background: #d7d5cf;
  }

  .account-card {
    min-height: 98px;
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
    padding: 18px 22px;
    border-radius: 22px;
    background: #efede8;
  }

  .big-avatar {
    width: 58px;
    height: 58px;
    font-size: 20px;
  }

  .account-card strong {
    display: block;
    font-size: 22px;
    line-height: 1.15;
  }

  .account-card small {
    display: block;
    margin-top: 3px;
    color: #5f5b54;
    font-size: 18px;
  }

  .account-menu {
    display: grid;
    gap: 4px;
  }

  .account-menu a,
  .account-menu button {
    min-height: 70px;
    display: flex;
    align-items: center;
    gap: 22px;
    border: 0;
    background: transparent;
    color: var(--ds-ink);
    font-size: 23px;
    font-weight: 500;
    text-align: left;
  }

  .account-menu form {
    border-top: 1px solid #d7d4cc;
    margin-top: 12px;
    padding-top: 14px;
  }

  .account-menu .logout-link {
    color: var(--ds-rose);
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    height: calc(86px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    padding: 12px 22px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(20, 20, 19, .11);
    background: rgba(250, 249, 245, .92);
    backdrop-filter: blur(18px);
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    min-width: 0;
    height: 62px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: #393631;
    font-size: 14px;
    font-weight: 500;
  }

  .mobile-bottom-nav svg {
    width: 30px;
    height: 30px;
  }

  .mobile-bottom-nav .active {
    color: #171614;
  }

  .mobile-nav-avatar {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 99px;
    background: #24211e;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
  }

  .billing-modal {
    width: 100%;
    max-height: calc(100dvh - 64px);
    align-self: end;
    border-radius: 28px 28px 0 0;
    padding: 34px 26px calc(28px + env(safe-area-inset-bottom));
  }

  .billing-modal::before {
    content: "";
    width: 64px;
    height: 6px;
    display: block;
    margin: -14px auto 18px;
    border-radius: 99px;
    background: #d7d5cf;
  }

  .modal-backdrop {
    place-items: end center;
    padding: 0;
  }

  .amount-grid,
  .provider-grid {
    gap: 10px;
  }

  .amount-grid button,
  .provider-grid button {
    min-height: 96px;
    border-radius: 20px;
  }

  .provider-grid button {
    min-height: 136px;
  }

  .amount-grid b,
  .provider-grid strong {
    font-size: 21px;
  }

  .amount-grid span,
  .provider-grid small {
    font-size: 16px;
  }

  .custom-amount {
    min-height: 66px;
    border-radius: 22px;
    justify-content: center;
    font-size: 22px;
  }

  .promo-row {
    grid-template-columns: 1fr auto;
  }

  .promo-row button {
    min-height: 54px;
    border-radius: 18px;
    font-size: 18px;
  }

  .model-sheet {
    padding-left: 0;
    padding-right: 0;
  }

  .model-sheet .mobile-sheet-head {
    padding: 0 24px 18px;
    border-bottom: 1px solid var(--ds-line);
  }

  .model-sheet-grid {
    min-height: 360px;
    display: grid;
    grid-template-columns: 38% 1fr;
  }

  .model-family-list,
  .model-choice-list {
    display: grid;
    align-content: start;
    gap: 2px;
    padding: 16px 14px;
  }

  .model-family-list {
    border-right: 1px solid var(--ds-line);
  }

  .model-family-list button,
  .model-choice-list button {
    min-height: 52px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: #3e3a35;
    font-size: 22px;
    text-align: left;
    padding: 0 16px;
  }

  .model-family-list button.active,
  .model-choice-list button.active {
    background: #e4e1db;
  }

  .knowledge-wrap {
    width: 100%;
  }

  .knowledge-title {
    align-items: start;
    gap: 18px;
    margin: 30px 0 28px;
  }

  .knowledge-title h1 {
    font-family: var(--ds-font-sans);
    font-size: 36px;
    line-height: 1.08;
  }

  .knowledge-title p {
    font-size: 22px;
    line-height: 1.25;
  }

  .book-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
  }

  .knowledge-tabs {
    position: sticky;
    top: 6px;
    z-index: 10;
    grid-template-columns: repeat(6, minmax(52px, 1fr));
    gap: 0;
    padding: 6px;
    margin-bottom: 36px;
    border-radius: 22px;
    background: #efede8;
    box-shadow: 0 8px 18px rgba(25, 22, 18, .06);
  }

  .knowledge-tabs a {
    min-height: 54px;
    border-radius: 18px;
    font-size: 0;
  }

  .knowledge-tabs a::before {
    font-size: 21px;
    color: #5d5a54;
  }

  .knowledge-tabs a:nth-child(1)::before { content: ">_"; }
  .knowledge-tabs a:nth-child(2)::before { content: "▣"; }
  .knowledge-tabs a:nth-child(3)::before { content: "$"; }
  .knowledge-tabs a:nth-child(4)::before { content: "</>"; }
  .knowledge-tabs a:nth-child(5)::before { content: "?"; }
  .knowledge-tabs a:nth-child(6)::before { content: "!"; }

  .step-card {
    grid-template-columns: 56px 1fr;
    gap: 18px;
    padding: 28px;
    margin-bottom: 36px;
  }

  .step-num {
    width: 48px;
    height: 48px;
    font-size: 21px;
  }

  .step-card h2,
  .tool-section h2,
  .guide-grid h2,
  .guide-panel h2 {
    font-size: 24px;
    line-height: 1.2;
  }

  .step-card p,
  .guide-grid p,
  .guide-panel p {
    font-size: 19px;
    line-height: 1.42;
  }

  .tool-section h2 {
    margin-bottom: 26px;
  }

  .tool-grid,
  .guide-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .tool-card {
    min-height: 110px;
    grid-template-columns: 64px 1fr auto;
    gap: 4px 18px;
    padding: 22px 26px;
  }

  .tool-card strong {
    font-size: 23px;
  }

  .tool-card small {
    font-size: 18px;
  }

  .tool-card span {
    width: 56px;
    height: 56px;
    border-radius: 18px;
  }

  .guide-grid article,
  .guide-panel {
    padding: 26px;
  }

  .guide-panel code {
    font-size: 17px;
    border-radius: 18px;
    padding: 12px 14px;
    background: #efede8;
  }
}

/* Product admin */
.admin-shell {
  display: grid;
  gap: 16px;
}

.admin-hero {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: flex-end;
  padding: 22px 24px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-raised);
}

.admin-hero h1 {
  margin: 0 0 8px;
  font-family: var(--ds-font-sans);
  font-size: 30px;
  font-weight: var(--ds-weight-semibold);
}

.admin-hero p {
  max-width: 760px;
  margin-bottom: 0;
}

.admin-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-links form {
  display: contents;
}

.billing-reconciliation-card {
  display: grid;
  gap: 14px;
}

.billing-reconciliation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.billing-reconciliation-grid article {
  display: grid;
  gap: 7px;
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
  box-shadow: var(--ds-shadow-hairline);
}

.billing-reconciliation-grid span,
.billing-reconciliation-grid small {
  color: var(--ds-muted);
}

.billing-reconciliation-grid span {
  font-size: 13px;
}

.billing-reconciliation-grid strong {
  font-size: 24px;
  line-height: 1.1;
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0;
}

.billing-reconciliation-table {
  overflow-x: auto;
}

.billing-reconciliation-table table {
  min-width: 840px;
}

.billing-reconciliation-table tr.warn {
  background: rgba(245, 197, 77, .08);
}

.billing-reconciliation-table tr.bad {
  background: rgba(214, 92, 92, .08);
}

.billing-reconciliation-table small {
  color: var(--ds-muted);
}

.operations-cockpit-card {
  display: grid;
  gap: 16px;
  overflow: visible;
}

.ops-overview-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.ops-score-panel {
  display: grid;
  align-content: center;
  gap: 9px;
  min-height: 214px;
  padding: 20px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .34)),
    var(--ds-surface-muted);
  box-shadow: var(--ds-shadow-hairline);
}

.ops-score-panel.ok {
  border-color: rgba(93, 184, 114, .32);
}

.ops-score-panel.warn {
  border-color: rgba(212, 160, 23, .36);
}

.ops-score-panel.bad,
.ops-score-panel.blocked {
  border-color: rgba(198, 69, 69, .32);
}

.ops-score-panel > span {
  font-size: 46px;
  line-height: 1;
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0;
}

.ops-score-panel > strong {
  font-size: 18px;
  font-weight: var(--ds-weight-semibold);
}

.ops-score-panel > small {
  color: var(--ds-muted);
  line-height: 1.4;
}

.ops-score-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.ops-score-flags b {
  padding: 5px 8px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-raised);
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: var(--ds-weight-semibold);
}

.ops-score-flags b.ok {
  background: var(--ds-jade-soft);
  color: #247a45;
}

.ops-score-flags b.warn {
  background: var(--ds-amber-soft);
  color: #8a6100;
}

.ops-score-flags b.bad {
  background: var(--ds-rose-soft);
  color: var(--ds-rose);
}

.ops-health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ops-health-card {
  display: grid;
  gap: 9px;
  min-height: 132px;
  padding: 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
  color: var(--ds-ink);
  text-decoration: none;
  box-shadow: var(--ds-shadow-hairline);
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.ops-health-card:hover {
  transform: translateY(-1px);
  border-color: var(--ds-line-strong);
  background: #fff;
  box-shadow: var(--ds-shadow-card);
}

.ops-health-card.ok {
  border-color: rgba(93, 184, 114, .28);
}

.ops-health-card.warn {
  border-color: rgba(212, 160, 23, .32);
}

.ops-health-card.bad,
.ops-health-card.blocked {
  border-color: rgba(198, 69, 69, .32);
}

.ops-health-card div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.ops-health-card span,
.ops-health-card small,
.ops-health-card b {
  display: block;
}

.ops-health-card span {
  color: var(--ds-muted);
  font-size: 13px;
}

.ops-health-card strong {
  font-size: 24px;
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0;
  white-space: nowrap;
}

.ops-health-card small {
  color: var(--ds-muted);
  line-height: 1.35;
}

.ops-health-card b {
  align-self: end;
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: var(--ds-weight-semibold);
}

.ops-flow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ops-flow-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
  box-shadow: var(--ds-shadow-hairline);
}

.ops-flow-card.warn {
  border-color: rgba(212, 160, 23, .28);
}

.ops-flow-card.bad {
  border-color: rgba(198, 69, 69, .28);
}

.ops-flow-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.ops-flow-head strong,
.ops-flow-head small {
  display: block;
}

.ops-flow-head strong {
  font-weight: var(--ds-weight-semibold);
}

.ops-flow-head small {
  margin-top: 3px;
  color: var(--ds-muted);
  line-height: 1.35;
}

.ops-flow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ops-flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 7px;
  min-height: 72px;
  padding: 10px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, .56);
  color: inherit;
  text-decoration: none;
}

.ops-flow-step strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--ds-weight-semibold);
}

.ops-flow-step small {
  grid-column: 1 / -1;
  color: var(--ds-muted);
  line-height: 1.3;
}

.ops-action-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.alert-center-card {
  display: grid;
  gap: 16px;
  overflow: visible;
}

.alert-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.alert-summary-grid article {
  min-height: 78px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
}

.alert-summary-grid span {
  color: var(--ds-muted);
  font-size: 13px;
}

.alert-summary-grid strong {
  font-size: 28px;
  font-weight: var(--ds-weight-bold);
}

.alert-delivery-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
  box-shadow: var(--ds-shadow-hairline);
}

.alert-delivery-strip div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.alert-delivery-strip span,
.alert-delivery-strip small,
.alert-delivery-strip b {
  color: var(--ds-muted);
}

.alert-delivery-strip span {
  font-size: 11px;
  font-weight: var(--ds-weight-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.alert-delivery-strip strong {
  font-size: 15px;
}

.alert-delivery-strip b {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  font-size: 12px;
  white-space: nowrap;
}

.alert-delivery-strip.ok {
  border-color: rgba(93, 184, 114, .32);
  background: var(--ds-jade-soft);
}

.alert-delivery-strip.warn {
  border-color: rgba(212, 160, 23, .32);
  background: var(--ds-amber-soft);
}

.admin-alerts {
  display: grid;
  gap: 8px;
}

.admin-alert {
  padding: 12px 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-raised);
  color: var(--ds-ink);
}

.admin-alerts.structured {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-alerts.structured .admin-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.admin-alerts.structured .admin-alert:hover {
  transform: translateY(-1px);
  border-color: var(--ds-line-strong);
  box-shadow: var(--ds-shadow-card);
}

.admin-alert span,
.admin-alert strong,
.admin-alert small {
  display: block;
}

.admin-alert span {
  color: var(--ds-muted);
  font-size: 11px;
  font-weight: var(--ds-weight-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.admin-alert strong {
  font-weight: var(--ds-weight-semibold);
}

.admin-alert small {
  color: var(--ds-muted);
  line-height: 1.35;
}

.admin-alert b {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: var(--ds-weight-semibold);
  white-space: nowrap;
}

.admin-alert.bad {
  border-color: rgba(198, 69, 69, .32);
  background: var(--ds-rose-soft);
}

.admin-alert.warn {
  border-color: rgba(212, 160, 23, .32);
  background: var(--ds-amber-soft);
}

.admin-alert.ok {
  border-color: rgba(93, 184, 114, .32);
  background: var(--ds-jade-soft);
}

.admin-alert.bad strong,
.admin-alert.bad b {
  color: var(--ds-rose);
}

.admin-alert.warn strong,
.admin-alert.warn b {
  color: #8a6100;
}

.admin-alert.ok strong,
.admin-alert.ok b {
  color: #247a45;
}

.ops-diagnostics-card {
  overflow: visible;
}

.diagnostics-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.diagnostics-score {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 188px;
  padding: 20px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .82), transparent 58%), var(--ds-surface-muted);
  box-shadow: var(--ds-shadow-hairline);
}

.diagnostics-score span {
  font-size: 44px;
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0;
}

.diagnostics-score strong {
  font-size: 18px;
  font-weight: var(--ds-weight-semibold);
}

.diagnostics-score small {
  color: var(--ds-muted);
  line-height: 1.4;
}

.diagnostics-score.ok {
  border-color: rgba(93, 184, 114, .32);
}

.diagnostics-score.warn {
  border-color: rgba(212, 160, 23, .36);
}

.diagnostics-score.blocked,
.diagnostics-score.bad {
  border-color: rgba(198, 69, 69, .32);
}

.diagnostics-actions {
  display: grid;
  gap: 9px;
}

.diagnostics-actions > strong {
  font-weight: var(--ds-weight-semibold);
}

.diagnostics-action,
.diagnostics-check {
  color: inherit;
  text-decoration: none;
}

.diagnostics-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 12px 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.diagnostics-action:hover,
.diagnostics-check:hover {
  transform: translateY(-1px);
  border-color: var(--ds-line-strong);
  background: #fff;
}

.diagnostics-action span,
.diagnostics-action b {
  font-weight: var(--ds-weight-semibold);
}

.diagnostics-action small {
  grid-column: 1;
  color: var(--ds-muted);
  line-height: 1.35;
}

.diagnostics-action b {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--ds-muted);
  font-size: 13px;
}

.diagnostics-action.bad {
  border-color: rgba(198, 69, 69, .26);
  background: var(--ds-rose-soft);
}

.diagnostics-action.warn {
  border-color: rgba(212, 160, 23, .26);
  background: var(--ds-amber-soft);
}

.diagnostics-empty {
  padding: 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
  color: var(--ds-muted);
}

.diagnostics-checks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.diagnostics-check {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 5px 9px;
  min-height: 64px;
  padding: 11px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.diagnostics-check i {
  grid-row: 1 / span 2;
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border-radius: 99px;
  background: var(--ds-jade);
}

.diagnostics-check.warn i {
  background: var(--ds-amber);
}

.diagnostics-check.bad i {
  background: var(--ds-rose);
}

.diagnostics-check span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--ds-weight-semibold);
}

.diagnostics-check small {
  color: var(--ds-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runbook-card {
  display: grid;
  gap: 16px;
  overflow: visible;
}

.runbook-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.runbook-item {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 270px;
  padding: 16px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .64), rgba(255, 255, 255, .22)),
    var(--ds-surface-muted);
  box-shadow: var(--ds-shadow-hairline);
}

.runbook-item.bad {
  border-color: rgba(198, 69, 69, .28);
  background: var(--ds-rose-soft);
}

.runbook-item.warn {
  border-color: rgba(212, 160, 23, .3);
  background: var(--ds-amber-soft);
}

.runbook-item.ok {
  border-color: rgba(93, 184, 114, .28);
  background: var(--ds-jade-soft);
}

.runbook-item-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.runbook-item-head strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: var(--ds-weight-semibold);
}

.runbook-item-head small {
  display: block;
  color: var(--ds-muted);
  line-height: 1.36;
}

.runbook-item ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
  color: var(--ds-muted);
  line-height: 1.42;
}

.runbook-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: end;
  padding-top: 2px;
}

.launch-checklist-card {
  display: grid;
  gap: 16px;
  overflow: visible;
}

.launch-summary-strip {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
  box-shadow: var(--ds-shadow-hairline);
}

.launch-summary-strip.ok {
  border-color: rgba(93, 184, 114, .3);
  background: var(--ds-jade-soft);
}

.launch-summary-strip.warn {
  border-color: rgba(212, 160, 23, .3);
  background: var(--ds-amber-soft);
}

.launch-summary-strip.bad {
  border-color: rgba(198, 69, 69, .28);
  background: var(--ds-rose-soft);
}

.launch-summary-strip article {
  display: grid;
  gap: 3px;
}

.launch-summary-strip span,
.launch-summary-strip small {
  color: var(--ds-muted);
}

.launch-summary-strip span {
  font-size: 12px;
  font-weight: var(--ds-weight-semibold);
  text-transform: uppercase;
}

.launch-summary-strip strong {
  font-size: 18px;
  line-height: 1.15;
}

.launch-checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.launch-checklist-group {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .28)),
    var(--ds-surface-muted);
  box-shadow: var(--ds-shadow-hairline);
}

.launch-checklist-group.ok {
  border-color: rgba(93, 184, 114, .24);
}

.launch-checklist-group.warn {
  border-color: rgba(212, 160, 23, .28);
}

.launch-checklist-group.bad {
  border-color: rgba(198, 69, 69, .24);
}

.launch-group-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.launch-group-head strong,
.launch-group-head small {
  display: block;
}

.launch-group-head strong {
  font-size: 15px;
}

.launch-group-head small {
  color: var(--ds-muted);
}

.launch-items {
  display: grid;
  gap: 8px;
}

.launch-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, .6);
  color: inherit;
  text-decoration: none;
}

.launch-item:hover {
  border-color: var(--ds-ink);
  transform: translateY(-1px);
}

.launch-item strong,
.launch-item small,
.launch-item em,
.launch-item b {
  display: block;
}

.launch-item strong {
  font-size: 14px;
  line-height: 1.25;
}

.launch-item small {
  margin-top: 3px;
  color: var(--ds-muted);
  line-height: 1.35;
}

.launch-item em {
  margin-top: 5px;
  color: var(--ds-muted);
  font-size: 12px;
  font-style: normal;
}

.launch-item b {
  align-self: center;
  max-width: 90px;
  padding: 5px 8px;
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  color: var(--ds-ink);
  font-size: 11px;
  font-weight: var(--ds-weight-semibold);
  text-align: center;
  white-space: nowrap;
}

.launch-item.bad {
  border-color: rgba(198, 69, 69, .26);
  background: rgba(255, 244, 243, .74);
}

.launch-item.warn {
  border-color: rgba(212, 160, 23, .26);
  background: rgba(255, 248, 226, .76);
}

.launch-item.ok {
  border-color: rgba(93, 184, 114, .24);
  background: rgba(239, 250, 242, .66);
}

@media (max-width: 760px) {
  .launch-summary-strip,
  .launch-item {
    grid-template-columns: 1fr;
  }

  .launch-summary-strip .soft-button,
  .launch-item b {
    width: 100%;
  }
}

/* Claudetop DESIGN.md clean layer: calmer surfaces, tighter navigation,
   thinner borders, and the product's own coral/cream palette. */
:root {
  --ds-bg: #faf9f5;
  --ds-surface: #faf9f5;
  --ds-surface-raised: #faf9f5;
  --ds-surface-muted: #f5f0e8;
  --ds-surface-card: #efe9de;
  --ds-surface-strong: #e8e0d2;
  --ds-line: #e6dfd8;
  --ds-line-strong: #d7cec3;
  --ds-ink: #141413;
  --ds-muted: #6c6a64;
  --ds-muted-2: #8e8b82;
  --ds-brand: #cc785c;
  --ds-brand-hover: #a9583e;
  --ds-jade: #5db872;
  --ds-jade-soft: #e9f8f1;
  --ds-amber: #d4a017;
  --ds-amber-soft: #fbf1d7;
  --ds-rose: #c64545;
  --ds-radius-sm: 8px;
  --ds-radius-md: 10px;
  --ds-radius-lg: 14px;
  --ds-radius-xl: 18px;
  --ds-shadow-card: 0 1px 2px rgba(30, 28, 24, .04);
  --ds-shadow-card-hover: 0 5px 16px rgba(30, 28, 24, .06);
}

body {
  background: var(--ds-bg);
  color: var(--ds-ink);
}

.app-topbar {
  height: 42px;
  padding: 0 12px;
  background: rgba(248, 247, 243, .94);
  border-bottom: 1px solid var(--ds-line);
  box-shadow: none;
}

.app-brand {
  font-size: 14px;
  font-weight: 700;
}

.app-brand img {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  box-shadow: none;
}

.nav-group,
.top-actions {
  gap: 5px;
}

.nav-pill,
.top-chip,
.profile-link,
.soft-button,
.black-button,
.muted-button,
.model-pill,
.chat-tool-button,
.send-button,
.dots,
.status-pill,
.search-input,
select,
input,
textarea {
  border-radius: 10px;
}

.nav-pill,
.top-chip {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid var(--ds-line);
  background: #f2f1ed;
  color: #56514b;
  font-size: 12px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.nav-pill.active,
.top-chip.active,
.profile-menu[open] .profile-link,
.profile-menu.active .profile-link {
  background: #e7e3dc;
  border-color: #d6d0c8;
  color: var(--ds-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(30, 28, 24, .04);
}

.language-chip {
  min-width: 34px;
  justify-content: center;
  padding: 0 9px;
}

.profile-menu {
  position: relative;
}

.profile-menu summary {
  list-style: none;
}

.profile-menu summary::-webkit-details-marker {
  display: none;
}

.profile-link {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 4px;
  border: 1px solid var(--ds-line);
  background: #efede8;
  cursor: pointer;
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  width: 224px;
  padding: 10px;
  border: 1px solid var(--ds-line-strong);
  border-radius: 12px;
  background: var(--ds-surface-raised);
  box-shadow: 0 18px 42px rgba(30, 28, 24, .16);
}

.profile-dropdown::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 24px;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--ds-surface-raised);
  border-left: 8px solid transparent;
}

.profile-dropdown-head {
  position: relative;
  padding: 2px 34px 10px 2px;
  border-bottom: 1px solid var(--ds-line);
  margin-bottom: 7px;
}

.profile-dropdown-head strong,
.profile-dropdown-head small {
  display: block;
}

.profile-dropdown-head small {
  margin-top: 3px;
  color: var(--ds-muted);
}

.profile-dropdown-head a {
  position: absolute;
  top: 0;
  right: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--ds-muted);
}

.profile-dropdown a,
.profile-dropdown button {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ds-ink);
  font-size: 14px;
  text-align: left;
}

.profile-dropdown a {
  padding: 0 8px;
}

.profile-dropdown button {
  padding: 0 8px;
}

.profile-dropdown a:hover,
.profile-dropdown button:hover {
  background: #f1eee8;
}

.profile-dropdown svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-dropdown .logout-link {
  margin-top: 7px;
  border-top: 1px solid var(--ds-line);
  border-radius: 0;
  padding-top: 8px;
  color: var(--ds-rose);
}

.announcement-strip {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: #eef5ff;
  border-bottom: 1px solid #dce8f7;
  color: #536174;
  font-size: 12px;
}

.announcement-strip a {
  color: #345c9c;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.announcement-strip button {
  margin-left: auto;
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: #697386;
  font-size: 18px;
}

.app-page {
  width: min(1210px, calc(100% - 28px));
  margin: 18px auto 52px;
}

.balance-hero {
  width: min(760px, 100%);
  min-height: 112px;
  margin-bottom: 18px;
  border: 1px solid #eee0b9;
  border-radius: 14px;
  background: linear-gradient(100deg, #fffefa 0%, #fbfaf6 58%, #f0eee9 100%);
  box-shadow: none;
}

.balance-hero h1 {
  font-size: 34px;
  letter-spacing: 0;
}

.balance-hero p {
  color: #9d5d23;
}

.metric-card,
.activity-card,
.compact-card,
.table-card,
.step-card,
.doc-detail-card,
.api-reference-head,
.api-card-list article,
.faq-block details,
.tips-grid article {
  border: 1px solid var(--ds-line);
  border-radius: 14px;
  background: var(--ds-surface-raised);
  box-shadow: var(--ds-shadow-card);
}

.metric-card:hover,
.activity-card:hover,
.compact-card:hover,
.table-card:hover,
.step-card:hover,
.doc-detail-card:hover,
.api-card-list article:hover,
.tips-grid article:hover {
  border-color: var(--ds-line-strong);
  box-shadow: var(--ds-shadow-card-hover);
}

.metric-card {
  min-height: 132px;
  padding: 22px;
}

.metric-card.flat {
  min-height: 96px;
}

.metric-card p,
.section-head p,
.page-title-row p,
.knowledge-title p,
.doc-detail-head p,
.tips-grid > div p {
  color: var(--ds-muted);
}

.metric-card h2 {
  font-size: 25px;
  font-weight: 650;
}

.table-card {
  padding: 20px;
  overflow-x: auto;
}

.table-card table {
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
}

.table-card th {
  padding: 14px 12px;
  color: #625d56;
  font-size: 12px;
  font-weight: 650;
  border-bottom: 1px solid var(--ds-line-strong);
}

.table-card td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--ds-line);
  font-size: 13px;
}

.table-card tr:last-child td {
  border-bottom: 0;
}

.black-button {
  min-height: 34px;
  border: 1px solid #2b2824;
  background: #302c28;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  font-weight: 650;
}

.black-button:hover {
  background: #201d1a;
}

.soft-button {
  min-height: 34px;
  border: 1px solid var(--ds-line);
  background: #fffefa;
  box-shadow: none;
  font-weight: 600;
}

.soft-button:hover {
  border-color: var(--ds-line-strong);
  background: #f8f6f0;
}

input,
textarea,
select,
.search-input,
.connect-field,
.copy-line input,
.client-config-box,
.doc-detail-card pre,
.doc-steps code,
.tips-grid code {
  border: 1px solid var(--ds-line-strong);
  background: #f4f2ed;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.modal-backdrop {
  background: rgba(28, 27, 24, .38);
  backdrop-filter: blur(10px);
}

.billing-modal {
  width: min(390px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-radius: 15px;
  border: 1px solid var(--ds-line-strong);
  box-shadow: 0 30px 80px rgba(20, 18, 16, .28);
}

.amount-grid button,
.provider-grid button {
  border-radius: 13px;
  border-color: var(--ds-line-strong);
  background: #fffefa;
}

.amount-grid button:hover,
.provider-grid button:hover,
.provider-grid button.active {
  border-color: #2f2b27;
  background: #fbfaf6;
}

.knowledge-wrap.clean-docs {
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto 70px;
}

.knowledge-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0 20px;
}

.knowledge-title h1 {
  margin: 0;
  font-size: 30px;
}

.book-icon,
.tool-icon,
.metric-icon {
  background: #ece9e3;
  color: #5e5a53;
}

.knowledge-tabs {
  height: 46px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 4px;
  margin-bottom: 22px;
  border: 1px solid var(--ds-line);
  border-radius: 13px;
  background: #eeece7;
}

.knowledge-tabs a {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #5d5852;
  font-weight: 650;
}

.knowledge-tabs a.active,
.knowledge-tabs a:hover {
  background: #fffefa;
  color: var(--ds-ink);
  box-shadow: 0 1px 3px rgba(20, 18, 16, .08);
}

.step-card {
  display: flex;
  gap: 18px;
  padding: 20px;
  margin-bottom: 24px;
}

.step-card p {
  margin-bottom: 12px;
}

.step-num {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #ece9e3;
  color: var(--ds-ink);
  font-weight: 700;
}

.step-num.dark {
  background: #2f2b27;
  color: #fffefa;
}

.tool-section {
  margin-bottom: 24px;
}

.tool-section h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.tool-card {
  min-height: 76px;
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr 18px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--ds-line);
  border-radius: 13px;
  background: var(--ds-surface-raised);
}

.tool-card:hover {
  border-color: var(--ds-line-strong);
  background: #fdfbf6;
}

.tool-card strong,
.tool-card small {
  grid-column: 2;
}

.tool-card strong {
  align-self: end;
}

.tool-card small {
  align-self: start;
  color: var(--ds-muted);
}

.tool-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
}

.tool-icon svg,
.card-arrow {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-arrow {
  color: var(--ds-muted);
}

.doc-detail-grid {
  display: grid;
  gap: 14px;
  margin-bottom: 28px;
}

.doc-detail-card {
  padding: 18px;
}

.doc-detail-card.warning {
  background: #fffdf2;
  border-color: #efe0a8;
}

.doc-detail-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ds-line);
}

.doc-detail-head h2,
.doc-detail-head p {
  margin: 0;
}

.doc-steps {
  counter-reset: doc-step;
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.doc-steps li {
  counter-increment: doc-step;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--ds-line);
  border-radius: 12px;
  background: #fbfaf6;
}

.doc-steps li::before {
  content: counter(doc-step);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ece9e3;
  color: #5f5a53;
  font-weight: 700;
}

.doc-steps b,
.doc-steps span,
.doc-steps code {
  grid-column: 2;
}

.doc-steps code,
.tips-grid code {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border-radius: 9px;
  color: #2c2925;
  white-space: pre-wrap;
}

.doc-detail-card pre {
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  overflow-x: auto;
}

.doc-detail-card pre code {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.doc-note {
  padding: 12px 14px;
  border: 1px solid #efd98a;
  border-radius: 12px;
  background: #fff8db;
  color: #8a5b00;
}

.knowledge-models,
.api-reference,
.faq-block,
.tips-grid {
  margin-top: 28px;
}

.knowledge-model-list {
  display: grid;
  gap: 10px;
}

.knowledge-model-list article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  padding: 16px;
  border: 1px solid var(--ds-line);
  border-radius: 13px;
  background: var(--ds-surface-raised);
}

.knowledge-model-list p,
.knowledge-model-list span {
  margin: 0;
  color: var(--ds-muted);
}

.knowledge-model-list span {
  grid-column: 1 / -1;
}

.api-reference-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  margin-bottom: 16px;
}

.api-reference-head h2,
.api-reference-head p {
  margin: 0;
}

.api-reference-head code {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  background: #f7f4ee;
}

.api-reference-head code span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--ds-jade);
}

.api-card-list {
  display: grid;
  gap: 14px;
}

.api-card-list article {
  position: relative;
  padding: 20px 70px 20px 20px;
}

.api-card-list h3 {
  display: inline;
  margin-left: 14px;
  font-family: var(--ds-font-mono);
  font-size: 19px;
}

.api-card-list p {
  margin: 12px 0 0;
}

.api-card-list b {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eeece7;
  color: #68625b;
  font-size: 11px;
}

.method {
  display: inline-flex;
  min-width: 52px;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
}

.method.post {
  background: #e8f0ff;
  color: #2664c4;
}

.method.get {
  background: #e6f8ef;
  color: #159663;
}

.faq-block > h2,
.faq-block > p,
.tips-grid > div {
  margin-bottom: 14px;
}

.faq-block details {
  padding: 0;
  margin-bottom: 10px;
  overflow: hidden;
}

.faq-block summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  cursor: pointer;
  font-weight: 650;
}

.faq-block summary::after {
  content: "⌄";
  color: var(--ds-muted);
}

.faq-block p {
  padding: 0 16px 16px;
  margin: 0;
  border-top: 1px solid var(--ds-line);
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.tips-grid > div {
  grid-column: 1 / -1;
}

.tips-grid article {
  padding: 18px;
}

.tips-grid h3,
.tips-grid p {
  margin-bottom: 10px;
}

.tip-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.page-chat .app-page {
  height: calc(100dvh - 74px);
}

.page-chat .chat-layout {
  height: 100%;
}

@media (max-width: 980px) {
  .top-actions .top-chip:not(.balance-chip),
  .language-chip {
    display: none;
  }

  .tool-grid,
  .tips-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .announcement-strip {
    display: none;
  }

  .profile-menu {
    display: none;
  }

  .app-page {
    width: min(100% - 28px, 680px);
    margin-top: 18px;
  }

  .knowledge-wrap.clean-docs {
    width: min(100% - 28px, 680px);
  }

  .knowledge-tabs {
    grid-template-columns: repeat(3, 1fr);
    height: auto;
  }

  .api-reference-head {
    flex-direction: column;
  }

  .api-reference-head code {
    align-self: flex-start;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .api-card-list article {
    padding-right: 20px;
  }

  .api-card-list b {
    position: static;
    width: fit-content;
    margin-top: 12px;
    display: block;
  }

  .page-chat .app-page {
    height: calc(100dvh - 58px);
  }
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.admin-pool {
  display: grid;
  gap: 16px;
}

.pool-control-card {
  display: grid;
  gap: 16px;
  overflow: visible;
}

.pool-control-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 12px;
}

.pool-control-summary {
  display: grid;
  align-content: center;
  gap: 10px;
  min-height: 190px;
  padding: 18px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .76), rgba(255, 255, 255, .36)),
    var(--ds-surface-muted);
  box-shadow: var(--ds-shadow-hairline);
}

.pool-control-summary.ok {
  border-color: rgba(93, 184, 114, .32);
}

.pool-control-summary.warn {
  border-color: rgba(212, 160, 23, .34);
}

.pool-control-summary.bad {
  border-color: rgba(198, 69, 69, .32);
}

.pool-control-summary strong {
  font-size: 20px;
  font-weight: var(--ds-weight-semibold);
}

.pool-control-summary small {
  color: var(--ds-muted);
  line-height: 1.42;
}

.pool-control-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.pool-control-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pool-control-metrics article {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 90px;
  padding: 13px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
  box-shadow: var(--ds-shadow-hairline);
}

.pool-control-metrics article.ok {
  border-color: rgba(93, 184, 114, .28);
}

.pool-control-metrics article.warn {
  border-color: rgba(212, 160, 23, .3);
}

.pool-control-metrics article.bad {
  border-color: rgba(198, 69, 69, .3);
}

.pool-control-metrics span,
.pool-control-metrics small {
  color: var(--ds-muted);
}

.pool-control-metrics strong {
  font-size: 24px;
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0;
}

.pool-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pool-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 13px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
  color: var(--ds-ink);
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.pool-check:hover {
  transform: translateY(-1px);
  border-color: var(--ds-line-strong);
  background: #fff;
  box-shadow: var(--ds-shadow-card);
}

.pool-check strong,
.pool-check small {
  display: block;
}

.pool-check strong {
  font-weight: var(--ds-weight-semibold);
}

.pool-check small {
  margin-top: 3px;
  color: var(--ds-muted);
  line-height: 1.35;
}

.pool-check b {
  align-self: center;
  color: var(--ds-muted);
  font-size: 13px;
  font-weight: var(--ds-weight-semibold);
}

.pool-check.bad {
  border-color: rgba(198, 69, 69, .28);
}

.pool-check.warn {
  border-color: rgba(212, 160, 23, .3);
}

.pool-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pool-notes article {
  min-height: 92px;
  padding: 13px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: rgba(255, 255, 255, .5);
}

.pool-notes strong,
.pool-notes small {
  display: block;
}

.pool-notes strong {
  font-weight: var(--ds-weight-semibold);
}

.pool-notes small {
  margin-top: 4px;
  color: var(--ds-muted);
  line-height: 1.36;
}

.admin-readiness-card {
  overflow: visible;
}

.admin-ux-card {
  overflow: visible;
}

.readiness-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.readiness-item {
  display: grid;
  gap: 7px;
  min-height: 118px;
  padding: 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
}

.readiness-item span {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: var(--ds-jade);
}

.readiness-item.warn span {
  background: var(--ds-amber);
}

.readiness-item.bad span {
  background: var(--ds-rose);
}

.readiness-item strong {
  font-weight: var(--ds-weight-semibold);
}

.readiness-item small {
  color: var(--ds-muted);
  line-height: 1.35;
}

.ux-audit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ux-audit-item {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 10px;
  min-height: 86px;
  padding: 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
}

.ux-audit-item > span {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 99px;
  background: var(--ds-jade);
}

.ux-audit-item.warn > span {
  background: var(--ds-amber);
}

.ux-audit-item.bad > span {
  background: var(--ds-rose);
}

.ux-audit-item strong,
.ux-audit-item small {
  display: block;
}

.ux-audit-item small {
  margin-top: 4px;
  color: var(--ds-muted);
  line-height: 1.35;
}

.route-map-card {
  overflow: visible;
}

.link-audit-card {
  overflow: visible;
}

.link-audit-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.link-audit-preview article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
  box-shadow: var(--ds-shadow-hairline);
}

.link-audit-preview strong,
.link-audit-preview small {
  display: block;
}

.link-audit-preview strong {
  font-weight: var(--ds-weight-semibold);
}

.link-audit-preview small {
  margin-top: 3px;
  color: var(--ds-muted);
  line-height: 1.35;
}

.route-map-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.route-map-group {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
  box-shadow: var(--ds-shadow-hairline);
}

.route-map-group.warn {
  border-color: rgba(212, 160, 23, .3);
  background: linear-gradient(180deg, rgba(255, 249, 231, .8), rgba(255, 255, 255, .28));
}

.route-map-group.bad {
  border-color: rgba(198, 69, 69, .28);
  background: linear-gradient(180deg, rgba(255, 238, 240, .8), rgba(255, 255, 255, .28));
}

.route-map-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.route-map-head strong,
.route-map-head small {
  display: block;
}

.route-map-head strong {
  font-size: 16px;
  font-weight: var(--ds-weight-semibold);
}

.route-map-head small {
  margin-top: 4px;
  color: var(--ds-muted);
  line-height: 1.35;
}

.route-map-head b {
  min-width: 44px;
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-pill);
  background: rgba(255, 255, 255, .72);
  font-size: 13px;
  font-weight: var(--ds-weight-semibold);
}

.route-list {
  display: grid;
  gap: 8px;
}

.route-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, .62);
  color: var(--ds-ink);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.route-item:hover {
  transform: translateY(-1px);
  border-color: var(--ds-line-strong);
  background: #fff;
}

.route-item.warn {
  border-color: rgba(212, 160, 23, .24);
}

.route-item.bad {
  border-color: rgba(198, 69, 69, .24);
}

.route-item strong,
.route-item small {
  display: block;
}

.route-item strong {
  font-weight: var(--ds-weight-semibold);
}

.route-item small {
  margin-top: 3px;
  color: var(--ds-muted);
  line-height: 1.3;
}

.route-item code {
  padding: 4px 7px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-xs);
  background: rgba(255, 255, 255, .68);
  color: var(--ds-muted);
  font-size: 12px;
}

.pool-head {
  align-items: flex-end;
}

.pool-head .admin-links form {
  margin: 0;
}

.pool-health.ok {
  border-color: rgba(93, 184, 114, .34);
}

.pool-health.warn {
  border-color: rgba(212, 160, 23, .38);
}

.pool-health.bad {
  border-color: rgba(198, 69, 69, .34);
}

.pool-settings {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.pool-settings span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-muted);
  color: var(--ds-muted);
  font-size: 13px;
}

.mini-meter {
  width: 128px;
  max-width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: #e5e1da;
  box-shadow: inset 0 0 0 1px rgba(42, 35, 29, .05);
}

.mini-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ds-jade);
}

.status-pill.ok {
  background: var(--ds-jade-soft);
  color: #247a45;
}

.status-pill.warn,
.status-pill.unknown,
.status-pill.pending {
  background: var(--ds-amber-soft);
  color: #8a6100;
}

.status-pill.bad,
.status-pill.rejected,
.status-pill.cancelled {
  background: var(--ds-rose-soft);
  color: var(--ds-rose);
}

.status-pill.paid {
  background: var(--ds-jade-soft);
  color: #247a45;
}

.status-pill.blocked {
  background: var(--ds-rose-soft);
  color: var(--ds-rose);
}

.error-text {
  color: var(--ds-rose) !important;
}

.key-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.key-actions form {
  margin: 0;
}

.dots.danger {
  color: var(--ds-rose);
}

.muted-cell {
  color: var(--ds-muted);
}

.admin-inline-input {
  width: min(190px, 100%);
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, .72);
  color: var(--ds-ink);
  font: inherit;
}

.admin-inline-input.short {
  width: 112px;
}

.admin-inline-input:focus {
  outline: 0;
  border-color: var(--ds-line-strong);
  box-shadow: var(--ds-focus-ring);
}

.admin-op-form,
.admin-promo-form {
  display: grid;
  gap: 10px;
}

.admin-tool-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ds-line);
}

.admin-maintenance-form {
  grid-template-columns: 1fr;
}

.admin-maintenance-form .soft-button {
  justify-self: start;
}

.admin-op-form {
  grid-template-columns: .7fr .9fr minmax(0, 1.5fr) auto;
}

.admin-promo-form {
  grid-template-columns: 1fr .8fr .9fr .7fr auto;
  margin-bottom: 18px;
}

.admin-setting-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 18px;
}

.admin-setting-form label {
  display: grid;
  gap: 7px;
  font-weight: var(--ds-weight-medium);
}

.admin-setting-form .settings-note {
  align-self: center;
  margin: 0;
  color: var(--ds-muted);
  white-space: nowrap;
}

.admin-status-list {
  display: grid;
  gap: 10px;
}

.admin-status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
}

.admin-status strong {
  font-weight: var(--ds-weight-semibold);
}

.admin-status span {
  color: var(--ds-muted);
  text-align: right;
}

.admin-status.ok::before,
.admin-status.warn::before,
.admin-status.bad::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 99px;
  background: var(--ds-jade);
}

.admin-status.warn::before {
  background: var(--ds-amber);
}

.admin-status.bad::before {
  background: var(--ds-rose);
}

.event-feed-card {
  display: grid;
  gap: 16px;
}

.event-feed {
  display: grid;
  gap: 8px;
}

.event-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
  color: var(--ds-ink);
}

.event-item:hover {
  border-color: var(--ds-line-strong);
  background: var(--ds-surface-raised);
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-card);
}

.event-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ds-muted);
  box-shadow: 0 0 0 5px rgba(127, 118, 106, .12);
}

.event-dot.ok {
  background: var(--ds-green);
  box-shadow: 0 0 0 5px rgba(16, 185, 129, .12);
}

.event-dot.warn {
  background: var(--ds-amber);
  box-shadow: 0 0 0 5px rgba(245, 158, 11, .14);
}

.event-dot.bad {
  background: var(--ds-rose);
  box-shadow: 0 0 0 5px rgba(244, 63, 94, .13);
}

.event-item strong,
.event-item small,
.event-item em {
  display: block;
}

.event-item strong {
  font-size: 14px;
  font-weight: var(--ds-weight-semibold);
  line-height: 1.25;
}

.event-item small {
  margin-top: 3px;
  color: var(--ds-muted);
  line-height: 1.35;
}

.event-item em {
  margin-top: 3px;
  color: var(--ds-muted);
  font-size: 12px;
  font-style: normal;
}

.event-item time {
  color: var(--ds-muted);
  font-size: 12px;
  white-space: nowrap;
}

.page-admin .table-card {
  overflow-x: auto;
}

.page-admin .table-card table {
  min-width: 760px;
}

.page-admin .dots {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
}

.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.row-actions form {
  margin: 0;
}

.admin-user-link {
  display: inline-grid;
  gap: 2px;
}

.admin-user-link:hover strong {
  color: var(--ds-brand-hover);
}

.admin-user-shell {
  display: grid;
  gap: 16px;
}

.admin-user-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
  padding: 22px 24px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-raised);
}

.admin-user-hero h1 {
  margin: 4px 0 6px;
  font-family: var(--ds-font-sans);
  font-size: 30px;
}

.admin-user-hero p {
  margin: 0;
}

.back-link {
  color: var(--ds-muted);
  font-weight: var(--ds-weight-medium);
}

.back-link:hover {
  color: var(--ds-ink);
}

.danger-soft {
  color: var(--ds-rose);
}

.admin-user-action-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 10px;
  align-items: end;
}

.admin-user-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-user-facts.single {
  grid-template-columns: 1fr;
  margin-bottom: 12px;
}

.admin-user-facts div {
  min-height: 78px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
}

.admin-user-facts span {
  color: var(--ds-muted);
}

.admin-user-facts strong {
  font-size: 20px;
}

.admin-user-self-test-card {
  display: grid;
  gap: 16px;
  border-color: rgba(36, 31, 27, .15);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .44)),
    var(--ds-surface-raised);
}

.admin-user-self-test-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 12px;
}

.admin-user-readiness-score {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 188px;
  padding: 18px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-muted);
  box-shadow: var(--ds-shadow-hairline);
}

.admin-user-readiness-score.ok {
  border-color: rgba(93, 184, 114, .3);
}

.admin-user-readiness-score.warn {
  border-color: rgba(212, 160, 23, .34);
}

.admin-user-readiness-score.bad {
  border-color: rgba(198, 69, 69, .32);
}

.admin-user-readiness-score > span {
  font-size: 42px;
  line-height: 1;
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0;
}

.admin-user-readiness-score strong,
.admin-user-readiness-score small,
.admin-user-readiness-score b {
  display: block;
}

.admin-user-readiness-score strong {
  font-size: 18px;
  font-weight: var(--ds-weight-semibold);
}

.admin-user-readiness-score small {
  color: var(--ds-muted);
  line-height: 1.38;
}

.admin-user-readiness-score div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-user-readiness-score b {
  padding: 5px 8px;
  border-radius: var(--ds-radius-pill);
  background: rgba(255, 255, 255, .62);
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: var(--ds-weight-semibold);
}

.admin-user-readiness-modules,
.admin-user-readiness-actions {
  display: grid;
  gap: 8px;
}

.admin-user-readiness-modules {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-user-readiness-actions {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-user-readiness-module,
.admin-user-readiness-action {
  color: inherit;
  text-decoration: none;
}

.admin-user-readiness-module {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 8px;
  min-height: 188px;
  padding: 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: rgba(255, 255, 255, .58);
}

.admin-user-readiness-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  min-height: 82px;
  padding: 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
}

.admin-user-readiness-module:hover,
.admin-user-readiness-action:hover {
  border-color: var(--ds-line-strong);
  background: var(--ds-surface-raised);
}

.admin-user-readiness-module.ok,
.admin-user-readiness-action.ok {
  border-color: rgba(93, 184, 114, .25);
}

.admin-user-readiness-module.warn,
.admin-user-readiness-action.warn {
  border-color: rgba(212, 160, 23, .3);
}

.admin-user-readiness-module.bad,
.admin-user-readiness-action.bad {
  border-color: rgba(198, 69, 69, .28);
}

.admin-user-readiness-module strong,
.admin-user-readiness-module small,
.admin-user-readiness-module b,
.admin-user-readiness-action strong,
.admin-user-readiness-action small,
.admin-user-readiness-action b {
  display: block;
}

.admin-user-readiness-module strong,
.admin-user-readiness-action strong {
  font-weight: var(--ds-weight-semibold);
}

.admin-user-readiness-module small,
.admin-user-readiness-action small {
  color: var(--ds-muted);
  line-height: 1.34;
}

.admin-user-readiness-module b {
  grid-column: 2;
  align-self: end;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: var(--ds-weight-semibold);
}

.admin-user-readiness-action b {
  align-self: center;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: var(--ds-weight-semibold);
}

.admin-user-timeline-card {
  display: grid;
  gap: 16px;
}

.admin-user-timeline-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.admin-user-timeline-summary div {
  display: grid;
  gap: 6px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
}

.admin-user-timeline-summary span {
  color: var(--ds-muted);
  font-size: 12px;
}

.admin-user-timeline-summary strong {
  font-size: 22px;
  font-weight: var(--ds-weight-semibold);
}

.admin-user-timeline-list {
  display: grid;
  gap: 8px;
}

.admin-user-timeline-item {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto 132px;
  gap: 12px;
  align-items: center;
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: rgba(255, 255, 255, .56);
  color: inherit;
  text-decoration: none;
}

.admin-user-timeline-item:hover {
  border-color: var(--ds-line-strong);
  background: var(--ds-surface-raised);
}

.admin-user-timeline-item.ok {
  border-color: rgba(93, 184, 114, .22);
}

.admin-user-timeline-item.warn {
  border-color: rgba(212, 160, 23, .28);
}

.admin-user-timeline-item.bad {
  border-color: rgba(198, 69, 69, .24);
}

.admin-user-timeline-item strong,
.admin-user-timeline-item small,
.admin-user-timeline-item em,
.admin-user-timeline-item b,
.admin-user-timeline-item time {
  display: block;
}

.admin-user-timeline-item strong {
  font-weight: var(--ds-weight-semibold);
}

.admin-user-timeline-item small,
.admin-user-timeline-item em,
.admin-user-timeline-item time {
  color: var(--ds-muted);
  line-height: 1.34;
}

.admin-user-timeline-item em {
  margin-top: 2px;
  font-style: normal;
  font-size: 12px;
}

.admin-user-timeline-item b {
  justify-self: end;
  font-weight: var(--ds-weight-semibold);
  white-space: nowrap;
}

.admin-user-timeline-item time {
  justify-self: end;
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

.timeline-kind {
  justify-self: start;
  padding: 6px 9px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-muted);
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: var(--ds-weight-semibold);
}

.support-bundle-card {
  display: grid;
  gap: 18px;
  border-color: rgba(36, 31, 27, .16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .42)),
    var(--ds-surface-raised);
}

.support-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(280px, .9fr);
  gap: 12px;
}

.support-panel,
.support-ops-grid > article {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  box-shadow: 0 10px 24px rgba(42, 35, 29, .04);
}

.support-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.support-panel-head strong {
  font-size: 15px;
  font-weight: var(--ds-weight-semibold);
}

.support-panel-head > span {
  color: var(--ds-muted);
  font-size: 13px;
}

.support-copy-box {
  width: 100%;
  min-height: 142px;
  resize: vertical;
  padding: 13px 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-muted);
  color: var(--ds-ink);
  font: 13px/1.55 var(--ds-font-mono);
}

.support-actions-panel {
  align-content: start;
}

.support-action-list,
.support-mini-list {
  display: grid;
  gap: 8px;
}

.support-action-list a,
.support-mini-list > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-muted);
}

.support-action-list a {
  color: var(--ds-ink);
}

.support-action-list a:hover {
  border-color: var(--ds-line-strong);
  background: var(--ds-surface-raised);
}

.support-action-list b,
.support-mini-list b {
  display: block;
  font-size: 14px;
  line-height: 1.25;
}

.support-action-list small,
.support-mini-list small {
  display: block;
  margin-top: 3px;
  color: var(--ds-muted);
  font-size: 12px;
  line-height: 1.35;
}

.status-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--ds-muted);
  box-shadow: 0 0 0 4px rgba(127, 118, 106, .12);
}

.status-dot.ok {
  background: var(--ds-green);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
}

.status-dot.warn {
  background: var(--ds-amber);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, .15);
}

.status-dot.bad,
.status-dot.blocked {
  background: var(--ds-rose);
  box-shadow: 0 0 0 4px rgba(244, 63, 94, .13);
}

.support-ops-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.support-mini-list > div {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.support-error-text {
  max-width: 260px;
  color: var(--ds-rose);
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
}

.support-empty {
  padding: 12px;
  color: var(--ds-muted);
  font-size: 13px;
}

.self-test-card {
  display: grid;
  gap: 16px;
  overflow: visible;
}

.self-test-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 12px;
}

.self-test-score {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 176px;
  padding: 18px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .76), rgba(255, 255, 255, .34)),
    var(--ds-surface-muted);
  box-shadow: var(--ds-shadow-hairline);
}

.self-test-score.ok {
  border-color: rgba(93, 184, 114, .3);
}

.self-test-score.warn {
  border-color: rgba(212, 160, 23, .34);
}

.self-test-score.bad {
  border-color: rgba(198, 69, 69, .32);
}

.self-test-score > span {
  font-size: 42px;
  line-height: 1;
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0;
}

.self-test-score strong,
.self-test-score small {
  display: block;
}

.self-test-score strong {
  font-size: 18px;
  font-weight: var(--ds-weight-semibold);
}

.self-test-score small {
  color: var(--ds-muted);
  line-height: 1.38;
}

.self-test-score div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.self-test-score b {
  padding: 5px 8px;
  border-radius: var(--ds-radius-pill);
  background: rgba(255, 255, 255, .62);
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: var(--ds-weight-semibold);
}

.self-test-modules {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.self-test-module,
.self-test-action {
  color: inherit;
  text-decoration: none;
}

.self-test-module {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 8px;
  min-height: 118px;
  padding: 11px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
}

.self-test-module.ok,
.self-test-action.ok {
  border-color: rgba(93, 184, 114, .25);
}

.self-test-module.warn,
.self-test-action.warn {
  border-color: rgba(212, 160, 23, .3);
}

.self-test-module.bad,
.self-test-action.bad {
  border-color: rgba(198, 69, 69, .28);
}

.self-test-module strong,
.self-test-module small,
.self-test-module b,
.self-test-action strong,
.self-test-action small,
.self-test-action b {
  display: block;
}

.self-test-module strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--ds-weight-semibold);
}

.self-test-module small,
.self-test-action small {
  color: var(--ds-muted);
  line-height: 1.32;
}

.self-test-module b {
  grid-column: 2;
  align-self: end;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: var(--ds-weight-semibold);
}

.self-test-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.self-test-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 11px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: rgba(255, 255, 255, .58);
}

.self-test-action strong {
  font-weight: var(--ds-weight-semibold);
}

.self-test-action b {
  align-self: center;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: var(--ds-weight-semibold);
}

.self-support-card {
  display: grid;
  gap: 16px;
  border-color: rgba(36, 31, 27, .13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .44)),
    var(--ds-surface-raised);
}

.self-support-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr) minmax(0, 1fr);
  gap: 12px;
}

.self-support-card .support-copy-box {
  min-height: 124px;
}

.key-health-card {
  display: grid;
  gap: 16px;
  overflow: visible;
}

.key-health-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 12px;
}

.key-health-score {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 188px;
  padding: 18px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .38)),
    var(--ds-surface-muted);
  box-shadow: var(--ds-shadow-hairline);
}

.key-health-score.ok {
  border-color: rgba(93, 184, 114, .3);
}

.key-health-score.warn {
  border-color: rgba(212, 160, 23, .34);
}

.key-health-score.bad {
  border-color: rgba(198, 69, 69, .32);
}

.key-health-score > span {
  font-size: 42px;
  line-height: 1;
  font-weight: var(--ds-weight-semibold);
  letter-spacing: 0;
}

.key-health-score strong {
  font-size: 18px;
  font-weight: var(--ds-weight-semibold);
}

.key-health-score small {
  color: var(--ds-muted);
  line-height: 1.38;
}

.key-health-score code {
  width: fit-content;
  max-width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, .62);
  overflow-wrap: anywhere;
}

.key-health-checks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.key-health-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 8px;
  min-height: 96px;
  padding: 11px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
  color: var(--ds-ink);
  text-decoration: none;
}

.key-health-check.ok {
  border-color: rgba(93, 184, 114, .25);
}

.key-health-check.warn {
  border-color: rgba(212, 160, 23, .3);
}

.key-health-check.bad {
  border-color: rgba(198, 69, 69, .28);
}

.key-health-check strong,
.key-health-check small,
.key-health-check b {
  display: block;
}

.key-health-check strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--ds-weight-semibold);
}

.key-health-check small {
  color: var(--ds-muted);
  line-height: 1.32;
}

.key-health-check b {
  grid-column: 2;
  align-self: end;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: var(--ds-weight-semibold);
}

@media (max-width: 980px) {
  .admin-hero,
  .admin-grid,
  .admin-user-hero {
    grid-template-columns: 1fr;
  }

  .readiness-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-overview-grid,
  .ops-flow-grid,
  .pool-control-layout {
    grid-template-columns: 1fr;
  }

  .ops-health-grid,
  .billing-reconciliation-grid,
  .pool-control-metrics,
  .pool-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pool-checklist {
    grid-template-columns: 1fr;
  }

  .ux-audit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .route-map-grid {
    grid-template-columns: 1fr;
  }

  .link-audit-preview {
    grid-template-columns: 1fr;
  }

  .diagnostics-layout {
    grid-template-columns: 1fr;
  }

  .connection-lab-layout {
    grid-template-columns: 1fr;
  }

  .connection-snippets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chat-preflight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-setup-layout {
    grid-template-columns: 1fr;
  }

  .key-health-layout {
    grid-template-columns: 1fr;
  }

  .key-health-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .diagnostics-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .runbook-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-status-card {
    grid-template-columns: 1fr;
  }

  .user-status-checks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .user-status-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-hero {
    display: grid;
    align-items: start;
  }

  .admin-links {
    justify-content: flex-start;
  }

  .admin-op-form,
  .admin-promo-form,
  .admin-setting-form,
  .admin-tool-form,
  .admin-user-action-form {
    grid-template-columns: 1fr;
  }

  .admin-user-hero {
    display: grid;
    align-items: start;
  }

  .admin-user-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-alerts.structured,
  .alert-summary-grid {
    grid-template-columns: 1fr;
  }

  .support-grid,
  .support-ops-grid,
  .admin-user-self-test-layout,
  .self-support-layout,
  .self-test-layout {
    grid-template-columns: 1fr;
  }

  .admin-user-readiness-modules,
  .admin-user-readiness-actions,
  .admin-user-timeline-summary,
  .self-test-modules,
  .self-test-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-user-timeline-item {
    grid-template-columns: 76px minmax(0, 1fr) auto;
  }

  .admin-user-timeline-item time {
    grid-column: 2 / -1;
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 720px) {
  .admin-hero,
  .admin-user-hero {
    padding: 24px;
    border-radius: 28px;
  }

  .admin-hero h1 {
    font-size: 30px;
  }

  .admin-links .soft-button {
    min-height: 44px;
  }

  .readiness-grid {
    grid-template-columns: 1fr;
  }

  .ops-health-grid,
  .billing-reconciliation-grid,
  .ops-flow-steps,
  .pool-control-metrics,
  .pool-notes {
    grid-template-columns: 1fr;
  }

  .ux-audit-grid {
    grid-template-columns: 1fr;
  }

  .route-map-head,
  .route-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .route-map-head b,
  .route-item code {
    grid-column: 2;
    justify-self: start;
  }

  .diagnostics-checks {
    grid-template-columns: 1fr;
  }

  .runbook-grid {
    grid-template-columns: 1fr;
  }

  .runbook-item {
    min-height: 0;
  }

  .diagnostics-action {
    grid-template-columns: 1fr;
  }

  .diagnostics-action b {
    grid-column: 1;
    grid-row: auto;
  }

  .user-status-checks,
  .user-status-actions {
    grid-template-columns: 1fr;
  }

  .chat-preflight-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .chat-preflight-grid {
    grid-template-columns: 1fr;
  }

  .key-health-checks {
    grid-template-columns: 1fr;
  }

  .admin-user-readiness-modules,
  .admin-user-readiness-actions,
  .admin-user-timeline-summary,
  .self-test-modules,
  .self-test-actions {
    grid-template-columns: 1fr;
  }

  .admin-user-timeline-item {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .admin-user-timeline-item b,
  .admin-user-timeline-item time {
    justify-self: start;
    text-align: left;
  }

  .user-status-summary {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .user-status-summary span {
    width: 54px;
    height: 54px;
    font-size: 18px;
  }

  .page-admin .table-card {
    overflow-x: auto;
  }

  .admin-user-facts {
    grid-template-columns: 1fr;
  }

  .admin-alerts.structured .admin-alert {
    grid-template-columns: 1fr;
  }

  .admin-alert b {
    grid-column: 1;
    grid-row: auto;
  }

  .event-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .event-item time {
    grid-column: 2;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 15px;
  }

  .notice.key-secret,
  .notice.key-status {
    padding: 14px 16px;
    font-size: 14px;
  }

  .key-secret-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .notice.key-secret code {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
  }

  .quick-connect-grid,
  .connect-snippet {
    grid-template-columns: 1fr;
  }

  .connection-checks,
  .connection-snippets {
    grid-template-columns: 1fr;
  }

  .connection-check {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .connection-check b {
    grid-column: 2;
    justify-self: start;
  }

  .connection-score {
    min-height: 0;
  }

  .client-tabs,
  .client-field-grid {
    grid-template-columns: 1fr;
  }

  .client-config-box {
    min-height: 180px;
  }

  .connect-snippet {
    padding: 14px;
  }

  .connect-snippet .soft-button {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }

  .chat-empty h1 {
    font-family: var(--ds-font-sans);
    font-size: 29px;
    font-weight: 700;
  }

  .page-title-row h1,
  .knowledge-title h1 {
    font-size: 34px;
  }

  .page-title-row p,
  .knowledge-title p {
    font-size: 20px;
  }

  .page-keys .table-card,
  .page-transactions .table-card,
  .page-logs .table-card {
    padding: 26px 24px;
  }

  .page-keys .table-card .section-head,
  .page-transactions .table-card .section-head,
  .page-logs .table-card .section-head {
    grid-template-columns: 1fr;
    margin-bottom: 22px;
  }

  .page-keys .table-card thead,
  .page-transactions .table-card thead,
  .page-logs .table-card thead {
    display: none;
  }

  .page-keys .table-card tbody tr,
  .page-transactions .table-card tbody tr,
  .page-logs .table-card tbody tr {
    border-bottom: 1px solid var(--ds-line);
  }

  .page-keys .table-card tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 14px;
    padding: 14px 0;
  }

  .page-keys .table-card tbody tr:last-child,
  .page-transactions .table-card tbody tr:last-child,
  .page-logs .table-card tbody tr:last-child {
    border-bottom: 0;
  }

  .page-keys .table-card td,
  .page-transactions .table-card td,
  .page-logs .table-card td {
    display: block;
    border: 0;
    padding: 0;
    background: transparent;
    font-size: 16px;
    line-height: 1.25;
  }

  .page-keys .table-card td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .page-keys .table-card td:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .page-keys .table-card td:nth-child(5) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }

  .page-keys .table-card td:nth-child(6) {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: center;
  }

  .page-keys .table-card td code {
    max-width: 210px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .page-transactions .table-card tbody tr {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 8px 14px;
    padding: 16px 0;
  }

  .page-transactions .table-card td:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .page-transactions .table-card td:nth-child(2) {
    grid-column: 2;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .page-transactions .table-card td:nth-child(3) {
    grid-column: 3;
    justify-self: end;
    white-space: nowrap;
    font-family: var(--ds-font-mono);
  }

  .page-logs .table-card tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 16px 0;
  }

  .page-logs .table-card td:nth-child(2) {
    grid-column: 1;
    font-weight: 600;
  }

  .page-logs .table-card td:nth-child(4),
  .page-logs .table-card td:nth-child(5) {
    grid-column: 2;
    justify-self: end;
    white-space: nowrap;
  }

  .step-card {
    grid-template-columns: 48px 1fr;
    gap: 16px;
    padding: 24px;
  }

  .step-num {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .step-card h2,
  .tool-section h2,
  .guide-grid h2,
  .guide-panel h2 {
    font-size: 22px;
  }

  .step-card p,
  .guide-grid p,
  .guide-panel p {
    font-size: 18px;
  }

  .model-family-list button,
  .model-choice-list button {
    min-height: 50px;
    font-size: 20px;
    font-weight: 500;
  }
}

/* DESIGN.md final harmonization layer */
:root {
  --ds-radius-xl: 16px;
  --ds-surface-raised: #fffefb;
}

body {
  background: var(--ds-bg);
}

.app-page {
  width: min(1220px, calc(100% - 40px));
  margin-top: 26px;
}

.app-topbar {
  min-height: 54px;
  padding-inline: 16px;
  background: rgba(250, 249, 245, .96);
  border-bottom: 1px solid var(--ds-line);
}

.app-brand img {
  box-shadow: none;
}

.nav-pill,
.top-chip,
.quick-row,
.status-pill {
  border-radius: var(--ds-radius-md);
}

.nav-pill.active,
.knowledge-tabs a.active {
  background: var(--ds-surface-card);
}

.black-button,
.landing-button,
.ds-button.primary {
  background: var(--ds-brand);
  border-color: var(--ds-brand);
  color: #fff;
}

.black-button:hover,
.landing-button:hover,
.ds-button.primary:hover {
  background: var(--ds-brand-hover);
  border-color: var(--ds-brand-hover);
}

.soft-button,
.outline-button,
.ds-button.secondary,
.promo-row button,
.quick-row,
.top-chip,
.nav-pill,
.copy-input,
.search-input,
input,
textarea,
select {
  background: var(--ds-surface-raised);
}

.black-button,
.soft-button,
.muted-button,
.landing-button,
.outline-button,
.promo-row button,
.copy-input,
.search-input,
input,
textarea,
select {
  border-radius: var(--ds-radius-md);
}

.button-icon {
  width: 15px;
  height: 15px;
}

.page-title-row {
  margin: 8px 0 22px;
}

.page-title-row h1,
.chat-empty h1,
.knowledge-title h1,
.section-head h2,
.compact-card h2,
.activity-card h2,
.table-card h2,
.guide-grid h2,
.guide-panel h2,
.billing-modal h2,
.tool-section h2 {
  font-family: var(--ds-font-sans);
  letter-spacing: 0;
}

.page-title-row h1 {
  font-size: 28px;
  line-height: 1.12;
  font-weight: var(--ds-weight-semibold);
}

.page-title-row p,
.section-head p,
.compact-card p,
.guide-grid p,
.guide-panel p,
.tool-card small,
.activity-row small {
  color: var(--ds-muted);
}

.balance-hero,
.metric-card,
.activity-card,
.compact-card,
.table-card,
.step-card,
.guide-panel,
.guide-grid article,
.tool-card,
.ds-card {
  border-radius: var(--ds-radius-lg);
  border-color: var(--ds-line);
  background: var(--ds-surface-card);
  box-shadow: none;
}

.balance-hero {
  width: min(760px, 100%);
  min-height: 112px;
  padding: 22px 26px;
}

.balance-hero p {
  color: var(--ds-brand-hover);
}

.metric-card {
  min-height: 132px;
  padding: 24px 22px 20px;
}

.metric-card::after {
  content: none;
}

.metric-card p,
.eyebrow,
.section-kicker {
  text-transform: none;
  font-weight: var(--ds-weight-medium);
}

.metric-icon {
  border-radius: var(--ds-radius-sm);
  box-shadow: none;
}

.activity-card {
  min-height: 0;
}

.activity-row {
  min-height: 44px;
}

.activity-row strong,
.model-bar,
td strong,
.amount-grid b,
.provider-grid strong {
  font-weight: var(--ds-weight-semibold);
}

.side-stack {
  gap: 16px;
}

.model-bar i {
  background: var(--ds-surface-dark);
}

.quick-row {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.table-card {
  padding: 22px;
  overflow-x: auto;
}

.table-card table {
  min-width: 760px;
}

.table-card th {
  color: var(--ds-muted);
}

.table-card td {
  color: var(--ds-ink);
}

.table-card tbody tr:last-child td {
  border-bottom: 0;
}

.status-pill {
  background: rgba(250, 249, 245, .8);
}

.chat-layout {
  min-height: calc(100vh - 112px);
  gap: 14px;
}

.chat-sidebar {
  background: transparent;
}

.chat-sidebar .black-button {
  background: var(--ds-surface-dark);
  border-color: var(--ds-surface-dark);
}

.chat-empty h1 {
  font-size: 25px;
  font-weight: var(--ds-weight-semibold);
}

.composer {
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-raised);
  box-shadow: none;
}

.chat-tool-button,
.send-button {
  box-shadow: none;
}

.send-button {
  background: var(--ds-surface-card);
}

.bubble.user {
  background: var(--ds-surface-dark);
}

.bubble.assistant {
  background: var(--ds-surface-card);
}

.knowledge-wrap {
  width: min(760px, 100%);
}

.knowledge-title h1 {
  font-size: 28px;
  font-weight: var(--ds-weight-semibold);
}

.knowledge-tabs {
  border-radius: var(--ds-radius-lg);
}

.step-num {
  background: var(--ds-surface-dark);
}

.tool-card::after {
  content: none;
}

.tool-card:hover,
.feature-grid article:hover {
  transform: none;
}

.tool-card:hover .tool-icon,
.feature-grid article:hover .feature-icon {
  background: var(--ds-surface-muted);
  color: var(--ds-muted);
}

.guide-panel code {
  padding: 10px 12px;
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-dark);
  color: var(--ds-on-dark);
}

.billing-modal {
  border-radius: var(--ds-radius-xl);
}

.amount-grid button,
.provider-grid button {
  background: var(--ds-surface-card);
  box-shadow: none;
}

.amount-grid button:hover,
.provider-grid button:hover {
  transform: none;
  box-shadow: none;
}

.amount-grid i {
  background: var(--ds-jade);
}

.custom-amount {
  background: var(--ds-surface-raised);
}

.muted-button {
  background: #a7a19a;
  border-color: #a7a19a;
}

.login-shell h1,
.ds-preview-hero h1 {
  font-family: var(--ds-font-display);
}

.auth-body,
.landing-body {
  background: var(--ds-bg);
}

.login-form input {
  border-radius: var(--ds-radius-lg);
}

.ds-preview-hero {
  background: var(--ds-surface-card);
  border-radius: var(--ds-radius-lg);
}

.ds-button.primary {
  font-weight: var(--ds-weight-medium);
}

.admin-grant-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
}

.page-admin .table-card table {
  min-width: 720px;
}

@media (max-width: 720px) {
  :root {
    --ds-radius-xl: 28px;
  }

  .app-page {
    width: calc(100% - 48px);
    margin-top: 22px;
  }

  .balance-hero,
  .metric-card,
  .activity-card,
  .compact-card,
  .table-card,
  .step-card,
  .guide-panel,
  .guide-grid article,
  .tool-card {
    border-radius: 28px;
  }

  .page-title-row h1,
  .knowledge-title h1 {
    font-size: 34px;
    font-weight: var(--ds-weight-bold);
  }

  .chat-empty h1 {
    font-size: 29px;
    font-weight: var(--ds-weight-bold);
  }

  .table-card {
    overflow: hidden;
  }

  .table-card table {
    min-width: 0;
  }

  .admin-grant-form {
    grid-template-columns: 1fr;
  }

  .activity-row.timeline {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .activity-row.timeline b,
  .activity-row.timeline time {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }
}

/* DESIGN.md product polish: final authority over legacy visual noise */
:where(h1, h2, h3, h4, p, a, button, input, textarea, select, th, td, small, code) {
  letter-spacing: 0;
}

:where(h1, h2, h3, h4, b, strong, th) {
  font-weight: var(--ds-weight-semibold);
}

:where(button, .black-button, .soft-button, .muted-button, .landing-button, .outline-button, .ds-button, .top-chip, .nav-pill) {
  font-weight: var(--ds-weight-medium);
}

.app-topbar,
.mobile-bottom-nav,
.mobile-drawer,
.account-sheet,
.model-sheet {
  box-shadow: none;
}

.app-topbar {
  backdrop-filter: blur(12px);
}

.nav-pill,
.top-chip {
  min-height: 34px;
  border-color: var(--ds-line);
}

.nav-pill.active,
.knowledge-tabs a.active {
  color: var(--ds-ink);
  border-color: var(--ds-line-strong);
  box-shadow: none;
}

.avatar,
.mobile-nav-avatar {
  background: var(--ds-surface-dark);
  color: var(--ds-on-dark);
  font-weight: var(--ds-weight-semibold);
}

.user-name {
  font-weight: var(--ds-weight-medium);
}

.profile-link {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px 0 0;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-pill);
}

.profile-link:hover,
.profile-link.active {
  background: var(--ds-surface);
  border-color: var(--ds-line);
}

.black-button,
.landing-button,
.ds-button.primary,
.promo-row button {
  background: var(--ds-brand);
  background-image: none;
  border-color: var(--ds-brand);
  color: var(--ds-on-primary, #fff);
  box-shadow: none;
  text-shadow: none;
}

.black-button:hover,
.landing-button:hover,
.ds-button.primary:hover,
.promo-row button:hover {
  background: var(--ds-brand-hover);
  border-color: var(--ds-brand-hover);
  transform: none;
}

.chat-sidebar .black-button,
.mobile-drawer-primary {
  background: var(--ds-surface-dark);
  border-color: var(--ds-surface-dark);
  color: var(--ds-on-dark);
}

.soft-button,
.outline-button,
.ds-button.secondary,
.quick-row,
.copy-input,
.search-input,
.login-form input,
input,
textarea,
select {
  border-color: var(--ds-line);
  box-shadow: none;
}

.soft-button:hover,
.outline-button:hover,
.quick-row:hover {
  background: var(--ds-surface-raised);
  border-color: var(--ds-line-strong);
  transform: none;
}

.muted-button,
.muted-button:disabled {
  background: var(--ds-line-strong);
  border-color: var(--ds-line-strong);
  color: var(--ds-muted);
  box-shadow: none;
}

.balance-hero,
.metric-card,
.activity-card,
.compact-card,
.table-card,
.step-card,
.guide-panel,
.guide-grid article,
.tool-card,
.ds-card,
.landing-section,
.api-strip,
.pricing-band,
.landing-final {
  background: var(--ds-surface-raised);
  border: 1px solid var(--ds-line);
  box-shadow: none;
}

.balance-hero {
  border-color: rgba(204, 120, 92, .28);
  background:
    radial-gradient(circle at 84% 16%, rgba(204, 120, 92, .08), transparent 34%),
    var(--ds-surface-raised);
}

.balance-hero h1 {
  font-family: var(--ds-font-sans);
  font-size: 38px;
  font-weight: var(--ds-weight-semibold);
  line-height: 1;
}

.balance-hero .eyebrow,
.metric-card p,
.section-kicker,
.preview-balance p {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: var(--ds-weight-medium);
  color: var(--ds-muted);
  letter-spacing: .08em;
}

.metric-card h2,
.compact-card h2,
.activity-card h2,
.table-card h2,
.guide-panel h2,
.guide-grid h2,
.tool-section h2 {
  color: var(--ds-ink);
}

.metric-card h2 {
  font-size: 24px;
  font-weight: var(--ds-weight-semibold);
}

.metric-card span,
.model-bar b,
.activity-row small,
.table-card small {
  color: var(--ds-muted);
}

.metric-icon,
.activity-icon,
.tool-icon,
.book-icon,
.ds-chip-icon,
.feature-icon {
  background: var(--ds-surface-muted);
  color: var(--ds-muted);
  box-shadow: none;
}

.metric-icon.green,
.activity-icon.up,
.positive {
  color: #1f9a73;
}

.metric-icon.warm {
  color: var(--ds-brand);
}

.metric-icon.violet {
  color: #8a62c9;
}

.activity-icon.down,
.negative {
  color: var(--ds-rose);
}

.activity-row {
  border-radius: var(--ds-radius-md);
}

.activity-row:hover {
  background: var(--ds-surface-muted);
}

.user-activity-timeline {
  display: grid;
  gap: 14px;
}

.activity-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.activity-summary-strip span {
  padding: 6px 9px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-muted);
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: var(--ds-weight-semibold);
}

.activity-row.timeline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 116px;
  gap: 12px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.activity-row.timeline:hover {
  border-color: var(--ds-line-strong);
}

.activity-row.timeline strong,
.activity-row.timeline small,
.activity-row.timeline em,
.activity-row.timeline b,
.activity-row.timeline time {
  display: block;
}

.activity-row.timeline small,
.activity-row.timeline em,
.activity-row.timeline time {
  color: var(--ds-muted);
  line-height: 1.34;
}

.activity-row.timeline em {
  margin-top: 2px;
  font-style: normal;
  font-size: 12px;
}

.activity-row.timeline b {
  justify-self: end;
  white-space: nowrap;
}

.activity-row.timeline time {
  justify-self: end;
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}

.activity-row.timeline .activity-icon {
  width: 38px;
  height: 38px;
  font-size: 11px;
  font-weight: var(--ds-weight-semibold);
}

.model-bar i,
.sparkline span {
  background: var(--ds-cobalt);
}

.service-strip {
  margin: -4px 0 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-raised);
}

.service-strip-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.service-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-jade);
  box-shadow: 0 0 0 5px var(--ds-jade-soft);
}

.service-strip.warn .service-dot {
  background: var(--ds-amber);
  box-shadow: 0 0 0 5px var(--ds-amber-soft);
}

.service-strip.bad .service-dot {
  background: var(--ds-rose);
  box-shadow: 0 0 0 5px var(--ds-rose-soft);
}

.service-strip strong {
  display: block;
  font-size: 15px;
  font-weight: var(--ds-weight-semibold);
}

.service-strip small {
  display: block;
  color: var(--ds-muted);
  line-height: 1.35;
}

.service-strip-items {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.service-pill {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: var(--ds-weight-medium);
  white-space: nowrap;
}

.service-pill.ok {
  color: #247a45;
  background: var(--ds-jade-soft);
  border-color: rgba(93, 184, 114, .24);
}

.service-pill.warn {
  color: #8a6810;
  background: var(--ds-amber-soft);
  border-color: rgba(212, 160, 23, .24);
}

.service-pill.bad {
  color: var(--ds-rose);
  background: var(--ds-rose-soft);
  border-color: rgba(198, 69, 69, .2);
}

.user-status-card {
  margin: -2px 0 16px;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-raised);
  box-shadow: var(--ds-shadow-hairline);
}

.user-status-summary {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
}

.user-status-summary span {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-dark);
  color: var(--ds-on-dark);
  font-size: 20px;
  font-weight: var(--ds-weight-semibold);
}

.user-status-summary strong,
.user-status-summary small {
  display: block;
}

.user-status-summary strong {
  font-weight: var(--ds-weight-semibold);
}

.user-status-summary small {
  margin-top: 4px;
  color: var(--ds-muted);
  line-height: 1.35;
}

.user-status-card.ok .user-status-summary span {
  background: var(--ds-jade-soft);
  color: #247a45;
}

.user-status-card.warn .user-status-summary span {
  background: var(--ds-amber-soft);
  color: #8a6810;
}

.user-status-card.blocked .user-status-summary span {
  background: var(--ds-rose-soft);
  color: var(--ds-rose);
}

.user-status-checks {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.user-status-check {
  min-width: 0;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 4px 7px;
  align-content: center;
  min-height: 74px;
  padding: 10px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
  color: inherit;
  text-decoration: none;
}

.user-status-check:hover {
  border-color: var(--ds-line-strong);
  background: #fff;
}

.user-status-check i {
  grid-row: 1 / span 2;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-jade);
}

.user-status-check.warn i {
  background: var(--ds-amber);
}

.user-status-check.bad i {
  background: var(--ds-rose);
}

.user-status-check span,
.user-status-check small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-status-check span {
  font-weight: var(--ds-weight-semibold);
}

.user-status-check small {
  color: var(--ds-muted);
  font-size: 12px;
}

.user-status-actions {
  display: grid;
  align-content: center;
  gap: 8px;
}

.user-status-actions .soft-button {
  justify-content: center;
}

.chat-readiness {
  width: min(760px, 100%);
  margin: 0 auto 14px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-raised);
}

.chat-readiness-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-readiness-main strong {
  display: block;
  font-size: 14px;
  font-weight: var(--ds-weight-semibold);
}

.chat-readiness-main small {
  display: block;
  color: var(--ds-muted);
  line-height: 1.35;
}

.chat-readiness-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.chat-readiness .soft-button {
  min-height: 30px;
}

.chat-preflight-panel {
  width: min(760px, 100%);
  margin: 0 auto 14px;
  padding: 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .36)),
    var(--ds-surface-muted);
}

.chat-preflight-panel.ok {
  border-color: rgba(93, 184, 114, .26);
}

.chat-preflight-panel.warn {
  border-color: rgba(212, 160, 23, .3);
}

.chat-preflight-panel.bad {
  border-color: rgba(198, 69, 69, .28);
}

.chat-preflight-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.chat-preflight-head strong,
.chat-preflight-head small {
  display: block;
}

.chat-preflight-head strong {
  font-weight: var(--ds-weight-semibold);
}

.chat-preflight-head small {
  margin-top: 3px;
  color: var(--ds-muted);
  line-height: 1.35;
}

.chat-preflight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.chat-preflight-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  min-height: 82px;
  padding: 10px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, .62);
  color: var(--ds-ink);
  text-decoration: none;
}

.chat-preflight-check.ok {
  border-color: rgba(93, 184, 114, .24);
}

.chat-preflight-check.warn {
  border-color: rgba(212, 160, 23, .3);
}

.chat-preflight-check.bad {
  border-color: rgba(198, 69, 69, .28);
}

.chat-preflight-check strong,
.chat-preflight-check small,
.chat-preflight-check b {
  display: block;
}

.chat-preflight-check strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--ds-weight-semibold);
}

.chat-preflight-check small {
  color: var(--ds-muted);
  line-height: 1.3;
}

.chat-preflight-check b {
  grid-column: 2;
  color: var(--ds-muted);
  font-size: 12px;
  font-weight: var(--ds-weight-semibold);
}

.bubble.error {
  border-color: rgba(198, 69, 69, .22);
  background: var(--ds-rose-soft);
  color: #912b2b;
}

.composer:has(textarea:disabled) {
  opacity: .82;
}

.onboarding-card {
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-raised);
}

.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.onboarding-step {
  min-height: 104px;
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: 1fr auto;
  gap: 8px 10px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-card);
}

.onboarding-step:hover {
  border-color: var(--ds-line-strong);
  background: var(--ds-surface);
}

.onboarding-step > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-dark);
  color: var(--ds-on-dark);
  font-weight: var(--ds-weight-semibold);
}

.onboarding-step.done > span {
  background: var(--ds-jade-soft);
  color: #247a45;
}

.onboarding-step strong {
  display: block;
  margin-bottom: 4px;
}

.onboarding-step small {
  display: block;
  color: var(--ds-muted);
  line-height: 1.35;
}

.onboarding-step b {
  grid-column: 2;
  align-self: end;
  color: var(--ds-brand-hover);
  font-size: 12px;
  font-weight: var(--ds-weight-semibold);
}

.onboarding-step.done b {
  color: #247a45;
}

.compact-empty {
  padding: 16px 0 4px;
  line-height: 1.45;
}

.not-found-shell {
  width: min(760px, 100%);
  display: grid;
  gap: 14px;
  margin: 56px auto 0;
}

.not-found-card {
  padding: 34px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-xl);
  background: var(--ds-surface-raised);
}

.not-found-card h1 {
  margin-bottom: 10px;
  font-size: 34px;
}

.not-found-card p:not(.eyebrow) {
  max-width: 560px;
  line-height: 1.55;
}

.not-found-actions,
.not-found-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.not-found-links {
  padding: 0 4px;
}

.not-found-links a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface);
  color: var(--ds-muted);
}

.settings-shell {
  display: grid;
  gap: 16px;
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.settings-profile-card {
  display: grid;
  gap: 18px;
}

.settings-user-row {
  display: flex;
  align-items: center;
  gap: 13px;
}

.settings-user-row h2 {
  margin-bottom: 2px;
  font-size: 22px;
}

.settings-user-row p {
  margin: 0;
}

.settings-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.settings-facts div {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
}

.settings-facts span,
.settings-note {
  color: var(--ds-muted);
}

.settings-facts strong {
  overflow-wrap: anywhere;
}

.settings-password-form,
.copy-stack {
  display: grid;
  gap: 12px;
}

.settings-password-form label,
.copy-stack label {
  display: grid;
  gap: 7px;
  font-weight: var(--ds-weight-medium);
}

.copy-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.copy-line input {
  font-family: var(--ds-font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.settings-note {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-muted);
  line-height: 1.45;
}

.settings-link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.settings-link-grid a {
  min-height: 86px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-card);
}

.settings-link-grid a:hover {
  border-color: var(--ds-line-strong);
  background: var(--ds-surface);
}

.settings-link-grid small {
  color: var(--ds-muted);
}

@media (max-width: 980px) {
  .key-create-form,
  .key-edit-form,
  .referral-hero,
  .referral-layout,
  .settings-grid,
  .settings-link-grid {
    grid-template-columns: 1fr;
  }

  .settings-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .referral-hero {
    padding: 22px;
    border-radius: 28px;
  }

  .referral-hero code {
    font-size: 13px;
  }

  .referral-mini-stats,
  .referral-copy-row {
    grid-template-columns: 1fr;
  }

  .page-referrals .table-card table,
  .page-referrals .table-card thead,
  .page-referrals .table-card tbody {
    width: 100%;
    min-width: 0;
    display: block;
  }

  .page-referrals .table-card thead {
    display: none;
  }

  .page-referrals .table-card tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ds-line);
  }

  .page-referrals .table-card tbody tr:last-child {
    border-bottom: 0;
  }

  .page-referrals .table-card td {
    display: block;
    border: 0;
    padding: 0;
    background: transparent;
  }

  .page-referrals .table-card td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .page-referrals .table-card td:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .page-referrals .table-card td:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .page-referrals .table-card td:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }

  .page-keys .table-card tbody tr.key-edit-row {
    display: block;
    padding: 0 0 16px;
  }

  .page-keys .table-card tbody tr.key-edit-row td {
    display: block;
    grid-column: 1 / -1;
    padding: 14px 0 0;
  }

  .settings-shell .page-title-row {
    gap: 14px;
  }

  .settings-profile-card,
  .settings-shell .table-card {
    border-radius: 28px;
  }

  .settings-facts {
    grid-template-columns: 1fr;
  }

  .copy-line {
    grid-template-columns: 1fr;
  }

  .settings-user-row h2 {
    font-size: 24px;
  }
}

.table-card th {
  font-size: 12px;
  font-weight: var(--ds-weight-medium);
  color: var(--ds-muted);
}

.table-card td {
  border-color: var(--ds-line);
}

.status-pill,
.ds-badge {
  font-weight: var(--ds-weight-medium);
}

.chat-layout,
.chat-stage {
  background: transparent;
}

.chat-empty h1 {
  font-family: var(--ds-font-sans);
  font-weight: var(--ds-weight-semibold);
}

.chat-empty p {
  color: var(--ds-muted);
}

.composer {
  background: var(--ds-surface-raised);
  border-color: var(--ds-line-strong);
}

.chat-tool-button,
.model-pill,
.send-button {
  border-color: var(--ds-line);
  background: var(--ds-surface-muted);
}

.chat-tool-button.is-active,
.send-button:hover {
  background: var(--ds-surface-dark);
  border-color: var(--ds-surface-dark);
  color: var(--ds-on-dark);
}

.bubble {
  box-shadow: none;
}

.bubble.user {
  background: var(--ds-surface-dark);
  color: var(--ds-on-dark);
}

.bubble.assistant {
  background: var(--ds-surface-raised);
  border-color: var(--ds-line);
}

.knowledge-tabs {
  background: var(--ds-surface-muted);
  border-color: var(--ds-line);
  box-shadow: none;
}

.guide-panel code,
.copy-input code,
code {
  border-radius: var(--ds-radius-sm);
}

.modal-backdrop {
  background: rgba(20, 20, 19, .38);
}

.billing-modal {
  background: var(--ds-surface-raised);
  box-shadow: var(--ds-shadow-modal);
}

.amount-grid button,
.provider-grid button,
.custom-amount {
  border-color: var(--ds-line);
  background: var(--ds-surface-raised);
}

.provider-grid button:first-child {
  border-color: var(--ds-line);
  box-shadow: none;
}

.provider-grid button.active {
  border-color: var(--ds-ink);
  box-shadow: 0 0 0 1px var(--ds-ink), var(--ds-shadow-control);
}

.pay-logo {
  box-shadow: none;
}

.landing-body {
  background: var(--ds-bg);
}

.landing-nav,
.hero-product {
  box-shadow: none;
}

.landing-hero {
  min-height: calc(100vh - 132px);
}

.landing-hero h1,
.landing-section h2,
.landing-final h2,
.ds-preview-hero h1,
.login-shell h1 {
  font-weight: 500;
}

.hero-product,
.preview-balance,
.preview-grid article,
.price-cards article {
  background: var(--ds-surface-raised);
  border-color: var(--ds-line);
  box-shadow: none;
}

.preview-balance a {
  background: var(--ds-brand);
  color: var(--ds-on-primary, #fff);
  box-shadow: none;
}

.preview-balance a:hover {
  background: var(--ds-brand-hover);
}

.ds-display,
.ds-title {
  font-weight: 500;
}

.admin-grant-card input {
  min-height: 40px;
}

@media (max-width: 720px) {
  .app-page {
    width: min(100% - 48px, 560px);
  }

  .app-topbar,
  .page-chat .app-topbar {
    background: rgba(250, 249, 245, .94);
    border-bottom: 1px solid rgba(230, 223, 216, .72);
    backdrop-filter: blur(12px);
  }

  .mobile-menu-trigger {
    background: rgba(250, 249, 245, .72);
  }

  .balance-hero,
  .metric-card,
  .activity-card,
  .compact-card,
  .table-card,
  .step-card,
  .guide-panel,
  .guide-grid article,
  .tool-card {
    background: var(--ds-surface-raised);
  }

  .balance-hero h1 {
    font-size: 54px;
    font-weight: var(--ds-weight-semibold);
  }

  .onboarding-card {
    padding: 24px;
    border-radius: 28px;
  }

  .onboarding-steps {
    grid-template-columns: 1fr;
  }

  .onboarding-step {
    min-height: 94px;
    border-radius: 22px;
  }

  .metric-card h2 {
    font-size: 40px;
    font-weight: var(--ds-weight-semibold);
  }

  .page-title-row h1,
  .knowledge-title h1,
  .chat-empty h1 {
    font-weight: var(--ds-weight-semibold);
  }

  .mobile-bottom-nav {
    background: rgba(250, 249, 245, .96);
    border-top: 1px solid var(--ds-line);
    backdrop-filter: blur(14px);
  }

  .mobile-drawer,
  .account-sheet,
  .model-sheet {
    background: var(--ds-surface-raised);
  }

  .page-keys .table-card tbody tr,
  .page-transactions .table-card tbody tr,
  .page-logs .table-card tbody tr {
    background: transparent;
  }

  .page-title-row p,
  .knowledge-title p {
    font-size: 18px;
  }

  .table-card h2 {
    font-size: 24px;
  }

  .table-card .section-head p {
    font-size: 17px;
  }

  .page-keys .table-card,
  .page-transactions .table-card,
  .page-logs .table-card {
    padding: 24px 22px;
  }

  .page-keys .table-card td,
  .page-transactions .table-card td,
  .page-logs .table-card td {
    font-size: 15px;
    line-height: 1.3;
  }

  .page-keys .table-card td strong,
  .page-transactions .table-card td strong,
  .page-logs .table-card td strong {
    font-size: 18px;
  }

  .page-keys .table-card td small,
  .page-transactions .table-card td small,
  .page-logs .table-card td small {
    font-size: 13px;
  }

  .page-keys .table-card td code {
    max-width: 180px;
    font-size: 15px;
  }

  .page-keys .status-pill,
  .page-transactions .status-pill,
  .page-logs .status-pill {
    min-height: 30px;
    height: 30px;
    padding-inline: 12px;
    font-size: 14px;
  }

  .page-keys .dots {
    width: 34px;
    height: 34px;
  }

  .billing-modal {
    padding: 30px 26px calc(24px + env(safe-area-inset-bottom));
  }

  .billing-modal h2 {
    font-size: 25px;
  }

  .billing-modal > p {
    font-size: 18px;
  }

  .amount-grid button {
    min-height: 76px;
    border-radius: 18px;
  }

  .provider-grid button {
    min-height: 116px;
    border-radius: 18px;
  }

  .amount-grid b,
  .provider-grid strong {
    font-size: 19px;
  }

  .amount-grid span,
  .provider-grid small {
    font-size: 14px;
  }

  .custom-amount {
    min-height: 56px;
    border-radius: 18px;
    font-size: 18px;
  }

  .promo-row button {
    min-height: 48px;
    border-radius: 14px;
    font-size: 15px;
  }

  .model-family-list button,
  .model-choice-list button {
    font-size: 19px;
  }
}

.page-admin .status-pill.ok {
  background: var(--ds-jade-soft);
  color: #247a45;
}

.page-admin .status-pill.warn,
.page-admin .status-pill.unknown,
.page-admin .status-pill.pending {
  background: var(--ds-amber-soft);
  color: #8a6100;
}

.page-admin .status-pill.bad,
.page-admin .status-pill.rejected,
.page-admin .status-pill.cancelled {
  background: var(--ds-rose-soft);
  color: var(--ds-rose);
}

.page-admin .status-pill.paid {
  background: var(--ds-jade-soft);
  color: #247a45;
}

/* Final product skin: keep the Claudetop DESIGN.md cream surface, coral
   primary actions, and neutral typography after every compatibility layer. */
h1,
.login-shell h1,
.landing-hero h1,
.landing-section h2,
.landing-final h2,
.knowledge-title h1,
.page-title-row h1,
.ds-display,
.ds-title {
  font-family: var(--ds-font-sans);
}

.black-button,
.landing-button,
.ds-button.primary {
  background: var(--ds-brand);
  background-image: none;
  border-color: var(--ds-brand);
  color: var(--ds-on-primary, #fff);
  box-shadow: 0 1px 2px rgba(204, 120, 92, .12);
  text-shadow: none;
}

.black-button:hover,
.landing-button:hover,
.ds-button.primary:hover {
  background: var(--ds-brand-hover);
  border-color: var(--ds-brand-hover);
  color: var(--ds-on-primary, #fff);
  transform: none;
}

.promo-row button {
  background: var(--ds-brand);
  border-color: var(--ds-brand);
  color: var(--ds-on-primary, #fff);
}

.auth-body {
  background: var(--ds-bg);
}

.auth-page {
  min-height: 100dvh;
  display: grid;
  place-items: start center;
  padding: 86px 16px 48px;
}

.login-shell {
  width: min(384px, 100%);
}

.login-shell h1 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}

.login-shell > p {
  margin-bottom: 32px;
}

.login-form input {
  height: 43px;
  border: 1px solid var(--ds-line-strong);
  border-radius: 17px;
  background: transparent;
  padding: 0 16px;
}

.login-form .black-button {
  min-height: 42px;
  border-radius: 13px;
}

.chat-sidebar .black-button,
.mobile-drawer-primary {
  background: var(--ds-surface-dark);
  border-color: var(--ds-surface-dark);
  color: var(--ds-on-dark);
}

.app-page {
  margin-top: 22px;
}

.balance-hero {
  margin-bottom: 20px;
  border-radius: 12px;
}

/* Wide saved chat surface. The user sees a normal ChatGPT/Claude-style chat;
   the backend handles pruning and model routing invisibly. */
.page-chat .app-page {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.page-chat .app-topbar {
  position: relative;
  z-index: 4;
}

.chat-layout {
  width: 100%;
  min-height: calc(100dvh - 54px);
  margin: 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0;
}

.chat-sidebar {
  min-height: calc(100dvh - 54px);
  padding: 18px 14px;
  border-right: 1px solid var(--ds-line);
  background: rgba(250, 249, 245, .76);
}

.chat-history-line {
  margin: 14px 0;
}

.chat-sessions {
  display: grid;
  gap: 5px;
}

.chat-session-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 4px;
  align-items: center;
}

.chat-session-button,
.chat-session-menu-button {
  height: 34px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ds-ink);
}

.chat-session-button {
  min-width: 0;
  padding: 0 10px;
  border-radius: 9px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.chat-session-button:hover,
.chat-session-button.active {
  background: var(--ds-surface-card);
  border-color: var(--ds-line);
}

.chat-session-actions {
  position: relative;
}

.chat-session-menu-button {
  width: 34px;
  border-radius: 9px;
  color: var(--ds-muted);
  font-size: 20px;
  line-height: 1;
}

.chat-session-menu-button:hover,
.chat-session-menu-button[aria-expanded="true"] {
  background: var(--ds-surface-card);
  border-color: var(--ds-line);
  color: var(--ds-ink);
}

.chat-session-menu {
  position: absolute;
  top: 38px;
  right: 0;
  z-index: 20;
  min-width: 154px;
  padding: 6px;
  border: 1px solid var(--ds-line);
  border-radius: 12px;
  background: var(--ds-surface-card);
  box-shadow: 0 12px 34px rgba(25, 22, 18, .14);
}

.chat-session-menu button {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ds-ink);
  text-align: left;
  font-weight: 600;
}

.chat-session-menu button:hover {
  background: var(--ds-surface-muted);
}

.chat-session-menu button.danger {
  color: var(--ds-rose);
}

.chat-session-edit,
.chat-session-confirm {
  grid-column: 1 / -1;
}

.chat-session-row.is-editing > .chat-session-button,
.chat-session-row.is-editing > .chat-session-actions {
  display: none;
}

.chat-session-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 4px;
  padding: 4px 0;
}

.chat-session-edit input {
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--ds-line-strong);
  border-radius: 10px;
  background: var(--ds-surface-card);
  color: var(--ds-ink);
  font: inherit;
}

.chat-session-edit button,
.chat-session-confirm button {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--ds-line);
  border-radius: 10px;
  background: var(--ds-surface-card);
  color: var(--ds-ink);
  font-weight: 700;
}

.chat-session-save,
.chat-session-confirm button.danger {
  border-color: transparent;
  background: var(--ds-ink);
  color: var(--ds-surface);
}

.chat-session-confirm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
  margin: 4px 0 6px;
  padding: 8px;
  border: 1px solid #ffd0d6;
  border-radius: 12px;
  background: var(--ds-rose-soft);
}

.chat-session-confirm span {
  min-width: 0;
  color: var(--ds-ink);
  font-size: 12px;
  font-weight: 700;
}

.chat-stage {
  min-height: calc(100dvh - 54px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: stretch;
  justify-items: stretch;
  padding: 0;
}

.chat-main-head {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 24px;
  border-bottom: 1px solid transparent;
}

.chat-main-head strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.chat-main-head span {
  display: block;
  margin-top: 1px;
  color: var(--ds-muted);
  font-size: 12px;
}

.chat-mobile-new {
  display: none;
}

.chat-scroll {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-items: end;
}

.messages {
  width: min(920px, calc(100% - 56px));
  max-height: none;
  min-height: 100%;
  padding: 28px 0 18px;
  justify-self: center;
  align-self: end;
}

.chat-empty {
  width: min(620px, calc(100% - 56px));
  align-self: center;
  justify-self: center;
  margin: 0;
}

.chat-empty h1 {
  font-size: 32px;
  line-height: 1.12;
  font-weight: 650;
}

.chat-empty p {
  font-size: 15px;
  line-height: 1.45;
}

.bubble {
  max-width: min(760px, 82%);
}

.composer {
  width: min(760px, calc(100% - 56px));
  justify-self: center;
  margin: 0 auto 24px;
  border-radius: 18px;
}

@media (max-width: 760px) {
  .chat-layout {
    grid-template-columns: 1fr;
  }

  .chat-sidebar {
    display: none;
  }

  .chat-stage {
    min-height: calc(100dvh - 118px);
  }

  .chat-mobile-new {
    display: inline-flex;
  }

  .messages,
  .chat-empty,
  .composer {
    width: calc(100% - 32px);
  }

  .composer {
    margin-bottom: 92px;
  }
}

/* Final chat viewport rules. Keep the chat as an app surface: the message
   history scrolls inside .chat-scroll, while the page itself stays fixed. */
body.page-chat {
  overflow: hidden;
}

.page-chat .app-page {
  width: 100%;
  max-width: none;
  height: calc(100dvh - 54px);
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.page-chat .notice {
  position: fixed;
  top: 58px;
  left: 50%;
  z-index: 30;
  transform: translateX(-50%);
}

.chat-layout {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}

.chat-sidebar {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.chat-sessions {
  min-height: 0;
  max-height: calc(100dvh - 142px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.chat-stage {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  padding: 0;
}

.chat-main-head {
  flex: 0 0 auto;
  grid-row: 1;
}

.chat-readiness {
  grid-row: 2;
  width: min(920px, calc(100% - 64px));
  margin: 12px auto 0;
}

.chat-scroll {
  grid-row: 3;
  height: 100%;
  min-height: 0;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  padding: 0 0 14px;
}

.messages {
  width: min(760px, calc(100% - 64px));
  min-height: 0;
  max-height: none;
  margin: 0 auto;
  padding: 24px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: visible;
}

.chat-empty {
  width: min(620px, calc(100% - 64px));
  min-height: 100%;
  margin: 0 auto;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.chat-empty.is-hidden {
  display: none;
}

.bubble {
  max-width: min(640px, 76%);
  overflow-wrap: anywhere;
  word-break: normal;
}

.composer {
  grid-row: 4;
  width: min(760px, calc(100% - 64px));
  min-height: 92px;
  margin: 0 auto 18px;
  padding: 9px 10px 10px;
  border-radius: 18px;
  align-self: end;
}

.composer textarea,
.composer textarea:hover,
.composer textarea:focus {
  width: 100%;
  min-height: 44px;
  max-height: 158px;
  padding: 8px 5px 4px !important;
  border: 0 !important;
  border-radius: 12px;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  line-height: 1.45;
}

.composer textarea::placeholder {
  color: var(--ds-muted);
}

.composer-footer {
  padding: 0 1px;
}

@media (max-width: 760px) {
  body.page-chat {
    overflow: hidden;
  }

  .page-chat .app-page {
    height: calc(100dvh - 58px);
  }

  .chat-layout {
    grid-template-columns: 1fr;
  }

  .chat-sidebar {
    display: none;
  }

  .chat-stage {
    min-height: 0;
  }

  .chat-main-head {
    padding: 10px 18px;
  }

  .messages,
  .chat-empty,
  .composer {
    width: calc(100% - 32px);
  }

  .composer {
    margin-bottom: 84px;
  }

  .bubble {
    max-width: min(100%, 92%);
  }
}

/* Clean reference-like user pages: API keys and knowledge base. */
.page-keys .app-page,
.page-knowledge .app-page {
  width: min(1390px, calc(100% - 36px));
}

.keys-title-row {
  align-items: center;
  margin-top: 22px;
}

.keys-title-row .black-button {
  min-width: 142px;
}

.keys-metrics {
  margin-bottom: 18px;
}

.keys-table-card {
  padding: 18px;
}

.keys-table-card .section-head {
  align-items: start;
}

.keys-table-card .search-input {
  width: min(280px, 100%);
  justify-self: end;
}

.keys-table-card table {
  min-width: 1040px;
}

.keys-table-card th,
.keys-table-card td {
  padding-block: 14px;
}

.key-actions {
  position: relative;
  width: 80px;
  text-align: right;
}

.key-menu {
  position: relative;
  display: inline-block;
}

.key-menu summary {
  list-style: none;
  cursor: pointer;
}

.key-menu summary::-webkit-details-marker {
  display: none;
}

.key-menu-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: 166px;
  padding: 6px;
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-raised);
  box-shadow: 0 18px 42px rgba(20, 20, 19, .14);
}

.key-menu-list button,
.key-menu-list form {
  width: 100%;
}

.key-menu-list button {
  min-height: 34px;
  justify-content: flex-start;
  padding: 0 10px;
  border: 0;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-ink);
  font: inherit;
  font-weight: var(--ds-weight-medium);
  text-align: left;
}

.key-menu-list button:hover {
  background: var(--ds-surface-muted);
}

.key-menu-list .danger {
  color: var(--ds-rose);
}

.key-edit-form {
  grid-template-columns: minmax(220px, 1fr) minmax(180px, .6fr) auto auto;
  align-items: end;
}

.key-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(20, 20, 19, .38);
  backdrop-filter: blur(10px);
}

.key-modal-backdrop[hidden] {
  display: none;
}

.key-modal {
  width: min(460px, 100%);
  border: 1px solid var(--ds-line-strong);
  border-radius: 18px;
  background: var(--ds-surface-raised);
  box-shadow: var(--ds-shadow-modal);
  overflow: hidden;
}

.key-modal .modal-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--ds-line);
}

.key-modal .modal-head h2,
.key-modal .modal-head p {
  margin: 0;
}

.key-modal .modal-head p {
  margin-top: 6px;
  color: var(--ds-muted);
}

.modal-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-muted);
  font-size: 22px;
  line-height: 1;
}

.modal-close:hover {
  background: var(--ds-surface-muted);
  color: var(--ds-ink);
}

.key-modal .key-create-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 20px 22px 22px;
}

.key-modal .key-create-form label {
  display: grid;
  gap: 7px;
  color: var(--ds-ink);
  font-weight: var(--ds-weight-medium);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.knowledge-tabs-shell {
  width: min(920px, 100%);
  display: grid;
  gap: 18px;
}

.knowledge-tabs {
  position: sticky;
  top: 54px;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
}

.knowledge-tabs button {
  min-height: 36px;
  border: 0;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-muted);
  font: inherit;
  font-weight: var(--ds-weight-semibold);
  cursor: pointer;
}

.knowledge-tabs button:hover {
  background: rgba(250, 249, 245, .66);
  color: var(--ds-ink);
}

.knowledge-tabs button.active {
  background: var(--ds-surface-raised);
  color: var(--ds-ink);
  box-shadow: var(--ds-shadow-control);
}

.knowledge-panel {
  display: grid;
  gap: 18px;
}

.knowledge-panel[hidden],
.doc-tool-panel[hidden] {
  display: none;
}

.doc-tool-grid .tool-card {
  cursor: pointer;
  text-align: left;
}

.doc-tool-grid .tool-card.active {
  border-color: var(--ds-line-strong);
  background: var(--ds-surface-raised);
  box-shadow: var(--ds-shadow-control);
}

.doc-tool-panels {
  display: grid;
  gap: 14px;
}

.doc-tool-panel {
  animation: dsFadeIn .12s ease-out;
}

@keyframes dsFadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

.knowledge-panel .faq-block,
.knowledge-panel .tips-grid {
  margin-top: 0;
}

.knowledge-panel .table-card {
  margin: 0;
}

@media (max-width: 760px) {
  .page-keys .app-page,
  .page-knowledge .app-page {
    width: min(100% - 28px, 560px);
  }

  .keys-title-row {
    align-items: start;
    gap: 14px;
  }

  .keys-title-row .black-button,
  .keys-table-card .search-input {
    width: 100%;
  }

  .keys-table-card table,
  .keys-table-card thead,
  .keys-table-card tbody {
    width: 100%;
    min-width: 0;
    display: block;
  }

  .keys-table-card thead {
    display: none;
  }

  .keys-table-card tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ds-line);
  }

  .keys-table-card tbody tr.key-edit-row {
    display: block;
  }

  .keys-table-card td {
    display: block;
    border: 0;
    padding: 0;
    background: transparent;
  }

  .keys-table-card td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .keys-table-card td:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .keys-table-card td:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
  }

  .keys-table-card td:nth-child(5) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .keys-table-card td:nth-child(6) {
    grid-column: 2;
    grid-row: 2 / span 2;
    justify-self: end;
  }

  .keys-table-card td:nth-child(4) {
    display: none;
  }

  .key-edit-form {
    grid-template-columns: 1fr;
  }

  .key-modal-backdrop {
    align-items: end;
    padding: 0;
  }

  .key-modal {
    width: 100%;
    border-radius: 22px 22px 0 0;
  }

  .knowledge-tabs {
    top: 58px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .doc-tool-grid {
    grid-template-columns: 1fr;
  }
}

/* Front polish pass: the chat should feel like one calm app surface, not a
   dashboard page squeezed into a messenger. Keep the operational chrome out of
   the way and let history + composer do the work. */
.page-chat .chat-main-head {
  display: none;
}

.page-chat .chat-stage {
  grid-template-rows: auto minmax(0, 1fr) auto;
  background:
    linear-gradient(180deg, rgba(250, 249, 245, .88), rgba(250, 249, 245, 0) 26%),
    var(--ds-bg);
}

.page-chat .chat-readiness {
  grid-row: 1;
  margin-top: 18px;
}

.page-chat .chat-scroll {
  grid-row: 2;
  padding: 0 0 18px;
}

.page-chat .messages {
  width: min(880px, calc(100% - 72px));
  padding: 34px 0 18px;
  gap: 16px;
}

.page-chat .chat-empty {
  width: min(620px, calc(100% - 72px));
  padding-bottom: clamp(28px, 9vh, 96px);
}

.page-chat .chat-empty h1 {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: 0;
}

.page-chat .chat-empty p {
  max-width: 500px;
  margin: 0;
  color: var(--ds-muted);
  font-size: 14px;
  line-height: 1.5;
}

.page-chat .bubble {
  max-width: min(720px, 74%);
  padding: 13px 16px;
  border: 1px solid var(--ds-line);
  border-radius: 14px;
  line-height: 1.5;
}

.page-chat .bubble.user {
  border-color: var(--ds-surface-dark);
  border-bottom-right-radius: 6px;
  background: var(--ds-surface-dark);
}

.page-chat .bubble.assistant {
  border-bottom-left-radius: 6px;
  background: rgba(250, 249, 245, .84);
}

.page-chat .bubble.error {
  border-color: rgba(198, 69, 69, .22);
  background: var(--ds-rose-soft);
}

.page-chat .composer {
  width: min(760px, calc(100% - 72px));
  min-height: 104px;
  margin-bottom: 22px;
  padding: 12px 13px 11px;
  border-color: var(--ds-line-strong);
  border-radius: 16px;
  background: rgba(250, 249, 245, .94);
  box-shadow: 0 1px 0 rgba(20, 20, 19, .03);
}

.page-chat .composer:focus-within {
  border-color: rgba(204, 120, 92, .45);
  box-shadow: var(--ds-focus);
}

.page-chat .composer textarea,
.page-chat .composer textarea:hover,
.page-chat .composer textarea:focus {
  min-height: 52px;
  padding: 2px 2px 8px !important;
  font-size: 14px;
  line-height: 1.5;
}

.page-chat .composer-footer {
  min-height: 32px;
  padding: 0;
}

.page-chat .chat-tool-button,
.page-chat .send-button {
  width: 32px;
  height: 32px;
}

.page-chat .model-pill {
  height: 32px;
  max-width: min(260px, 42vw);
  border-color: var(--ds-line);
  background: var(--ds-surface-muted);
  color: var(--ds-muted);
}

.page-chat .send-button {
  background: var(--ds-surface-strong);
  color: var(--ds-ink);
}

.page-chat .send-button:hover {
  background: var(--ds-surface-dark);
  border-color: var(--ds-surface-dark);
  color: var(--ds-on-dark);
}

.model-family-list button[hidden],
.model-choice-list button[hidden] {
  display: none;
}

.model-choice-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.model-choice-list button.active::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-brand);
}

@media (max-width: 760px) {
  .page-chat .chat-stage {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .page-chat .messages,
  .page-chat .chat-empty,
  .page-chat .composer {
    width: calc(100% - 32px);
  }

  .page-chat .messages {
    padding-top: 26px;
  }

  .page-chat .bubble {
    max-width: 92%;
  }

  .page-chat .composer {
    min-height: 112px;
    margin-bottom: 84px;
    border-radius: 18px;
  }

  .page-chat .composer textarea,
  .page-chat .composer textarea:hover,
  .page-chat .composer textarea:focus {
    min-height: 58px;
    font-size: 16px;
  }
}

/* Operational pages: logs and transactions should match the same clean density
   as keys instead of feeling like raw admin tables. */
.page-logs .app-page,
.page-transactions .app-page {
  width: min(1390px, calc(100% - 36px));
}

.page-logs .metric-grid,
.page-transactions .metric-grid {
  margin-bottom: 18px;
}

.page-logs .metric-card,
.page-transactions .metric-card {
  min-height: 112px;
  background: rgba(250, 249, 245, .72);
}

.page-logs .table-card,
.page-transactions .table-card {
  padding: 18px;
}

.page-transactions .payment-history-card {
  margin-bottom: 18px;
}

.page-logs .filters {
  justify-content: flex-end;
}

.page-logs .filters .search-input {
  width: min(260px, 100%);
}

.page-logs .filters select,
.page-transactions .section-head select {
  min-height: 38px;
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-raised);
  color: var(--ds-ink);
  padding: 0 34px 0 12px;
  font: inherit;
}

.page-logs [data-log-row][hidden],
.page-transactions [data-ledger-row][hidden] {
  display: none;
}

@media (max-width: 760px) {
  .page-logs .app-page,
  .page-transactions .app-page {
    width: min(100% - 28px, 560px);
  }

  .page-logs .filters,
  .page-transactions .section-head {
    align-items: stretch;
  }

  .page-logs .filters,
  .page-logs .filters .search-input,
  .page-logs .filters select,
  .page-transactions .section-head select {
    width: 100%;
  }
}

/* Dashboard and billing polish: user-facing actions stay deliberate. Choosing a
   top-up amount selects it first; submit becomes available only after that. */
.page-dashboard .section-head > a[href="/logs"] {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-ink);
  font-weight: var(--ds-weight-semibold);
  text-decoration: none;
}

.page-dashboard .section-head > a[href="/logs"]:hover {
  border-color: var(--ds-line-strong);
  background: var(--ds-surface-muted);
}

.billing-modal .amount-grid button {
  cursor: pointer;
}

.billing-modal .amount-grid button.active,
.billing-modal .amount-grid button[aria-pressed="true"] {
  border-color: var(--ds-brand);
  background: rgba(204, 120, 92, .08);
  box-shadow: 0 0 0 1px rgba(204, 120, 92, .32), var(--ds-shadow-control);
}

.billing-modal .amount-grid button.active b,
.billing-modal .amount-grid button[aria-pressed="true"] b {
  color: var(--ds-brand-hover);
}

.billing-modal [data-payment-submit] {
  min-height: 44px;
  border-radius: var(--ds-radius-lg);
  justify-content: center;
}

.billing-modal [data-payment-submit].black-button {
  width: 100%;
  background: var(--ds-brand);
  border-color: var(--ds-brand);
  color: var(--ds-on-primary, #fff);
}

.billing-modal [data-payment-submit].black-button:hover {
  background: var(--ds-brand-hover);
  border-color: var(--ds-brand-hover);
}

.billing-modal [data-payment-submit]:disabled {
  cursor: not-allowed;
  opacity: .64;
}

.billing-modal .custom-amount:focus-within {
  border-color: rgba(204, 120, 92, .48);
  box-shadow: var(--ds-focus);
}

.payment-provider-grid button {
  cursor: pointer;
}

.payment-provider-grid button[aria-pressed="true"] {
  border-color: var(--ds-ink);
}

.language-chip,
.landing-lang,
.auth-language-link {
  letter-spacing: 0;
}

.auth-language-link {
  position: absolute;
  top: 22px;
  right: 22px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-muted);
  color: var(--ds-ink);
  font-weight: var(--ds-weight-semibold);
  text-decoration: none;
}

.auth-language-link:hover,
.landing-lang:hover {
  border-color: var(--ds-line-strong);
  background: var(--ds-surface-raised);
}

.landing-lang {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-pill);
  color: var(--ds-ink);
  text-decoration: none;
  font-weight: var(--ds-weight-semibold);
}

/* Knowledge base final pass: keep the docs compact and readable across sizes. */
.page-knowledge .knowledge-tabs-shell {
  width: min(920px, 100%);
}

.page-knowledge .knowledge-tabs {
  margin-bottom: 22px;
}

.page-knowledge .doc-tool-grid .tool-card {
  min-width: 0;
}

.page-knowledge .doc-detail-card pre,
.page-knowledge .doc-steps code,
.page-knowledge .tips-grid code {
  overflow-x: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 760px) {
  .page-knowledge .app-page {
    width: min(100% - 28px, 560px);
    margin-top: 14px;
    padding-bottom: 108px;
  }

  .page-knowledge .knowledge-tabs-shell {
    width: 100%;
    gap: 14px;
  }

  .page-knowledge .knowledge-title {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin: 18px 0 10px;
  }

  .page-knowledge .book-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
  }

  .page-knowledge .knowledge-title h1 {
    font-size: 32px;
    line-height: 1.04;
  }

  .page-knowledge .knowledge-title p {
    margin-top: 4px;
    font-size: 17px;
    line-height: 1.32;
  }

  .page-knowledge .knowledge-tabs {
    position: static;
    top: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    margin-bottom: 14px;
  }

  .page-knowledge .knowledge-tabs button {
    min-height: 40px;
    font-size: 15px;
    border-radius: 11px;
  }

  .page-knowledge .knowledge-panel {
    gap: 14px;
  }

  .page-knowledge .step-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    padding: 20px;
    margin-bottom: 18px;
    border-radius: 22px;
  }

  .page-knowledge .step-num {
    width: 34px;
    height: 34px;
  }

  .page-knowledge .step-card h2,
  .page-knowledge .tool-section h2 {
    font-size: 22px;
    line-height: 1.18;
  }

  .page-knowledge .step-card p {
    font-size: 16px;
    line-height: 1.48;
  }

  .page-knowledge .tool-section {
    margin-bottom: 18px;
  }

  .page-knowledge .tool-section h2 {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  .page-knowledge .doc-tool-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .page-knowledge .doc-tool-grid .tool-card {
    min-height: 76px;
    grid-template-columns: 46px minmax(0, 1fr) 18px;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
  }

  .page-knowledge .doc-tool-grid .tool-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
  }

  .page-knowledge .tool-card strong {
    font-size: 18px;
    line-height: 1.15;
  }

  .page-knowledge .tool-card small {
    font-size: 14px;
    line-height: 1.25;
  }

  .page-knowledge .doc-detail-card,
  .page-knowledge .api-reference-head,
  .page-knowledge .faq-block details,
  .page-knowledge .tips-grid article {
    border-radius: 22px;
  }

  .page-knowledge .doc-detail-card {
    padding: 18px;
  }

  .page-knowledge .doc-detail-head {
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }

  .page-knowledge .doc-detail-head .tool-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
  }

  .page-knowledge .doc-detail-head h2 {
    font-size: 20px;
    line-height: 1.16;
  }

  .page-knowledge .doc-detail-head p {
    font-size: 14px;
  }

  .page-knowledge .doc-steps {
    gap: 10px;
  }

  .page-knowledge .doc-steps li {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px 10px;
    padding: 14px;
    border-radius: 16px;
  }

  .page-knowledge .doc-steps b {
    font-size: 16px;
    line-height: 1.28;
  }

  .page-knowledge .doc-steps span,
  .page-knowledge .doc-steps code,
  .page-knowledge .tips-grid code {
    font-size: 13px;
    line-height: 1.42;
  }

  .page-knowledge .knowledge-model-list article,
  .page-knowledge .api-card-list article,
  .page-knowledge .tips-grid article {
    padding: 16px;
  }

  .page-knowledge .knowledge-price-card {
    padding: 16px;
  }

  .page-knowledge .knowledge-price-card table {
    min-width: 640px;
  }

  .page-knowledge .api-reference-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px;
  }

  .page-knowledge .api-reference-head code {
    align-self: start;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .page-knowledge .api-card-list,
  .page-knowledge .tips-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .page-knowledge .api-card-list article {
    padding-right: 16px;
  }

  .page-knowledge .api-card-list h3 {
    display: block;
    margin: 10px 0 0;
    font-size: 16px;
  }

  .page-knowledge .api-card-list b {
    position: static;
    display: inline-flex;
    width: fit-content;
    margin-top: 12px;
  }

  .page-knowledge .faq-block summary {
    min-height: 52px;
    padding: 0 14px;
    font-size: 15px;
  }

  .page-knowledge .faq-block p {
    padding: 0 14px 14px;
    font-size: 14px;
    line-height: 1.48;
  }
}

@media (max-width: 760px) {
  .page-dashboard .section-head > a[href="/logs"] {
    width: 100%;
    justify-content: center;
  }
}

/* Knowledge base refresh: tabs are real buttons, docs are compact, copy rows
   work on HTTP, and long code never stretches the page. */
.page-knowledge .knowledge-tabs-shell {
  width: min(960px, 100%);
}

.page-knowledge .knowledge-tabs {
  position: sticky;
  top: 66px;
  z-index: 20;
  height: auto;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  backdrop-filter: blur(12px);
}

.page-knowledge .knowledge-tabs button {
  min-width: 0;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border-radius: var(--ds-radius-md);
  letter-spacing: 0;
}

.page-knowledge .knowledge-tabs button span {
  color: var(--ds-muted);
  font-size: 13px;
  line-height: 1;
}

.page-knowledge .knowledge-tabs button.active span,
.page-knowledge .knowledge-tabs button:hover span {
  color: var(--ds-ink);
}

.page-knowledge .knowledge-panel {
  min-width: 0;
}

.page-knowledge .knowledge-panel > *,
.page-knowledge .doc-tool-panels,
.page-knowledge .doc-tool-panel,
.page-knowledge .doc-detail-card,
.page-knowledge .tool-section,
.page-knowledge .doc-tool-grid,
.page-knowledge .step-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.page-knowledge .step-card {
  align-items: start;
}

.page-knowledge .doc-detail-card,
.page-knowledge .step-card,
.page-knowledge .api-reference-head,
.page-knowledge .api-card-list article,
.page-knowledge .faq-block details,
.page-knowledge .tips-grid article,
.page-knowledge .knowledge-model-list article {
  background: var(--ds-surface-raised);
}

.page-knowledge .copy-code-row {
  grid-column: 2;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}

.page-knowledge .copy-code-row code {
  grid-column: auto;
  min-width: 0;
  margin: 0;
}

.page-knowledge .copy-code-row button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-ink);
  font: inherit;
  font-size: 12px;
  font-weight: var(--ds-weight-semibold);
  cursor: pointer;
}

.page-knowledge .copy-code-row button:hover {
  border-color: var(--ds-line-strong);
  background: var(--ds-surface-muted);
}

.page-knowledge .doc-detail-card pre {
  max-width: 100%;
  white-space: pre;
}

.page-knowledge .knowledge-model-list article {
  grid-template-columns: minmax(0, 1fr) auto;
}

.page-knowledge .knowledge-model-list code,
.page-knowledge .api-reference-head code,
.page-knowledge .api-card-list h3 {
  overflow-wrap: anywhere;
}

.page-knowledge .faq-block details[open] summary {
  border-bottom: 1px solid var(--ds-line);
}

.page-knowledge .faq-block summary::after {
  content: "⌄";
}

.page-knowledge .faq-block details[open] summary::after {
  transform: rotate(180deg);
}

@media (max-width: 760px) {
  .page-knowledge .knowledge-tabs {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-knowledge .knowledge-tabs button {
    font-size: 14px;
  }

  .page-knowledge .copy-code-row {
    grid-template-columns: 1fr;
  }

  .page-knowledge .copy-code-row button {
    justify-content: center;
  }
}