*, *::before, *::after { box-sizing: border-box; }


[hidden] { display: none !important; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

img, svg, video, canvas { display: block; max-width: 100%; }

svg[viewBox]:not([width]) { width: 1em; height: 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  text-wrap: balance;
}
p { text-wrap: pretty; }
hr { border: 0; border-top: var(--border-w) solid var(--border); }
::selection { background: var(--accent-subtle); color: var(--text-strong); }

:focus-visible {
  outline: var(--border-w-thick) solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.s-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.s-skip {
  position: absolute; top: var(--space-2); left: var(--space-2); z-index: var(--z-toast);
  transform: translateY(-200%); background: var(--surface); color: var(--text);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); transition: transform var(--duration-fast) var(--ease-default);
}
.s-skip:focus { transform: translateY(0); }


.s-display { font-family: var(--font-display); font-weight: var(--font-extrabold);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-7xl)); line-height: 1.02;
  letter-spacing: var(--tracking-tighter); color: var(--text-strong); }
.s-h1 { font-size: clamp(var(--text-3xl), 4.4vw, var(--text-5xl)); letter-spacing: var(--tracking-tighter); }
.s-h2 { font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl)); }
.s-h3 { font-size: var(--text-2xl); }
.s-h4 { font-size: var(--text-xl); letter-spacing: var(--tracking-normal); }
.s-lead { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--text-muted); }
.s-body { font-size: var(--text-base); color: var(--text); }
.s-small { font-size: var(--text-sm); color: var(--text-muted); }
.s-fine { font-size: var(--text-xs); color: var(--text-subtle); }
.s-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }


.s-eyebrow {
  font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: var(--font-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--accent);
}
.s-eyebrow--muted { color: var(--text-subtle); }

.s-gradient-text {
  background: linear-gradient(96deg, var(--text-strong) 12%, var(--accent) 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.s-link { color: var(--text-link); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; transition: color var(--duration-fast) var(--ease-default); }
.s-link:hover { color: var(--accent-hover); }
.s-prose { max-width: var(--container-text); }
.s-prose > * + * { margin-top: var(--space-4); }
.s-prose h2 { margin-top: var(--space-10); font-size: var(--text-2xl); }
.s-prose h3 { margin-top: var(--space-8); font-size: var(--text-xl); }
.s-prose ul, .s-prose ol { padding-left: var(--space-6); }
.s-prose li + li { margin-top: var(--space-2); }
.s-prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-inset);
  padding: 0.12em 0.4em; border-radius: var(--radius-xs); border: var(--border-w) solid var(--border-subtle); }


.s-container { width: 100%; max-width: var(--container-wide); margin-inline: auto;
  padding-inline: var(--space-5); }
@media (min-width: 768px) { .s-container { padding-inline: var(--space-8); } }
.s-container--narrow { max-width: var(--container-narrow); }
.s-container--text { max-width: var(--container-text); }
.s-container--base { max-width: var(--container-base); }
.s-container--full { max-width: var(--container-full); }

.s-section { padding-block: var(--space-16); }
@media (min-width: 768px) { .s-section { padding-block: var(--space-24); } }
.s-section--tight { padding-block: var(--space-12); }
.s-section--paper { background: var(--bg-subtle); }
.s-section--ink { background: var(--band-bg); color: var(--band-text);
  border-block: var(--border-w) solid var(--band-border); }
.s-section--ink h1, .s-section--ink h2, .s-section--ink h3 { color: var(--band-heading); }
.s-section--ink .s-eyebrow { color: var(--band-accent); }
.s-section--ink .s-small, .s-section--ink .s-fine { color: var(--band-muted); }
.s-section--ink .s-table td { color: var(--band-text); }
.s-section--ink .s-table th { color: var(--band-muted); }
.s-section--ink .s-table td, .s-section--ink .s-table th { border-color: var(--band-border); }

.s-stack { display: flex; flex-direction: column; }
.s-row { display: flex; align-items: center; }
.s-wrap { flex-wrap: wrap; }
.s-between { justify-content: space-between; }
.s-center { justify-content: center; align-items: center; }
.s-end { justify-content: flex-end; }
.s-grow { flex: 1 1 auto; min-width: 0; }
.s-gap-1 { gap: var(--space-1); } .s-gap-2 { gap: var(--space-2); }
.s-gap-3 { gap: var(--space-3); } .s-gap-4 { gap: var(--space-4); }
.s-gap-5 { gap: var(--space-5); } .s-gap-6 { gap: var(--space-6); }
.s-gap-8 { gap: var(--space-8); } .s-gap-10 { gap: var(--space-10); }
.s-gap-12 { gap: var(--space-12); }

.s-grid { display: grid; gap: var(--space-6); }
.s-grid-2 { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.s-grid-3 { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }

.s-grid-4 { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 480px) { .s-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .s-grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) {
  .s-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .s-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) { .s-grid-3--lg { grid-template-columns: repeat(3, 1fr); } }

.s-divider { height: var(--border-w); background: var(--border); border: 0; }
.s-divider--fade { background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent); }


.s-btn {
  --btn-bg: var(--surface); --btn-fg: var(--text); --btn-bd: var(--border);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-h); padding-inline: var(--space-4);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-semibold);
  line-height: 1; white-space: nowrap; cursor: pointer; user-select: none;
  background: var(--btn-bg);
  
  color: var(--btn-fg);
  border: var(--border-w) solid var(--btn-bd); border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default),
              transform var(--duration-instant) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

.s-btn:hover { --btn-bg: var(--surface-hover); --btn-fg: var(--text);
  border-color: var(--border-strong); }

.s-btn:active { transform: translateY(0.5px); }
.s-btn[disabled], .s-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.s-btn svg { width: 1.05em; height: 1.05em; flex: none; }


a.s-btn, button.s-btn, input.s-btn { color: var(--btn-fg); }
a.s-btn:hover, button.s-btn:hover { color: var(--btn-fg); }

.s-btn--primary { --btn-bg: var(--accent); --btn-fg: var(--text-on-accent); --btn-bd: transparent;
  box-shadow: 0 1px 2px rgba(8,11,13,.14), inset 0 1px 0 rgba(255,255,255,.24); }
.s-btn--primary:hover { --btn-bg: var(--accent-hover); border-color: transparent; }
.s-btn--primary:active { --btn-bg: var(--accent-active); --btn-fg: var(--text-on-accent); }

