/* Sorve Design System: components. Requires tokens/tokens.css. Every value is a --sv-* token.
   Class prefix: sv-. Static state classes (.is-hover, .is-focus, .is-active, .is-loading, .is-disabled) mirror the
   pseudo-classes so the docs can render each state; in product code use the real pseudo-classes and ARIA attributes. */

/* ---------- base ---------- */
.sv-base {
  font: var(--sv-type-body); letter-spacing: var(--sv-type-body-tracking);
  color: var(--sv-color-text-primary); background: var(--sv-color-bg-wash);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11";
}
:where(.sv-base) *, :where(.sv-base) *::before, :where(.sv-base) *::after { box-sizing: border-box; }
:where(.sv-base) :where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(.sv-base) :where(button) { cursor: pointer; background: none; border: 0; padding: 0; }
:where(.sv-base) :where(a) { color: inherit; text-decoration: none; }
.sv-base :focus-visible, .sv-base .is-focus { outline: 2px solid var(--sv-color-focus-ring); outline-offset: 1px; }
.sv-base ::-webkit-scrollbar { width: 10px; height: 10px; }
.sv-base ::-webkit-scrollbar-thumb { background: var(--sv-color-scrollbar-thumb); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
.sv-base ::-webkit-scrollbar-thumb:hover { background-color: var(--sv-color-scrollbar-thumb-hover); }

/* ---------- type utilities ---------- */
.sv-t-eyebrow { font: var(--sv-type-eyebrow); letter-spacing: var(--sv-type-eyebrow-tracking); text-transform: var(--sv-type-eyebrow-transform); color: var(--sv-color-text-secondary); }
.sv-t-micro { font: var(--sv-type-micro); letter-spacing: var(--sv-type-micro-tracking); }
.sv-t-caption { font: var(--sv-type-caption); letter-spacing: var(--sv-type-caption-tracking); }
.sv-t-meta { font: var(--sv-type-meta); letter-spacing: var(--sv-type-meta-tracking); }
.sv-t-body { font: var(--sv-type-body); letter-spacing: var(--sv-type-body-tracking); }
.sv-t-lead { font: var(--sv-type-lead); letter-spacing: var(--sv-type-lead-tracking); }
.sv-t-section { font: var(--sv-type-section); letter-spacing: var(--sv-type-section-tracking); }
.sv-t-heading { font: var(--sv-type-heading); letter-spacing: var(--sv-type-heading-tracking); }
.sv-t-title { font: var(--sv-type-title); letter-spacing: var(--sv-type-title-tracking); }
.sv-t-display { font: var(--sv-type-display); letter-spacing: var(--sv-type-display-tracking); }
.sv-t-code, .sv-mono { font-family: var(--sv-font-family-mono); }
.sv-t-code { font: var(--sv-type-code); }
.sv-medium { font-weight: var(--sv-font-weight-medium); }
.sv-semibold { font-weight: var(--sv-font-weight-semibold); }
.sv-num { font-variant-numeric: tabular-nums; }
.sv-secondary { color: var(--sv-color-text-secondary); }
.sv-tertiary { color: var(--sv-color-text-tertiary); }
.sv-accent { color: var(--sv-color-accent-text); }
.sv-danger { color: var(--sv-color-status-danger-fg); }
.sv-warning { color: var(--sv-color-status-warning-fg); }
.sv-success { color: var(--sv-color-status-success-fg); }
.sv-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sv-sep { color: var(--sv-color-text-tertiary); }
.sv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- icon ---------- */
.sv-icon { width: var(--sv-size-icon-md); height: var(--sv-size-icon-md); flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sv-icon--xs { width: var(--sv-size-icon-xs); height: var(--sv-size-icon-xs); }
.sv-icon--sm { width: var(--sv-size-icon-sm); height: var(--sv-size-icon-sm); }
.sv-icon--lg { width: var(--sv-size-icon-lg); height: var(--sv-size-icon-lg); }
.sv-icon--xl { width: var(--sv-size-icon-xl); height: var(--sv-size-icon-xl); }
.sv-spin { animation: sv-spin var(--sv-duration-spin) linear infinite; }
@keyframes sv-spin { to { transform: rotate(360deg); } }
@keyframes sv-pulse { 50% { opacity: .5; } }
@keyframes sv-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- brand ---------- */
.sv-lockup { display: inline-flex; align-items: center; gap: calc(var(--sv-size-logo-sidebar) * .42); color: var(--sv-color-text-primary); height: var(--sv-size-control-md); border-radius: var(--sv-radius-sm); }
.sv-lockup .sv-mark { width: var(--sv-size-logo-sidebar); height: var(--sv-size-logo-sidebar); }
.sv-lockup .sv-word { height: calc(var(--sv-size-logo-sidebar) * .627); width: auto; fill: currentColor; } /* official lockup A: wordmark 42.65 x 12.54 at a 20 px icon, gap .42 */
.sv-mark { --color-brand-1: var(--sv-color-brand-icon-1); --color-brand-2: var(--sv-color-brand-icon-2); }
.sv-logo-tile { width: var(--sv-size-avatar-sm); height: var(--sv-size-avatar-sm); border-radius: var(--sv-radius-sm); background: var(--sv-color-brand-tile); box-shadow: inset 0 0 0 1px var(--sv-color-brand-tile-line); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sv-logo-tile .sv-mark { width: var(--sv-size-logo-avatar); height: var(--sv-size-logo-avatar); }
.sv-avatar { width: var(--sv-size-avatar-md); height: var(--sv-size-avatar-md); border-radius: var(--sv-radius-full); background: var(--sv-color-tint-primary); display: inline-flex; align-items: center; justify-content: center; font: var(--sv-type-caption); font-weight: var(--sv-font-weight-medium); flex-shrink: 0; }
.sv-avatar--sq { width: var(--sv-size-avatar-sm); height: var(--sv-size-avatar-sm); border-radius: var(--sv-radius-sm); font-size: 11px; font-weight: var(--sv-font-weight-semibold); }
.sv-avatar--inverse { background: var(--sv-color-bg-inverse); color: var(--sv-color-text-inverse); }

/* ---------- button ---------- */
.sv-btn {
  height: var(--sv-size-control-sm); display: inline-flex; align-items: center; justify-content: center; gap: var(--sv-space-1-5);
  padding: 0 var(--sv-space-3); border-radius: var(--sv-radius-sm); font: var(--sv-type-meta); font-weight: var(--sv-font-weight-medium); letter-spacing: var(--sv-type-meta-tracking);
  border: 1px solid var(--sv-color-border-primary); background: var(--sv-color-bg-elevated); color: var(--sv-color-text-primary);
  transition: background-color var(--sv-duration-fast) var(--sv-easing-standard), opacity var(--sv-duration-fast), border-color var(--sv-duration-fast);
  white-space: nowrap; position: relative; cursor: pointer; user-select: none;
}
.sv-btn:hover, .sv-btn.is-hover { background: var(--sv-color-tint-tertiary); }
.sv-btn:active, .sv-btn.is-active { background: var(--sv-color-tint-secondary); }
.sv-btn--primary { background: var(--sv-color-bg-inverse); color: var(--sv-color-text-inverse); border-color: var(--sv-color-border-contrast); }
.sv-btn--primary:hover, .sv-btn--primary.is-hover { background: var(--sv-color-bg-inverse); opacity: .88; }
.sv-btn--primary:active, .sv-btn--primary.is-active { background: var(--sv-color-bg-inverse); opacity: .78; }
.sv-btn--ghost { border-color: transparent; background: transparent; color: var(--sv-color-text-secondary); }
.sv-btn--ghost:hover, .sv-btn--ghost.is-hover { background: var(--sv-color-tint-secondary); color: var(--sv-color-text-primary); }
.sv-btn--danger { color: var(--sv-color-status-danger-fg); }
.sv-btn--sm { height: var(--sv-size-control-xs); padding: 0 var(--sv-space-2); font: var(--sv-type-caption); font-weight: var(--sv-font-weight-medium); }
.sv-btn--lg { height: var(--sv-size-control-lg); padding: 0 var(--sv-space-4); font: var(--sv-type-body); font-weight: var(--sv-font-weight-medium); border-radius: var(--sv-radius-md); }
.sv-btn--block { width: 100%; }
.sv-btn:disabled, .sv-btn.is-disabled, .sv-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; pointer-events: none; }
.sv-btn.is-loading { color: transparent; pointer-events: none; }
.sv-btn.is-loading::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--sv-color-text-secondary); border-right-color: transparent; animation: sv-spin 0.8s linear infinite; }
.sv-btn--primary.is-loading::after { border-color: var(--sv-color-text-inverse); border-right-color: transparent; }

