:root {
  color-scheme: light;

  /* Color palette */
  --color-dark: #d7cdca;
  --color-surface: rgba(241, 235, 229, 0.94);
  --color-surface-strong: #ddd2cb;
  --color-overlay: rgba(214, 206, 201, 0.82);
  --color-border: rgba(63, 84, 110, 0.28);
  --color-border-strong: rgba(63, 84, 110, 0.46);
  --color-border-muted: rgba(24, 27, 31, 0.14);

  --color-primary: #3f5f82;
  --color-primary-strong: #233b56;
  --color-primary-soft: rgba(63, 95, 130, 0.14);
  --color-secondary: #7a8ca2;
  --color-secondary-soft: rgba(122, 140, 162, 0.18);
  --color-heat-low: #ffd54a;
  --color-heat-mid: #ff9f31;
  --color-heat-high: #e34125;
  --color-heat-marker-top: #ffe36a;
  --color-heat-marker-bottom: #ff5a2f;
  --color-heat-outline: rgba(227, 65, 37, 0.42);
  --color-heat-glow: rgba(227, 65, 37, 0.28);
  --color-text: #161a1e;
  --color-text-muted: rgba(22, 26, 30, 0.78);
  --color-text-soft: rgba(22, 26, 30, 0.62);
  --color-text-disabled: rgba(22, 26, 30, 0.42);
  --color-danger: #be5b67;
  --color-accent: #5f7ca3;
  --color-error: #be5b67;
  --color-warning: #b6842a;
  --color-success: #567a65;
  --color-panel: rgba(241, 235, 229, 0.88);
  --color-panel-strong: rgba(228, 220, 214, 0.96);
  --color-panel-muted: rgba(211, 202, 196, 0.76);
  --color-panel-contrast: rgba(22, 26, 30, 0.06);
  --color-stage-frame: #000000;
  --color-chip-bg: rgba(35, 59, 86, 0.1);
  --color-chip-bg-strong: rgba(35, 59, 86, 0.16);
  --color-chip-border: rgba(35, 59, 86, 0.28);
  --color-chip-text: #2a425f;
  --color-visual-tag-hd-text: #c7ff4f;
  --color-visual-tag-hd-border: rgba(199, 255, 79, 0.82);
  --color-visual-tag-hd-bg: rgba(18, 24, 12, 0.8);
  --color-visual-tag-it-text: #ffb347;
  --color-visual-tag-it-border: rgba(255, 179, 71, 0.82);
  --color-visual-tag-it-bg: rgba(34, 20, 8, 0.82);
  --color-visual-tag-new-text: #ffe66b;
  --color-visual-tag-new-border: rgba(255, 230, 107, 0.82);
  --color-visual-tag-new-bg: rgba(34, 28, 6, 0.82);
  --color-effects-chip-bg: #ebe2dc;
  --color-effects-chip-border: #c1afa4;
  --color-effects-chip-text: #314a68;
  --color-effects-chip-selected-bg: #4f6f91;
  --color-effects-chip-selected-border: #314a68;
  --color-effects-chip-selected-text: #f7f2ed;
  --color-effects-chip-remove-bg: #7b3f4a;
  --color-effects-chip-remove-border: #5f2f38;
  --color-effects-chip-remove-hover-bg: #944a57;
  --color-effects-chip-remove-hover-border: #733a44;
  --color-effects-chip-remove-text: #fff4f4;

  /* Surface variants */
  --color-surface-light: rgba(248, 242, 237, 0.7);
  --color-surface-lighter: rgba(248, 242, 237, 0.48);
  --color-border-faint: rgba(22, 26, 30, 0.08);

  /* Button surfaces */
  --color-button-surface: rgba(235, 228, 221, 0.94);
  --color-button-surface-hover: rgba(225, 216, 209, 0.98);

  /* Landing page palette */
  --landing-bg-page: #f6f1eb;
  --landing-bg-nav: rgba(246, 241, 235, 0.88);
  --landing-bg-hero: #f6f1eb;
  --landing-bg-stats: #efe7de;
  --landing-bg-section-a: #f3ece4;
  --landing-bg-section-b: #ede4da;
  --landing-bg-section-c: #f1e8df;
  --landing-bg-section-d: #ebe1d7;
  --landing-bg-section-e: #f4ece3;
  --landing-bg-cta: #e8ddd2;
  --landing-bg-footer: #e2d7cc;
  --landing-surface: rgba(255, 255, 255, 0.58);
  --landing-surface-strong: rgba(255, 255, 255, 0.78);
  --landing-border: rgba(63, 84, 110, 0.14);
  --landing-border-strong: rgba(63, 95, 130, 0.28);
  --landing-text: #1d232a;
  --landing-text-muted: rgba(29, 35, 42, 0.72);
  --landing-text-soft: rgba(29, 35, 42, 0.62);

  /* Scrollbars */
  --scrollbar-size: 12px;
  --scrollbar-radius: 0;
  --scrollbar-track-color: rgba(22, 26, 30, 0.08);
  --scrollbar-thumb-color: rgba(63, 95, 130, 0.8);
  --scrollbar-thumb-hover-color: rgba(35, 59, 86, 0.95);
  --scrollbar-thumb-gradient: linear-gradient(180deg, var(--color-primary-strong), var(--color-secondary));

  /* Layout */
  --overlay-width: 320px;
  --overlay-width-desktop: 360px;
  --overlay-radius: 0;
  --overlay-shadow: 0 18px 44px rgba(31, 35, 40, 0.14);

  /* Border radius */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-card: 0;
  --radius-lg: 0;
  --radius-pill: 0;

  /* Shadows */
  --shadow-sm: 0 4px 12px rgba(31, 35, 40, 0.08);
  --shadow-md: 0 10px 24px rgba(31, 35, 40, 0.12);
  --shadow-lg: 0 20px 48px rgba(31, 35, 40, 0.14);

  /* Opacity */
  --opacity-disabled: 0.6;
  --opacity-hover: 0.5;
  --opacity-muted: 0.7;

  /* Typography */
  --font-family-base: 'Ubuntu', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-family-mono: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;

  /* Spacing (px) */
  --space-0: 0;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;

  /* Timings */
  --transition-fast: 120ms ease;
  --transition-medium: 200ms ease;
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --color-dark: #101317;
  --color-surface: rgba(17, 20, 24, 0.94);
  --color-surface-strong: #1a2027;
  --color-overlay: rgba(8, 10, 13, 0.78);
  --color-border: rgba(144, 170, 198, 0.28);
  --color-border-strong: rgba(144, 170, 198, 0.46);
  --color-border-muted: rgba(232, 238, 245, 0.15);

  --color-primary: #9cb8d4;
  --color-primary-strong: #dbe8f5;
  --color-primary-soft: rgba(156, 184, 212, 0.16);
  --color-secondary: #7f93aa;
  --color-secondary-soft: rgba(127, 147, 170, 0.18);
  --color-heat-low: #ffe36a;
  --color-heat-mid: #ffad4d;
  --color-heat-high: #ff5a2f;
  --color-heat-marker-top: #fff07d;
  --color-heat-marker-bottom: #ff6b33;
  --color-heat-outline: rgba(255, 90, 47, 0.4);
  --color-heat-glow: rgba(255, 90, 47, 0.32);
  --color-text: #edf2f6;
  --color-text-muted: rgba(237, 242, 246, 0.78);
  --color-text-soft: rgba(237, 242, 246, 0.6);
  --color-text-disabled: rgba(237, 242, 246, 0.42);
  --color-panel: rgba(20, 24, 29, 0.9);
  --color-panel-strong: rgba(28, 34, 40, 0.96);
  --color-panel-muted: rgba(36, 43, 50, 0.82);
  --color-panel-contrast: rgba(255, 255, 255, 0.05);
  --color-chip-bg: rgba(156, 184, 212, 0.12);
  --color-chip-bg-strong: rgba(156, 184, 212, 0.18);
  --color-chip-border: rgba(156, 184, 212, 0.3);
  --color-chip-text: #d3e2f0;
  --color-visual-tag-hd-text: #c7ff4f;
  --color-visual-tag-hd-border: rgba(199, 255, 79, 0.82);
  --color-visual-tag-hd-bg: rgba(12, 18, 8, 0.86);
  --color-visual-tag-it-text: #ffb347;
  --color-visual-tag-it-border: rgba(255, 179, 71, 0.82);
  --color-visual-tag-it-bg: rgba(30, 18, 8, 0.86);
  --color-visual-tag-new-text: #ffe66b;
  --color-visual-tag-new-border: rgba(255, 230, 107, 0.82);
  --color-visual-tag-new-bg: rgba(30, 24, 6, 0.86);
  --color-effects-chip-bg: #2b333d;
  --color-effects-chip-border: #556270;
  --color-effects-chip-text: #d7e3ef;
  --color-effects-chip-selected-bg: #8faecc;
  --color-effects-chip-selected-border: #dbe8f5;
  --color-effects-chip-selected-text: #0f141a;
  --color-effects-chip-remove-bg: #8b5260;
  --color-effects-chip-remove-border: #cc8f9f;
  --color-effects-chip-remove-hover-bg: #a86474;
  --color-effects-chip-remove-hover-border: #e3aaba;
  --color-effects-chip-remove-text: #fff6f8;

  --color-surface-light: rgba(28, 34, 40, 0.72);
  --color-surface-lighter: rgba(28, 34, 40, 0.48);
  --color-border-faint: rgba(237, 242, 246, 0.08);

  --color-button-surface: rgba(25, 30, 36, 0.94);
  --color-button-surface-hover: rgba(34, 40, 47, 0.98);

  --landing-bg-page: #0b0f14;
  --landing-bg-nav: rgba(8, 11, 15, 0.88);
  --landing-bg-hero: #0b0f14;
  --landing-bg-stats: #101722;
  --landing-bg-section-a: #131b27;
  --landing-bg-section-b: #182232;
  --landing-bg-section-c: #1e1827;
  --landing-bg-section-d: #111923;
  --landing-bg-section-e: #1a202d;
  --landing-bg-cta: #0f1620;
  --landing-bg-footer: #0a0e13;
  --landing-surface: rgba(255, 255, 255, 0.05);
  --landing-surface-strong: rgba(255, 255, 255, 0.08);
  --landing-border: rgba(219, 232, 245, 0.14);
  --landing-border-strong: rgba(156, 184, 212, 0.34);
  --landing-text: #edf2f6;
  --landing-text-muted: rgba(237, 242, 246, 0.78);
  --landing-text-soft: rgba(237, 242, 246, 0.64);

  --scrollbar-track-color: rgba(237, 242, 246, 0.08);
  --scrollbar-thumb-color: rgba(156, 184, 212, 0.78);
  --scrollbar-thumb-hover-color: rgba(219, 232, 245, 0.92);
}

@media (min-width: 768px) {
  :root {
    --overlay-width: var(--overlay-width-desktop);
  }
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(76, 106, 146, 0.08), transparent 28%),
    radial-gradient(circle at 100% 12%, rgba(130, 147, 173, 0.1), transparent 22%),
    var(--color-dark);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  user-select: none;
  -webkit-user-select: none;
}

@supports (min-height: 100dvh) {
  html,
  body {
    min-height: 100dvh;
  }
}

a {
  color: var(--color-accent);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
}

[hidden] {
  display: none !important;
}

/* Prevent browser tap/selection highlights when holding pointer on controls. */
:where(button, [role='button'], [type='button'], [type='submit'], [type='reset'], a) {
  -webkit-tap-highlight-color: transparent;
}

:where(button, [role='button'], [type='button'], [type='submit'], [type='reset']) {
  user-select: none;
  -webkit-user-select: none;
}

:where(input, textarea, [contenteditable='true'], [contenteditable=''], [contenteditable='plaintext-only']) {
  user-select: text;
  -webkit-user-select: text;
}

:where(button, [role='button'], [type='button'], [type='submit'], [type='reset'], a):focus:not(:focus-visible) {
  outline: none;
}

img {
  -webkit-user-drag: none;
}

canvas {
  display: block;
}

:root {
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
  scrollbar-width: thin;
}

* {
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
  border-radius: var(--scrollbar-radius);
  border: 1px solid var(--color-border-muted);
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-gradient);
  border-radius: var(--scrollbar-radius);
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 12px rgba(31, 35, 40, 0.14);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}
.is-warming {
  visibility: hidden;
  pointer-events: none;
}

:root {
  --site-topbar-safe-space: 0px;
  --site-footer-safe-space: 0px;
  --overlay-viewport-height: 100vh;
  --overlay-available-height: max(
    0px,
    calc(
      var(--overlay-viewport-height)
      - var(--site-topbar-safe-space)
      - var(--site-footer-safe-space)
      - (var(--space-24) * 2)
    )
  );
}

@media (min-width: 601px) {
  :root {
    --site-topbar-safe-space: 88px;
    --site-footer-safe-space: 112px;
  }
}

@supports (height: 100dvh) {
  :root {
    --overlay-viewport-height: 100dvh;
  }
}

.app-shell {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;
  height: 100svh;
  min-width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 16% 12%, rgba(76, 106, 146, 0.14), transparent 32%),
    radial-gradient(circle at 84% 18%, rgba(130, 147, 173, 0.16), transparent 28%),
    linear-gradient(180deg, rgba(248, 239, 233, 0.52), rgba(214, 205, 199, 0.88));
}

:root[data-theme='dark'] .app-shell {
  background:
    radial-gradient(circle at 16% 12%, rgba(108, 136, 168, 0.16), transparent 32%),
    radial-gradient(circle at 84% 18%, rgba(72, 92, 118, 0.28), transparent 28%),
    linear-gradient(180deg, rgba(24, 29, 34, 0.84), rgba(10, 13, 16, 0.98));
}

@supports (min-height: 100dvh) {
  .app-shell {
    min-height: 100dvh;
    height: 100dvh;
  }
}

.visual-stage {
  --visual-stage-frame-width: 100%;
  --visual-stage-frame-height: 100%;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 100%;
  place-items: center;
  overflow: hidden;
  background: var(--color-stage-frame);
  transition: filter 0.25s ease;
}

.visual-stage__frame {
  position: relative;
  width: var(--visual-stage-frame-width);
  height: var(--visual-stage-frame-height);
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-stage-frame);
  transition:
    width var(--transition-medium),
    height var(--transition-medium);
}

.app-boot-splash {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: var(--space-12);
  align-content: center;
  justify-items: center;
  padding: var(--space-24);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(16, 20, 27, 0.12), rgba(16, 20, 27, 0.28));
  pointer-events: none;
}

.app-boot-splash img {
  width: clamp(96px, 14vw, 180px);
  height: auto;
  opacity: 0.92;
}

.app-boot-splash__label {
  margin: 0;
  font-size: var(--font-size-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.visual-stage canvas {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.visual-stage__tint-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: transparent;
  mix-blend-mode: color;
  transition: opacity 0.2s ease;
}

.effects-compositor-canvas {
  display: block;
}

.effects-compositor-canvas[hidden] {
  display: none;
}

.app-shell.is-casting .visual-stage canvas {
  opacity: 0;
  visibility: hidden;
}

.app-shell.is-casting [data-role='koi-tip'],
.app-shell.is-casting [data-role='visualizer-placeholder'],
.app-shell.is-casting [data-role='webgl-placeholder'] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.cast-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: var(--space-16);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-medium), transform var(--transition-medium);
}

.app-shell.is-casting .cast-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.site-topbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  top: constant(safe-area-inset-top);
  top: env(safe-area-inset-top, 0);
  width: 100%;
  padding: calc(var(--space-10) + env(safe-area-inset-top, 0)) 0 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 12;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition:
    opacity var(--transition-medium),
    transform var(--transition-medium),
    visibility var(--transition-medium);
}

.site-topbar.is-idle-hidden {
  opacity: 0;
  transform: translateY(calc(var(--space-12) * -1));
  visibility: hidden;
}

.site-topbar.is-idle-hidden .top-status-bar {
  pointer-events: none;
}

.site-footer {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  bottom: constant(safe-area-inset-bottom);
  bottom: env(safe-area-inset-bottom, 0);
  inset-block-end: env(safe-area-inset-bottom, 0);
  width: 100%;
  padding: var(--space-6) 0;
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0));
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 12;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition:
    opacity var(--transition-medium),
    transform var(--transition-medium),
    visibility var(--transition-medium);
}

.site-footer.is-idle-hidden {
  opacity: 0;
  transform: translateY(var(--space-16));
  visibility: hidden;
}

.site-footer.is-idle-hidden .footer-bar {
  pointer-events: none;
}