.s-btn--ink { --btn-bg: var(--ink-900); --btn-fg: var(--paper-50); --btn-bd: transparent; }
.s-btn--ink:hover { --btn-bg: var(--ink-800); --btn-fg: var(--paper-50); border-color: transparent; }
[data-theme="dark"] .s-btn--ink { --btn-bg: var(--paper-50); --btn-fg: var(--ink-950); }
[data-theme="dark"] .s-btn--ink:hover { --btn-bg: var(--white); --btn-fg: var(--ink-950); }

.s-btn--ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--text-muted); }
.s-btn--ghost:hover { --btn-bg: var(--surface-hover); --btn-fg: var(--text); border-color: transparent; }

.s-btn--outline { --btn-bg: transparent; --btn-bd: var(--border-strong); --btn-fg: var(--text); }
.s-btn--outline:hover { --btn-bg: var(--accent-subtle); --btn-bd: var(--accent); --btn-fg: var(--text-strong); }

.s-btn--danger { --btn-bg: transparent; --btn-bd: var(--error); --btn-fg: var(--error); }
.s-btn--danger:hover { --btn-bg: var(--error); --btn-fg: var(--white); border-color: var(--error); }
.s-btn--danger-solid { --btn-bg: var(--error); --btn-fg: var(--white); --btn-bd: transparent; }
.s-btn--danger-solid:hover { --btn-bg: var(--rose-600); --btn-fg: var(--white); border-color: transparent; }

[data-theme="dark"] .s-btn--danger-solid { --btn-fg: var(--ink-950); }
[data-theme="dark"] .s-btn--danger-solid:hover { --btn-bg: var(--rose-500); --btn-fg: var(--ink-950); }

.s-btn--sm { height: var(--control-h-sm); padding-inline: var(--space-3); font-size: var(--text-xs); }
.s-btn--lg { height: var(--control-h-lg); padding-inline: var(--space-6); font-size: var(--text-base); }
.s-btn--xl { height: 3.25rem; padding-inline: var(--space-8); font-size: var(--text-lg); border-radius: var(--radius-lg); }
.s-btn--block { width: 100%; }
.s-btn--pill { border-radius: var(--radius-full); }
.s-btn--icon { width: var(--control-h); padding: 0; }
.s-btn--icon.s-btn--sm { width: var(--control-h-sm); }


a.s-btn:hover, button.s-btn:hover { --btn-bg: var(--surface-hover); --btn-fg: var(--text); }

a.s-btn--primary:hover, button.s-btn--primary:hover {
  --btn-bg: var(--accent-hover); --btn-fg: var(--text-on-accent); border-color: transparent; }

a.s-btn--ink:hover, button.s-btn--ink:hover {
  --btn-bg: var(--ink-800); --btn-fg: var(--paper-50); border-color: transparent; }
[data-theme="dark"] a.s-btn--ink:hover, [data-theme="dark"] button.s-btn--ink:hover {
  --btn-bg: var(--white); --btn-fg: var(--ink-950); }

a.s-btn--outline:hover, button.s-btn--outline:hover {
  --btn-bg: var(--accent-subtle); --btn-fg: var(--text-strong); border-color: var(--accent); }

a.s-btn--ghost:hover, button.s-btn--ghost:hover {
  --btn-bg: var(--surface-hover); --btn-fg: var(--text); border-color: transparent; }

a.s-btn--danger:hover, button.s-btn--danger:hover {
  --btn-bg: var(--error); --btn-fg: var(--white); border-color: var(--error); }
[data-theme="dark"] a.s-btn--danger:hover, [data-theme="dark"] button.s-btn--danger:hover {
  --btn-fg: var(--ink-950); }

a.s-btn--danger-solid:hover, button.s-btn--danger-solid:hover {
  --btn-bg: var(--rose-600); --btn-fg: var(--white); border-color: transparent; }
[data-theme="dark"] a.s-btn--danger-solid:hover, [data-theme="dark"] button.s-btn--danger-solid:hover {
  --btn-bg: var(--rose-500); --btn-fg: var(--ink-950); }

.s-btn-group { display: inline-flex; }
.s-btn-group .s-btn { border-radius: 0; margin-left: calc(-1 * var(--border-w)); }
.s-btn-group .s-btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); margin-left: 0; }
.s-btn-group .s-btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.s-btn-group .s-btn[aria-pressed="true"] { background: var(--accent-subtle); border-color: var(--accent); color: var(--text-strong); z-index: 1; }


.s-field { display: flex; flex-direction: column; gap: var(--space-2); }
.s-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-strong); }
.s-label--opt::after { content: " optional"; font-weight: var(--font-normal); color: var(--text-subtle); }
.s-hint { font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-snug); }
.s-error-text { font-size: var(--text-xs); color: var(--error); display: flex; align-items: center; gap: var(--space-1); }

.s-input, .s-select, .s-textarea {
  width: 100%; height: var(--control-h); padding-inline: var(--space-3);
  font-size: var(--text-sm); color: var(--text); background: var(--surface);
  border: var(--border-w) solid var(--border); border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}
.s-textarea { height: auto; min-height: 6rem; padding: var(--space-3); line-height: var(--leading-normal); resize: vertical; }
.s-input::placeholder, .s-textarea::placeholder { color: var(--text-subtle); }
.s-input:hover, .s-select:hover, .s-textarea:hover { border-color: var(--border-strong); }
.s-input:focus, .s-select:focus, .s-textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring);
}
.s-input[aria-invalid="true"], .s-textarea[aria-invalid="true"] { border-color: var(--error); }
.s-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--error-subtle); }
.s-input[disabled], .s-select[disabled], .s-textarea[disabled] { opacity: 0.55; cursor: not-allowed; background: var(--bg-inset); }
.s-input--lg { height: var(--control-h-lg); font-size: var(--text-base); }