/* ---------- icon button ---------- */
.sv-icon-btn {
  width: var(--sv-size-control-sm); height: var(--sv-size-control-sm); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: var(--sv-radius-sm); color: var(--sv-color-text-secondary); background: transparent; position: relative;
  transition: background-color var(--sv-duration-fast) var(--sv-easing-standard), color var(--sv-duration-fast);
}
.sv-icon-btn::before { content: ""; position: absolute; inset: -6px; } /* hit area >= 40 px (BP ~12:10Z) */
.sv-icon-btn:hover, .sv-icon-btn.is-hover { background: var(--sv-color-tint-secondary); color: var(--sv-color-text-primary); }
.sv-icon-btn:active, .sv-icon-btn.is-active, .sv-icon-btn[aria-pressed="true"] { background: var(--sv-color-tint-primary); color: var(--sv-color-text-primary); }
.sv-icon-btn--sm { width: var(--sv-size-control-xs); height: var(--sv-size-control-xs); }
.sv-icon-btn--sm::before { inset: -8px; }
.sv-icon-btn--lg { width: var(--sv-size-control-lg); height: var(--sv-size-control-lg); border-radius: var(--sv-radius-md); }
.sv-icon-btn--lg::before { inset: 0; }
.sv-icon-btn:disabled, .sv-icon-btn.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.sv-icon-btn .sv-badge-dot { position: absolute; top: 4px; right: 4px; }

/* ---------- field / input ---------- */
.sv-field { display: flex; flex-direction: column; gap: var(--sv-space-1-5); min-width: 0; }
.sv-label { font: var(--sv-type-meta); font-weight: var(--sv-font-weight-medium); letter-spacing: var(--sv-type-meta-tracking); }
.sv-label .sv-opt { color: var(--sv-color-text-secondary); font-weight: var(--sv-font-weight-regular); }
.sv-help { font: var(--sv-type-caption); color: var(--sv-color-text-secondary); }
.sv-help--error { color: var(--sv-color-status-danger-fg); display: flex; gap: var(--sv-space-1); align-items: center; }
.sv-input, .sv-select, .sv-textarea {
  height: var(--sv-size-control-md); width: 100%; padding: 0 var(--sv-space-2-5); border-radius: var(--sv-radius-md);
  border: 1px solid var(--sv-color-border-primary); background: var(--sv-color-bg-elevated); color: var(--sv-color-text-primary);
  font: var(--sv-type-meta); letter-spacing: var(--sv-type-meta-tracking); outline: 0;
  transition: border-color var(--sv-duration-fast), box-shadow var(--sv-duration-fast);
}
.sv-textarea { height: auto; min-height: 84px; padding: var(--sv-space-2) var(--sv-space-2-5); resize: vertical; }
.sv-input::placeholder, .sv-textarea::placeholder { color: var(--sv-color-text-secondary); }
.sv-input:hover, .sv-input.is-hover, .sv-select:hover, .sv-textarea:hover { border-color: var(--sv-color-tint-primary); }
.sv-input:focus, .sv-input.is-focus, .sv-select:focus, .sv-select.is-focus, .sv-textarea:focus {
  border-color: var(--sv-color-accent-text); box-shadow: 0 0 0 3px var(--sv-color-accent-subtle); outline: 0;
}
.sv-input[aria-invalid="true"], .sv-input.is-error, .sv-select[aria-invalid="true"] { border-color: var(--sv-color-status-danger-fg); }
.sv-input[aria-invalid="true"]:focus, .sv-input.is-error.is-focus { box-shadow: 0 0 0 3px var(--sv-color-status-danger-bg); }
.sv-input:disabled, .sv-input.is-disabled, .sv-select:disabled { background: var(--sv-color-tint-tertiary); color: var(--sv-color-text-disabled); cursor: not-allowed; }
.sv-input[readonly] { background: var(--sv-color-tint-faint); }
.sv-select {
  appearance: none; padding-right: 30px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 14px, calc(100% - 11px) 14px; background-size: 4px 4px; background-repeat: no-repeat;
}
.sv-select--btn { display: inline-flex; align-items: center; gap: var(--sv-space-2); text-align: left; width: auto; min-width: 180px; }

