:root {
  color-scheme: dark;
  --ui-bg: #111216;
  --ui-surface: #181a20;
  --ui-surface-raised: #21232b;
  --ui-surface-interactive: #292c36;
  --ui-border: #343741;
  --ui-border-strong: #62616f;
  --ui-text: #f4f2f5;
  --ui-text-muted: #b0b2c0;
  --ui-primary: #eae9ed;
  --ui-primary-hover: #ffffff;
  --ui-primary-ink: #26252a;
  --ui-secondary: #00a5c9;
  --ui-success: #10b981;
  --ui-info: #3b9fff;
  --ui-warning: #f59e0b;
  --ui-danger: #ef535d;
  --ui-danger-soft: #43222d;
  --ui-focus: #d6a2b2;
  --ui-disabled: #587082;
  --ui-radius-sm: 6px;
  --ui-radius-md: 8px;
  --ui-control-height: 38px;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 16px;
  --ui-space-4: 24px;
  --ui-space-5: 32px;
  --ui-space-6: 48px;
  --ui-shadow-raised: 0 8px 20px #020b1180;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --ui-bg: #eef4f7;
  --ui-surface: #ffffff;
  --ui-surface-raised: #f7fafb;
  --ui-surface-interactive: #e9f2f5;
  --ui-border: #cbd9e1;
  --ui-border-strong: #8aa8b8;
  --ui-text: #102535;
  --ui-text-muted: #587082;
  --ui-primary: #009b74;
  --ui-primary-hover: #008763;
  --ui-primary-ink: #ffffff;
  --ui-secondary: #007f9c;
  --ui-danger: #c73d48;
  --ui-danger-soft: #fdecee;
  --ui-focus: #007d60;
  --ui-disabled: #8ca0ad;
  --ui-shadow-raised: 0 8px 20px #1836471f;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;
    --ui-bg: #eef4f7;
    --ui-surface: #ffffff;
    --ui-surface-raised: #f7fafb;
    --ui-surface-interactive: #e9f2f5;
    --ui-border: #cbd9e1;
    --ui-border-strong: #8aa8b8;
    --ui-text: #102535;
    --ui-text-muted: #587082;
    --ui-primary: #009b74;
    --ui-primary-hover: #008763;
    --ui-primary-ink: #ffffff;
    --ui-secondary: #007f9c;
    --ui-danger: #c73d48;
    --ui-danger-soft: #fdecee;
    --ui-focus: #007d60;
    --ui-disabled: #8ca0ad;
    --ui-shadow-raised: 0 8px 20px #1836471f;
  }
}

* { box-sizing: border-box; }

body.r9-design-system {
  margin: 0;
  min-width: 320px;
  background: var(--ui-bg);
  color: var(--ui-text);
  font: 13px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ds-page {
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: var(--ui-space-4);
}

.ds-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-3);
  padding-bottom: var(--ui-space-3);
  border-bottom: 1px solid var(--ui-border);
}

.ds-page-header h1 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.ds-page-header p { margin: var(--ui-space-1) 0 0; color: var(--ui-text-muted); }
.ds-eyebrow { margin: 0 0 var(--ui-space-1); color: var(--ui-primary); font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.ds-theme-switcher { display: flex; align-items: center; gap: var(--ui-space-1); }

.ds-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--ui-space-3);
  margin-top: var(--ui-space-3);
}

.ds-panel {
  grid-column: span 4;
  min-width: 0;
  padding: var(--ui-space-3);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface);
  box-shadow: none;
}

.ds-panel--wide { grid-column: span 8; }
.ds-panel--full { grid-column: 1 / -1; }
.ds-panel--attention { border-color: color-mix(in srgb, var(--ui-warning) 60%, var(--ui-border)); }
.ds-panel h2 { margin: 0 0 var(--ui-space-3); font-size: 13px; letter-spacing: .02em; }
.ds-panel-copy { margin: calc(var(--ui-space-2) * -1) 0 var(--ui-space-3); color: var(--ui-text-muted); font-size: 11px; }
.ds-stack { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }
.ds-form-stack { display: grid; gap: var(--ui-space-3); }
.ds-label { display: grid; gap: var(--ui-space-1); color: var(--ui-text-muted); font-size: 11px; font-weight: 650; }
.ds-helper { margin: 0; color: var(--ui-text-muted); font-size: 10px; font-weight: 500; }
.ds-helper--error { color: var(--ui-danger); }