.s-select { appearance: none; padding-right: var(--space-8); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236b7c86' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-3) center; }

.s-input-group { display: flex; align-items: stretch; }
.s-input-group .s-input { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.s-input-group .s-btn { border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-left: calc(-1 * var(--border-w)); height: auto; }
.s-input-affix { display: flex; align-items: center; padding-inline: var(--space-3);
  font-size: var(--text-sm); color: var(--text-muted); background: var(--bg-inset);
  border: var(--border-w) solid var(--border); border-radius: var(--radius-md) 0 0 var(--radius-md);
  border-right: 0; white-space: nowrap; }


.s-check { display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--text-sm); }
.s-check input { appearance: none; flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.09rem;
  border: var(--border-w-thick) solid var(--border-strong); border-radius: var(--radius-xs);
  background: var(--surface); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default); }
.s-check input[type="radio"] { border-radius: var(--radius-full); }
.s-check input:checked { background: var(--accent); border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.5' fill='none' stroke='%23080b0d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 0.72rem; background-repeat: no-repeat; background-position: center; }
.s-check input[type="radio"]:checked { background-image: none; box-shadow: inset 0 0 0 3px var(--surface); }
.s-check input:focus-visible { outline: var(--border-w-thick) solid var(--accent); outline-offset: 2px; }
.s-check small { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-top: var(--space-1); }


.s-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--text-sm); }
.s-switch input { appearance: none; flex: none; position: relative; width: 2.375rem; height: 1.375rem;
  border-radius: var(--radius-full); background: var(--bg-muted); border: var(--border-w) solid var(--border);
  cursor: pointer; transition: background var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default); }
.s-switch input::after { content: ""; position: absolute; top: 0.125rem; left: 0.125rem; width: 1rem; height: 1rem;
  border-radius: var(--radius-full); background: var(--text-subtle);
  transition: transform var(--duration-base) var(--ease-spring), background var(--duration-base) var(--ease-default); }
.s-switch input:checked { background: var(--accent-subtle); border-color: var(--accent); }
.s-switch input:checked::after { transform: translateX(1rem); background: var(--accent); }
.s-switch input:focus-visible { outline: var(--border-w-thick) solid var(--accent); outline-offset: 2px; }


.s-range { appearance: none; width: 100%; height: 1.5rem; background: transparent; cursor: pointer; }
.s-range::-webkit-slider-runnable-track { height: 0.375rem; border-radius: var(--radius-full); background: var(--bg-muted); }
.s-range::-webkit-slider-thumb { appearance: none; width: 1.125rem; height: 1.125rem; margin-top: -0.375rem;
  border-radius: var(--radius-full); background: var(--accent); border: var(--border-w-thick) solid var(--surface);
  box-shadow: var(--shadow-sm); }
.s-range::-moz-range-track { height: 0.375rem; border-radius: var(--radius-full); background: var(--bg-muted); }
.s-range::-moz-range-thumb { width: 1.125rem; height: 1.125rem; border: var(--border-w-thick) solid var(--surface);
  border-radius: var(--radius-full); background: var(--accent); }


.s-seg { display: inline-flex; padding: 0.1875rem; gap: 0.125rem; background: var(--bg-inset);
  border: var(--border-w) solid var(--border); border-radius: var(--radius-md); }
.s-seg button { appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-muted); white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default); }
.s-seg button:hover { color: var(--text); }
.s-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-xs); }
[data-theme="dark"] .s-seg button[aria-pressed="true"] { background: var(--ink-700); }
.s-seg--block { display: flex; width: 100%; }
.s-seg--block button { flex: 1; }


.s-badge { display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0.15rem var(--space-2); border-radius: var(--radius-xs);
  font-size: var(--text-2xs); font-weight: var(--font-semibold); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; background: var(--bg-muted); color: var(--text-muted);
  border: var(--border-w) solid var(--border); white-space: nowrap; }
.s-badge--accent  { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent-border); }
.s-badge--success { background: var(--success-subtle); color: var(--success); border-color: transparent; }
.s-badge--warning { background: var(--warning-subtle); color: var(--warning); border-color: transparent; }
.s-badge--error   { background: var(--error-subtle); color: var(--error); border-color: transparent; }
.s-badge--info    { background: var(--info-subtle); color: var(--info); border-color: transparent; }
.s-badge--solid   { background: var(--accent); color: var(--text-on-accent); border-color: transparent;
  font-weight: var(--font-bold); }
.s-badge--pill    { border-radius: var(--radius-full); padding-inline: var(--space-3); }

.s-badge { max-width: 100%; }
.s-badge--wrap { white-space: normal; text-transform: none; letter-spacing: 0; font-size: var(--text-xs); }

.s-status { display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-muted); }
.s-status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full);
  background: currentColor; flex: none; }
.s-status--queued  { color: var(--status-queued); }
.s-status--running { color: var(--status-running); }
.s-status--done    { color: var(--status-done); }
.s-status--failed  { color: var(--status-failed); }
.s-status--stopped { color: var(--status-stopped); }
.s-status--review  { color: var(--status-review); }
.s-status--running::before { animation: s-pulse 1.6s var(--ease-in-out) infinite; }
@keyframes s-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } }

.s-chip { display: inline-flex; align-items: center; gap: var(--space-2); height: 1.75rem;
  padding-inline: var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs);
  font-weight: var(--font-medium); background: var(--surface); color: var(--text-muted);
  border: var(--border-w) solid var(--border); cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default); }
.s-chip:hover { border-color: var(--border-strong); color: var(--text); }
.s-chip[aria-pressed="true"] { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); }
.s-chip__x { opacity: 0.5; } .s-chip:hover .s-chip__x { opacity: 1; }

.s-dot { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--text-subtle); flex: none; }


.s-card { background: var(--surface); border: var(--border-w) solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; }
.s-card--pad { padding: var(--space-5); }
.s-card--pad-lg { padding: var(--space-6); }
.s-card--raised { box-shadow: var(--shadow-md); }
.s-card--interactive { transition: border-color var(--duration-fast) var(--ease-default),
  transform var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default); }
.s-card--interactive:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.s-card--accent { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border), var(--shadow-md); }
.s-card--flat { background: var(--surface-subtle); border-color: var(--border-subtle); }

.s-card--ink { background: var(--band-bg); border-color: var(--band-border); color: var(--band-text); }
.s-card--ink h1, .s-card--ink h2, .s-card--ink h3, .s-card--ink .s-h4 { color: var(--band-heading); }
.s-card--ink .s-lead, .s-card--ink .s-small, .s-card--ink .s-body { color: var(--band-text); }
.s-card--ink .s-fine { color: var(--band-muted); }
.s-card--ink .col__title { color: var(--band-muted); }
.s-card--ink a:not(.s-btn) { color: var(--band-accent); }
.s-card--ink .s-btn:not(.s-btn--primary):not(.s-btn--danger):not(.s-btn--danger-solid) {
  --btn-bg: transparent; --btn-fg: var(--band-heading); border-color: var(--band-border); }