/* ---------- search ---------- */
.sv-search {
  height: var(--sv-size-control-md); display: flex; align-items: center; gap: var(--sv-space-2); padding: 0 var(--sv-space-1) 0 var(--sv-space-2-5);
  border-radius: var(--sv-radius-md); background: var(--sv-color-bg-elevated); border: 1px solid var(--sv-color-border-primary); color: var(--sv-color-text-secondary);
  min-width: 0; transition: border-color var(--sv-duration-fast), box-shadow var(--sv-duration-fast);
}
.sv-search:hover, .sv-search.is-hover { border-color: var(--sv-color-tint-primary); }
.sv-search:focus-within, .sv-search.is-focus { border-color: var(--sv-color-accent-text); box-shadow: 0 0 0 3px var(--sv-color-accent-subtle); outline: 0; }
.sv-search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; color: var(--sv-color-text-primary); font: var(--sv-type-meta); }
.sv-search input::placeholder { color: var(--sv-color-text-secondary); }
.sv-search input::-webkit-search-cancel-button { display: none; }
.sv-kbd { font: var(--sv-type-micro); font-family: var(--sv-font-family-mono); min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--sv-radius-xs); border: 1px solid var(--sv-color-border-primary); color: var(--sv-color-text-secondary); display: inline-flex; align-items: center; justify-content: center; }

/* ---------- menu / popover ---------- */
.sv-menu {
  min-width: 200px; background: var(--sv-color-bg-elevated); border: 1px solid var(--sv-color-border-primary); border-radius: var(--sv-radius-lg);
  box-shadow: var(--sv-shadow-L3), var(--sv-shadow-L2); padding: var(--sv-space-1); z-index: var(--sv-z-menu);
}
.sv-menu-label { height: 28px; display: flex; align-items: center; padding: 0 var(--sv-space-2); font: var(--sv-type-caption); font-weight: var(--sv-font-weight-medium); color: var(--sv-color-text-secondary); }
.sv-menu-item {
  width: 100%; height: var(--sv-density-row); display: flex; align-items: center; gap: var(--sv-space-2); padding: 0 var(--sv-space-2);
  border-radius: var(--sv-radius-md); text-align: left; color: var(--sv-color-text-primary); cursor: pointer;
}
.sv-menu-item:hover, .sv-menu-item.is-hover, .sv-menu-item:focus-visible { background: var(--sv-color-tint-secondary); outline: 0; }
.sv-menu-item[aria-checked="true"] .sv-check { visibility: visible; }
.sv-menu-item .sv-check { margin-left: auto; visibility: hidden; color: var(--sv-color-text-secondary); }
.sv-menu-item .sv-kbd { margin-left: auto; }
.sv-menu-item--danger { color: var(--sv-color-status-danger-fg); }
.sv-menu-item:disabled, .sv-menu-item.is-disabled { color: var(--sv-color-text-disabled); pointer-events: none; }
.sv-menu-sep { height: 1px; background: var(--sv-color-border-primary); margin: var(--sv-space-1) 0; }

/* ---------- segmented control ---------- */
.sv-seg { display: inline-flex; background: var(--sv-color-tint-secondary); border-radius: var(--sv-radius-md); padding: 2px; gap: 2px; }
.sv-seg button {
  height: var(--sv-size-control-sm); padding: 0 var(--sv-space-2-5); border-radius: var(--sv-radius-sm); font: var(--sv-type-meta); color: var(--sv-color-text-secondary);
  display: inline-flex; align-items: center; gap: var(--sv-space-1-5); transition: background-color var(--sv-duration-fast), color var(--sv-duration-fast);
}
.sv-seg button:hover, .sv-seg button.is-hover { color: var(--sv-color-text-primary); }
.sv-seg button[aria-pressed="true"], .sv-seg button[aria-checked="true"], .sv-seg button.is-on { background: var(--sv-color-bg-elevated); color: var(--sv-color-text-primary); box-shadow: var(--sv-shadow-L2); }
.dark .sv-seg button[aria-pressed="true"], .dark .sv-seg button[aria-checked="true"], .dark .sv-seg button.is-on { background: var(--sv-color-tint-primary); }
.sv-seg button:disabled { opacity: .4; pointer-events: none; }
.sv-seg .sv-count { color: var(--sv-color-text-tertiary); }