.footer-bar {
  width: min(960px, 100%);
}

.top-status-bar {
  width: min(1120px, calc(100% - (var(--space-20) * 2)));
}

.welcome-screen,
.overlay-backdrop,
.overlay-panel {
  position: fixed;
  inset: 0;
}

.welcome-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-overlay);
  z-index: 10;
}

.overlay-backdrop {
  background: rgba(203, 194, 188, 0.54);
  backdrop-filter: blur(18px);
  z-index: 9;
}

:root[data-theme='dark'] .overlay-backdrop {
  background: rgba(6, 8, 11, 0.58);
}

body:has(.side-drawer) .overlay-backdrop {
  pointer-events: none;
}

body.overlay-drawer-open .overlay-backdrop {
  pointer-events: none;
}

body:has(.side-drawer) .overlay-backdrop,
body.overlay-drawer-open .overlay-backdrop {
  background: transparent;
  backdrop-filter: none;
}

.overlay-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(var(--space-24) + var(--site-topbar-safe-space))
    var(--space-24)
    calc(var(--space-24) + var(--site-footer-safe-space));
  z-index: 11;
  overflow-y: auto;
  pointer-events: none;
  box-sizing: border-box;
}

.overlay-panel .side-drawer,
.overlay-panel .overlay-sheet {
  pointer-events: auto;
}

body.overlay-drawer-open .overlay-panel {
  pointer-events: none;
}

body.overlay-drawer-open .overlay-panel .side-drawer,
body.overlay-drawer-open .overlay-panel .overlay-sheet {
  pointer-events: auto;
}

.overlay-panel:has(.side-drawer) {
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
}

.export-panel {
  position: fixed;
  top: 88px;
  right: var(--space-20);
  pointer-events: none;
  z-index: 13;
}

.export-panel:not(.is-hidden) {
  pointer-events: auto;
}

.export-panel.is-hidden {
  display: none;
}

.effects-panel {
  position: fixed;
  top: 88px;
  left: var(--space-20);
  pointer-events: none;
  z-index: 13;
}

.effects-panel:not(.is-hidden) {
  pointer-events: auto;
}

.effects-panel.is-hidden {
  display: none;
}

@media (max-width: 600px) {
  .site-topbar {
    padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0));
  }

  .site-footer {
    padding: var(--space-4) 0;
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0));
  }

  .welcome-screen {
    align-items: stretch;
    padding: var(--space-8);
    overflow-y: auto;
  }

  .overlay-panel {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    overflow-y: hidden;
  }
  .export-panel {
    top: var(--space-8);
    right: var(--space-8);
    left: var(--space-8);
  }
}
/* ── Effects Panel (floating, draggable) ─────────────────────── */

.effects-panel-shell.overlay-sheet {
  position: relative;
  width: min(64vw, 920px);
  height: 720px;
  min-width: min(420px, calc(100vw - var(--space-20)));
  min-height: 280px;
  max-width: min(1160px, calc(100vw - var(--space-20)));
  max-height: calc(100vh - var(--space-20));
  resize: horizontal;
  user-select: none;
}

.effects-panel-shell.is-resizing {
  cursor: ew-resize;
}

.effects-panel-header {
  background:
    linear-gradient(90deg, rgba(76, 106, 146, 0.08), transparent 48%),
    var(--color-panel-strong);
}

.effects-panel-header-copy {
  min-width: 0;
}

.effects-panel-close {
  top: 50%;
  right: var(--space-12);
  transform: translateY(-50%);
}

.effects-panel-kicker {
  color: var(--color-primary-strong);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.effects-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background:
    linear-gradient(180deg, var(--color-panel-contrast), transparent 14%),
    var(--color-panel-muted);
}

.effects-panel-tabs {
  align-items: center;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-muted);
  background:
    linear-gradient(180deg, rgba(76, 106, 146, 0.06), transparent 100%),
    var(--color-panel-contrast);
  margin-bottom: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.effects-panel-tab {
  letter-spacing: 0.08em;
  flex: 0 0 auto;
  padding-right: var(--space-4);
  padding-left: var(--space-4);
}

.effects-panel-tab.is-active {
  background: transparent;
}

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

.effects-panel-meta {
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

.playlist-start-guide {
  border: 1px solid var(--color-primary-soft);
  background:
    linear-gradient(180deg, var(--color-primary-soft), transparent 100%),
    var(--color-panel-contrast);
  box-shadow: inset 0 1px 0 var(--color-panel-contrast);
  color: var(--color-text);
}

.playlist-primary-action {
  border-color: var(--color-primary);
  background:
    linear-gradient(180deg, var(--color-primary-soft), transparent 100%),
    var(--color-surface-light);
  box-shadow: 0 0 0 1px var(--color-primary-soft), var(--shadow-sm);
  color: var(--color-primary-strong);
}

.playlist-primary-action:hover:enabled,
.playlist-primary-action:focus-visible:enabled {
  border-color: var(--color-primary-strong);
  background:
    linear-gradient(180deg, var(--color-primary-soft), transparent 100%),
    var(--color-panel-strong);
  color: var(--color-text);
}

.overlay-panel-section {
  position: relative;
  border: 1px solid var(--color-border-faint);
  border-radius: calc(var(--overlay-radius) - 10px);
  box-shadow: inset 0 1px 0 var(--color-panel-contrast);
}

.overlay-panel-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: var(--space-12);
  left: var(--space-12);
  height: 1px;
  background: linear-gradient(90deg, rgba(76, 106, 146, 0), rgba(76, 106, 146, 0.32), rgba(76, 106, 146, 0));
}

.overlay-panel-section--panel {
  background:
    linear-gradient(180deg, var(--color-panel-contrast), transparent 56%),
    var(--color-panel-strong);
}

.overlay-panel-section__header {
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border-faint);
}

.effects-panel-heading {
  font-size: 18px;
  line-height: 1.15;
  color: var(--color-text);
  max-width: 16ch;
}

.playlist-entry-card {
  border: 1px solid var(--color-border-faint);
  background:
    linear-gradient(180deg, var(--color-panel-contrast), transparent 56%),
    var(--color-surface-light);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}

.playlist-entry-card.is-active {
  border-color: rgba(76, 106, 146, 0.38);
  box-shadow: 0 0 0 1px rgba(76, 106, 146, 0.12), var(--shadow-sm);
  background:
    linear-gradient(180deg, rgba(76, 106, 146, 0.08), transparent 48%),
    var(--color-panel-strong);
}

.playlist-entry-title {
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.playlist-entry-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-8);
  border: 1px solid var(--color-chip-border);
  background: var(--color-chip-bg);
  color: var(--color-chip-text);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.playlist-entry-chip.is-active {
  border-color: rgba(76, 106, 146, 0.42);
  background: rgba(76, 106, 146, 0.14);
  color: var(--color-primary-strong);
}

.playlist-entry-current {
  color: var(--color-primary-strong);
}

.playlist-entry-time {
  font-family: var(--font-family-mono);
  letter-spacing: 0.06em;
}

.playlist-entry-thumbnail {
  width: 88px;
  height: 66px;
  border: 1px solid var(--color-border-faint);
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(31, 35, 40, 0.24));
  overflow: hidden;
  flex-shrink: 0;
}

.playlist-entry-thumbnail-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visuals-playlists-library-bar {
  background:
    linear-gradient(180deg, rgba(76, 106, 146, 0.08), transparent 56%),
    var(--color-panel-strong);
}

.visuals-playlists-library-chip {
  border: 1px solid var(--color-chip-border);
  background: var(--color-chip-bg);
  color: var(--color-chip-text);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-6) var(--space-8);
  white-space: nowrap;
}

.visuals-playlists-dropzone {
  flex: 0 0 auto;
  min-height: 0;
  padding: var(--space-10);
  border: 1px dashed var(--color-border-muted);
  background: rgba(31, 35, 40, 0.08);
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.visuals-playlists-dropzone.is-drag-target {
  border-color: rgba(76, 106, 146, 0.52);
  background: rgba(76, 106, 146, 0.08);
  box-shadow: inset 0 0 0 1px rgba(76, 106, 146, 0.16);
}

.visuals-playlists-dropcopy,
.visuals-playlists-empty {
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--color-text-soft);
}

.visuals-playlists-scene-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(76, 106, 146, 0.9) rgba(31, 35, 40, 0.06);
}

.effects-section-aside {
  max-width: 12ch;
  text-align: right;
  letter-spacing: 0.02em;
}

.effects-composer-section--library {
  padding-top: var(--space-12);
}

.effects-composer-section--stack {
  padding-top: var(--space-12);
}

.effects-composer-section--globals {
  gap: var(--space-12);
}

.effects-composer-section--globals .visual-control-group {
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border-faint);
}

.effects-composer-section--globals .visual-control-group:first-child {
  padding-top: 0;
  border-top: 0;
}

.effects-global-settings-grid {
  align-items: start;
}

.effects-panel-resize-handle {
  position: absolute;
  top: calc(var(--space-12) + 28px);
  right: 0;
  bottom: var(--space-16);
  z-index: 2;
  width: 28px;
  border: 0;
  padding: 0;
  background: transparent;
  color: transparent;
  cursor: ew-resize;
  pointer-events: auto;
}

.effects-panel-resize-handle::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 3px;
  width: 4px;
  height: 64px;
  transform: translateY(-50%);
  border: 1px solid rgba(76, 106, 146, 0.28);
  background:
    linear-gradient(180deg, rgba(76, 106, 146, 0.2), rgba(76, 106, 146, 0.06)),
    var(--color-panel-contrast);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.effects-panel-resize-handle:hover::before,
.effects-panel-resize-handle:focus-visible::before {
  border-color: rgba(76, 106, 146, 0.52);
  box-shadow:
    0 0 0 1px rgba(76, 106, 146, 0.18),
    0 0 0 4px rgba(76, 106, 146, 0.08);
}

.text-effects-style-grid,
.text-effects-driver-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-28) * 7)), 1fr));
  align-items: stretch;
}

.text-effects-style-card,
.text-effects-driver-card {
  min-width: 0;
  border: 1px solid var(--color-border-faint);
  background:
    linear-gradient(180deg, var(--color-panel-contrast), transparent 100%),
    var(--color-surface-light);
  box-shadow: inset 0 1px 0 var(--color-panel-contrast);
  color: inherit;
  text-align: left;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.text-effects-style-card:hover,
.text-effects-style-card:focus-visible,
.text-effects-driver-card:focus-within {
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
}

.text-effects-style-card.is-active {
  border-color: rgba(255, 188, 149, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 188, 149, 0.14), transparent 100%),
    var(--color-surface-light);
  box-shadow: 0 0 0 1px rgba(255, 188, 149, 0.18), var(--shadow-md);
}

.text-effects-style-card p,
.text-effects-driver-card p {
  min-width: 0;
}

.text-effects-style-card .effects-panel-meta,
.text-effects-driver-card .effects-panel-meta {
  overflow-wrap: anywhere;
}

.text-effects-driver-select {
  width: 100%;
}

.text-effects-status-chip.is-live {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-text);
}

.effects-stack-card,
.effects-library-card {
  border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-md);
  background: var(--color-surface-light);
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.effects-library-card {
  width: 100%;
  max-width: none;
  min-height: 204px;
  height: 204px;
  max-height: 204px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.effects-library-card:hover:not(:disabled),
.effects-library-card:focus-visible:not(:disabled),
.effects-stack-card.is-drop-target {
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
}

.effects-library-card.is-selected {
  border-color: rgba(255, 188, 149, 0.58);
  box-shadow: 0 0 0 1px rgba(255, 188, 149, 0.18), var(--shadow-md);
}

.effects-library-card.overlay-result:hover:not(:disabled),
.effects-library-card.overlay-result:focus-visible:not(:disabled),
.effects-stack-card.overlay-result:hover,
.effects-stack-card.overlay-result:focus-visible,
.effects-stack-card.overlay-result:focus-within {
  transform: none;
}

.effects-library-card:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.effects-stack-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent),
    var(--color-surface-light);
}

.effects-stack-card.visual-result--thumbnail {
  width: 100%;
  max-width: 100%;
  min-height: 204px;
  height: 204px;
  max-height: 204px;
  overflow: hidden;
}

.effects-stack-card--with-controls.visual-result--thumbnail {
  height: auto;
  max-height: none;
}

.effects-stack-card.is-dragging {
  opacity: 0.45;
}

.effects-stack-leading {
  min-width: 0;
}

.effects-stack-actions {
  flex-shrink: 0;
}

.effects-stack-actions--overlay {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  z-index: 2;
}

.effects-library-status {
  right: var(--space-8);
  bottom: var(--space-8);
  left: var(--space-8);
  z-index: 3;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.effects-library-status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: var(--space-6) var(--space-10);
  border: 1px solid var(--color-effects-chip-border);
  border-radius: var(--radius-pill);
  background: var(--color-effects-chip-bg);
  color: var(--color-effects-chip-text);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}

.effects-library-status-chip.is-selected {
  border-color: var(--color-effects-chip-selected-border);
  background: var(--color-effects-chip-selected-bg);
  color: var(--color-effects-chip-selected-text);
}

.effects-library-status-chip.is-ready {
  border-color: var(--color-effects-chip-border);
}

.effects-library-remove-button {
  border-color: var(--color-effects-chip-remove-border);
  background: var(--color-effects-chip-remove-bg);
  color: var(--color-effects-chip-remove-text);
  box-shadow: var(--shadow-sm);
}

.effects-library-remove-button:hover,
.effects-library-remove-button:focus-visible {
  border-color: var(--color-effects-chip-remove-hover-border);
  background: var(--color-effects-chip-remove-hover-bg);
}

.effects-stack-input {
  border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.03);
  padding: var(--space-4) var(--space-8);
}

.effects-library-group {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: var(--space-12);
}

.effects-library-group:first-child {
  border-top: none;
  padding-top: 0;
}

.effects-library-grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
}

.effects-library-thumbnail {
  isolation: isolate;
  width: 100%;
  min-height: 204px;
  height: 204px;
  max-height: 204px;
}

.effects-library-thumbnail .visual-result__thumbnail-image {
  min-height: 204px;
  height: 204px;
  max-height: 204px;
}

.effects-library-description {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  justify-content: flex-end;
  min-height: 100%;
  padding: calc(var(--space-10) + 32px) var(--space-10) calc(var(--space-10) + 42px);
  color: rgba(255, 255, 255, 0.82);
  background: linear-gradient(180deg, rgba(31, 35, 40, 0) 0%, rgba(31, 35, 40, 0.88) 54%);
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}

.effects-library-description.is-visible {
  opacity: 1;
}

.effects-library-card.is-hovered .effects-library-description,
.effects-library-card:focus-visible .effects-library-description,
.effects-stack-card.is-hovered .effects-library-description,
.effects-stack-card:focus-within .effects-library-description {
  opacity: 1;
}

.effects-library-card.is-hovered .visual-result__title--overlay,
.effects-library-card:focus-visible .visual-result__title--overlay,
.effects-stack-card.is-hovered .visual-result__title--overlay,
.effects-stack-card:focus-within .visual-result__title--overlay {
  opacity: 1;
}

.effects-stack-thumbnail .effects-library-description {
  padding-right: calc(var(--space-10) + 72px);
  padding-bottom: var(--space-10);
}

.effects-library-description .visual-result__description {
  color: inherit;
}

.effects-inline-button {
  cursor: pointer;
}

.effects-reset-button {
  align-self: flex-start;
}

.effects-preview-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.2), transparent 45%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

.effects-preview-tile::before,
.effects-preview-tile::after {
  content: '';
  position: absolute;
  inset: auto auto 0 0;
  width: 100%;
  height: 70%;
  opacity: 0.9;
  pointer-events: none;
}

.effects-preview-tile::before {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
  transform: skewY(-10deg) translateX(-10%);
}

.effects-preview-tile::after {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent var(--space-8),
      rgba(255, 255, 255, 0.1) var(--space-8),
      rgba(255, 255, 255, 0.1) var(--space-10)
    );
}

.effects-preview-tile[data-tone='reactive'] {
  background-color: rgba(130, 147, 173, 0.14);
}

.effects-preview-tile[data-tone='feedback'] {
  background-color: rgba(130, 147, 173, 0.2);
}

.effects-preview-tile[data-tone='motion'] {
  background-color: rgba(84, 152, 233, 0.16);
}

.effects-preview-tile[data-tone='color'] {
  background-color: rgba(76, 106, 146, 0.16);
}