.s-card--ink .s-input, .s-card--ink .s-select {
  background: var(--shot-inset); border-color: var(--band-border); color: var(--band-heading); }
.s-card--ink .s-input::placeholder { color: var(--band-muted); }
.s-card--ink .s-label { color: var(--band-heading); }
.s-card--ink .s-hint { color: var(--band-muted); }

.s-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); border-bottom: var(--border-w) solid var(--border); }
.s-card__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--font-bold);
  color: var(--text-strong); }
.s-card__body { padding: var(--space-5); }
.s-card__foot { padding: var(--space-4) var(--space-5); border-top: var(--border-w) solid var(--border);
  background: var(--surface-subtle); }

.s-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.s-stat__label { font-size: var(--text-2xs); font-weight: var(--font-semibold); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-subtle); }
.s-stat__value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--font-bold);
  color: var(--text-strong); line-height: var(--leading-none); font-variant-numeric: tabular-nums; }
.s-stat__meta { font-size: var(--text-xs); color: var(--text-muted); }
.s-stat__delta { font-size: var(--text-xs); font-weight: var(--font-semibold); }
.s-stat__delta--up { color: var(--success); } .s-stat__delta--down { color: var(--error); }

.s-callout { display: flex; gap: var(--space-3); padding: var(--space-4);
  border-radius: var(--radius-md); border: var(--border-w) solid var(--border);
  background: var(--surface-subtle); font-size: var(--text-sm); }
.s-callout__icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.1rem; }
.s-callout__title { font-weight: var(--font-semibold); color: var(--text-strong); margin-bottom: var(--space-1); }
.s-callout--info    { background: var(--info-subtle); border-color: transparent; }
.s-callout--info .s-callout__icon { color: var(--info); }
.s-callout--success { background: var(--success-subtle); border-color: transparent; }
.s-callout--success .s-callout__icon { color: var(--success); }
.s-callout--warning { background: var(--warning-subtle); border-color: transparent; }
.s-callout--warning .s-callout__icon { color: var(--warning); }
.s-callout--error   { background: var(--error-subtle); border-color: transparent; }
.s-callout--error .s-callout__icon { color: var(--error); }


.s-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2rem; height: 2rem; border-radius: var(--radius-full);
  background: var(--bg-muted); color: var(--text-muted);
  font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase;
  border: var(--border-w) solid var(--border); overflow: hidden; }
.s-avatar--sm { width: 1.5rem; height: 1.5rem; font-size: var(--text-2xs); }
.s-avatar--lg { width: 2.75rem; height: 2.75rem; font-size: var(--text-sm); }
.s-avatar--xl { width: 4rem; height: 4rem; font-size: var(--text-lg); }
.s-avatar--accent { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent-border); }


.s-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.s-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.s-table th { text-align: left; font-size: var(--text-2xs); font-weight: var(--font-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-subtle);
  padding: var(--space-3) var(--space-4); border-bottom: var(--border-w) solid var(--border); white-space: nowrap; }
.s-table td { padding: var(--space-3) var(--space-4); border-bottom: var(--border-w) solid var(--border-subtle);
  color: var(--text); vertical-align: middle; }
.s-table tbody tr:last-child td { border-bottom: 0; }
.s-table tbody tr { transition: background var(--duration-fast) var(--ease-default); }
.s-table tbody tr:hover { background: var(--surface-hover); }
.s-table--fixed { table-layout: fixed; }
.s-table .s-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.s-table__pos { color: var(--success); } .s-table__neg { color: var(--error); }


.s-tabs { display: flex; gap: var(--space-1); border-bottom: var(--border-w) solid var(--border);
  overflow-x: auto; scrollbar-width: none; }
.s-tabs::-webkit-scrollbar { display: none; }
.s-tab { appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: var(--font-medium);
  color: var(--text-muted); white-space: nowrap; position: relative;
  transition: color var(--duration-fast) var(--ease-default); }
.s-tab:hover { color: var(--text); }
.s-tab[aria-selected="true"] { color: var(--text-strong); font-weight: var(--font-semibold); }
.s-tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--space-2); right: var(--space-2);
  bottom: -1px; height: var(--border-w-thick); background: var(--accent); border-radius: var(--radius-full); }
.s-tab__count { margin-left: var(--space-2); font-size: var(--text-2xs); color: var(--text-subtle);
  background: var(--bg-muted); padding: 0.1rem var(--space-2); border-radius: var(--radius-full); }

.s-breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm);
  color: var(--text-muted); flex-wrap: wrap; }
.s-breadcrumb a:hover { color: var(--text); }
.s-breadcrumb__sep { color: var(--text-subtle); user-select: none; }
.s-breadcrumb [aria-current="page"] { color: var(--text-strong); font-weight: var(--font-medium); }

.s-pager { display: flex; align-items: center; gap: var(--space-1); }
.s-pager button { appearance: none; min-width: var(--control-h-sm); height: var(--control-h-sm);
  padding-inline: var(--space-2); border: var(--border-w) solid var(--border); background: var(--surface);
  border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--text-muted); cursor: pointer; }
.s-pager button:hover { border-color: var(--border-strong); color: var(--text); }
.s-pager button[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); font-weight: var(--font-semibold); }


.s-progress { width: 100%; height: 0.375rem; background: var(--bg-muted);
  border-radius: var(--radius-full); overflow: hidden; }
.s-progress__bar { height: 100%; background: var(--accent); border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-default); }
.s-progress--lg { height: 0.625rem; }
.s-progress--xs { height: 0.25rem; }
.s-progress--indeterminate .s-progress__bar {
  width: 34%; animation: s-slide 1.5s var(--ease-in-out) infinite; }
@keyframes s-slide { 0% { margin-left: -34%; } 100% { margin-left: 100%; } }
.s-progress--warning .s-progress__bar { background: var(--warning); }
.s-progress--error .s-progress__bar { background: var(--error); }
.s-progress--segmented { display: flex; gap: 2px; background: transparent; }
.s-progress--segmented .s-progress__bar { border-radius: 1px; }