/* ---------- tabs ---------- */
.sv-tabs { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.sv-tab {
  height: 30px; display: inline-flex; align-items: center; gap: var(--sv-space-1-5); padding: 0 var(--sv-space-2-5); border-radius: var(--sv-radius-md);
  color: var(--sv-color-text-secondary); font: var(--sv-type-body); white-space: nowrap; transition: background-color var(--sv-duration-fast), color var(--sv-duration-fast);
}
.sv-tab:hover, .sv-tab.is-hover { color: var(--sv-color-text-primary); }
.sv-tab[aria-selected="true"], .sv-tab.is-on { background: var(--sv-color-tint-secondary); color: var(--sv-color-text-primary); font-weight: var(--sv-font-weight-medium); }
.sv-tab .sv-count { color: var(--sv-color-text-tertiary); font-weight: var(--sv-font-weight-regular); }
.sv-tab:disabled { opacity: .4; pointer-events: none; }
.sv-tabs--underline { gap: 18px; border-bottom: 1px solid var(--sv-color-border-primary); }
.sv-tabs--underline .sv-tab { padding: 0; border-radius: 0; height: 36px; background: none; }
.sv-tabs--underline .sv-tab[aria-selected="true"], .sv-tabs--underline .sv-tab.is-on { background: none; box-shadow: inset 0 -1.5px 0 var(--sv-color-text-primary); font-weight: var(--sv-font-weight-regular); }

/* ---------- chips, pills, badges, status ---------- */
.sv-chip { height: var(--sv-size-control-xs); display: inline-flex; align-items: center; gap: var(--sv-space-1); padding: 0 var(--sv-space-1-5); border-radius: var(--sv-radius-sm); color: var(--sv-color-text-secondary); font: var(--sv-type-meta); white-space: nowrap; }
button.sv-chip:hover, .sv-chip.is-hover { background: var(--sv-color-tint-secondary); color: var(--sv-color-text-primary); }
.sv-chip--filled { background: var(--sv-color-tint-secondary); }
.sv-chip--outline { border: 1px solid var(--sv-color-border-primary); border-radius: var(--sv-radius-full); padding: 0 var(--sv-space-2-5); height: var(--sv-size-control-sm); }
.sv-chip--outline[aria-pressed="true"] { border-color: var(--sv-color-text-primary); color: var(--sv-color-text-primary); }
.sv-chip .sv-x { margin-right: -2px; opacity: .7; }
.sv-pill { display: inline-flex; align-items: center; gap: var(--sv-space-1); background: var(--sv-color-tint-secondary); border-radius: var(--sv-radius-lg); padding: 2px var(--sv-space-2); font: var(--sv-type-caption); color: var(--sv-color-text-secondary); white-space: nowrap; }
.sv-pill--danger { background: var(--sv-color-status-danger-bg); color: var(--sv-color-status-danger-fg); }
.sv-pill--warning { background: var(--sv-color-status-warning-bg); color: var(--sv-color-status-warning-fg); }
.sv-pill--success { background: var(--sv-color-status-success-bg); color: var(--sv-color-status-success-fg); }
.sv-pill--info { background: var(--sv-color-status-info-bg); color: var(--sv-color-status-info-fg); }
.sv-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--sv-radius-full); background: var(--sv-color-tint-primary); color: var(--sv-color-text-primary); font: var(--sv-type-micro); font-weight: var(--sv-font-weight-medium); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: center; }
.sv-badge--danger { background: var(--sv-color-status-danger-fg); color: #fff; }
.sv-badge-dot { width: var(--sv-size-dot); height: var(--sv-size-dot); border-radius: var(--sv-radius-full); background: var(--sv-color-accent-default); flex-shrink: 0; display: inline-block; }
/* Status = small dot + text (BP: no filled pills for steady states). Neutral by default. */
.sv-status { display: inline-flex; align-items: center; gap: var(--sv-space-1-5); font: var(--sv-type-meta); color: var(--sv-color-text-secondary); white-space: nowrap; }
.sv-status::before { content: ""; width: var(--sv-size-dot); height: var(--sv-size-dot); border-radius: var(--sv-radius-full); background: currentColor; opacity: .7; flex-shrink: 0; }
.sv-status--none::before { display: none; }
.sv-status--danger { color: var(--sv-color-status-danger-fg); font-weight: var(--sv-font-weight-medium); }
.sv-status--danger::before, .sv-status--warning::before, .sv-status--success::before { opacity: 1; }
.sv-status--warning { color: var(--sv-color-status-warning-fg); }
.sv-status--success::before { background: var(--sv-color-status-success-fg); }

/* ---------- card ---------- */
.sv-card { background: var(--sv-color-bg-elevated); border: 1px solid var(--sv-color-border-primary); border-radius: var(--sv-radius-card); padding: var(--sv-space-4) var(--sv-space-4-5) var(--sv-space-4) var(--sv-space-4); display: flex; flex-direction: column; gap: var(--sv-space-3); min-width: 0; }
.sv-card__row { display: flex; align-items: center; gap: var(--sv-space-2); min-width: 0; }
.sv-card__title { font-weight: var(--sv-font-weight-medium); }
.sv-card__meta { font: var(--sv-type-meta); color: var(--sv-color-text-secondary); display: flex; align-items: center; gap: var(--sv-space-1-5); flex-wrap: wrap; }
.sv-card--interactive { cursor: pointer; transition: border-color var(--sv-duration-fast), box-shadow var(--sv-duration-fast); }
.sv-card--interactive:hover, .sv-card--interactive.is-hover { border-color: var(--sv-color-tint-primary); box-shadow: var(--sv-shadow-L1); }
.sv-card--selected { border-color: var(--sv-color-accent-text); box-shadow: 0 0 0 3px var(--sv-color-accent-subtle); }
.sv-card--danger { border-color: var(--sv-color-status-danger-bg); }
.sv-card.is-stale { border-style: dashed; }
.sv-card.is-stale .sv-card__body { opacity: .6; }
.sv-media { background: var(--sv-color-tint-tertiary); border-radius: var(--sv-radius-lg); padding: var(--sv-space-1-5); display: flex; flex-direction: column; gap: 5px; }
.sv-media__inner { background: var(--sv-color-bg-elevated); border: 1px solid var(--sv-color-border-secondary); border-radius: var(--sv-radius-sm); box-shadow: var(--sv-shadow-L1); padding: var(--sv-space-2-5) var(--sv-space-3); }

/* ---------- table ---------- */
.sv-table-wrap { background: var(--sv-color-bg-elevated); border: 1px solid var(--sv-color-border-primary); border-radius: var(--sv-radius-card); overflow: auto; }
.sv-table { width: 100%; border-collapse: collapse; font: var(--sv-type-meta); letter-spacing: var(--sv-type-meta-tracking); }
.sv-table th {
  text-align: left; font: var(--sv-type-caption); font-weight: var(--sv-font-weight-medium); color: var(--sv-color-text-secondary); height: 36px; padding: 0 var(--sv-space-3);
  border-bottom: 1px solid var(--sv-color-border-primary); white-space: nowrap; background: var(--sv-color-tint-faint); position: sticky; top: 0;
}
.sv-table th[aria-sort] { cursor: pointer; user-select: none; }
.sv-table th[aria-sort]:hover { color: var(--sv-color-text-primary); }
.sv-table th .sv-sort { display: inline-block; margin-left: 4px; opacity: .4; }
.sv-table th[aria-sort="ascending"] .sv-sort, .sv-table th[aria-sort="descending"] .sv-sort { opacity: 1; color: var(--sv-color-text-primary); }
.sv-table td { height: var(--sv-density-table-row); padding: 0 var(--sv-space-3); border-bottom: 1px solid var(--sv-color-border-secondary); white-space: nowrap; }
.sv-table tr:last-child td { border-bottom: 0; }
.sv-table .r { text-align: right; }
.sv-table .num { font-variant-numeric: tabular-nums; }
.sv-table tbody tr { transition: background-color var(--sv-duration-fast); }
.sv-table tbody tr[data-href], .sv-table tbody tr.is-link { cursor: pointer; }
.sv-table tbody tr:hover, .sv-table tbody tr.is-hover { background: var(--sv-color-tint-tertiary); }
.sv-table tbody tr[aria-selected="true"] { background: var(--sv-color-tint-secondary); }
.sv-table tbody tr.is-stale td { color: var(--sv-color-text-secondary); }
.sv-table tbody tr.is-paused td:not(:first-child) { color: var(--sv-color-text-secondary); }
.sv-table .sv-name { font: var(--sv-type-body); color: var(--sv-color-text-primary); }
.sv-table .sv-cell { display: flex; align-items: center; gap: var(--sv-space-2); }
.sv-table .sv-empty-row td { height: 120px; text-align: center; color: var(--sv-color-text-secondary); white-space: normal; }

/* ---------- list rows ---------- */
.sv-list { display: flex; flex-direction: column; gap: var(--sv-density-row-gap); }
.sv-row {
  min-height: var(--sv-density-row); display: flex; align-items: center; gap: var(--sv-space-2); padding: 0 var(--sv-space-2); border-radius: var(--sv-radius-md);
  color: var(--sv-color-text-primary); width: 100%; text-align: left; transition: background-color var(--sv-duration-fast); cursor: pointer;
}
.sv-row:hover, .sv-row.is-hover { background: var(--sv-color-tint-tertiary); }
.sv-row[aria-current], .sv-row.is-active { background: var(--sv-color-tint-secondary); }
.sv-row--two { align-items: flex-start; padding: var(--sv-space-2) var(--sv-space-3); gap: var(--sv-space-2-5); }
.sv-row__body { flex: 1; min-width: 0; }
.sv-row__meta { font: var(--sv-type-meta); color: var(--sv-color-text-secondary); display: flex; align-items: center; gap: var(--sv-space-1); flex-wrap: wrap; }
.sv-row__trail { margin-left: auto; color: var(--sv-color-text-secondary); font: var(--sv-type-meta); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: var(--sv-space-1-5); }
.sv-row .sv-st { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.sv-row:not(.sv-row--two) .sv-st { margin-top: 0; }
.sv-row:disabled, .sv-row.is-disabled { color: var(--sv-color-text-disabled); pointer-events: none; }
.sv-kv { display: flex; align-items: center; min-height: 32px; gap: var(--sv-space-2); font: var(--sv-type-meta); border-bottom: 1px solid var(--sv-color-border-secondary); }
.sv-kv:last-child { border-bottom: 0; }
.sv-kv__k { flex: 1; color: var(--sv-color-text-secondary); }
.sv-kv__v { font-variant-numeric: tabular-nums; }

/* ---------- sidebar nav ---------- */
.sv-sidebar {
  width: var(--sv-size-sidebar-width); flex-shrink: 0; display: flex; flex-direction: column; background: var(--sv-color-bg-page);
  border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-L2); overflow: hidden;
  transition: width var(--sv-duration-base) var(--sv-easing-standard), opacity var(--sv-duration-fast);
}
.sv-sidebar__top { height: var(--sv-size-sidebar-top); display: flex; align-items: center; gap: var(--sv-space-1); padding: 0 var(--sv-space-2-5) 0 var(--sv-space-4); flex-shrink: 0; }
.sv-sidebar__top .sv-spacer { flex: 1; }
.sv-sidebar__scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 0 var(--sv-space-2); }
.sv-sidebar__foot { height: var(--sv-size-sidebar-foot); display: flex; align-items: center; gap: var(--sv-space-2-5); padding: 0 var(--sv-space-2-5) 0 var(--sv-space-4); flex-shrink: 0; }
.sv-sidebar__foot .sv-who { flex: 1; min-width: 0; font: var(--sv-type-caption); }
.sv-nav { padding: 0 var(--sv-space-2); display: flex; flex-direction: column; gap: var(--sv-density-row-gap); }
.sv-nav-item {
  height: var(--sv-density-row); display: flex; align-items: center; gap: var(--sv-space-2); padding: 0 var(--sv-space-2); border-radius: var(--sv-radius-md);
  color: var(--sv-color-text-primary); transition: background-color var(--sv-duration-fast); width: 100%; text-align: left; cursor: pointer;
}
.sv-nav-item:hover, .sv-nav-item.is-hover { background: var(--sv-color-tint-tertiary); }
.sv-nav-item[aria-current="page"], .sv-nav-item.is-active { background: var(--sv-color-tint-secondary); }
.sv-nav-item .sv-grow { flex: 1; min-width: 0; }
.sv-nav-item .sv-count { color: var(--sv-color-text-tertiary); font: var(--sv-type-caption); font-variant-numeric: tabular-nums; }
.sv-nav-item--muted { color: var(--sv-color-text-secondary); }
.sv-nav-group { margin-top: var(--sv-space-1); }
.sv-nav-group > summary { /* matches prototype A (16:14): whole row toggles, chevron first, starts collapsed */
  list-style: none; height: 32px; display: flex; align-items: center; gap: var(--sv-space-2); padding: 0 var(--sv-space-2); margin: var(--sv-space-1) var(--sv-space-2) 0; border-radius: var(--sv-radius-md);
  color: var(--sv-color-text-secondary); font: var(--sv-type-caption); font-weight: var(--sv-font-weight-medium); cursor: pointer; user-select: none;
  transition: background-color var(--sv-duration-fast), color var(--sv-duration-fast);
}
.sv-nav-group > summary::-webkit-details-marker { display: none; }
.sv-nav-group > summary:hover, .sv-nav-group > summary.is-hover { background: var(--sv-color-tint-tertiary); color: var(--sv-color-text-primary); }
.sv-nav-group > summary .sv-count { color: var(--sv-color-text-disabled); font-weight: var(--sv-font-weight-regular); }
.sv-nav-group > summary .sv-chev { transition: transform var(--sv-duration-fast) var(--sv-easing-standard); }
.sv-nav-group[open] > summary .sv-chev { transform: rotate(90deg); }
.sv-nav-group > summary .sv-badge-dot { margin-left: auto; }
.sv-nav-group[open] > summary .sv-badge-dot { display: none; } /* the dot only stands in for hidden items */
.sv-nav-group + .sv-nav-group > summary { margin-top: var(--sv-space-2); }
.sv-nav-group > .sv-nav { margin-top: 2px; }
.sv-side-head { height: 32px; display: flex; align-items: center; padding: 0 var(--sv-space-2-5) 0 var(--sv-space-4); margin-top: var(--sv-space-5); }
.sv-side-head .sv-grow { flex: 1; font-weight: var(--sv-font-weight-medium); }