.effects-preview-tile[data-tone='geometry'] {
  background-color: rgba(245, 197, 66, 0.16);
}

.effects-preview-tile--stack {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}

.effects-preview-tile--library {
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-10);
  padding: var(--space-10);
}

.effects-preview-glyph {
  position: relative;
  z-index: 1;
  font-size: var(--font-size-xl);
  line-height: 1;
}

.effects-preview-pass {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 1;
  border-radius: var(--radius-pill);
  background: rgba(22, 26, 30, 0.64);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  line-height: 1;
  padding: var(--space-4) var(--space-6);
}

.effects-preview-chip,
.effects-tag {
  border: 1px solid var(--color-chip-border);
  border-radius: var(--radius-pill);
  background: var(--color-chip-bg);
  color: var(--color-chip-text);
  font-size: var(--font-size-xs);
  line-height: 1;
  padding: var(--space-4) var(--space-8);
}

.effects-preview-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  position: relative;
  z-index: 1;
}

.effects-preview-bar {
  border-radius: var(--radius-pill);
  background: var(--color-chip-bg-strong);
  height: var(--space-24);
}

.effects-preview-bar:nth-child(2n) {
  height: var(--space-16);
}

.effects-preview-bar:nth-child(3n) {
  height: var(--space-20);
}

.effects-card-footer {
  position: relative;
  z-index: 1;
}

.effects-card-cta {
  color: var(--color-primary-strong);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.effects-drag-handle-button,
.effects-icon-button {
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-sm);
  background: var(--color-panel-contrast);
  color: var(--color-text);
}

.effects-drag-handle-button {
  min-width: 30px;
  min-height: 40px;
  color: var(--color-text-soft);
  cursor: grab;
}

.effects-icon-button {
  min-width: 34px;
  min-height: 34px;
  padding: var(--space-6);
}

.effects-icon-button.is-enabled {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

.effects-inline-button,
.effects-toggle-button,
.effects-input-select {
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
}

.effects-library-remove-button {
  border-color: var(--color-effects-chip-remove-border);
  background: var(--color-effects-chip-remove-bg);
  color: var(--color-effects-chip-remove-text);
}

.effects-inline-button:disabled,
.effects-input-select:disabled {
  opacity: 0.45;
}

.effects-toggle-button.is-enabled {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

.effects-perf-badge {
  border: 1px solid rgba(255, 201, 153, 0.2);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  padding: 4px var(--space-8);
  background: var(--color-chip-bg);
}

.effects-perf-badge.is-hidden {
  display: none;
}

@media (max-width: 600px) {
  .effects-panel-shell {
    width: min(94vw, 520px);
    max-width: calc(100vw - var(--space-16));
    max-height: calc(100vh - var(--space-16));
    resize: none;
  }

  .effects-panel-resize-handle {
    display: none;
  }
}

@media (min-width: 961px) {
  .effects-global-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Visual Controls ─────────────────────────────────────────── */

.visual-control-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-light);
  outline: none;
}

.visual-control-slider:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.visual-control-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid var(--color-primary-strong);
  transition: background 0.15s ease, transform 0.1s ease;
}

.visual-control-slider::-webkit-slider-thumb:hover {
  background: var(--color-primary-strong);
  transform: scale(1.15);
}

.visual-control-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid var(--color-primary-strong);
}

.visual-control-color-field {
  border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-sm);
  background: var(--color-panel-strong);
  padding: var(--space-8);
}

.visual-control-color-picker {
  width: 44px;
  min-width: 44px;
  height: 44px;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  background: transparent;
}

.visual-control-color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.visual-control-color-picker::-webkit-color-swatch,
.visual-control-color-picker::-moz-color-swatch {
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
}

.visual-control-color-copy {
  line-height: 1.4;
}

.visual-control-reset {
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.visual-control-reset:hover {
  background: var(--color-surface-light);
  color: var(--color-text);
}

/* ── Toast notifications ─────────────────────────────────────── */

.toast-container {
  position: fixed;
  right: var(--space-20);
  bottom: var(--space-20);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-8);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  max-width: min(480px, calc(100vw - 32px));
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border-muted);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--transition-medium),
    transform var(--transition-medium);
}

.toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.toast--hiding {
  opacity: 0;
  transform: translateY(8px);
}

.toast[data-tone='warning'] {
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.toast[data-tone='error'] {
  border-color: var(--color-error);
  color: var(--color-error);
}

/* ── Footer ──────────────────────────────────────────────────── */

.top-status-bar {
  pointer-events: auto;
  flex-wrap: wrap;
  background: var(--color-panel);
  border: 1px solid var(--color-border-muted);
  border-radius: calc(var(--overlay-radius) - 6px);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 24px rgba(31, 35, 40, 0.1);
}

.top-status-bar__primary {
  flex: 1 1 auto;
}

.top-status-bar__session {
  flex: 0 1 280px;
}

.top-status-bar__eyebrow {
  color: var(--color-text-muted);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.top-status-bar__source {
  color: var(--color-text);
  font-size: 13px;
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.top-status-bar__meta {
  flex: 0 1 auto;
}

.top-status-bar__pills {
  min-width: 0;
  contain: style;
}

.top-status-bar__actions {
  flex-wrap: wrap;
  flex-shrink: 0;
}

.top-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--color-chip-border);
  border-radius: var(--radius-pill);
  background: var(--color-chip-bg);
  color: var(--color-chip-text);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  contain: paint;
}

.top-status-pill-select {
  min-width: 108px;
  max-width: 220px;
  min-height: 26px;
  padding: var(--space-4) var(--space-24) var(--space-4) var(--space-8);
  border: 1px solid var(--color-chip-border);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 13px) calc(50% - 1px) / 5px 5px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 8px) calc(50% - 1px) / 5px 5px no-repeat,
    var(--color-chip-bg);
  color: var(--color-chip-text);
  font-size: 10px;
  letter-spacing: 0.08em;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  contain: paint;
}

.top-status-pill-select:hover:enabled,
.top-status-pill-select:focus-visible:enabled {
  border-color: var(--color-primary);
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 13px) calc(50% - 1px) / 5px 5px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 8px) calc(50% - 1px) / 5px 5px no-repeat,
    var(--color-panel-strong);
  color: var(--color-text);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.top-status-pill-select.is-active {
  border-color: var(--color-primary);
  background:
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 13px) calc(50% - 1px) / 5px 5px no-repeat,
    linear-gradient(135deg, currentColor 50%, transparent 50%) calc(100% - 8px) calc(50% - 1px) / 5px 5px no-repeat,
    var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.top-status-pill-select:disabled {
  cursor: default;
  opacity: 0.72;
}

.top-status-pill--record {
  border-color: rgba(255, 94, 129, 0.35);
  background: rgba(255, 94, 129, 0.1);
  color: var(--color-danger);
}

.top-status-action {
  border: 1px solid var(--color-border-muted);
  background: var(--color-panel-strong);
  color: var(--color-text-soft);
  border-radius: var(--radius-pill);
  contain: paint;
}

.top-status-action--icon {
  width: 34px;
  height: 34px;
  padding: 0;
}

.top-status-action--theme {
  min-height: 34px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.top-status-action__theme-label {
  line-height: 1;
}

.top-status-action__icon {
  width: 18px;
  height: 18px;
}

.top-status-action:hover,
.top-status-action:focus-visible {
  border-color: var(--color-border-strong);
  background: var(--color-chip-bg);
  color: var(--color-text);
}

.top-status-action--record {
  border-color: rgba(255, 94, 129, 0.2);
  color: var(--color-text);
}

.top-status-action--record.is-recording {
  border-color: rgba(255, 94, 129, 0.45);
  background: rgba(255, 94, 129, 0.14);
  color: var(--color-danger);
}

.footer-bar {
  pointer-events: auto;
  width: min(960px, 100%);
  background: linear-gradient(180deg, var(--color-panel), var(--color-panel-strong));
  border: 1px solid var(--color-border-muted);
  border-radius: var(--overlay-radius);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 36px rgba(31, 35, 40, 0.12);
  --footer-contrast-text: var(--color-text);
  --footer-contrast-muted: var(--color-text-soft);
  --footer-contrast-border: var(--color-border-muted);
  contain: style;
}

.footer-status {
  min-width: 0;
}

.footer-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: var(--space-4) var(--space-8);
  border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-pill);
  background: rgba(31, 35, 40, 0.05);
  color: var(--footer-contrast-muted);
  font-size: var(--font-size-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-status-pill--record {
  border-color: rgba(255, 94, 129, 0.4);
  background: rgba(255, 94, 129, 0.12);
  color: var(--color-danger);
}

.footer-media {
  min-width: 0;
  flex: 1 1 auto;
}

.footer-logo {
  width: 44px;
  height: 40px;
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
  border: 1px solid var(--color-border-muted);
  border-radius: 0;
  transition: border-color var(--transition-medium), opacity var(--transition-medium);
}

.footer-logo-image {
  display: none;
  max-width: 100%;
  max-height: 100%;
}

.footer-logo.has-logo {
  border-color: transparent;
}

.footer-logo.has-logo .footer-logo-image {
  display: block;
}

.footer-art {
  width: 36px;
  height: 36px;
  background:
    linear-gradient(135deg, rgba(76, 106, 146, 0.18), rgba(130, 147, 173, 0.16)),
    var(--color-surface-strong);
  background-size: cover;
  background-position: center;
  border-radius: 0;
  border: 1px solid transparent;
}

.footer-track {
  min-width: 0;
  max-width: 360px;
}

.footer-track-title {
  font-size: calc(var(--font-size-xs) * 0.9);
  letter-spacing: 0.08em;
  color: var(--footer-contrast-muted);
}

.footer-track-link {
  color: var(--footer-contrast-text);
  text-decoration: none;
  max-width: 100%;
  min-width: 0;
  @media (max-width: 900px) {
    max-width: 200px;
  }
}

.footer-track-link:hover,
.footer-track-link:focus-visible {
  color: var(--color-primary, var(--color-text));
}

.footer-track-link[aria-disabled='true'] {
  pointer-events: none;
  color: var(--footer-contrast-muted);
  opacity: 0.8;
}

.footer-track-meta {
  font-size: calc(var(--font-size-xs) * 0.8);
  color: var(--footer-contrast-muted);
  min-width: 0;
}

.footer-track-meta-divider {
  color: var(--footer-contrast-muted);
}

@media (max-width: 700px) {
  .top-status-bar {
    width: min(100%, calc(100% - (var(--space-12) * 2)));
    padding: var(--space-10) var(--space-12);
  }

  .top-status-bar__primary,
  .top-status-bar__meta {
    flex: 1 1 100%;
  }

  .top-status-bar__meta {
    justify-content: flex-start;
  }

  .footer-bar {
    flex-wrap: wrap;
    gap: var(--space-12);
    padding: var(--space-12);
  }

  .footer-media {
    flex: 1 1 100%;
    gap: var(--space-10);
    align-items: flex-start;
  }

  .footer-logo {
    width: 40px;
    height: 40px;
  }

  .footer-art {
    width: 40px;
    height: 40px;
  }

  .footer-track {
    gap: var(--space-4);
  }

  .footer-track-link {
    max-width: none;
  }

  .footer-center,
  .footer-controls,
  .footer-actions {
    flex: 1 1 calc(50% - var(--space-6));
    min-width: 0;
  }

  .footer-actions {
    justify-content: flex-end;
    gap: var(--space-10);
  }

  .footer-center {
    justify-content: center;
    gap: var(--space-12);
  }

  .footer-controls {
    justify-content: flex-end;
    gap: var(--space-10);
    row-gap: var(--space-6);
  }
}

@media (max-width: 600px) {
  .site-topbar .top-status-bar {
    width: min(100%, calc(100% - (var(--space-6) * 2)));
    gap: var(--space-8);
    padding: var(--space-6) var(--space-8);
    border-radius: 0;
  }

  .site-topbar .top-status-bar__session {
    flex: 1 1 auto;
    gap: var(--space-2);
  }

  .site-topbar .top-status-bar__primary {
    align-items: center;
    gap: var(--space-6);
  }

  .site-topbar .top-status-bar__eyebrow,
  .site-topbar .top-status-bar__meta {
    display: none;
  }

  .site-topbar .top-status-bar__source {
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: 0.04em;
  }

  .site-topbar .top-status-bar__actions {
    gap: var(--space-4);
    flex-wrap: nowrap;
  }

  .site-topbar .top-status-action {
    padding: var(--space-2);
  }

  .site-topbar .top-status-action--icon {
    width: 30px;
    height: 30px;
  }

  .site-topbar .top-status-action--theme {
    min-height: 30px;
    padding-inline: var(--space-6);
  }

  .site-topbar .top-status-action__icon {
    width: 15px;
    height: 15px;
  }

  .site-topbar .top-status-action__theme-label {
    display: none;
  }

  .site-footer .footer-bar {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    width: min(100%, calc(100% - (var(--space-6) * 2)));
    padding: var(--space-5) var(--space-6) calc(var(--space-5) + var(--space-2));
    border-radius: 0;
  }

  .site-footer .footer-media {
    gap: var(--space-6);
    min-width: 0;
    align-items: center;
  }

  .site-footer .footer-track-title {
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  .site-footer .footer-art,
  .site-footer .footer-track-meta,
  .site-footer .footer-progress,
  .site-footer .footer-visual-cycle-divider,
  .site-footer #btn-visual-prev,
  .site-footer #btn-visual-next {
    display: none;
  }

  .site-footer .footer-actions,
  .site-footer .footer-center,
  .site-footer .footer-controls {
    justify-content: flex-end;
    gap: var(--space-4);
  }

  .site-footer .footer-controls {
    justify-content: flex-end;
    flex-wrap: nowrap;
    row-gap: var(--space-4);
  }

  .site-footer .footer-track {
    max-width: none;
    gap: var(--space-1);
  }

  .site-footer .footer-logo {
    width: 24px;
    height: 24px;
  }

  .site-footer .footer-icon-control {
    width: 32px;
    height: 32px;
  }

  .site-footer .footer-play {
    width: 34px;
    height: 34px;
  }

  .site-footer .footer-play .footer-btn-icon {
    width: 24px;
    height: 24px;
  }

  .site-footer #btn-volume-toggle .footer-btn-icon,
  .site-footer .footer-btn-icon {
    width: 18px;
    height: 18px;
  }

  .site-footer .footer-btn {
    min-width: 32px;
    min-height: 32px;
    padding: var(--space-4);
  }

  .site-footer .footer-btn--live-transcript {
    min-width: 32px;
    padding-inline: var(--space-4);
  }

  .site-footer .footer-btn.footer-btn--primary {
    min-width: 36px;
    padding-inline: var(--space-5);
  }

  .site-footer .footer-btn-text {
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .site-footer .footer-btn-badge {
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 4px;
    font-size: 9px;
  }

  .site-footer .footer-btn-icon--live-transcript {
    width: 18px;
    height: 18px;
  }
}

.footer-progress {
  height: 32px;
}

.footer-progress__track {
  left: 0;
  right: 0;
  top: 50%;
  height: 8px;
  background:
    linear-gradient(
      90deg,
      var(--color-panel-contrast),
      var(--color-surface-light)
    );
  border: 1px solid var(--color-border-faint);
  transform: translateY(-50%);
}

.footer-progress__discovered {
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--color-heat-low), var(--color-heat-high));
  transition: width 320ms ease;
}

.footer-progress__energy {
  inset: 0;
  opacity: 0.95;
  transform-origin: left center;
}

.footer-progress__fill {
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--color-primary),
    var(--color-primary-strong)
  );
  box-shadow: 0 0 16px rgba(76, 106, 146, 0.32);
}

.footer-progress__hotspots {
  inset: 0;
  pointer-events: none;
}

.footer-progress__hotspot {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 18px;
  border: 1px solid var(--color-heat-outline);
  background: linear-gradient(180deg, var(--color-heat-marker-top), var(--color-heat-marker-bottom));
  box-shadow: 0 0 14px var(--color-heat-glow);
  transform: translate(-50%, -50%);
}

.footer-progress__input {
  background: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.footer-progress__input:disabled {
  cursor: default;
  opacity: 0.5;
}

.footer-progress__input::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background: transparent;
}

.footer-progress__input::-moz-range-track {
  width: 100%;
  height: 8px;
  background: transparent;
}

.footer-progress__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: var(--color-text);
  border: 1px solid rgba(31, 35, 40, 0.8);
  box-shadow: 0 2px 8px rgba(31, 35, 40, 0.55);
  margin-top: -6px;
  transition: transform var(--transition-fast);
}