.s-meter { display: flex; flex-direction: column; gap: var(--space-2); }
.s-meter__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.s-meter__value { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--font-bold);
  color: var(--text-strong); font-variant-numeric: tabular-nums; }
.s-meter__track { height: 0.5rem; background: var(--bg-muted); border-radius: var(--radius-full);
  overflow: hidden; display: flex; }
.s-meter__fill { height: 100%; background: var(--accent); transition: width var(--duration-slow) var(--ease-default); }
.s-meter__fill--over { background: var(--error); }
.s-meter__fill--warn { background: var(--warning); }


.s-cutbar { display: flex; height: 2.25rem; border-radius: var(--radius-sm); overflow: hidden;
  border: var(--border-w) solid var(--border); background: var(--bg-inset); }
.s-cutbar__seg { position: relative; min-width: 2px; background: var(--surface-hover);
  border-right: var(--border-w) solid var(--bg-inset); }
.s-cutbar__seg--keep { background: var(--accent-subtle); }
.s-cutbar__seg--drop { background: repeating-linear-gradient(45deg, transparent, transparent 3px,
  var(--bg-muted) 3px, var(--bg-muted) 6px); }
.s-cutbar__seg--speech { background: var(--accent-subtle); }
.s-cutbar__seg--pause { background: var(--bg-muted); }


.s-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); padding: var(--space-10) var(--space-6); text-align: center;
  background: var(--surface-subtle); border: var(--border-w-thick) dashed var(--border-strong);
  border-radius: var(--radius-xl); cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default),
              background var(--duration-fast) var(--ease-default); }
.s-drop:hover { border-color: var(--accent); background: var(--accent-subtle); }
.s-drop[data-drag="true"] { border-color: var(--accent); background: var(--accent-subtle); transform: scale(1.006); }
.s-drop__icon { width: 2.5rem; height: 2.5rem; color: var(--accent); }
.s-drop__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--font-bold);
  color: var(--text-strong); }

.s-filelist { display: flex; flex-direction: column; gap: var(--space-2); }
.s-file { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-md); }
.s-file__thumb { width: 3.25rem; height: 2rem; border-radius: var(--radius-xs); background: var(--bg-muted);
  object-fit: cover; flex: none; display: grid; place-items: center; color: var(--text-subtle); }
.s-file__name { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-file__meta { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle); }
.s-file__role { flex: none; }


.s-chat { display: flex; flex-direction: column; gap: var(--space-5); }
.s-msg { display: flex; gap: var(--space-3); max-width: 46rem; }
.s-msg--me { margin-left: auto; flex-direction: row-reverse; }
.s-msg__bubble { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
  background: var(--surface); border: var(--border-w) solid var(--border);
  font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.s-msg--me .s-msg__bubble { background: var(--accent-subtle); border-color: var(--accent-border); }
.s-msg__who { font-size: var(--text-2xs); font-weight: var(--font-semibold); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-subtle); margin-bottom: var(--space-1); }
.s-msg__time { font-size: var(--text-2xs); color: var(--text-subtle); margin-top: var(--space-2); }


.s-understood { margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md);
  background: var(--bg-inset); border: var(--border-w) solid var(--border-subtle); }
.s-understood__head { font-size: var(--text-2xs); font-weight: var(--font-semibold); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--accent); margin-bottom: var(--space-2); }
.s-understood ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.s-understood li { font-size: var(--text-xs); color: var(--text-muted); display: flex; gap: var(--space-2); }
.s-understood li::before { content: "→"; color: var(--accent); flex: none; }
.s-understood__remembered { margin-top: var(--space-2); padding-top: var(--space-2);
  border-top: var(--border-w) dashed var(--border); font-size: var(--text-xs); color: var(--text-muted); }

.s-composer { display: flex; gap: var(--space-2); align-items: flex-end; padding: var(--space-3);
  background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); }
.s-composer .s-textarea { border: 0; background: transparent; padding: var(--space-1) var(--space-2);
  min-height: 2.5rem; max-height: 12rem; }
.s-composer .s-textarea:focus { box-shadow: none; }
.s-suggest { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.s-suggest button { appearance: none; cursor: pointer; font-size: var(--text-xs); color: var(--text-muted);
  background: var(--surface); border: var(--border-w) solid var(--border);
  border-radius: var(--radius-full); padding: var(--space-1) var(--space-3);
  transition: all var(--duration-fast) var(--ease-default); }
.s-suggest button:hover { border-color: var(--accent); color: var(--accent); }

.s-stars { display: inline-flex; gap: 0.125rem; }
.s-stars button { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 0;
  color: var(--text-subtle); font-size: 1.25rem; line-height: 1;
  transition: color var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-spring); }
.s-stars button:hover { transform: scale(1.15); }
.s-stars button[aria-checked="true"], .s-stars button.is-on { color: var(--amber-400); }


.s-timeline { position: relative; border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md); background: var(--bg-inset); overflow: hidden; }
.s-timeline__ruler { display: flex; height: 1.5rem; border-bottom: var(--border-w) solid var(--border);
  background: var(--surface-subtle); }
.s-timeline__tick { flex: none; border-left: var(--border-w) solid var(--border-subtle);
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle);
  padding-left: var(--space-1); display: flex; align-items: center; }
.s-timeline__track { position: relative; height: 2.75rem; border-bottom: var(--border-w) solid var(--border-subtle); }
.s-timeline__track:last-child { border-bottom: 0; }
.s-timeline__clip { position: absolute; top: 0.25rem; bottom: 0.25rem; border-radius: var(--radius-xs);
  background: var(--accent-subtle); border: var(--border-w) solid var(--accent-border); overflow: hidden; }
.s-timeline__clip--dropped { background: repeating-linear-gradient(45deg, transparent, transparent 4px,
  var(--bg-muted) 4px, var(--bg-muted) 8px); border-color: var(--border); }
.s-timeline__playhead { position: absolute; top: 0; bottom: 0; width: var(--border-w-thick);
  background: var(--accent); z-index: var(--z-raised); pointer-events: none; }
.s-timeline__playhead::before { content: ""; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 7px solid var(--accent); }