/* ---------- top bar ---------- */
.sv-topbar { height: var(--sv-size-topbar-height); flex-shrink: 0; display: flex; align-items: center; gap: var(--sv-space-1-5); padding: 0 var(--sv-space-3) 0 var(--sv-space-3-5); font: var(--sv-type-meta); min-width: 0; }
.sv-topbar .sv-spacer { flex: 1; }
.sv-crumbs { display: flex; align-items: center; gap: var(--sv-space-1-5); min-width: 0; }
.sv-crumbs a { color: var(--sv-color-text-secondary); border-radius: var(--sv-radius-sm); padding: 3px 6px; margin: 0 -6px; }
.sv-crumbs a:hover { background: var(--sv-color-tint-secondary); color: var(--sv-color-text-primary); }
.sv-crumbs [aria-current] { color: var(--sv-color-text-primary); }
.sv-topbar__menu { display: none; }

/* ---------- side panel / sheet ---------- */
.sv-panel {
  width: var(--sv-size-panel-width); flex-shrink: 0; background: color-mix(in srgb, var(--sv-color-bg-elevated) 90%, transparent); backdrop-filter: blur(var(--sv-blur-sm));
  border-radius: var(--sv-radius-xl); box-shadow: var(--sv-shadow-L4); outline: 1px solid var(--sv-color-border-secondary); display: flex; flex-direction: column; overflow: hidden;
}
.sv-panel__head { display: flex; align-items: center; gap: var(--sv-space-1); padding: var(--sv-space-2-5) var(--sv-space-3); flex-shrink: 0; }
.sv-panel__head .sv-spacer { flex: 1; }
.sv-panel__body { flex: 1; overflow-y: auto; padding: var(--sv-space-1) var(--sv-space-4-5) var(--sv-space-4-5); }
.sv-panel__label { display: flex; align-items: center; gap: var(--sv-space-1-5); height: 26px; font: var(--sv-type-meta); font-weight: var(--sv-font-weight-medium); color: var(--sv-color-text-secondary); margin-top: var(--sv-space-3-5); }
.sv-sheet { position: fixed; z-index: var(--sv-z-drawer); top: var(--sv-size-frame-inset); right: var(--sv-size-frame-inset); bottom: var(--sv-size-frame-inset); max-width: calc(100vw - 2 * var(--sv-size-frame-inset)); animation: sv-sheet-in var(--sv-duration-slow) var(--sv-easing-emphasized); }
@keyframes sv-sheet-in { from { transform: translateX(24px); opacity: 0; } }
.sv-scrim { position: fixed; inset: 0; background: var(--sv-color-bg-scrim); z-index: calc(var(--sv-z-drawer) - 1); animation: sv-fade var(--sv-duration-fast) var(--sv-easing-out); }
@keyframes sv-fade { from { opacity: 0; } }