.footer-progress__input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 0;
  border: 1px solid rgba(31, 35, 40, 0.8);
  background: var(--color-text);
  box-shadow: 0 2px 8px rgba(31, 35, 40, 0.55);
  transition: transform var(--transition-fast);
}

.footer-progress__input:active::-webkit-slider-thumb,
.footer-progress__input:focus-visible::-webkit-slider-thumb,
.footer-progress__input:active::-moz-range-thumb,
.footer-progress__input:focus-visible::-moz-range-thumb {
  transform: scale(1.05);
}

.footer-progress__input:disabled::-webkit-slider-thumb,
.footer-progress__input:disabled::-moz-range-thumb {
  background: rgba(31, 35, 40, 0.2);
  border-color: rgba(31, 35, 40, 0.4);
  box-shadow: none;
}

.footer-progress__bubble {
  top: -6px;
  left: 0;
  transform: translate(-50%, -100%) scale(0.98);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 116px;
  padding: var(--space-4) var(--space-8);
  border-radius: 0;
  border: 1px solid var(--color-border-muted);
  background: linear-gradient(
    180deg,
    var(--color-button-surface),
    var(--color-panel-strong)
  );
  color: var(--color-text);
  font-size: calc(var(--font-size-xs) * 0.8);
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.footer-progress__bubble-detail {
  color: var(--color-text-soft);
  font-size: calc(var(--font-size-xs) * 0.74);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer-progress[data-scrubbing='true'] .footer-progress__bubble {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1);
}

/* Utility classes handle footer-actions, footer-center and footer-controls layout */

.footer-btn {
  position: relative;
  min-width: auto;
  border: 1px solid var(--color-border-muted);
  background: linear-gradient(
    135deg,
    rgba(76, 106, 146, 0.16),
    rgba(130, 147, 173, 0.12)
  );
  color: var(--color-text);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-medium), border-color var(--transition-medium), color var(--transition-medium), transform var(--transition-fast);
  contain: paint;
}

.footer-btn--primary {
  border-color: rgba(76, 106, 146, 0.38);
  background: linear-gradient(
    135deg,
    rgba(76, 106, 146, 0.24),
    rgba(130, 147, 173, 0.16)
  );
}

.footer-btn--live-transcript {
  background: linear-gradient(
    135deg,
    var(--color-chip-bg),
    var(--color-primary-soft)
  );
  border-color: var(--color-chip-border);
}

.footer-btn--has-badge {
  contain: none;
}

.footer-btn:hover,
.footer-btn:focus-visible {
  background: linear-gradient(
    135deg,
    rgba(76, 106, 146, 0.24),
    rgba(130, 147, 173, 0.16)
  );
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
}

.footer-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.footer-icon-tooltip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--space-4));
  transform: translate(-50%, 4px);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-muted);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 3;
}

.footer-icon-tooltip[data-tooltip]:hover::after,
.footer-icon-tooltip[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.footer-visual-cycle-divider {
  color: var(--color-text-muted);
  line-height: 1;
  pointer-events: none;
}

.footer-icon-control {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  contain: paint;
}

.footer-icon-control:hover,
.footer-icon-control:focus-visible {
  color: var(--color-text);
}

.footer-visual-cycle-toggle {
  min-width: 20px;
}

.footer-play {
  color: var(--color-text);
}

.footer-play .footer-btn-icon {
  width: 32px;
  height: 32px;
}

#btn-volume-toggle .footer-btn-icon {
  width: 26px;
  height: 26px;
}

.footer-btn.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.footer-btn--live-transcript:hover,
.footer-btn--live-transcript:focus-visible {
  background: linear-gradient(
    135deg,
    var(--color-chip-bg-strong),
    var(--color-primary-soft)
  );
  border-color: var(--color-accent);
}

.footer-btn--live-transcript.is-active {
  color: var(--color-chip-text);
  box-shadow: 0 0 18px var(--color-primary-soft);
}

.footer-btn-icon--live-transcript {
  width: 22px;
  height: 22px;
}

.footer-btn--visual-audio {
  background: linear-gradient(
    135deg,
    rgba(74, 128, 176, 0.22),
    rgba(116, 193, 212, 0.14)
  );
  border-color: rgba(116, 193, 212, 0.26);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.footer-btn--visual-audio:hover,
.footer-btn--visual-audio:focus-visible {
  background: linear-gradient(
    135deg,
    rgba(74, 128, 176, 0.3),
    rgba(116, 193, 212, 0.2)
  );
  border-color: rgba(116, 193, 212, 0.42);
  box-shadow: 0 0 18px rgba(74, 128, 176, 0.18);
}

.footer-btn--visual-audio.is-active {
  border-color: rgba(116, 193, 212, 0.6);
  color: rgb(144, 223, 238);
  box-shadow: 0 0 20px rgba(116, 193, 212, 0.22);
}

.footer-btn-icon--visual-audio {
  width: 22px;
  height: 22px;
}

.footer-btn--visual-audio [data-role='visual-audio-mute-line'] {
  stroke-width: 2.25;
}

.footer-btn-icon {
  width: 20px;
  height: 20px;
}

.footer-btn-text {
  letter-spacing: 0.04em;
  font-weight: 700;
  white-space: nowrap;
  @media (max-width: 600px) {
    display: none;
  }
}

.footer-btn-text.text-xs {
  font-size: 13px;
}

.footer-btn-badge {
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: #e53e3e;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 20px;
  box-shadow: 0 4px 8px rgba(229, 62, 62, 0.4);
}


/* Play/Pause button state */
.footer-play .footer-btn-text {
  display: none !important;
}

.app-shell:not(.is-playing) .footer-play .pause-icon {
  display: none;
}

.app-shell.is-playing .footer-play .play-icon {
  display: none;
}

/* Volume control container - utilities handle layout */
.footer-volume-container {
  max-width: fit-content;
  --footer-volume-level: 1;
  --footer-volume-live: 0;
}

.footer-volume-slider-backdrop__level,
.footer-volume-slider-backdrop__live {
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 0%;
}

.footer-volume-slider-backdrop__level {
  background: linear-gradient(
    180deg,
    rgba(156, 184, 212, 0.18),
    rgba(156, 184, 212, 0.65)
  );
}

.footer-volume-slider-backdrop__live {
  background: linear-gradient(
    180deg,
    rgba(219, 232, 245, 0.92),
    rgba(156, 184, 212, 0.34)
  );
  box-shadow: 0 0 14px rgba(156, 184, 212, 0.3);
}

.footer-volume-slider-container {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  min-height: 176px;
  margin-bottom: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.footer-volume-slider-shell {
  width: 22px;
  height: 118px;
}

.footer-volume-slider-backdrop {
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--color-panel-contrast),
    var(--color-surface-light)
  );
  border: 1px solid var(--color-border-faint);
  pointer-events: none;
}

.footer-volume-trigger:hover .footer-volume-slider-container,
.footer-volume-container.is-active .footer-volume-slider-container {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.footer-volume-slider {
  writing-mode: vertical-lr;
  direction: rtl;
  position: relative;
  z-index: 1;
  width: 22px;
  height: 118px;
  background: transparent;
  border-radius: 0;
  outline: none;
  accent-color: var(--color-text);
  appearance: none;
}

.footer-volume-fx-divider {
  position: static;
  color: var(--color-text-muted);
  line-height: 1;
  pointer-events: none;
}

.footer-volume-fx-toggle {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
}

.footer-volume-fx-toggle:hover,
.footer-volume-fx-toggle:focus-visible {
  color: var(--color-text);
}

.footer-volume-fx-toggle.is-active {
  color: var(--color-accent);
}

.footer-volume-fx-mute-slash {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.footer-volume-fx-toggle.is-muted .footer-volume-fx-mute-slash {
  opacity: 1;
}

.footer-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: var(--color-text);
  cursor: pointer;
  border: 1px solid rgba(31, 35, 40, 0.8);
  box-shadow: 0 2px 6px rgba(31, 35, 40, 0.4);
  transition: transform var(--transition-fast);
}

.footer-volume-slider::-webkit-slider-runnable-track {
  background: transparent;
  border-radius: 0;
  height: 22px;
}

.footer-volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: var(--color-text);
  cursor: pointer;
  border: 1px solid rgba(31, 35, 40, 0.8);
  box-shadow: 0 2px 6px rgba(31, 35, 40, 0.4);
  transition: transform var(--transition-fast);
}

.footer-volume-slider::-moz-range-track {
  background: transparent;
  border: none;
}

.footer-volume-slider::-moz-range-progress {
  background: transparent;
  border-radius: 0;
}

.footer-volume-slider:active::-webkit-slider-thumb,
.footer-volume-slider:focus-visible::-webkit-slider-thumb {
  transform: scale(1.2);
}

.footer-volume-slider:active::-moz-range-thumb,
.footer-volume-slider:focus-visible::-moz-range-thumb {
  transform: scale(1.2);
}

/* Volume icon states */
.volume-mute {
  display: none;
}

.volume-higher {
  display: none;
}

/* Mobile: keep volume slider available for tap */
@media (max-width: 600px) {
  .footer-volume-slider-container {
    display: flex;
  }
}


.footer-btn:hover,
.footer-btn:focus-visible {
  background: linear-gradient(
    135deg,
    rgba(76, 106, 146, 0.24),
    rgba(130, 147, 173, 0.16)
  );
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
}

.footer-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.footer-btn.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.cast-overlay__panel {
  width: min(620px, 100%);
  border-radius: var(--overlay-radius);
  background: linear-gradient(
      135deg,
      var(--color-primary-soft),
      var(--color-panel-contrast)
    ),
    var(--color-panel-strong);
  border: 1px solid var(--color-border-muted);
  box-shadow: var(--overlay-shadow);
  backdrop-filter: blur(12px);
  color: var(--color-text);
}

.cast-overlay__eyebrow {
  letter-spacing: 0.08em;
}

.cast-overlay__title {
  letter-spacing: 0.04em;
}

.cast-overlay__title span {
  color: var(--color-primary);
}

/* cast-overlay__hint uses utility classes */

/* cast-overlay__volume uses utility classes */

.cast-overlay__volume-label {
  letter-spacing: 0.06em;
}

.cast-overlay__volume input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  height: 12px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border: 1px solid var(--color-border-muted);
}

.cast-overlay__volume input[type='range']::-webkit-slider-runnable-track,
.cast-overlay__volume input[type='range']::-moz-range-track {
  height: 12px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: 0;
  border: 1px solid var(--color-border-muted);
}

.cast-overlay__volume input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: var(--color-text);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.cast-overlay__volume input[type='range']::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: var(--color-text);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.cast-overlay__debug {
  border: 1px solid var(--color-border-muted);
  background: var(--color-panel);
  color: var(--color-text);
  min-height: 34px;
  padding: var(--space-8) var(--space-12);
  transition:
    background var(--transition-medium),
    border-color var(--transition-medium),
    color var(--transition-medium);
}

.cast-overlay__debug:hover,
.cast-overlay__debug:focus-visible {
  background: var(--color-panel-contrast);
  border-color: var(--color-border-strong);
}

.overlay-sheet {
  width: 100%;
  max-width: var(--overlay-width);
  background: var(--color-panel);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--overlay-radius);
  box-shadow: var(--overlay-shadow);
  color: var(--color-text);
  max-height: min(var(--overlay-available-height), 720px);
}

@media (min-width: 601px) {
  .overlay-sheet--account {
    width: min(96vw, 1280px);
    max-width: none;
    min-width: 760px;
    height: min(var(--overlay-available-height), 980px);
    max-height: min(var(--overlay-available-height), 980px);
  }

  .overlay-sheet--visuals {
    width: 50vw;
    max-width: none;
    min-width: 200px;
    height: min(var(--overlay-available-height), 720px);
    max-height: min(var(--overlay-available-height), 720px);
  }

  .overlay-sheet--visuals .visuals-form {
    padding-left: var(--space-16);
    padding-right: var(--space-16);
  }

  .overlay-sheet--visuals .visuals-results {
    justify-content: center;
    gap: var(--space-8);
  }

  .overlay-sheet--visuals .visuals-results .overlay-result {
    max-width: 320px;
    flex: 0 1 320px;
  }

  .overlay-sheet--soundcloud {
    width: 50vw;
    max-width: none;
    min-width: 200px;
    height: min(var(--overlay-available-height), 720px);
    max-height: min(var(--overlay-available-height), 720px);
  }
}


.side-drawer {
  width: min(520px, 92vw);
  height: 100%;
  max-height: 100%;
  background: var(--color-panel);
  border-left: 1px solid var(--color-border-muted);
  box-shadow: var(--overlay-shadow);
  color: var(--color-text);
  border-radius: var(--overlay-radius) 0 0 var(--overlay-radius);
}

.side-drawer__header {
  border-bottom: 1px solid var(--color-border-muted);
}

/* side-drawer__header-main uses utility classes */

/* side-drawer__body uses utility classes */

@media (max-width: 600px) {
  .overlay-sheet--menu {
    height: 100vh;
    max-height: 100vh;
    height: 100svh;
    max-height: 100svh;
  }

  @supports (height: 100dvh) {
    .overlay-sheet--menu {
      height: 100dvh;
      max-height: 100dvh;
    }
  }
}

.overlay-sheet__header {
  border-bottom: 1px solid var(--color-border-muted);
}

.overlay-title {
  letter-spacing: 0.04em;
  font-weight: 700;
}

.overlay-link {
  color: var(--color-text);
  letter-spacing: 0.06em;
  cursor: pointer;
}

.overlay-close {
  width: 28px;
  height: 28px;
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.overlay-close:hover,
.overlay-close:focus-visible {
  color: var(--color-primary-strong);
  transform: scale(1.05);
}

.overlay-close.absolute:hover,
.overlay-close.absolute:focus-visible {
  transform: translateY(-50%) scale(1.05);
}

/* overlay-body uses utility classes */

/* overlay-menu uses utility classes */

.overlay-menu__button {
  border: 1px solid var(--color-border-faint);
  background: var(--color-panel-contrast);
  color: var(--color-text);
  letter-spacing: 0.03em;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-medium), border-color var(--transition-medium), color var(--transition-medium), transform var(--transition-fast);
}

/* overlay-menu__button--icon uses utility classes */

.overlay-menu__button.text-sm {
  font-size: 13px;
}

.overlay-menu__button.uppercase {
  text-transform: none;
}

.overlay-menu__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--color-text-soft);
  transition: color var(--transition-medium);
}

.overlay-menu__icon--image {
  object-fit: contain;
  filter: saturate(1.1);
}

/* overlay-menu__label uses utility classes */

.overlay-menu__button:hover,
.overlay-menu__button:focus-visible {
  background: linear-gradient(
    135deg,
    rgba(76, 106, 146, 0.24),
    rgba(130, 147, 173, 0.12)
  );
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
}

.overlay-menu__button:hover .overlay-menu__icon,
.overlay-menu__button:focus-visible .overlay-menu__icon {
  color: var(--color-text);
}

.overlay-menu__button[aria-busy='true'] {
  border-color: var(--color-border-strong);
  background:
    linear-gradient(135deg, rgba(76, 106, 146, 0.24), rgba(130, 147, 173, 0.12)),
    var(--color-panel-strong);
  color: var(--color-text);
  box-shadow: inset 0 0 0 1px rgba(76, 106, 146, 0.18);
  animation: overlay-menu-button-pending 0.9s ease-in-out infinite alternate;
}

.overlay-menu__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.overlay-menu__button[aria-busy='true']:disabled {
  opacity: 1;
  cursor: wait;
}

@keyframes overlay-menu-button-pending {
  from {
    box-shadow: inset 0 0 0 1px rgba(76, 106, 146, 0.14);
  }

  to {
    box-shadow:
      inset 0 0 0 1px rgba(76, 106, 146, 0.3),
      0 0 0 1px rgba(76, 106, 146, 0.12);
  }
}

.studio-overview-card {
  border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(76, 106, 146, 0.16), rgba(130, 147, 173, 0.05)),
    var(--color-panel-strong);
}

.studio-overview-card__eyebrow {
  letter-spacing: 0.08em;
}

.studio-overview-card__title,
.sources-section__title {
  font-size: var(--font-size-lg);
  line-height: 1.2;
  color: var(--color-text);
}

.studio-menu__button {
  align-items: flex-start;
}

.studio-menu__count {
  min-width: 20px;
  padding: 0 var(--space-6);
  border: 1px solid var(--color-chip-border);
  background: var(--color-chip-bg);
  color: var(--color-chip-text);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 20px;
  text-align: center;
}