.s-wave { display: flex; align-items: center; gap: 1px; height: 2.5rem; }
.s-wave span { flex: 1; background: var(--border-strong); border-radius: 1px; min-height: 2px; }
.s-wave span.is-speech { background: var(--accent); }



.s-player { position: relative; background: var(--ink-950);
  --text: var(--ink-100); --text-muted: var(--ink-300); --text-subtle: var(--ink-400);
  color: var(--ink-100);
  border-radius: var(--radius-lg);
  overflow: hidden; border: var(--border-w) solid var(--border); }
.s-player__stage { aspect-ratio: 16 / 9; display: grid; place-items: center; position: relative; }
.s-player__stage--reel { aspect-ratio: 9 / 16; max-width: 22rem; margin-inline: auto; }
.s-player__placeholder { display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  color: var(--ink-300); text-align: center; padding: var(--space-6); }
.s-player__bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.7)); }
.s-player__scrub { flex: 1; height: 0.25rem; background: rgba(255,255,255,.18);
  border-radius: var(--radius-full); position: relative; cursor: pointer; }
.s-player__scrub i { position: absolute; inset: 0 auto 0 0; background: var(--accent);
  border-radius: var(--radius-full); display: block; }
.s-player__time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-100);
  font-variant-numeric: tabular-nums; }
.s-player__btn { appearance: none; border: 0; background: transparent; color: var(--ink-100);
  cursor: pointer; padding: var(--space-1); display: grid; place-items: center; border-radius: var(--radius-sm); }
.s-player__btn:hover { background: rgba(255,255,255,.1); }


.s-header { position: sticky; top: 0; z-index: var(--z-sticky); height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: var(--border-w) solid var(--border); }
.s-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  height: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--space-5); }
@media (min-width: 768px) { .s-header__inner { padding-inline: var(--space-8); } }
.s-nav { display: none; align-items: center; gap: var(--space-1); }
@media (min-width: 1024px) { .s-nav { display: flex; } }
.s-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default); }
.s-nav a:hover { color: var(--text-strong); background: var(--surface-hover); }
.s-nav a[aria-current="page"] { color: var(--text-strong); }
.s-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.s-burger { display: inline-flex; }
@media (min-width: 1024px) { .s-burger { display: none; } }


.s-app { display: grid; min-height: 100vh; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .s-app { grid-template-columns: var(--sidenav-w) 1fr; } }
.s-sidenav { display: none; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-3);
  background: var(--bg-subtle); border-right: var(--border-w) solid var(--border);
  position: sticky; top: 0; height: 100vh; overflow-y: auto; }
@media (min-width: 1024px) { .s-sidenav { display: flex; } }
.s-sidenav__group { margin-top: var(--space-5); }
.s-sidenav__label { font-size: var(--text-2xs); font-weight: var(--font-semibold); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--text-subtle); padding: var(--space-2) var(--space-3); }
.s-navitem { display: flex; align-items: center; gap: var(--space-3); height: 2.25rem;
  padding-inline: var(--space-3); border-radius: var(--radius-md); font-size: var(--text-sm);
  font-weight: var(--font-medium); color: var(--text-muted); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default); }
.s-navitem:hover { background: var(--surface-hover); color: var(--text); }
.s-navitem[aria-current="page"] { background: var(--accent-subtle); color: var(--accent); font-weight: var(--font-semibold); }
.s-navitem svg { width: 1.05rem; height: 1.05rem; flex: none; }
.s-navitem__badge { margin-left: auto; font-size: var(--text-2xs); font-family: var(--font-mono);
  color: var(--text-subtle); }

.s-appbar { display: flex; align-items: center; gap: var(--space-3); height: var(--appbar-h);
  padding-inline: var(--space-4); background: var(--bg); border-bottom: var(--border-w) solid var(--border);
  position: sticky; top: 0; z-index: var(--z-sticky); }
.s-appmain { min-width: 0; padding: var(--space-5); padding-bottom: calc(var(--space-5) + var(--tabbar-h)); }
@media (min-width: 1024px) { .s-appmain { padding: var(--space-8); padding-bottom: var(--space-8); } }

.s-tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky);
  height: calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: var(--border-w) solid var(--border); }
@media (min-width: 1024px) { .s-tabbar { display: none; } }
.s-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.15rem; font-size: var(--text-2xs); font-weight: var(--font-medium); color: var(--text-subtle); }
.s-tabbar a[aria-current="page"] { color: var(--accent); }
.s-tabbar svg { width: 1.25rem; height: 1.25rem; }


.s-scrim { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--bg-overlay);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

.s-modal { position: relative; z-index: var(--z-modal); margin: auto;
  width: min(100% - var(--space-8), 30rem);
  background: var(--surface); border: var(--border-w) solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; }
.s-modal--lg { width: min(100% - var(--space-8), 46rem); }
.s-modal--xl { width: min(100% - var(--space-8), 64rem); }
.s-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4); }
.s-modal__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--font-bold);
  color: var(--text-strong); }
.s-modal__sub { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); }
.s-modal__body { padding: 0 var(--space-5) var(--space-5); overflow-wrap: anywhere; }

.s-modal__foot { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end;
  padding: var(--space-4) var(--space-5); border-top: var(--border-w) solid var(--border);
  background: var(--surface-subtle); }
@media (max-width: 479px) {
  .s-modal__foot { flex-direction: column-reverse; }
  .s-modal__foot > .s-btn { width: 100%; }
}
.s-center-wrap { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center;
  padding: var(--space-4); overflow-y: auto; overscroll-behavior: contain; }

.s-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-modal);
  width: min(100%, 26rem); background: var(--surface); border-left: var(--border-w) solid var(--border);
  box-shadow: var(--shadow-xl); display: flex; flex-direction: column; }
.s-drawer__head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-5); border-bottom: var(--border-w) solid var(--border); }
.s-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-5); }
.s-drawer__foot { padding: var(--space-4) var(--space-5); border-top: var(--border-w) solid var(--border); }

.s-pop { position: absolute; z-index: var(--z-popover); min-width: 12rem; padding: var(--space-2);
  background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); }
.s-menu-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3);
  border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer;
  font-size: var(--text-sm); color: var(--text); text-align: left; }
.s-menu-item:hover { background: var(--surface-hover); }
.s-menu-item--danger { color: var(--error); }
.s-menu-item--danger:hover { background: var(--error-subtle); }
.s-menu-sep { height: var(--border-w); background: var(--border); margin: var(--space-2) 0; }