/* ---------- composer ---------- */
.sv-composer {
  height: var(--sv-size-composer-height); display: flex; flex-direction: column; background: var(--sv-color-bg-elevated); border: 1px solid var(--sv-color-border-primary);
  border-radius: var(--sv-radius-2xl); padding: var(--sv-space-3); transition: border-color var(--sv-duration-fast), box-shadow var(--sv-duration-fast);
}
.sv-composer:focus-within, .sv-composer.is-focus { border-color: var(--sv-color-tint-primary); box-shadow: var(--sv-shadow-L2); outline: 0; }
.sv-composer textarea { flex: 1; resize: none; border: 0; outline: 0; background: transparent; padding: var(--sv-space-1); min-height: 0; color: var(--sv-color-text-primary); }
.sv-composer textarea::placeholder { color: var(--sv-color-text-secondary); }
.sv-composer__bar { display: flex; align-items: center; gap: var(--sv-space-1); }
.sv-composer__bar .sv-spacer { flex: 1; }
.sv-composer.is-error { border-color: var(--sv-color-status-danger-fg); }
.sv-composer.is-disabled { opacity: .6; pointer-events: none; }
.sv-send { height: var(--sv-size-control-sm); min-width: var(--sv-size-control-sm); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--sv-radius-full); background: var(--sv-color-bg-inverse); color: var(--sv-color-text-inverse); padding: 0 var(--sv-space-1-5); transition: opacity var(--sv-duration-fast); }
.sv-send:hover { opacity: .88; }
.sv-send:disabled, .sv-send.is-disabled { opacity: .3; cursor: not-allowed; }

/* ---------- toast ---------- */
.sv-toasts { position: fixed; right: var(--sv-space-4); bottom: var(--sv-space-4); display: flex; flex-direction: column; gap: var(--sv-space-2); z-index: var(--sv-z-toast); }
.sv-toast {
  width: var(--sv-size-toast-width); max-width: calc(100vw - 32px); display: flex; align-items: flex-start; gap: var(--sv-space-2-5); padding: var(--sv-space-3) var(--sv-space-3) var(--sv-space-3) var(--sv-space-3-5);
  background: var(--sv-color-bg-elevated); border: 1px solid var(--sv-color-border-primary); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-L4);
  animation: sv-toast-in var(--sv-duration-slow) var(--sv-easing-emphasized);
}
@keyframes sv-toast-in { from { transform: translateY(8px); opacity: 0; } }
.sv-toast__body { flex: 1; min-width: 0; }
.sv-toast__title { font-weight: var(--sv-font-weight-medium); }
.sv-toast__text { font: var(--sv-type-meta); color: var(--sv-color-text-secondary); margin-top: 2px; }
.sv-toast__actions { display: flex; gap: var(--sv-space-1-5); margin-top: var(--sv-space-2); }
.sv-toast--danger { border-color: var(--sv-color-status-danger-bg); }
.sv-toast--danger > .sv-icon { color: var(--sv-color-status-danger-fg); }

/* ---------- dialog ---------- */
.sv-dialog {
  width: var(--sv-size-dialog-width); max-width: calc(100vw - 32px); max-height: calc(100vh - 64px); display: flex; flex-direction: column; background: var(--sv-color-bg-elevated);
  border: 1px solid var(--sv-color-border-primary); border-radius: var(--sv-radius-xl); box-shadow: var(--sv-shadow-L4); z-index: var(--sv-z-dialog); padding: 0; color: var(--sv-color-text-primary);
}
dialog.sv-dialog::backdrop { background: var(--sv-color-bg-scrim); }
.sv-dialog__head { display: flex; align-items: flex-start; gap: var(--sv-space-2); padding: var(--sv-space-5) var(--sv-space-5) var(--sv-space-2); }
.sv-dialog__head h2 { font: var(--sv-type-section); margin: 0; flex: 1; }
.sv-dialog__body { padding: 0 var(--sv-space-5) var(--sv-space-4); overflow-y: auto; color: var(--sv-color-text-secondary); }
.sv-dialog__foot { display: flex; justify-content: flex-end; gap: var(--sv-space-2); padding: var(--sv-space-3) var(--sv-space-5) var(--sv-space-5); }

/* ---------- tooltip ---------- */
.sv-tooltip {
  display: inline-block; max-width: 240px; padding: var(--sv-space-1) var(--sv-space-2); border-radius: var(--sv-radius-sm); background: var(--sv-color-bg-inverse); color: var(--sv-color-text-inverse);
  font: var(--sv-type-caption); box-shadow: var(--sv-shadow-L3); z-index: var(--sv-z-tooltip); pointer-events: none;
}
.sv-tooltip .sv-kbd { border-color: currentColor; color: inherit; opacity: .7; margin-left: var(--sv-space-1-5); }