.studio-menu__count--alert {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary-strong);
}

.studio-menu__button--primary {
  border-color: rgba(76, 106, 146, 0.35);
  background:
    linear-gradient(135deg, rgba(76, 106, 146, 0.18), rgba(130, 147, 173, 0.08)),
    var(--color-panel-contrast);
}

.overlay-sheet--account .account-layout {
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  min-height: 100%;
  height: auto;
}

.overlay-sheet--account .overlay-content {
  max-height: none;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.overlay-sheet--account .account-summary,
.overlay-sheet--account .account-main {
  min-height: 0;
  height: auto;
}

.overlay-sheet--account .account-card,
.overlay-sheet--account .account-status-card {
  flex-shrink: 0;
}

.account-summary,
.account-card,
.account-summary-row,
.account-inline-note,
.account-profile-card,
.account-nav-shell,
.account-sync-panel,
.account-status-card,
.account-identity-band {
  border: 1px solid var(--color-border-faint);
}

.account-summary {
  background:
    linear-gradient(180deg, rgba(76, 106, 146, 0.1), transparent 28%),
    var(--color-panel-strong);
}

.account-card,
.account-inline-note,
.account-profile-card,
.account-nav-shell,
.account-sync-panel,
.account-status-card,
.account-identity-band,
.account-summary-row,
.account-submission-row,
.visuals-create__review-panel {
  background: var(--color-button-surface);
}

.account-summary__title,
.account-card__title,
.account-identity__name {
  color: var(--color-text);
  font-size: var(--font-size-xl);
  line-height: 1.2;
  font-weight: 700;
}

.account-card__title {
  font-size: var(--font-size-xl);
}

.account-summary-row__value {
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: 1.4;
  font-weight: 700;
}

.account-step-chip,
.account-identity__badge {
  border: 1px solid var(--color-chip-border);
  background: var(--color-chip-bg);
  color: var(--color-chip-text);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
}

.account-step-chip {
  min-width: 96px;
}

.account-identity__badge {
  padding: var(--space-6) var(--space-8);
}

.account-primary-button {
  border-color: rgba(76, 106, 146, 0.34);
  background:
    linear-gradient(135deg, rgba(76, 106, 146, 0.18), rgba(130, 147, 173, 0.08)),
    var(--color-panel-strong);
}

.account-nav__button[aria-selected='true'] {
  border-color: rgba(76, 106, 146, 0.34);
  background:
    linear-gradient(135deg, rgba(76, 106, 146, 0.16), rgba(130, 147, 173, 0.08)),
    var(--color-panel-strong);
  color: var(--color-text);
}

.account-nav__button[aria-selected='true'] .effects-panel-meta {
  color: var(--color-text-soft);
}

.account-nav__count {
  border: 1px solid var(--color-chip-border);
  background: var(--color-chip-bg);
  color: var(--color-chip-text);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: var(--space-6) var(--space-8);
  text-align: center;
}

.account-nav__button[aria-selected='true'] .account-nav__count {
  border-color: rgba(76, 106, 146, 0.28);
  background: rgba(76, 106, 146, 0.1);
  color: var(--color-primary-strong);
}

.account-divider__line {
  border-top: 1px solid var(--color-border-muted);
}

.account-divider__label {
  color: var(--color-text-soft);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.account-card--profile {
  background:
    linear-gradient(180deg, rgba(76, 106, 146, 0.08), transparent 24%),
    var(--color-panel);
}

.account-profile-card {
  border-color: rgba(76, 106, 146, 0.22);
}

.account-status-card {
  min-height: 92px;
}

.account-card--submissions {
  min-height: 0;
}

.account-card--support,
.account-support-panel {
  min-height: 0;
}

.account-support-panel {
  border: 1px solid var(--color-border-faint);
  background: var(--color-button-surface);
}

.account-support-kind-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-support-kind-button .overlay-menu__icon {
  color: currentColor;
}

.account-support-kind-button[aria-pressed='true'] {
  border-color: rgba(76, 106, 146, 0.34);
  background:
    linear-gradient(135deg, rgba(76, 106, 146, 0.16), rgba(130, 147, 173, 0.08)),
    var(--color-panel-strong);
}

.account-support-textarea {
  min-height: 144px;
  resize: vertical;
  padding: var(--space-10);
}

.account-support-toggle input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin: var(--space-2) 0 0;
}

.account-submission-row,
.visuals-create__review-panel {
  border: 1px solid var(--color-border-faint);
}

.account-submission-row[data-selected='true'] {
  border-color: rgba(63, 95, 130, 0.28);
  box-shadow: 0 0 0 1px rgba(63, 95, 130, 0.12);
}

.account-submission__title {
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: 1.35;
}

.account-support-request__kind-icon {
  color: currentColor;
}

.account-submission__chip[data-tone='pending'] {
  border-color: rgba(182, 132, 42, 0.28);
  background: rgba(182, 132, 42, 0.1);
  color: var(--color-warning);
}

.account-submission__chip[data-tone='info'] {
  border-color: rgba(63, 95, 130, 0.28);
  background: rgba(63, 95, 130, 0.1);
  color: var(--color-primary-strong);
}

.account-submission__chip[data-tone='success'] {
  border-color: rgba(86, 122, 101, 0.28);
  background: rgba(86, 122, 101, 0.1);
  color: var(--color-success);
}

.account-submission__chip[data-tone='warning'] {
  border-color: rgba(190, 91, 103, 0.28);
  background: rgba(190, 91, 103, 0.1);
  color: var(--color-danger);
}

.account-submission__toggle {
  cursor: pointer;
}

.account-submission__reason {
  border: 1px solid rgba(190, 91, 103, 0.18);
  background: rgba(190, 91, 103, 0.04);
}

.visuals-create__review-toggle input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin: var(--space-2) 0 0;
  cursor: pointer;
}

.visuals-create__review-help {
  flex-shrink: 0;
}

.visuals-tab-help.visuals-create__review-help[data-tooltip]::after {
  top: auto;
  bottom: calc(100% + var(--space-6));
  left: auto;
  right: 0;
  transform: translate(0, 2px);
}

.visuals-tab-help.visuals-create__review-help[data-tooltip]:hover::after,
.visuals-tab-help.visuals-create__review-help[data-tooltip]:focus-visible::after {
  transform: translate(0, 0);
}

.account-action-status {
  min-height: 1.4em;
}

.account-action-status[data-tone='error'] {
  color: var(--color-error);
}

.account-action-status[data-tone='success'] {
  color: var(--color-success);
}

.account-action-status[data-tone='info'] {
  color: var(--color-text-soft);
}

@media (max-width: 900px) {
  .overlay-sheet--account .account-layout {
    grid-template-columns: 1fr;
  }

  .overlay-sheet--account .account-summary,
  .overlay-sheet--account .account-main {
    min-width: 0;
  }
}

.studio-menu__meta {
  font-size: var(--font-size-xs);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}

.media-source-prompts {
  inset: 0;
  box-sizing: border-box;
  padding: var(--space-24) var(--space-16);
  padding-bottom: 140px;
  background: color-mix(in srgb, var(--color-dark) 72%, transparent);
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.media-source-prompts__backdrop {
  background: color-mix(in srgb, var(--color-dark) 72%, transparent);
}

.media-source-prompts__sheet {
  max-width: 760px;
  margin: auto 0;
  gap: var(--space-12);
  padding: var(--space-20);
  border: 1px solid var(--color-border-muted);
  background:
    linear-gradient(180deg, rgba(76, 106, 146, 0.08), transparent 28%),
    var(--color-panel);
  box-shadow: var(--shadow-lg);
}

.media-source-prompts__handle,
.media-source-prompts__tabs,
.media-source-prompts__close {
  display: none;
}

.media-source-prompts__eyebrow {
  letter-spacing: 0.12em;
}

.media-source-prompts__title {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.media-source-prompts__rack {
  gap: var(--space-12);
  max-width: 760px;
}

.media-source-prompt {
  flex: 1 1 210px;
  min-width: 180px;
  max-width: 320px;
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  background:
    linear-gradient(135deg, rgba(76, 106, 146, 0.12), rgba(130, 147, 173, 0.05)),
    var(--color-panel);
  box-shadow: var(--shadow-lg);
}

.media-source-prompt__heading {
  letter-spacing: 0.12em;
}

.media-source-prompt__button {
  text-align: left;
}

.media-source-prompt__label {
  min-width: 0;
}

.media-source-prompt__title {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.media-source-prompt__meta,
.media-source-prompt__hint {
  font-size: var(--font-size-xs);
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
}

.media-source-prompts__tab.is-active {
  border-color: var(--color-border-strong);
  background: var(--color-panel-strong);
  color: var(--color-text);
}

.sources-section,
.sources-next-step {
  border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-lg);
  background: var(--color-panel-contrast);
}

.sources-section {
  padding: var(--space-12);
}

.sources-next-step {
  background:
    linear-gradient(180deg, var(--color-panel-contrast), transparent),
    var(--color-panel-contrast);
}

.sources-section__eyebrow {
  letter-spacing: 0.08em;
}

.sources-section__copy {
  max-width: 56ch;
}

.sources-mic-layer-note {
  border: 1px solid var(--color-border-strong);
  background:
    linear-gradient(180deg, var(--color-primary-soft), transparent),
    var(--color-panel);
}

.sources-mic-layer-note__eyebrow,
.sources-option__meta {
  color: var(--color-text-soft);
}

.sources-option__meta {
  font-size: var(--font-size-2xs);
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-transform: none;
}

.overlay-menu__button--ghost {
  border-color: var(--color-border-muted);
  background: var(--color-button-surface);
  color: var(--color-text-soft);
}

.overlay-menu__button--ghost:hover,
.overlay-menu__button--ghost:focus-visible {
  background: var(--color-button-surface-hover);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.overlay-menu__button--danger:not([disabled]) {
  border-color: rgba(255, 94, 129, 0.4);
  color: var(--color-danger);
  background: rgba(255, 94, 129, 0.08);
}

.overlay-menu__button--danger:not([disabled]):hover,
.overlay-menu__button--danger:not([disabled]):focus-visible {
  background: rgba(255, 94, 129, 0.15);
  border-color: rgba(255, 94, 129, 0.6);
  color: var(--color-danger);
  transform: none;
}

/* overlay-menu--tight, overlay-sheet__footer use utility classes */

.overlay-sheet__footer {
  border-top: 1px solid var(--color-border-muted);
}

.overlay-sheet__footer-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

/* overlay-sheet__socials uses utility classes */

.overlay-sheet__social-link {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border-muted);
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-medium), border-color var(--transition-medium), color var(--transition-medium);
}

.overlay-sheet__social-link:hover,
.overlay-sheet__social-link:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.overlay-sheet__social-link svg {
  flex-shrink: 0;
}

/* overlay-sheet__footer-right uses utility classes */

.overlay-sheet__footer-separator {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.overlay-sheet__footer-link {
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  text-decoration: none;
  font-size: var(--font-size-xs);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-medium);
  font-family: inherit;
}

.overlay-sheet__footer-link:hover,
.overlay-sheet__footer-link:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
}

.overlay-sheet__footer-link[href] {
  cursor: pointer;
}

.overlay-sheet__contact-link {
  color: var(--color-text-soft);
  text-decoration: none;
  font-size: var(--font-size-sm);
  line-height: 1.35;
  letter-spacing: 0.02em;
  transition: color var(--transition-medium);
}

.overlay-sheet__contact-link:hover,
.overlay-sheet__contact-link:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
}

/* overlay-field uses utility classes */

.overlay-field + .overlay-field {
  margin-top: var(--space-12);
}

.overlay-label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.overlay-input,
.overlay-select {
  width: 100%;
  padding: var(--space-8) var(--space-10);
  border: 1px solid var(--color-border-muted);
  background: var(--color-button-surface);
  color: var(--color-text);
  font-size: var(--font-size-lg); /* keep ≥16px to prevent iOS zoom on focus */
  outline: none;
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-medium), background var(--transition-medium), box-shadow var(--transition-medium);
}

.overlay-input:focus,
.overlay-select:focus {
  border-color: var(--color-border-strong);
  background: var(--color-button-surface-hover);
  box-shadow: 0 0 0 3px rgba(76, 106, 146, 0.12);
}

.overlay-select {
  min-height: 140px;
}

.visual-control-select--compact {
  min-height: 36px;
  height: 36px;
  font-size: var(--font-size-sm);
}

.export-panel-shell .overlay-select {
  min-height: 36px;
  height: 36px;
}

/* overlay-form, overlay-search use utility classes */

.overlay-form__actions .overlay-menu__button {
  width: auto;
  min-width: 120px;
}

.overlay-search__submit {
  min-width: 140px;
  flex-shrink: 0;
}

.overlay-search__row,
.visuals-form .overlay-search__row,
.overlay-sheet--soundcloud .overlay-search__row {
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-card);
  background: var(--color-panel-strong);
  padding: var(--space-8);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.overlay-search__row:focus-within,
.visuals-form .overlay-search__row:focus-within,
.overlay-sheet--soundcloud .overlay-search__row:focus-within {
  border-color: rgba(76, 106, 146, 0.45);
  background: rgba(76, 106, 146, 0.04);
}

.overlay-search__input,
.visuals-form .overlay-search__input,
.overlay-sheet--soundcloud .overlay-search__input {
  border-color: transparent;
  background: transparent;
  font-size: var(--font-size-md);
}

.overlay-search__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.overlay-search[data-loading='true'] .overlay-search__submit,
.overlay-search[data-loading='true'] .overlay-search__input {
  opacity: 0.7;
  pointer-events: none;
}

/* overlay-feedback uses utility classes */

.overlay-feedback__message,
.overlay-feedback__status,
.overlay-feedback__summary {
  font-size: var(--font-size-xs);
  color: var(--color-text-soft);
}

.overlay-feedback__message[data-tone='error'] {
  color: var(--color-danger);
}

.overlay-feedback__message[data-tone='warning'] {
  color: var(--color-accent);
}

/* overlay-results uses utility classes */

.overlay-results {
  max-height: 340px;
  scrollbar-width: thin;
  scrollbar-color: rgba(76, 106, 146, 0.9) rgba(31, 35, 40, 0.06);
}

.overlay-result {
  position: relative;
  width: 100%;
  text-align: left;
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-card);
  background: var(--color-panel);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}

.overlay-results .overlay-result {
  padding: var(--space-28);
  font-size: var(--font-size-md);
  line-height: 1.4;
}

.library-browser__hero {
  flex-shrink: 0;
}

.library-browser__results {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-height: none;
  align-content: start;
}

.library-browser__empty {
  border: 1px solid var(--color-border-faint);
  background:
    linear-gradient(180deg, rgba(76, 106, 146, 0.08), transparent 72%),
    var(--color-panel-contrast);
}

.library-card {
  margin-bottom: 0;
  min-height: 168px;
  justify-content: flex-start;
  gap: var(--space-10);
  border-color: var(--color-border-faint);
  background:
    linear-gradient(180deg, rgba(76, 106, 146, 0.14), transparent 60%),
    var(--color-button-surface);
}

.library-card__eyebrow,
.library-card__action,
.library-card__index {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.library-card__eyebrow {
  color: var(--color-text-muted);
}

.library-card__index {
  padding: var(--space-2) var(--space-6);
  border: 1px solid var(--color-chip-border);
  background: var(--color-chip-bg);
  color: var(--color-chip-text);
}

.library-card__title {
  color: var(--color-text);
  font-size: var(--font-size-lg);
  line-height: 1.2;
  font-weight: 700;
}

.library-card__meta {
  color: var(--color-text-soft);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.library-card__action {
  margin-top: auto;
  color: var(--color-primary-strong);
}

.library-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--color-border-faint);
  background: var(--color-panel-contrast);
}

.library-card__thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visuals-results .overlay-result {
  max-width: 300px;
  flex: 0 1 300px;
  width: auto;
  max-height: 360px;
  overflow: hidden;
}

.visual-result--thumbnail {
  min-height: 188px;
  border-color: rgba(31, 35, 40, 0.12);
  background:
    linear-gradient(180deg, var(--color-panel-contrast) 0%, var(--color-panel-strong) 100%),
    var(--color-panel);
}

.soundcloud-results .overlay-result {
  max-width: 300px;
  flex: 1 1 260px;
  width: auto;
}

.overlay-result:hover,
.overlay-result:focus-visible {
  border-color: rgba(76, 106, 146, 0.45);
  background: rgba(76, 106, 146, 0.04);
  transform: translateY(-1px);
}