.s-toast { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 18rem; max-width: 24rem;
  padding: var(--space-4); background: var(--surface); border: var(--border-w) solid var(--border);
  border-left: var(--border-w-heavy) solid var(--accent); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); font-size: var(--text-sm); }
.s-toast--error { border-left-color: var(--error); }
.s-toast--warning { border-left-color: var(--warning); }
.s-toast--success { border-left-color: var(--success); }
.s-toaster { position: fixed; bottom: var(--space-5); right: var(--space-5); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--space-3); }

.s-tip { position: relative; display: inline-flex; }
.s-tip__body { position: absolute; bottom: calc(100% + var(--space-2)); left: 50%; transform: translateX(-50%);
  z-index: var(--z-tooltip); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--ink-900); color: var(--paper-50); font-size: var(--text-xs); white-space: nowrap;
  box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-default); }
.s-tip:hover .s-tip__body, .s-tip:focus-within .s-tip__body { opacity: 1; }


.s-acc { border: var(--border-w) solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); overflow: hidden; }
.s-acc + .s-acc { margin-top: var(--space-3); }
.s-acc summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); cursor: pointer; font-weight: var(--font-semibold);
  font-size: var(--text-base); color: var(--text-strong); list-style: none; }
.s-acc summary::-webkit-details-marker { display: none; }
.s-acc summary::after { content: "+"; font-family: var(--font-mono); color: var(--text-subtle); font-size: var(--text-lg); }
.s-acc[open] summary::after { content: "–"; }
.s-acc[open] summary { border-bottom: var(--border-w) solid var(--border); }
.s-acc__body { padding: var(--space-4) var(--space-5); font-size: var(--text-sm); color: var(--text-muted);
  line-height: var(--leading-relaxed); }


.s-empty { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-4); padding: var(--space-12) var(--space-6); }
.s-empty__art { width: 4rem; height: 4rem; color: var(--border-strong); }
.s-empty__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--font-bold);
  color: var(--text-strong); }
.s-empty__sub { font-size: var(--text-sm); color: var(--text-muted); max-width: 30rem; }

.s-skel { background: linear-gradient(90deg, var(--bg-muted) 25%, var(--surface-hover) 37%, var(--bg-muted) 63%);
  background-size: 400% 100%; animation: s-shimmer 1.4s ease-in-out infinite; border-radius: var(--radius-sm); }
@keyframes s-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.s-skel--text { height: 0.75rem; margin-block: 0.35rem; }
.s-skel--title { height: 1.25rem; width: 40%; }
.s-skel--box { aspect-ratio: 16 / 9; }
@media (prefers-reduced-motion: reduce) { .s-skel { animation: none; } }


.s-plan { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6);
  background: var(--surface); border: var(--border-w) solid var(--border); border-radius: var(--radius-xl);
  height: 100%; }
.s-plan--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-lg);
  position: relative; }
.s-plan--featured::before { content: attr(data-ribbon); position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -50%); background: var(--accent); color: var(--text-on-accent);
  font-size: var(--text-2xs); font-weight: var(--font-bold); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full); white-space: nowrap; }
.s-plan__name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-bold);
  color: var(--text-strong); }
.s-plan__desc { font-size: var(--text-sm); color: var(--text-muted); min-height: 2.75rem; }
.s-plan__price { display: flex; align-items: baseline; gap: var(--space-2); }
.s-plan__amount { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--font-extrabold);
  color: var(--text-strong); line-height: var(--leading-none); letter-spacing: var(--tracking-tighter); }
.s-plan__period { font-size: var(--text-sm); color: var(--text-muted); }
.s-plan__credits { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--accent);
  font-family: var(--font-mono); }
.s-plan__feats { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3);
  font-size: var(--text-sm); flex: 1; }
.s-plan__feats li { display: flex; gap: var(--space-3); color: var(--text-muted); }
.s-plan__feats li b { color: var(--text-strong); font-weight: var(--font-semibold); }
.s-plan__feats svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.2rem; color: var(--accent); }
.s-plan__feats li.is-off { opacity: 0.5; }
.s-plan__feats li.is-off svg { color: var(--text-subtle); }


.s-compare th:first-child, .s-compare td:first-child {
  position: sticky; left: 0; background: var(--surface); z-index: 1; text-align: left;
  box-shadow: 1px 0 0 var(--border); }
.s-compare thead th { background: var(--surface-subtle); }
.s-compare .is-featured { background: var(--accent-subtle); }


.s-credit-pill { display: inline-flex; align-items: center; gap: var(--space-2); height: 2rem;
  padding-inline: var(--space-3); border-radius: var(--radius-full);
  background: var(--surface); border: var(--border-w) solid var(--border);
  font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text);
  cursor: pointer; transition: all var(--duration-fast) var(--ease-default); }
.s-credit-pill:hover { border-color: var(--accent); background: var(--accent-subtle); }
.s-credit-pill__n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-strong); }
.s-credit-pill__bar { width: 2.5rem; height: 0.25rem; border-radius: var(--radius-full);
  background: var(--bg-muted); overflow: hidden; }
.s-credit-pill__bar i { display: block; height: 100%; background: var(--accent); }


.s-pack { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4);
  border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  cursor: pointer; text-align: left; transition: all var(--duration-fast) var(--ease-default); }
.s-pack:hover { border-color: var(--border-strong); }
.s-pack[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-subtle);
  box-shadow: 0 0 0 1px var(--accent); }
.s-pack__min { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--font-bold);
  color: var(--text-strong); }
.s-pack__price { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); }
.s-pack__per { font-size: var(--text-2xs); color: var(--text-subtle); }
.s-pack__tag { font-size: var(--text-2xs); font-weight: var(--font-bold); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--accent); }


.s-logo { display: inline-flex; align-items: center; gap: var(--space-3); }
.s-logo__mark { width: 1.875rem; height: 1.875rem; flex: none; }
.s-logo__word { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight); color: var(--text-strong); line-height: 1; }
.s-logo__sub { display: block; font-family: var(--font-sans); font-size: var(--text-2xs);
  font-weight: var(--font-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-subtle); margin-top: 0.15rem; }