/* ---------- progress / meter ---------- */
.sv-progress { height: 4px; border-radius: var(--sv-radius-full); background: var(--sv-color-tint-primary); overflow: hidden; position: relative; }
.sv-progress > i { display: block; height: 100%; background: var(--sv-color-text-primary); opacity: .7; border-radius: var(--sv-radius-full); transition: width var(--sv-duration-base) var(--sv-easing-standard); }
.sv-progress--accent > i { background: var(--sv-color-accent-default); opacity: 1; }
.sv-progress--warning > i { background: var(--sv-color-status-warning-fg); opacity: 1; }
.sv-progress--danger > i { background: var(--sv-color-status-danger-fg); opacity: 1; }
.sv-progress.is-indeterminate > i { width: 30% !important; position: absolute; animation: sv-indet 1.4s var(--sv-easing-standard) infinite; }
@keyframes sv-indet { from { left: -30%; } to { left: 100%; } }
.sv-progress.is-paused > i { opacity: .35; }
.sv-progress.is-stale > i { background: repeating-linear-gradient(90deg, var(--sv-color-text-secondary) 0 4px, transparent 4px 6px); opacity: 1; }
.sv-segbar { display: flex; gap: 3px; }
.sv-segbar > i { flex: 1; height: 4px; border-radius: var(--sv-radius-full); background: var(--sv-color-tint-primary); }
.sv-segbar > i.on { background: var(--sv-color-text-primary); opacity: .7; }
.sv-meter { display: flex; flex-direction: column; gap: var(--sv-space-1-5); }
.sv-meter__head { display: flex; align-items: baseline; gap: var(--sv-space-2); font: var(--sv-type-meta); }
.sv-meter__head .sv-k { flex: 1; color: var(--sv-color-text-secondary); }
.sv-meter__head .sv-v { font-variant-numeric: tabular-nums; font-weight: var(--sv-font-weight-medium); }
.sv-meter__foot { font: var(--sv-type-caption); color: var(--sv-color-text-secondary); font-variant-numeric: tabular-nums; }

/* ---------- stat tile ---------- */
.sv-stat { gap: var(--sv-space-1); }
.sv-stat__k { font: var(--sv-type-meta); color: var(--sv-color-text-secondary); display: flex; align-items: center; gap: var(--sv-space-1-5); }
.sv-stat__v { font: var(--sv-type-title); letter-spacing: var(--sv-type-title-tracking); font-variant-numeric: tabular-nums; }
.sv-stat__d { font: var(--sv-type-caption); color: var(--sv-color-text-secondary); font-variant-numeric: tabular-nums; }
.sv-stat__d.is-over { color: var(--sv-color-status-danger-fg); font-weight: var(--sv-font-weight-medium); }
.sv-stat-grid { display: grid; gap: var(--sv-grid-gutter); grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- empty state ---------- */
.sv-empty { border: 1px dashed var(--sv-color-border-primary); border-radius: var(--sv-radius-card); padding: var(--sv-space-6); color: var(--sv-color-text-secondary); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sv-space-2); }
.sv-empty__icon { width: 32px; height: 32px; border-radius: var(--sv-radius-md); background: var(--sv-color-tint-secondary); display: inline-flex; align-items: center; justify-content: center; color: var(--sv-color-text-secondary); }
.sv-empty__title { color: var(--sv-color-text-primary); font-weight: var(--sv-font-weight-medium); }
.sv-empty--error .sv-empty__icon { color: var(--sv-color-status-danger-fg); background: var(--sv-color-status-danger-bg); }

/* ---------- skeleton ---------- */
.sv-skel { display: block; height: 12px; border-radius: var(--sv-radius-xs); background: linear-gradient(90deg, var(--sv-color-tint-secondary) 0%, var(--sv-color-tint-primary) 50%, var(--sv-color-tint-secondary) 100%); background-size: 200% 100%; animation: sv-shine var(--sv-duration-shimmer) linear infinite; }
.sv-skel--text { height: 10px; margin: 4px 0; }
.sv-skel--title { height: 18px; width: 40%; }
.sv-skel--circle { width: 28px; height: 28px; border-radius: var(--sv-radius-full); }
.sv-shimmer { background: linear-gradient(90deg, var(--sv-color-text-secondary) 0%, var(--sv-color-text-primary) 50%, var(--sv-color-text-secondary) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sv-shine var(--sv-duration-shimmer) linear infinite; }

/* ---------- live status ---------- */
.sv-live { display: inline-flex; align-items: center; gap: var(--sv-space-1-5); font: var(--sv-type-meta); color: var(--sv-color-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-live__dot { width: var(--sv-size-dot); height: var(--sv-size-dot); border-radius: var(--sv-radius-full); background: currentColor; flex-shrink: 0; }
.sv-live__state { font: var(--sv-type-caption); font-weight: var(--sv-font-weight-medium); letter-spacing: .04em; text-transform: uppercase; }
.sv-live--live .sv-live__dot { background: var(--sv-color-live-live); animation: sv-pulse var(--sv-duration-pulse) var(--sv-easing-pulse) infinite; }
.sv-live--live .sv-live__state { color: var(--sv-color-text-primary); }
.sv-live--stale { color: var(--sv-color-text-secondary); }
.sv-live--stale .sv-live__dot { background: var(--sv-color-live-stale); }
.sv-live--stale .sv-live__state { color: var(--sv-color-live-stale); }
.sv-live--paused .sv-live__dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sv-color-live-paused); }
.sv-live--offline .sv-live__dot { background: var(--sv-color-live-offline); }
.sv-live--offline .sv-live__state { color: var(--sv-color-live-offline); }
.sv-live--chip { height: var(--sv-size-control-xs); padding: 0 var(--sv-space-2); border-radius: var(--sv-radius-sm); background: var(--sv-color-tint-secondary); }

/* ---------- clock ---------- */
.sv-clock { font: var(--sv-type-meta); font-variant-numeric: tabular-nums; color: var(--sv-color-text-secondary); white-space: nowrap; display: inline-flex; align-items: baseline; gap: var(--sv-space-2); }
.sv-clock b { color: var(--sv-color-text-primary); font-weight: var(--sv-font-weight-medium); }
.sv-clock.is-stale b { color: var(--sv-color-status-warning-fg); }

/* ---------- switch ---------- */
.sv-switch { width: 32px; height: 18px; border-radius: var(--sv-radius-full); background: var(--sv-color-tint-primary); position: relative; transition: background-color var(--sv-duration-fast); flex-shrink: 0; cursor: pointer; }
.sv-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--sv-radius-full); background: #fff; box-shadow: var(--sv-shadow-L1); transition: transform var(--sv-duration-fast) var(--sv-easing-standard); }
.sv-switch[aria-checked="true"] { background: var(--sv-color-accent-default); }
.sv-switch[aria-checked="true"]::after { transform: translateX(14px); }
.sv-switch:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- timeline (live stream) ---------- */
.sv-msg { display: flex; gap: 13px; margin: 18px 0 12px; }
.sv-msg > .sv-logo-tile, .sv-msg > .sv-avatar { margin-top: 3px; }
.sv-msg__body { flex: 1; min-width: 0; }
.sv-msg__meta { display: flex; align-items: baseline; gap: var(--sv-space-1-5); }
.sv-msg__meta .sv-time { font: var(--sv-type-caption); color: var(--sv-color-text-secondary); font-variant-numeric: tabular-nums; }
.sv-msg p { margin: 2px 0 8px; }
.sv-step { display: flex; align-items: center; gap: var(--sv-space-1-5); min-height: 25px; color: var(--sv-color-text-secondary); font: var(--sv-type-meta); text-align: left; border-radius: var(--sv-radius-sm); font-variant-numeric: tabular-nums; }
button.sv-step:hover { color: var(--sv-color-text-primary); }
.sv-step .sv-chev { transition: transform var(--sv-duration-fast) var(--sv-easing-standard); }
.sv-step[aria-expanded="true"] .sv-chev { transform: rotate(90deg); }
.sv-bubble-row { display: flex; justify-content: flex-end; margin: 12px 0; }
.sv-bubble { max-width: 465px; background: var(--sv-color-tint-tertiary); border-radius: var(--sv-radius-2xl) var(--sv-radius-xs) var(--sv-radius-2xl) var(--sv-radius-2xl); padding: 7px 12px 8px 14px; }