.ds-button {
  min-height: var(--ui-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  padding: 0 14px;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ds-button:hover:not(:disabled), .ds-button.is-hovered { background: var(--ui-surface-interactive); border-color: var(--ui-secondary); }
.ds-button:focus-visible, .ds-button.is-focused { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ds-button--primary { background: var(--ui-primary); border-color: var(--ui-primary); color: var(--ui-primary-ink); }
.ds-button--primary:hover:not(:disabled), .ds-button--primary.is-hovered { background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); }
.ds-button--tertiary { border-color: transparent; background: transparent; color: var(--ui-secondary); }
.ds-button--tertiary:hover:not(:disabled) { border-color: var(--ui-border); background: var(--ui-surface-interactive); }
.ds-button--danger { border-color: color-mix(in srgb, var(--ui-danger) 72%, var(--ui-border)); background: var(--ui-danger-soft); color: var(--ui-danger); }
.ds-button--danger:hover:not(:disabled) { border-color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger) 20%, var(--ui-danger-soft)); }
.ds-button:disabled, .ds-button[aria-disabled="true"] { cursor: not-allowed; border-color: var(--ui-border); color: var(--ui-disabled); background: color-mix(in srgb, var(--ui-surface) 75%, var(--ui-bg)); opacity: .78; }
.ds-button .ui-icon { flex: none; }
.ds-spinner { animation: ds-spin 800ms linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

.ds-input, .ds-select {
  width: 100%;
  min-height: var(--ui-control-height);
  padding: 0 11px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  font: inherit;
}

.ds-input::placeholder { color: color-mix(in srgb, var(--ui-text-muted) 78%, transparent); }
.ds-input:hover:not(:disabled), .ds-select:hover:not(:disabled) { border-color: var(--ui-border-strong); }
.ds-input:focus-visible, .ds-select:focus-visible, .ds-input.is-focused, .ds-select.is-focused { border-color: var(--ui-primary); outline: 2px solid color-mix(in srgb, var(--ui-focus) 55%, transparent); outline-offset: 1px; }
.ds-input:disabled, .ds-select:disabled { color: var(--ui-disabled); background: color-mix(in srgb, var(--ui-surface) 78%, var(--ui-bg)); cursor: not-allowed; }
.ds-input[aria-invalid="true"], .ds-select[aria-invalid="true"] { border-color: var(--ui-danger); }

.ds-choice-row { display: flex; flex-wrap: wrap; gap: var(--ui-space-3); align-items: center; }
.ds-choice { display: inline-flex; align-items: center; gap: var(--ui-space-2); color: var(--ui-text); font-size: 12px; cursor: pointer; }
.ds-choice input { position: absolute; opacity: 0; pointer-events: none; }
.ds-checkbox, .ds-radio {
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--ui-border-strong);
  background: var(--ui-surface-raised);
  color: var(--ui-primary-ink);
}
.ds-checkbox { border-radius: 4px; }
.ds-radio { border-radius: 50%; }
.ds-choice input:checked + .ds-checkbox, .ds-choice input:checked + .ds-radio { border-color: var(--ui-primary); background: var(--ui-primary); }
.ds-choice input:checked + .ds-checkbox::after { content: ""; width: 8px; height: 4px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translateY(-1px); }
.ds-choice input:checked + .ds-radio::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ds-choice input:focus-visible + .ds-checkbox, .ds-choice input:focus-visible + .ds-radio, .ds-choice.is-focused .ds-checkbox { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ds-choice input:disabled + span, .ds-choice:has(input:disabled) { color: var(--ui-disabled); cursor: not-allowed; }

.ds-toggle { display: inline-flex; align-items: center; gap: var(--ui-space-2); cursor: pointer; }
.ds-toggle input { position: absolute; opacity: 0; }
.ds-toggle-track { position: relative; width: 36px; height: 20px; border: 1px solid var(--ui-border-strong); border-radius: 12px; background: var(--ui-surface-raised); }
.ds-toggle-track::after { content: ""; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; border-radius: 50%; background: var(--ui-text-muted); transition: transform 120ms ease; }
.ds-toggle input:checked + .ds-toggle-track { border-color: var(--ui-primary); background: var(--ui-primary); }
.ds-toggle input:checked + .ds-toggle-track::after { transform: translateX(16px); background: var(--ui-primary-ink); }
.ds-toggle input:focus-visible + .ds-toggle-track { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.ds-toggle:has(input:disabled) { color: var(--ui-disabled); cursor: not-allowed; opacity: .72; }

.ds-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 2px 8px; border: 1px solid transparent; border-radius: 999px; font-size: 10px; font-weight: 750; line-height: 1; white-space: nowrap; }
.ds-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ds-badge--success { color: #57e1b3; background: #0f3a35; border-color: #165247; }
.ds-badge--info { color: #70c8ff; background: #11354b; border-color: #1e526e; }
.ds-badge--warning { color: #ffbd45; background: #402f16; border-color: #65481d; }
.ds-badge--danger { color: #ff7079; background: #44232d; border-color: #6a3541; }
.ds-badge--neutral { color: var(--ui-text-muted); background: var(--ui-surface-raised); border-color: var(--ui-border); }

.ds-table-wrap { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }
.ds-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 12px; }
.ds-table th, .ds-table td { height: 42px; padding: 8px 12px; border-bottom: 1px solid var(--ui-border); text-align: left; }
.ds-table th { background: var(--ui-surface-raised); color: var(--ui-text-muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover, .ds-table tbody tr.is-hovered { background: color-mix(in srgb, var(--ui-secondary) 8%, transparent); }
.ds-table tbody tr[aria-selected="true"] { background: color-mix(in srgb, var(--ui-primary) 12%, transparent); box-shadow: inset 3px 0 0 var(--ui-primary); }
.ds-table tbody tr[aria-disabled="true"] { color: var(--ui-disabled); background: color-mix(in srgb, var(--ui-surface) 70%, var(--ui-bg)); }
.ds-truncate { display: block; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-number { text-align: right !important; font-variant-numeric: tabular-nums; }

.ds-card { padding: var(--ui-space-3); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface-raised); }
.ds-card--interactive { cursor: pointer; }
.ds-card--interactive:hover, .ds-card--interactive.is-hovered { border-color: var(--ui-border-strong); background: var(--ui-surface-interactive); }
.ds-card--attention { border-color: color-mix(in srgb, var(--ui-warning) 65%, var(--ui-border)); }
.ds-card h3 { margin: 0 0 var(--ui-space-2); font-size: 13px; }
.ds-card p { margin: 0; color: var(--ui-text-muted); }

.ds-icon-grid { display: grid; grid-template-columns: repeat(6, minmax(56px, 1fr)); gap: var(--ui-space-2); }
.ds-icon-button { min-height: 54px; display: grid; place-items: center; gap: 3px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); background: var(--ui-surface-raised); color: var(--ui-text); font-size: 9px; }
.ds-icon-button:hover { color: var(--ui-primary); border-color: var(--ui-border-strong); }
.ds-icon-button:disabled { color: var(--ui-disabled); cursor: not-allowed; }
.ui-icon { display: inline-block; vertical-align: middle; }

.ds-select-demo { position: relative; }
.ds-select-demo__button { width: 100%; justify-content: space-between; font-weight: 500; }
.ds-select-demo__list { margin: 5px 0 0; padding: 4px; list-style: none; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); background: var(--ui-surface-raised); box-shadow: var(--ui-shadow-raised); }
.ds-select-demo__list li { padding: 7px 9px; border-radius: 4px; }
.ds-select-demo__list li[aria-selected="true"] { color: var(--ui-primary); background: color-mix(in srgb, var(--ui-primary) 12%, transparent); }

.ds-token-row { display: grid; grid-template-columns: repeat(10, minmax(62px, 1fr)); gap: var(--ui-space-2); }
.ds-token { min-width: 0; color: var(--ui-text-muted); font-size: 9px; }
.ds-token-swatch { display: block; width: 28px; height: 28px; margin-bottom: 5px; border: 1px solid var(--ui-border-strong); border-radius: 50%; background: var(--token-color); }
.ds-spacing-row { display: flex; gap: var(--ui-space-3); align-items: end; }
.ds-spacing-sample { display: grid; place-items: center; gap: 5px; color: var(--ui-text-muted); font-size: 9px; }
.ds-spacing-sample i { display: block; width: var(--space); height: var(--space); background: var(--ui-secondary); }
.ds-note { margin-top: var(--ui-space-3); padding: 10px 12px; border-left: 3px solid var(--ui-secondary); background: color-mix(in srgb, var(--ui-secondary) 7%, transparent); color: var(--ui-text-muted); font-size: 11px; }

@media (max-width: 1050px) {
  .ds-panel { grid-column: span 6; }
  .ds-panel--wide, .ds-panel--full { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .ds-page { padding: var(--ui-space-3); }
  .ds-page-header { align-items: stretch; flex-direction: column; }
  .ds-theme-switcher { overflow-x: auto; }
  .ds-panel, .ds-panel--wide, .ds-panel--full { grid-column: 1 / -1; }
  .ds-icon-grid { grid-template-columns: repeat(3, 1fr); }
  .ds-token-row { grid-template-columns: repeat(5, 1fr); }
  .ds-table { min-width: 620px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}