.overlay-result.is-active {
  border-color: var(--color-accent);
  background: rgba(130, 147, 173, 0.12);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.overlay-result__title {
  font-size: var(--font-size-md);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.overlay-result__meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* overlay-results__more uses utility classes */

/* overlay-content, faq-item use utility classes */

.overlay-content {
  max-height: 400px;
}

.faq-question {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

.faq-answer {
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
  line-height: 1.6;
}

.faq-answer a {
  color: var(--color-text);
  text-decoration: underline;
  transition: color var(--transition-medium);
}

.faq-answer a:hover,
.faq-answer a:focus-visible {
  color: var(--color-accent);
}

/* visual-result uses utility classes */

/* visual-result__title uses utility classes */

.visual-result__thumbnail {
  position: relative;
  width: 100%;
  min-height: 188px;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.24), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(31, 35, 40, 0.22) 100%);
}

.visual-result__thumbnail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 35, 40, 0.04) 0%, rgba(31, 35, 40, 0.58) 100%);
  pointer-events: none;
}

.visual-result__thumbnail-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 188px;
  object-fit: cover;
}

.visual-result__title--overlay {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  right: var(--space-8);
  z-index: 1;
  align-items: flex-start;
  flex-wrap: wrap;
  color: #fff;
  text-align: left;
  text-shadow: 0 1px 6px rgba(31, 35, 40, 0.45);
}

.visual-result__badge {
  min-width: 28px;
  border: 1px solid rgba(31, 35, 40, 0.15);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--color-text-soft);
  background: rgba(12, 14, 18, 0.48);
  line-height: 1;
  text-shadow: none;
  box-shadow: 0 0 0 1px rgba(12, 14, 18, 0.2);
}

.visual-result__badge--hd {
  color: var(--color-visual-tag-hd-text);
  border-color: var(--color-visual-tag-hd-border);
  background: var(--color-visual-tag-hd-bg);
  box-shadow: 0 0 10px rgba(199, 255, 79, 0.2);
}

.visual-result__badge--2d {
  color: rgba(203, 213, 225, 0.75);
}

.visual-result__badge--custom {
  color: var(--color-accent);
  border-color: rgba(67, 217, 173, 0.45);
  background: rgba(67, 217, 173, 0.2);
  z-index: 1;
}

.visual-result__badge--popular {
  color: #ff9ff3;
  border-color: rgba(255, 159, 243, 0.45);
  background: rgba(255, 159, 243, 0.18);
}

.visual-result__badge--interactive {
  color: var(--color-visual-tag-it-text);
  border-color: var(--color-visual-tag-it-border);
  background: var(--color-visual-tag-it-bg);
  box-shadow: 0 0 10px rgba(255, 179, 71, 0.2);
}

.visual-result__badge--preset {
  color: rgba(196, 242, 255, 0.92);
  border-color: rgba(123, 214, 255, 0.45);
  background: rgba(90, 164, 211, 0.2);
  box-shadow: 0 0 10px rgba(123, 214, 255, 0.16);
}

.visual-result.is-active {
  border-color: var(--color-accent);
  background: rgba(76, 106, 146, 0.12);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.visual-result--new {
  border-color: rgba(245, 197, 66, 0.6);
  box-shadow: 0 0 0 1px rgba(245, 197, 66, 0.35);
}

.visual-result--popular {
  overflow: hidden;
  isolation: isolate;
}

.visual-result--popular::before,
.visual-result--popular::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.visual-result--popular::before {
  inset: -38%;
  background: linear-gradient(
    132deg,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0.1) 46%,
    rgba(255, 246, 210, 0.6) 50%,
    rgba(199, 255, 255, 0.24) 54%,
    rgba(255, 255, 255, 0) 58%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(-76%, -76%, 0) rotate(-15deg);
  animation: visual-popular-shimmer 4.4s ease-in-out infinite;
  z-index: 0;
}

.visual-result--popular::after {
  width: 84px;
  height: 84px;
  right: -28px;
  bottom: -28px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 250, 232, 0.92) 0, rgba(255, 250, 232, 0.72) 10%, rgba(255, 250, 232, 0) 58%),
    conic-gradient(
      from 0deg,
      rgba(255, 249, 210, 0) 0deg,
      rgba(255, 249, 210, 0.85) 20deg,
      rgba(255, 249, 210, 0) 40deg,
      rgba(214, 255, 255, 0.8) 65deg,
      rgba(214, 255, 255, 0) 90deg,
      rgba(255, 249, 210, 0.85) 120deg,
      rgba(255, 249, 210, 0) 145deg,
      rgba(214, 255, 255, 0.75) 185deg,
      rgba(214, 255, 255, 0) 210deg,
      rgba(255, 249, 210, 0.85) 250deg,
      rgba(255, 249, 210, 0) 280deg,
      rgba(214, 255, 255, 0.8) 320deg,
      rgba(214, 255, 255, 0) 360deg
    );
  filter: blur(0.3px);
  opacity: 0;
  transform: scale(0.32) rotate(0deg);
  animation: visual-popular-starburst 4.4s ease-in-out infinite;
  z-index: 0;
}

.visual-result--popular > * {
  position: relative;
  z-index: 1;
}