/* ---------- page scaffolding ---------- */
.sv-app { display: flex; height: 100vh; padding: var(--sv-size-frame-inset); background: var(--sv-color-bg-wash); }
.sv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.sv-content { flex: 1; min-height: 0; display: flex; gap: var(--sv-size-frame-inset); }
.sv-scroll { flex: 1; min-width: 0; overflow-y: auto; }
.sv-col { max-width: var(--sv-size-column-chat); margin: 0 auto; padding: var(--sv-space-3) var(--sv-grid-margin) var(--sv-space-6); }
.sv-col--wide { max-width: var(--sv-size-column-wide); }
.sv-page-head { padding: var(--sv-space-7) 0 var(--sv-space-5); }
.sv-page-head .sv-t-eyebrow { margin-bottom: var(--sv-space-1); display: block; }
.sv-page-head .sv-sub { color: var(--sv-color-text-secondary); margin-top: var(--sv-space-1); }
.sv-h-section { display: flex; align-items: center; gap: var(--sv-space-2); height: 26px; margin: var(--sv-space-7) 0 var(--sv-space-2); font: var(--sv-type-meta); font-weight: var(--sv-font-weight-medium); color: var(--sv-color-text-secondary); }
.sv-h-section .sv-count { color: var(--sv-color-text-disabled); font-weight: var(--sv-font-weight-regular); }
.sv-h-section .sv-spacer { flex: 1; }
.sv-toolbar { display: flex; align-items: center; gap: var(--sv-space-2); margin: 0 0 var(--sv-space-3); flex-wrap: wrap; }
.sv-toolbar .sv-spacer { flex: 1; }
.sv-form { display: flex; flex-direction: column; gap: var(--sv-space-4); }
.sv-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sv-space-4); }
.sv-form__actions { display: flex; justify-content: flex-end; gap: var(--sv-space-2); padding-top: var(--sv-space-2); }
.sv-set-row { display: flex; align-items: center; gap: var(--sv-space-6); padding: var(--sv-space-3-5) var(--sv-space-4); border-bottom: 1px solid var(--sv-color-border-secondary); min-height: var(--sv-size-control-lg); }
.sv-set-row:last-child { border-bottom: 0; }
.sv-set-row__l { flex: 1; min-width: 0; }
.sv-set-row__d { color: var(--sv-color-text-secondary); font: var(--sv-type-meta); margin-top: 2px; }

/* ---------- shell state ---------- */
.sv-app.no-panel .sv-panel { display: none; }
.sv-app.is-collapsed .sv-sidebar { width: 0; opacity: 0; box-shadow: none; }
.sv-app.is-collapsed .sv-topbar__menu { display: inline-flex; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) { .sv-panel { width: var(--sv-size-panel-width-xl); } .sv-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .sv-app .sv-panel { position: fixed; z-index: var(--sv-z-drawer); top: var(--sv-size-frame-inset); right: var(--sv-size-frame-inset); bottom: var(--sv-size-frame-inset); } .sv-app.no-panel .sv-panel { display: none; } }
@media (max-width: 767px) {
  .sv-app { padding: 0; }
  .sv-app .sv-sidebar { position: fixed; z-index: var(--sv-z-drawer); top: 0; bottom: 0; left: 0; border-radius: 0 var(--sv-radius-lg) var(--sv-radius-lg) 0; box-shadow: none; visibility: hidden; transform: translateX(-100%); transition: transform var(--sv-duration-slow) var(--sv-easing-emphasized), visibility 0s linear var(--sv-duration-slow); }
  .sv-app.nav-open .sv-sidebar { transform: none; visibility: visible; box-shadow: var(--sv-shadow-L4); transition: transform var(--sv-duration-slow) var(--sv-easing-emphasized); }
  .sv-topbar .sv-clock > span { display: none; }
  .sv-topbar__menu { display: inline-flex; }
  .sv-topbar { padding: 0 var(--sv-space-2); }
  .sv-topbar .sv-hide-mobile { display: none; }
  .sv-col { padding-left: var(--sv-grid-margin-mobile); padding-right: var(--sv-grid-margin-mobile); }
  .sv-page-head { padding-top: var(--sv-space-5); }
  .sv-app .sv-panel { inset: auto 0 0 0; width: auto; max-height: 85vh; border-radius: var(--sv-radius-xl) var(--sv-radius-xl) 0 0; }
  .sv-search { min-width: 0; width: 100%; }
  .sv-toolbar > * { flex: 1 1 auto; }
  .sv-form__row { grid-template-columns: minmax(0, 1fr); }
  .sv-toasts { left: var(--sv-space-2); right: var(--sv-space-2); bottom: var(--sv-space-2); }
  .sv-toast { width: auto; }
  .sv-dialog { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--sv-radius-xl) var(--sv-radius-xl) 0 0; }
  .sv-nav-item, .sv-menu-item, .sv-row { min-height: var(--sv-size-control-lg); } /* touch targets */
  .sv-set-row { flex-wrap: wrap; gap: var(--sv-space-3); }
}
@media (max-width: 359px) { .sv-stat-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sv-base *, .sv-base *::before, .sv-base *::after { animation: none !important; transition: none !important; }
  .sv-shimmer { color: var(--sv-color-text-secondary); background: none; }
}
html.reduce-motion .sv-base *, html.reduce-motion .sv-base *::before, html.reduce-motion .sv-base *::after { animation: none !important; transition: none !important; }