.s-logo--lg .s-logo__mark { width: 2.5rem; height: 2.5rem; }
.s-logo--lg .s-logo__word { font-size: var(--text-3xl); }
.s-logo--sm .s-logo__mark { width: 1.5rem; height: 1.5rem; }
.s-logo--sm .s-logo__word { font-size: var(--text-base); }


.s-sechead { display: flex; flex-direction: column; gap: var(--space-3); max-width: 44rem; }
.s-sechead--center { align-items: center; text-align: center; margin-inline: auto; }
.s-sechead__sub { font-size: var(--text-lg); color: var(--text-muted); line-height: var(--leading-relaxed); }

.s-rule { display: flex; align-items: center; gap: var(--space-3); }
.s-rule::before, .s-rule::after { content: ""; height: var(--border-w); flex: 1; background: var(--border); }


.s-code { font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-relaxed);
  background: var(--code-bg); color: var(--code-text); border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto; white-space: pre;
  max-height: 24rem; overflow-y: auto; }
.s-code--light { background: var(--bg-inset); color: var(--text); }
.s-code .ok { color: var(--code-ok); }
.s-code .warn { color: var(--code-warn); }
.s-code .bad { color: var(--code-bad); }
.s-code .dim { color: var(--code-dim); }

.s-gate { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-w) solid var(--border-subtle); font-size: var(--text-sm); }
.s-gate:last-child { border-bottom: 0; }
.s-gate__id { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-subtle);
  width: 3.5rem; flex: none; }
.s-gate__name { flex: 1; color: var(--text); }
.s-gate__result { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--font-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.s-gate__result--pass { color: var(--success); }
.s-gate__result--warn { color: var(--warning); }
.s-gate__result--fail { color: var(--error); }


.s-media { position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: var(--border-w) solid var(--border); background: var(--surface);
  display: flex; flex-direction: column; height: 100%; }
.s-media__thumb { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--ink-800), var(--ink-950));
  position: relative; display: grid; place-items: center; overflow: hidden; }
.s-media__thumb--reel { aspect-ratio: 9 / 16; }
.s-media__thumb img { width: 100%; height: 100%; object-fit: cover; }
.s-media__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.s-media__title { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--font-bold);
  color: var(--text-strong); }
.s-media__meta { font-size: var(--text-xs); color: var(--text-muted); }
.s-media__badge { position: absolute; top: var(--space-3); left: var(--space-3); }


.s-card--ink, .s-section--ink {
  --text:          var(--band-heading);
  --text-strong:   var(--band-heading);
  --text-muted:    var(--band-text);
  --text-subtle:   var(--band-muted);
  --text-link:     var(--band-accent);
  --border:        var(--band-border);
  --border-strong: var(--band-border);
  --border-subtle: var(--band-border);
  --surface:       var(--band-bg);
  --surface-subtle:color-mix(in srgb, var(--band-heading) 6%, transparent);
  --surface-hover: color-mix(in srgb, var(--band-heading) 12%, transparent);
  --bg-inset:      color-mix(in srgb, var(--band-heading) 8%, transparent);
  
  color: var(--band-text);
}
.s-card--ink h1, .s-card--ink h2, .s-card--ink h3, .s-card--ink h4,
.s-section--ink h1, .s-section--ink h2, .s-section--ink h3, .s-section--ink h4 {
  color: var(--band-heading); }
.s-card--ink .s-eyebrow, .s-section--ink .s-eyebrow { color: var(--band-accent); }

.s-card--ink .s-btn--primary, .s-section--ink .s-btn--primary {
  --btn-fg: var(--text-on-accent); }


.shot {
  --text: var(--shot-text); --text-strong: var(--shot-text);
  --text-muted: var(--shot-muted); --text-subtle: var(--shot-muted);
  --surface: var(--shot-inset); --surface-subtle: var(--shot-inset);
  --surface-hover: color-mix(in srgb, var(--shot-text) 8%, transparent);
  --border: var(--shot-border); --border-strong: var(--shot-border);
  --border-subtle: var(--shot-border); --bg-inset: var(--shot-inset);
  color: var(--shot-text);
}
.shot .col__title { color: var(--shot-muted); }


.footer {
  --text: var(--ink-200); --text-strong: var(--white);
  --text-muted: var(--ink-300); --text-subtle: var(--ink-400);
  --text-link: var(--brand-300);
  --border: var(--ink-800); --border-strong: var(--ink-700); --border-subtle: var(--ink-800);
  --surface: var(--ink-900); --surface-hover: var(--ink-800);
  --success: var(--success-400); --warning: var(--amber-400);
  --error: var(--rose-400); --info: var(--violet-400);
  --status-done: var(--success-400); --status-running: var(--amber-400);
  --status-failed: var(--rose-400); --status-queued: var(--ink-300);
  --status-stopped: var(--ink-300); --status-review: var(--violet-400);
}

.s-player {
  --text: var(--ink-100); --text-strong: var(--white);
  --text-muted: var(--ink-300); --text-subtle: var(--ink-300);
  --surface: var(--ink-900); --border: var(--ink-700); --border-subtle: var(--ink-800);
  --text-link: var(--brand-300);
}
.mockbar { --text: var(--ink-200); --text-muted: var(--ink-300); --text-subtle: var(--ink-400); }


@media (pointer: coarse) {
  .s-navitem { height: 2.75rem; }
  .s-tab { padding-block: var(--space-4); }
  .s-chip { height: 2.25rem; }
  .s-credit-pill { height: 2.5rem; }
  .s-pager button { min-width: 2.75rem; height: 2.75rem; }
  .s-btn--icon, .s-btn--icon.s-btn--sm { width: 2.75rem; }
  .s-check input { width: 1.375rem; height: 1.375rem; }
  .s-composer .s-textarea { min-height: 3rem; }
  .s-input, .s-select, .s-textarea { font-size: 1rem; }
}


.s-app, .s-app > *, .s-appmain,
.s-grid > *, .s-grid-2 > *, .s-grid-3 > *, .s-grid-4 > *,
.s-stack > *, .s-card__body > *, .s-modal__body > * { min-width: 0; }


@media print {
  .s-header, .s-tabbar, .s-sidenav, .s-toaster, .s-btn { display: none !important; }
  body { background: #fff; color: #000; }
  .s-card, .s-plan { break-inside: avoid; box-shadow: none; border-color: #ccc; }
}