@keyframes visual-popular-shimmer {
  0% {
    opacity: 0;
    transform: translate3d(-78%, -78%, 0) rotate(-15deg);
  }
  8% {
    opacity: 0.14;
  }
  30% {
    opacity: 0.35;
    transform: translate3d(-30%, -30%, 0) rotate(-15deg);
  }
  56% {
    opacity: 0.18;
  }
  74% {
    opacity: 0.08;
    transform: translate3d(12%, 12%, 0) rotate(-15deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(38%, 38%, 0) rotate(-15deg);
  }
}

@keyframes visual-popular-starburst {
  0%, 70% {
    opacity: 0;
    transform: scale(0.26) rotate(0deg);
  }
  82% {
    opacity: 0.52;
    transform: scale(0.78) rotate(18deg);
  }
  90% {
    opacity: 0.2;
    transform: scale(1.05) rotate(34deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.18) rotate(54deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .visual-result--popular::before,
  .visual-result--popular::after {
    animation: none;
    opacity: 0;
  }
}


.visual-result__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
  line-height: 1.5;
}

.visual-result__new-tag {
  margin-left: var(--space-4);
  border: 1px solid var(--color-visual-tag-new-border);
  background: var(--color-visual-tag-new-bg);
  color: var(--color-visual-tag-new-text);
  font-size: 8px;
  letter-spacing: 0.08em;
  line-height: 1.2;
  box-shadow: 0 0 10px rgba(255, 230, 107, 0.18);
}

/* visual-result__footer uses utility classes */

/* visual-result--custom uses utility classes */

.visual-result__delete {
  top: 10px;
  right: 10px;
  border: none;
  color: #ff6b81;
  font-size: 14px;
  padding: var(--space-2) var(--space-2);
  cursor: pointer;
}

.visual-result__delete:hover {
  background: rgba(255, 99, 132, 0.12);
}

.visual-result__favorite {
  background: rgba(12, 14, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1;
  padding: var(--space-2) var(--space-4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  box-shadow: 0 2px 8px rgba(12, 14, 18, 0.24);
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.visual-result__favorite:hover {
  border-color: rgba(245, 197, 66, 0.42);
  background: rgba(12, 14, 18, 0.84);
  color: rgba(245, 197, 66, 0.9);
}

.visual-result__favorite.is-favorited {
  border-color: rgba(245, 197, 66, 0.42);
  background: rgba(12, 14, 18, 0.84);
  color: rgb(245, 197, 66);
}

/* visual-result__tags uses utility classes */

.visual-result__tag {
  border-radius: 0;
  border: 1px solid var(--color-chip-border);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-chip-text);
  background: var(--color-chip-bg);
  line-height: 1;
  flex-shrink: 0;
}

/* visuals-create components use utility classes */

.visuals-create {
  border-top: 1px solid var(--color-border);
}

.visuals-create__delete {
  background-color: rgb(255, 94, 129);
}

.visuals-create__delete[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.visuals-create__field .overlay-input[readonly] {
  opacity: 0.7;
  cursor: not-allowed;
}

.visuals-create__metadata {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.visuals-create__actions--sticky {
  position: sticky;
  bottom: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-muted);
}

/* visuals-create__actions buttons use utility classes */

.visuals-create__markdown-panel {
  border: 1px solid var(--color-border-faint);
  background: var(--color-surface-lighter);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.visuals-create__workflow-option {
  width: 100%;
  border: 1px solid var(--color-border-faint);
  background: var(--color-surface-lighter);
  color: var(--color-text);
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.visuals-create__workflow-option:hover,
.visuals-create__workflow-option:focus-visible {
  border-color: var(--color-border-muted);
  background: var(--color-surface-light);
}

.visuals-create__workflow-option[data-active='true'] {
  border-color: var(--color-primary-strong);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.visuals-create__workflow-checklist {
  color: var(--color-text-muted);
  line-height: 1.5;
}

.visuals-create__preview-toggle {
  border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  padding: var(--space-4) var(--space-8);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.visuals-create__preview-toggle:hover,
.visuals-create__preview-toggle:focus-visible {
  background: var(--color-surface);
  border-color: var(--color-border-muted);
  color: var(--color-text);
}

.visuals-create__preview-chevron {
  display: inline-block;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.visuals-create__preview-toggle[aria-expanded='true'] .visuals-create__preview-chevron {
  transform: rotate(180deg);
}

.visuals-create__preview-content[hidden] {
  display: none;
}

.visuals-create__markdown {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.visuals-create__markdown--instructions {
  max-height: 320px;
}

.visuals-create__markdown--prompt {
  max-height: 220px;
}

.visuals-create__markdown-note {
  color: var(--color-text-soft);
}

.visuals-create__markdown h1,
.visuals-create__markdown h2,
.visuals-create__markdown h3,
.visuals-create__markdown h4,
.visuals-create__markdown h5,
.visuals-create__markdown h6 {
  color: var(--color-text);
}

.visuals-create__markdown h1 {
  font-size: var(--font-size-lg);
}

.visuals-create__markdown h2,
.visuals-create__markdown h3,
.visuals-create__markdown h4,
.visuals-create__markdown h5,
.visuals-create__markdown h6 {
  font-size: var(--font-size-md);
}

.visuals-create__markdown li + li {
  margin-top: var(--space-4);
}

.visuals-create__markdown code {
  color: var(--color-text);
  background: var(--color-surface-light);
  border-radius: var(--radius-sm);
}

.visuals-create__markdown pre {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}

.visuals-create__markdown pre code {
  background: transparent;
  border-radius: 0;
}

.visuals-create__markdown a {
  color: var(--color-primary-strong);
}

.visuals-create__markdown hr {
  border: 0;
  border-top: 1px solid var(--color-border-faint);
}

.visuals-create__status {
  min-height: 1.2em;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.visuals-create__status[data-tone='error'] {
  color: var(--color-error);
}

.visuals-create__status[data-tone='warning'] {
  color: var(--color-warning);
}

.visuals-create__status[data-tone='success'] {
  color: var(--color-success);
}

.visual-result__creator {
  position: absolute;
  bottom: var(--space-8);
  right: var(--space-8);
  font-size: var(--font-size-xs);
  color: rgba(203, 213, 225, 0.65);
  white-space: nowrap;
}

.visual-result__creator--overlay {
  left: var(--space-8);
  right: auto;
  bottom: var(--space-8);
  z-index: 1;
  padding: var(--space-4) var(--space-8);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.96);
  background: rgba(12, 14, 18, 0.78);
  box-shadow: 0 2px 8px rgba(12, 14, 18, 0.32);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.visual-result__preview-trigger {
  position: absolute;
  right: var(--space-8);
  bottom: var(--space-8);
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(12, 14, 18, 0.78);
  padding: var(--space-4) var(--space-8);
  box-shadow: 0 2px 8px rgba(12, 14, 18, 0.32);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.visual-result__preview-trigger:hover,
.visual-result__preview-trigger:focus-visible {
  border-color: rgba(123, 214, 255, 0.4);
  background: rgba(12, 14, 18, 0.9);
  color: rgba(196, 242, 255, 0.96);
}

.visual-result__empty {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Desktop visual card hover — more visible lift when preview is active */
@media (pointer: fine) and (min-width: 601px) {
  .visuals-results .overlay-result:hover {
    transform: translateY(-2px);
    border-color: rgba(31, 35, 40, 0.3);
    box-shadow: 0 6px 20px rgba(31, 35, 40, 0.5);
    z-index: 1;
  }
}

/* Visual hover preview popup */
.visual-preview-popup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  pointer-events: none;
  width: 244px;
  padding: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--overlay-radius);
  box-shadow: var(--overlay-shadow), 0 0 0 1px rgba(31, 35, 40, 0.04);
  will-change: transform;
}

.visual-preview-popup__canvas-wrap {
  position: relative;
  width: 220px;
  height: 140px;
  overflow: hidden;
  border-radius: 0;
  background: #04050a;
}

.visual-preview-popup__poster,
.visual-preview-popup__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.visual-preview-popup__poster {
  object-fit: cover;
}

.visual-preview-popup__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-2) var(--space-2);
}

.visual-preview-popup__title,
.visual-preview-popup__description {
  margin: 0;
}

.visual-preview-popup__title {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.visual-preview-popup__description {
  font-size: var(--font-size-xs);
  color: var(--color-text-soft);
  line-height: 1.5;
}

.visual-preview-popup__error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* welcome-panel uses utility classes */

.welcome-panel {
  position: relative;
  width: min(540px, 94vw);
  max-height: calc(100vh - var(--space-20));
  max-height: calc(100dvh - var(--space-20));
}

.welcome-panel[data-onboarding-mode='tutorial'] {
  width: min(980px, 96vw);
}

.welcome-panel__card {
  background:
    linear-gradient(180deg, var(--color-panel-contrast), transparent 18%),
    var(--color-overlay);
  border: 1px solid var(--color-border-muted);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  max-height: inherit;
  overflow: hidden;
}

.welcome-panel__screen {
  flex: 1 1 auto;
  min-height: 0;
}

.welcome-panel__header {
  padding: var(--space-16) var(--space-20) 0;
}

.welcome-panel__header--tutorial {
  border-bottom: 1px solid var(--color-border-faint);
  padding-bottom: var(--space-16);
}

.welcome-panel__logo {
  width: 104px;
  height: 104px;
}

.welcome-panel__logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.welcome-panel__body {
  padding: 0 var(--space-20);
}

.welcome-panel__body--tutorial {
  flex: 1 1 auto;
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.welcome-panel__eyebrow {
  letter-spacing: 0.18em;
}

.welcome-panel__headline {
  max-width: 20ch;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.05;
  color: var(--color-text);
}

.welcome-panel__intro {
  font-size: var(--font-size-md);
  line-height: 1.6;
  color: var(--color-text);
}

.welcome-panel__warning {
  border-left: 3px solid var(--color-danger);
  background:
    linear-gradient(180deg, var(--color-panel-contrast), transparent 100%),
    var(--color-surface-light);
  padding: var(--space-8) var(--space-10);
  font-size: var(--font-size-sm);
  color: var(--color-danger);
  line-height: 1.5;
}

.welcome-panel__footer {
  padding: var(--space-12) var(--space-20) var(--space-20);
}

.welcome-panel__footer--tutorial {
  border-top: 1px solid var(--color-border-faint);
  padding-top: var(--space-16);
}

.welcome-panel__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-soft);
}

.welcome-panel__link {
  text-decoration: underline;
  color: var(--color-primary-strong);
}

.welcome-panel__link:hover,
.welcome-panel__link:focus-visible {
  color: var(--color-text);
  text-decoration-color: var(--color-accent);
}

.welcome-panel__progress {
  padding: var(--space-10) var(--space-12);
  border: 1px solid var(--color-border-faint);
  background:
    linear-gradient(180deg, var(--color-primary-soft), transparent 100%),
    var(--color-surface-light);
}

.welcome-panel__progress-copy {
  color: var(--color-text-muted);
}

.welcome-panel__tutorial-top,
.welcome-panel__progress-summary {
  align-items: flex-start;
}

.welcome-panel__step-marker {
  border: 1px solid var(--color-chip-border);
  background: var(--color-chip-bg);
  color: var(--color-chip-text);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  padding: var(--space-6) var(--space-8);
  text-transform: uppercase;
}

.welcome-panel__step-marker[data-state='active'] {
  border-color: var(--color-border-strong);
  background:
    linear-gradient(180deg, var(--color-primary-soft), transparent 100%),
    var(--color-panel-strong);
  color: var(--color-primary-strong);
}

.welcome-panel__step-marker[data-state='complete'] {
  border-color: var(--color-border-muted);
  background: var(--color-surface-light);
  color: var(--color-text-soft);
}

.welcome-panel__route {
  letter-spacing: 0.16em;
}

.welcome-panel__feature-grid,
.welcome-panel__visual-grid,
.welcome-panel__split-grid,
.welcome-panel__compare-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.welcome-panel__feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.welcome-panel__feature-card,
.welcome-panel__visual-card {
  border: 1px solid var(--color-border-faint);
  background:
    linear-gradient(180deg, var(--color-panel-contrast), transparent 55%),
    var(--color-surface-light);
  box-shadow: inset 0 1px 0 var(--color-panel-contrast);
}

.welcome-panel__feature-kicker {
  letter-spacing: 0.12em;
}

.welcome-panel__feature-title {
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-text);
}

.welcome-panel__feature-copy {
  line-height: 1.55;
}

.welcome-panel__chip-row {
  align-items: flex-start;
}

.welcome-panel__chip {
  border: 1px solid var(--color-chip-border);
  background: var(--color-chip-bg);
  color: var(--color-chip-text);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  padding: var(--space-6) var(--space-8);
  text-transform: uppercase;
}

.welcome-panel__visual-card {
  overflow: hidden;
}

.welcome-panel__visual-image {
  display: block;
  width: 100%;
  height: 164px;
  object-fit: cover;
  border-bottom: 1px solid var(--color-border-faint);
  background: var(--color-stage-frame);
}

.welcome-panel__checkbox-row {
  color: var(--color-text-soft);
}

.welcome-panel__checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}

@media (max-width: 600px) {
  .welcome-panel {
    width: calc(100vw - var(--space-8) * 2);
    width: calc(100dvw - var(--space-8) * 2);
    max-height: calc(100vh - var(--space-8) * 2);
    max-height: calc(100dvh - var(--space-8) * 2);
  }

  .welcome-panel[data-onboarding-mode='tutorial'] {
    width: calc(100vw - var(--space-8) * 2);
    width: calc(100dvw - var(--space-8) * 2);
  }

  .welcome-panel__header,
  .welcome-panel__body,
  .welcome-panel__footer {
    padding-right: var(--space-16);
    padding-left: var(--space-16);
  }

  .welcome-panel__headline {
    max-width: none;
  }

  .welcome-panel__logo {
    width: 80px;
    height: 80px;
  }

  .welcome-panel__tutorial-top,
  .welcome-panel__progress-summary,
  .welcome-panel__tutorial-actions,
  .welcome-panel__tutorial-actions-main {
    flex-direction: column;
    align-items: stretch;
  }

  .welcome-panel__step-row {
    gap: var(--space-6);
  }

  .welcome-panel__step-marker {
    width: 100%;
    text-align: left;
  }

  .welcome-panel__feature-grid,
  .welcome-panel__visual-grid,
  .welcome-panel__split-grid,
  .welcome-panel__compare-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .welcome-panel__feature-card,
  .welcome-panel__visual-card {
    min-width: 0;
  }

  .welcome-panel__visual-image {
    height: 132px;
  }

  .welcome-panel__nav-button,
  .welcome-panel__tutorial-top > .overlay-menu__button,
  .welcome-panel__footer > .overlay-menu__button {
    width: 100%;
  }

  .welcome-panel__checkbox-row {
    align-items: flex-start;
  }

  .welcome-panel__footer {
    padding-bottom: calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
  }
}

/* Keep the app geometry consistently flat rather than mixing rounded and square surfaces. */
:where(
  .overlay-sheet,
  .side-drawer,
  .top-status-bar,
  .footer-bar,
  .effects-panel-shell,
  .effects-panel-hero,
  .effects-composer-section,
  .effects-stack-card,
  .effects-library-card,
  .effects-preview-pass,
  .effects-preview-chip,
  .effects-tag,
  .effects-drag-handle-button,
  .effects-icon-button,
  .effects-inline-button,
  .effects-toggle-button,
  .effects-input-select,
  .effects-perf-badge,
  .visual-result__tag,
  .visual-result__badge,
  .visual-result__new-tag,
  .top-status-pill,
  .top-status-action,
  .overlay-menu__button,
  .visual-control-color-field,
  .visual-control-color-picker,
  .visual-preview-popup,
  .visuals-create__markdown-panel,
  .welcome-panel__card,
  .footer-btn,
  .footer-icon-control,
  .footer-logo,
  .footer-art,
  .footer-progress__track,
  .footer-progress__bubble
) {
  border-radius: 0;
}

/* visuals-form uses utility classes */

.visuals-form {
  flex: 1;
}

.visuals-form .overlay-search__row,
.visuals-form .overlay-search__hint {
  flex-shrink: 0;
}

.visuals-tabs {
  flex-shrink: 0;
  margin-bottom: var(--space-12);
}

.visuals-tab-group {
  position: relative;
}

.visuals-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-6) var(--space-8);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.visuals-tab:hover {
  color: var(--color-text-soft);
}

.visuals-tab.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.visuals-tab-help {
  position: relative;
  min-width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface-light);
  color: var(--color-text-soft);
  font-size: var(--font-size-xs);
  line-height: 1;
  cursor: help;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.visuals-tab-help:hover,
.visuals-tab-help:focus-visible {
  color: var(--color-text);
  border-color: var(--color-border-strong);
  background: var(--color-surface);
}

.visuals-tab-help[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + var(--space-6));
  left: 50%;
  width: 200px;
  padding: var(--space-6) var(--space-8);
  border: 1px solid var(--color-border-muted);
  background: var(--color-surface);
  color: var(--color-text-soft);
  font-size: var(--font-size-xs);
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -2px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  box-shadow: var(--shadow-sm);
  z-index: 2;
}

.visuals-tab-help[data-tooltip]:hover::after,
.visuals-tab-help[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.visuals-tabs__divider {
  color: var(--color-border-muted);
  align-self: center;
  pointer-events: none;
}

.visuals-results {
  flex: 1;
  min-height: 0;
  max-height: none;
}

.visuals-results__spacer {
  flex-basis: 100%;
  width: 100%;
  pointer-events: none;
}

.visuals-results[data-playlist-mode='true'] .overlay-result {
  cursor: grab;
}

.visuals-results[data-playlist-mode='true'] .overlay-result:active {
  cursor: grabbing;
}

@media (min-width: 901px) {
  .visuals-form.is-playlists-tab {
    overflow: hidden;
  }

  .visuals-form.is-playlists-tab .visuals-browser-layout {
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
  }

  .visuals-form.is-playlists-tab .visuals-library-pane,
  .visuals-form.is-playlists-tab .visuals-playlists-aside {
    min-height: 0;
  }

  .visuals-form.is-playlists-tab .visuals-library-pane {
    overflow: hidden;
  }

  .visuals-form.is-playlists-tab .visuals-playlists-aside {
    flex: 0 0 min(368px, 34%);
    width: min(368px, 34%);
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .visuals-form.is-playlists-tab .visuals-results {
    overflow-y: auto;
  }
}

@media (max-width: 600px) {
  .side-drawer {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border-left: none;
    border-top: 1px solid var(--color-border-muted);
  }

  .side-drawer__header {
    padding: var(--space-6) var(--space-8);
  }

  .side-drawer__body {
    padding: var(--space-8);
    gap: var(--space-6);
  }

  .visuals-create__metadata {
    grid-template-columns: 1fr;
  }

  .visuals-results {
    min-height: 100%;
    justify-content: center;
    gap: var(--space-8);
  }

  .overlay-sheet--visuals .overlay-results {
    max-height: none;
  }

  .visuals-results .overlay-result {
    max-width: min(100%, 420px);
    flex: 0 1 min(100%, 420px);
    width: min(100%, 420px);
  }
}

@media (max-width: 900px) {
  .visuals-form.is-playlists-tab .visuals-playlists-aside {
    order: -1;
    overflow: visible;
  }

  .visuals-form.is-playlists-tab .visuals-playlists-dropzone,
  .visuals-form.is-playlists-tab .visuals-playlists-scene-list {
    overflow: visible;
  }
}

.export-panel-shell {
  width: 372px;
  background:
    linear-gradient(180deg, rgba(76, 106, 146, 0.08), transparent 22%),
    linear-gradient(180deg, var(--color-panel), var(--color-panel-strong));
  border: 1px solid var(--color-border-muted);
  border-radius: var(--overlay-radius);
  color: var(--color-text);
  pointer-events: auto;
  box-shadow:
    0 28px 72px rgba(31, 35, 40, 0.16),
    inset 0 1px 0 var(--color-panel-contrast);
  position: fixed;
  top: 88px;
  right: var(--space-20);
  z-index: 1000;
}

.export-panel-kicker {
  color: var(--color-primary-strong);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.export-panel-shell .overlay-sheet__header {
  border-bottom: 1px solid var(--color-border-muted);
  background:
    linear-gradient(90deg, rgba(76, 106, 146, 0.08), transparent 48%),
    var(--color-panel-strong);
}

.export-panel-body {
  background:
    linear-gradient(180deg, var(--color-panel-contrast), transparent 12%),
    var(--color-panel-muted);
}

.export-config-section__eyebrow {
  color: var(--color-text-muted);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.export-config-section__title {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.35;
}

.export-setup-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.export-config-section--setup .overlay-field:first-child,
.export-config-section--setup .overlay-field:last-child {
  grid-column: 1 / -1;
}

.export-panel-shell .overlay-form__actions .overlay-menu__button {
  min-height: 48px;
}

.export-header-close {
  top: 50%;
  right: var(--space-12);
  transform: translateY(-50%);
}

.export-header-toggle {
  display: none;
  margin-left: auto;
  min-height: 28px;
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-sm);
  background: var(--color-button-surface);
  color: var(--color-text);
  font-size: var(--font-size-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.export-panel-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: var(--space-8);
  margin-top: var(--space-8);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border-faint);
  width: 100%;
  min-height: 48px;
}

.export-panel-actions .overlay-menu__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0 !important;
  min-height: 48px !important;
  height: 48px !important;
  line-height: 1.2;
}

.export-panel-actions .export-primary-btn,
.export-panel-actions .export-stop-btn {
  margin-top: 0 !important;
}

@media (max-width: 600px) {
  .export-panel-shell {
    width: min(94vw, 372px);
    top: var(--space-8);
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    max-height: 70svh;
    border-radius: var(--overlay-radius);
    border: 1px solid var(--color-border-muted);
  }

  .export-panel-shell .overlay-sheet__header {
    padding: var(--space-8) var(--space-12);
  }

  .export-panel-shell .overlay-close {
    width: 23px;
    height: 23px;
    font-size: 11px;
  }

  .export-panel-shell .overlay-body {
    padding: var(--space-6);
  }

  .export-header-close {
    right: var(--space-6);
  }

  .export-header-toggle {
    min-height: 24px;
    padding: 0 var(--space-6);
    font-size: 9px;
  }

  .export-panel-config {
    gap: var(--space-6);
  }

  .export-field label,
  .export-preset-meta,
  .export-active-meta {
    font-size: 9px;
    letter-spacing: 0.05em;
  }

  .export-field input,
  .export-field select {
    padding: var(--space-5) var(--space-6);
    font-size: 10px;
  }

  .export-setup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .export-option-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .export-option-label {
    min-height: 30px;
    padding: var(--space-5) var(--space-6);
    font-size: 10px;
  }

  .export-timed-textarea {
    min-height: 80px;
  }

  .export-text-marker-row__label {
    min-width: 40px;
  }

  .export-text-marker-symbol {
    max-width: 52px;
  }

  .export-text-marker-color {
    width: 38px;
    min-width: 38px;
    height: 30px;
  }

  .export-help-copy {
    font-size: 10px;
  }

  .export-panel-shell .overlay-form__actions {
    margin-top: var(--space-6);
    gap: var(--space-6);
  }

  .export-panel-shell .overlay-form__actions .overlay-menu__button {
    min-height: 38px;
    height: 38px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  .export-panel-actions {
    min-height: 38px;
  }

  .export-panel-actions .overlay-menu__button {
    min-height: 38px !important;
    height: 38px !important;
  }

  .export-active-status {
    font-size: 10px;
    letter-spacing: 0.06em;
  }

  .export-stop-btn,
  .export-primary-btn {
    padding: var(--space-5) var(--space-10);
    font-size: 10px;
  }

  .export-panel-shell[data-mobile-recording-ui='true'] .export-header-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .export-panel-shell[data-mobile-recording-ui='true'] .export-primary-btn {
    display: none !important;
  }

  .export-panel-shell[data-mobile-recording-ui='true'][data-mobile-collapsed='true'] {
    top: var(--space-8);
    left: var(--space-8);
    right: auto;
    transform: none;
    width: min(220px, calc(100vw - (var(--space-8) * 2)));
    max-height: none;
  }

  .export-panel-shell[data-mobile-recording-ui='true'][data-mobile-collapsed='true'] .overlay-sheet__header {
    justify-content: flex-end;
  }

  .export-panel-shell[data-mobile-recording-ui='true'][data-mobile-collapsed='true'] .overlay-title,
  .export-panel-shell[data-mobile-recording-ui='true'][data-mobile-collapsed='true'] .export-header-close,
  .export-panel-shell[data-mobile-recording-ui='true'][data-mobile-collapsed='true'] .export-panel-idle,
  .export-panel-shell[data-mobile-recording-ui='true'][data-mobile-collapsed='true'] .export-active-meta,
  .export-panel-shell[data-mobile-recording-ui='true'][data-mobile-collapsed='true'] .export-active-label {
    display: none !important;
  }

  .export-panel-shell[data-mobile-recording-ui='true'][data-mobile-collapsed='true'] .overlay-body {
    gap: var(--space-6);
    overflow: hidden;
  }

  .export-panel-shell[data-mobile-recording-ui='true'][data-mobile-collapsed='true'] .export-panel-active {
    gap: var(--space-4);
  }

  .export-panel-shell[data-mobile-recording-ui='true'][data-mobile-collapsed='true'] .export-active-status {
    justify-content: center;
    font-size: 11px;
  }

  .export-panel-shell[data-mobile-recording-ui='true'] .export-stop-btn {
    display: inline-flex !important;
  }
}

/* export-panel-idle, export-panel-config, export-field use utility classes */

.export-field label {
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.export-field label:has(input[type="checkbox"]) {
  text-transform: none;
  cursor: pointer;
}

.export-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin: 0;
}

.export-field input,
.export-field select {
  padding: var(--space-8) var(--space-10);
  border: 1px solid var(--color-border-muted);
  background: var(--color-button-surface);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.export-panel-shell .overlay-input,
.export-panel-shell .overlay-select {
  border: 1px solid var(--color-border-muted);
  background: var(--color-button-surface);
  font-size: var(--font-size-md);
  border-radius: var(--radius-sm);
}

.export-timed-textarea {
  min-height: 96px;
  line-height: 1.45;
  resize: vertical;
}

.export-text-marker-row__label {
  min-width: 46px;
}

.export-text-marker-symbol {
  max-width: 64px;
  text-align: center;
  text-transform: none;
}

.export-text-marker-color {
  width: 44px;
  min-width: 44px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border-muted);
  background: var(--color-button-surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.export-help-copy {
  color: var(--color-text-soft);
  font-size: var(--font-size-xs);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.export-help-copy code {
  font-family: var(--font-family-mono);
  color: var(--color-primary-strong);
}

.export-guide-popover {
  position: fixed;
  inset: 0;
  z-index: 1010;
  background: var(--color-overlay);
  backdrop-filter: blur(10px);
}

.export-guide-popover[hidden] {
  display: none;
}

.export-guide-dialog {
  width: min(460px, calc(100vw - (var(--space-16) * 2)));
  max-height: min(86svh, 640px);
  overflow-y: auto;
  background: var(--color-panel-strong);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
}

.export-guide-title {
  color: var(--color-text);
  font-size: var(--font-size-lg);
  line-height: 1.2;
}

.export-guide-close {
  position: static;
  transform: none;
  flex: 0 0 auto;
}

.export-guide-copy,
.export-guide-item p {
  color: var(--color-text-soft);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.export-guide-item {
  border: 1px solid var(--color-border-muted);
  background: var(--color-button-surface);
  padding: var(--space-10);
}

.export-guide-item__top h4 {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: 1.2;
}

.export-guide-item__top span {
  color: var(--color-primary-strong);
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.export-preset-label-row .overlay-label {
  margin: 0;
}

.export-guide-btn {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 var(--space-8);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-sm);
  background: var(--color-button-surface);
  color: var(--color-primary-strong);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.export-guide-btn:hover,
.export-guide-btn:focus-visible {
  border-color: var(--color-border-strong);
  background: var(--color-button-surface-hover);
}

.export-panel-shell .overlay-input:focus,
.export-panel-shell .overlay-select:focus {
  border-color: var(--color-border-strong);
  background: var(--color-button-surface-hover);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.export-panel-config .overlay-field {
  gap: var(--space-3);
}

.export-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.export-option-grid .overlay-field + .overlay-field {
  margin-top: 0;
}

.export-option {
  margin: 0;
}

.export-option-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  min-height: 32px;
  padding: var(--space-6) var(--space-8);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-sm);
  background: var(--color-button-surface);
  text-transform: none;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.export-option-label input[type='checkbox'] {
  width: 14px;
  height: 14px;
  margin: 0;
}

.export-option-label:has(input[type='checkbox']:disabled) {
  opacity: 0.55;
}

.export-preset-meta {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-soft);
  letter-spacing: 0.04em;
}

.export-primary-btn {
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(76, 106, 146, 0.32);
  background: linear-gradient(135deg, rgba(76, 106, 146, 0.16), rgba(130, 147, 173, 0.18));
  color: var(--color-primary-strong);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--font-size-sm);
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--color-panel-contrast);
  transition: background var(--transition-medium), border-color var(--transition-medium), transform var(--transition-fast);
}

.export-primary-btn:hover,
.export-primary-btn:focus-visible {
  background: linear-gradient(135deg, rgba(76, 106, 146, 0.22), rgba(130, 147, 173, 0.24));
  border-color: rgba(76, 106, 146, 0.48);
  transform: translateY(-1px);
}

/* export-panel-actions uses utility classes */

.export-panel-shell[data-export-state='idle'] .export-stop-btn,
.export-panel-shell[data-export-state='countdown'] .export-stop-btn {
  display: none !important;
}

.export-panel-shell[data-export-state='active'] .export-primary-btn {
  display: none !important;
}

.export-primary-btn__countdown {
  min-width: 1ch;
  color: var(--color-text-soft);
  font-variant-numeric: tabular-nums;
}

.export-primary-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* export-panel-active, export-active-status use utility classes */

.export-active-status {
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.export-active-label {
  color: var(--color-text);
  font-weight: 700;
}

.export-active-timer {
  color: rgba(255, 189, 154, 0.95);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.export-active-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-soft);
}

.export-active-meta[hidden] {
  display: none;
}

.export-stop-btn {
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(248, 113, 113, 0.55);
  background: rgba(248, 113, 113, 0.22);
  color: var(--color-danger);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-medium), border-color var(--transition-medium), transform var(--transition-fast);
}

.export-stop-btn:hover,
.export-stop-btn:focus-visible {
  background: rgba(248, 113, 113, 0.3);
  border-color: rgba(248, 113, 113, 0.72);
  transform: translateY(-1px);
}

.overlay-sheet,
.overlay-menu,
.overlay-body,
.overlay-form {
  margin: 0;
}

@media (max-width: 600px) {
  body.media-source-prompts-open .site-topbar,
  body.media-source-prompts-open .site-footer {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* Hide footer when overlay is open */
  body.overlay-open .top-status-bar {
    display: none;
  }

  body.overlay-open .footer-bar {
    display: none;
  }

  body.overlay-open .site-footer {
    display: none;
  }

  .overlay-sheet {
    max-width: 100%;
    height: 100%;
    width: 100%;
    border: none;
    border-radius: 0;
    overflow: hidden;
    padding-top: max(0px, env(safe-area-inset-top));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }

  .overlay-sheet__header {
    flex-shrink: 0;
    overflow: hidden;
  }

  .overlay-sheet .overlay-sheet__header {
    padding: var(--space-6) var(--space-10);
  }

  .overlay-sheet .overlay-title {
    font-size: var(--font-size-xs);
    letter-spacing: 0.06em;
  }

  .overlay-sheet .overlay-link {
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  .overlay-sheet .overlay-close {
    width: 24px;
    height: 24px;
    font-size: var(--font-size-xs);
  }

  .media-source-prompts {
    align-items: stretch;
    padding: 0;
    overflow: hidden;
  }

  .media-source-prompts__sheet {
    max-width: none;
    min-height: 100%;
    background: var(--color-panel);
    gap: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .media-source-prompts__handle {
    display: none;
  }

  .media-source-prompts__topbar {
    align-items: center;
    padding:
      calc(var(--space-12) + env(safe-area-inset-top, 0))
      var(--space-16)
      var(--space-10);
    border-bottom: 1px solid var(--color-border-faint);
    background: var(--color-panel);
  }

  .media-source-prompts__close {
    display: inline-flex;
    width: 32px;
    height: 32px;
  }

  .media-source-prompts__tabs {
    display: flex;
    padding: 0 var(--space-16) var(--space-12);
    background: var(--color-panel);
  }

  .media-source-prompts__tab {
    flex: 1 1 0;
  }

  .media-source-prompts__rack {
    flex: 1 1 auto;
    max-width: none;
    overflow-y: auto;
    padding: 0 var(--space-12) calc(var(--space-12) + env(safe-area-inset-bottom, 0));
    background: var(--color-panel);
  }

  .media-source-prompt {
    min-width: 0;
    max-width: none;
    width: 100%;
    gap: var(--space-10);
    padding: var(--space-12);
    border-top: 0;
    box-shadow: none;
  }

  .media-source-prompt__heading {
    display: none;
  }

  .media-source-prompt.is-mobile-inactive {
    display: none;
  }

  .overlay-menu {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .overlay-menu__button {
    font-size: 13px;
  }

  .overlay-sheet .overlay-menu__button {
    padding: var(--space-8) var(--space-10);
    font-size: 12px;
  }

  .library-browser__results {
    grid-template-columns: 1fr;
  }

  .library-card {
    min-height: 0;
  }

  .studio-overview-card__title,
  .sources-section__title {
    font-size: var(--font-size-md);
  }

  .overlay-sheet--visuals {
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
  }

  .overlay-sheet--account {
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
  }

  .overlay-sheet--account .overlay-content {
    height: auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .overlay-sheet--account .account-layout {
    height: auto;
    gap: var(--space-12);
  }

  .overlay-sheet--account .account-summary,
  .overlay-sheet--account .account-main {
    height: auto;
  }

  .overlay-sheet--account .account-summary {
    gap: var(--space-12);
  }

  .overlay-sheet--account .account-nav-shell {
    padding: var(--space-10);
  }

  .overlay-sheet--account .account-nav {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--space-6);
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .overlay-sheet--account .account-nav__button {
    flex: 0 0 min(210px, calc(100vw - (var(--space-12) * 4)));
    padding: var(--space-10);
  }

  .overlay-sheet--account .account-nav__count {
    padding: var(--space-4) var(--space-6);
  }

  .overlay-sheet--account .account-summary-row,
  .overlay-sheet--account .account-nav__button,
  .overlay-sheet--account [data-role='account-blog-row'] {
    min-width: 0;
  }

  .overlay-sheet--soundcloud {
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
  }

  .soundcloud-results {
    justify-content: center;
  }

  .overlay-result--soundcloud {
    flex: 0 1 min(100%, 320px);
    width: min(100%, 320px);
  }

  .overlay-sheet__footer {
    border-top: 1px solid var(--color-border-muted);
    padding: var(--space-10);
  }

  .overlay-sheet__footer-label {
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .overlay-sheet__social-link {
    width: 24px;
    height: 24px;
  }

  .overlay-sheet__social-link svg {
    width: 12px;
    height: 12px;
  }

  .overlay-sheet__footer-separator {
    font-size: 9px;
  }

  .overlay-sheet__footer-link {
    font-size: 9px;
  }

  .export-panel-shell.overlay-sheet {
    width: min(92vw, 320px);
    height: auto;
    max-height: 70svh;
    border: 1px solid var(--color-border-muted);
    border-radius: var(--overlay-radius);
    padding-top: 0;
    padding-bottom: 0;
  }
}

.footer-btn.is-recording {
  border-color: rgba(255, 94, 129, 0.45);
  background: rgba(255, 94, 129, 0.12);
  color: var(--color-danger);
}

#cast-button {
  --connected-color: var(--color-primary);
  --disconnected-color: var(--color-danger);
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  flex: 0 0 auto;
  cursor: pointer;
}
/* ============================================
   Accessibility
   ============================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ============================================
   Display
   ============================================ */

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.hidden {
  display: none !important;
}

.is-hidden {
  display: none !important;
}

.invisible {
  visibility: hidden;
}

/* ============================================
   Flex Direction
   ============================================ */

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

/* ============================================
   Flex Wrap
   ============================================ */

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

/* ============================================
   Align Items
   ============================================ */

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

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

.items-stretch {
  align-items: stretch;
}

.items-baseline {
  align-items: baseline;
}

/* ============================================
   Justify Content
   ============================================ */

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

/* ============================================
   Common Flex Patterns
   ============================================ */

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ============================================
   Flex Grow/Shrink
   ============================================ */

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-none {
  flex: none;
}

.flex-grow {
  flex-grow: 1;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

/* ============================================
   Gap
   ============================================ */

.gap-0 {
  gap: var(--space-0);
}

.gap-2 {
  gap: var(--space-2);
}

.gap-4 {
  gap: var(--space-4);
}

.gap-6 {
  gap: var(--space-6);
}

.gap-8 {
  gap: var(--space-8);
}

.gap-10 {
  gap: var(--space-10);
}

.gap-12 {
  gap: var(--space-12);
}

.gap-16 {
  gap: var(--space-16);
}

.gap-20 {
  gap: var(--space-20);
}

.gap-24 {
  gap: var(--space-24);
}

/* ============================================
   Padding
   ============================================ */

.p-0 {
  padding: var(--space-0);
}

.p-2 {
  padding: var(--space-2);
}

.p-4 {
  padding: var(--space-4);
}

.p-6 {
  padding: var(--space-6);
}

.p-8 {
  padding: var(--space-8);
}

.p-10 {
  padding: var(--space-10);
}

.p-12 {
  padding: var(--space-12);
}

.p-16 {
  padding: var(--space-16);
}

.p-20 {
  padding: var(--space-20);
}

.p-24 {
  padding: var(--space-24);
}

/* Padding X-axis */
.px-0 {
  padding-left: var(--space-0);
  padding-right: var(--space-0);
}

.px-2 {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.px-4 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.px-6 {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

.px-10 {
  padding-left: var(--space-10);
  padding-right: var(--space-10);
}

.px-12 {
  padding-left: var(--space-12);
  padding-right: var(--space-12);
}

.px-16 {
  padding-left: var(--space-16);
  padding-right: var(--space-16);
}

/* Padding Y-axis */
.py-0 {
  padding-top: var(--space-0);
  padding-bottom: var(--space-0);
}

.py-2 {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.py-4 {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.py-6 {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.py-10 {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

.py-12 {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.py-16 {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

/* Padding individual sides */
.pt-4 {
  padding-top: var(--space-4);
}

.pt-6 {
  padding-top: var(--space-6);
}

.pt-8 {
  padding-top: var(--space-8);
}

.pt-12 {
  padding-top: var(--space-12);
}

.pb-4 {
  padding-bottom: var(--space-4);
}

.pb-6 {
  padding-bottom: var(--space-6);
}

.pb-8 {
  padding-bottom: var(--space-8);
}

.pb-12 {
  padding-bottom: var(--space-12);
}

.pb-16 {
  padding-bottom: var(--space-16);
}

.pl-4 {
  padding-left: var(--space-4);
}

.pl-6 {
  padding-left: var(--space-6);
}

.pl-8 {
  padding-left: var(--space-8);
}

.pr-4 {
  padding-right: var(--space-4);
}

.pr-6 {
  padding-right: var(--space-6);
}

.pr-8 {
  padding-right: var(--space-8);
}

/* ============================================
   Margin
   ============================================ */

.m-0 {
  margin: 0;
}

.m-auto {
  margin: auto;
}

.m-2 {
  margin: var(--space-2);
}

.m-4 {
  margin: var(--space-4);
}

.m-6 {
  margin: var(--space-6);
}

.m-8 {
  margin: var(--space-8);
}

/* Margin X-axis */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mx-0 {
  margin-left: var(--space-0);
  margin-right: var(--space-0);
}

.mx-4 {
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}

.mx-8 {
  margin-left: var(--space-8);
  margin-right: var(--space-8);
}

/* Margin Y-axis */
.my-0 {
  margin-top: var(--space-0);
  margin-bottom: var(--space-0);
}

.my-4 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.my-8 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

/* Margin individual sides */
.mt-0 {
  margin-top: 0;
}

.mt-2 {
  margin-top: var(--space-2);
}

.mt-4 {
  margin-top: var(--space-4);
}

.mt-6 {
  margin-top: var(--space-6);
}

.mt-8 {
  margin-top: var(--space-8);
}

.mt-12 {
  margin-top: var(--space-12);
}

.mb-0 {
  margin-bottom: 0;
}

.mb-4 {
  margin-bottom: var(--space-4);
}

.mb-6 {
  margin-bottom: var(--space-6);
}

.mb-8 {
  margin-bottom: var(--space-8);
}

.mb-12 {
  margin-bottom: var(--space-12);
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

/* Stack layouts (existing) */
.stack-md > * + * {
  margin-top: var(--space-12);
}

.stack-lg > * + * {
  margin-top: var(--space-16);
}

/* ============================================
   Positioning
   ============================================ */

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.static {
  position: static;
}

/* ============================================
   Width & Height
   ============================================ */

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.w-auto {
  width: auto;
}

.h-auto {
  height: auto;
}

/* ============================================
   Text
   ============================================ */

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-muted {
  color: var(--color-text-muted);
}

.text-soft {
  color: var(--color-text-soft);
}

.text-primary {
  color: var(--color-primary);
}

.text-xs {
  font-size: var(--font-size-xs);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.text-md {
  font-size: var(--font-size-md);
}

.text-lg {
  font-size: var(--font-size-lg);
}

.text-xl {
  font-size: var(--font-size-xl);
}

.font-mono {
  font-family: var(--font-family-mono);
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.uppercase {
  text-transform: uppercase;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================
   Border Radius
   ============================================ */

.rounded-0 {
  border-radius: 0;
}

.rounded-sm {
  border-radius: 0;
}

.rounded-md {
  border-radius: 0;
}

.rounded-lg {
  border-radius: 0;
}

.rounded-full {
  border-radius: 0;
}

.rounded-pill {
  border-radius: 0;
}

/* ============================================
   Opacity
   ============================================ */

.opacity-0 {
  opacity: 0;
}

.opacity-50 {
  opacity: var(--opacity-hover);
}

.opacity-60 {
  opacity: var(--opacity-disabled);
}

.opacity-70 {
  opacity: var(--opacity-muted);
}

.opacity-100 {
  opacity: 1;
}

/* ============================================
   Transitions
   ============================================ */

.transition-fast {
  transition: var(--transition-fast);
}

.transition-medium {
  transition: var(--transition-medium);
}

.transition-all {
  transition: all var(--transition-medium);
}

.transition-colors {
  transition: color var(--transition-medium), background-color var(--transition-medium), border-color var(--transition-medium);
}

.transition-transform {
  transition: transform var(--transition-fast);
}

.transition-opacity {
  transition: opacity var(--transition-medium);
}

/* ============================================
   Overflow
   ============================================ */

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

/* ============================================
   Pointer Events
   ============================================ */

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* ============================================
   Z-Index
   ============================================ */

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

/* ============================================
   Backgrounds
   ============================================ */

.bg-transparent {
  background: transparent;
}

.bg-surface {
  background: var(--color-surface);
}

.bg-surface-strong {
  background: var(--color-surface-strong);
}

.bg-primary {
  background: var(--color-primary);
}

/* ============================================
   Borders
   ============================================ */

.border-0 {
  border: 0;
}

.border {
  border: 1px solid var(--color-border);
}

.border-t {
  border-top: 1px solid var(--color-border);
}

.border-b {
  border-bottom: 1px solid var(--color-border);
}

.border-l {
  border-left: 1px solid var(--color-border);
}

.border-r {
  border-right: 1px solid var(--color-border);
}

/* ============================================
   Shadows
   ============================================ */

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-none {
  box-shadow: none;
}