@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 599;
  font-display: block;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600 900;
  font-display: block;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 599;
  font-display: block;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-BoldItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 600 900;
  font-display: block;
}

@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 599;
  font-display: block;
}

@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600 900;
  font-display: block;
}

@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 599;
  font-display: block;
}

@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-BoldItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 600 900;
  font-display: block;
}

@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 599;
  font-display: block;
}

@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600 900;
  font-display: block;
}

@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 599;
  font-display: block;
}

@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-BoldItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 600 900;
  font-display: block;
}

@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 599;
  font-display: block;
}

@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600 900;
  font-display: block;
}

@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 599;
  font-display: block;
}

@font-face {
  font-family: "Lato";
  src: url("fonts/Lato-BoldItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 600 900;
  font-display: block;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 599;
  font-display: block;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600 900;
  font-display: block;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 599;
  font-display: block;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600 900;
  font-display: block;
}

:root {
  --sidebar-w: 244px;
  --sidebar-collapsed: 60px;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-strong: #f0f2f5;
  --panel-soft: #fafbfc;
  --ink: #16181d;
  --text: #20232a;
  --text-soft: #566070;
  --text-dim: #8792a2;
  --line: rgba(24, 28, 38, 0.11);
  --line-strong: rgba(24, 28, 38, 0.2);
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --success: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --cyan: #0891b2;
  --violet: #7c3aed;
  --input-bg: #ffffff;
  --input-border: rgba(24, 28, 38, 0.16);
  --card-bg: #ffffff;
  --card-border: rgba(24, 28, 38, 0.1);
  --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
  --card-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.05), 0 14px 36px rgba(16, 24, 40, 0.1);
  --tl-bar-default: #2563eb;
  --tl-bar-image: #0891b2;
  --tl-bar-video: #7c3aed;
  --tl-bar-text: #16a34a;
  --tl-bar-color: #d97706;
  --tl-bar-ndi: #dc2626;
  --tl-bar-zoom: #2563eb;
  --tl-bar-web: #0d9488;
  --tl-bar-hls: #9333ea;
}

[data-theme="dark"] {
  --bg: #101114;
  --panel: #17191e;
  --panel-strong: #20232a;
  --panel-soft: #14161a;
  --ink: #f4f6f8;
  --text: #eceff3;
  --text-soft: #b6beca;
  --text-dim: #7f8998;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --input-bg: #111317;
  --input-border: rgba(255, 255, 255, 0.14);
  --card-bg: #17191e;
  --card-border: rgba(255, 255, 255, 0.09);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 12px 32px rgba(0, 0, 0, 0.26);
  --card-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.2), 0 18px 42px rgba(0, 0, 0, 0.34);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 99px;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  display: flex;
  width: var(--sidebar-w);
  flex-direction: column;
  background: #202124;
  color: #dce1e8;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: width 0.18s ease, transform 0.18s ease;
}

.sidebar-head {
  display: flex;
  min-height: 64px;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-brand-mark {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background: #ffffff;
  color: #202124;
  font-weight: 800;
}

.sidebar-brand-text {
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
}

.sidebar-nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
}

.sidebar-link,
.sidebar-footer-btn {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #aab2c0;
  padding: 10px 12px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
}

.sidebar-link i,
.sidebar-footer-btn i {
  width: 20px;
  text-align: center;
  font-size: 16px;
}

.sidebar-link:hover,
.sidebar-footer-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.sidebar-link.active {
  background: #ffffff;
  color: #202124;
}

.sidebar-footer {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.main-wrap {
  min-height: 100vh;
  margin-left: var(--sidebar-w);
  transition: margin-left 0.18s ease;
}

.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed);
}

.sidebar-collapsed .main-wrap {
  margin-left: var(--sidebar-collapsed);
}

.sidebar-collapsed .sidebar-head {
  justify-content: center;
  padding: 0;
}

.sidebar-collapsed .sidebar-brand-text,
.sidebar-collapsed .sidebar-link span,
.sidebar-collapsed .sidebar-footer-btn span {
  display: none;
}

.sidebar-collapsed .sidebar-link,
.sidebar-collapsed .sidebar-footer-btn {
  justify-content: center;
  padding: 12px 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.topbar-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.topbar-title h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.topbar-title p {
  margin: 2px 0 0;
  color: var(--text-dim);
  font-size: 12px;
}

.topbar-actions,
.view-toolbar,
.panel-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.topbar-count,
.mini-kpi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 650;
}

.control-btn,
.icon-btn {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--text-soft);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.icon-btn {
  width: 34px;
  padding: 0;
}

.control-btn:hover,
.icon-btn:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

[data-lucide] {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  stroke-width: 2;
}

.icon-btn [data-lucide],
.carousel-card-icon-btn [data-lucide],
.carousel-card-nav-btn [data-lucide] {
  width: 15px;
  height: 15px;
}

.control-btn.primary,
.btn-primary,
.btn.btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.control-btn.danger {
  border-color: color-mix(in srgb, var(--danger) 32%, var(--input-border));
  background: color-mix(in srgb, var(--danger) 8%, var(--input-bg));
  color: var(--danger);
}

.control-btn.danger:hover {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, var(--input-bg));
  color: var(--danger);
}

.control-btn.active {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--input-border));
  background: color-mix(in srgb, var(--accent) 14%, var(--input-bg));
  color: var(--accent);
}

.control-btn.primary:hover,
.btn-primary:hover,
.btn.btn-primary:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: #ffffff;
}

.view-body {
  padding: 24px;
}

.view,
.view-section {
  display: none;
}

.view.active,
.view-section.active {
  display: block;
}

.view-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.view-header h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.view-header p {
  margin: 4px 0 0;
  color: var(--text-dim);
  font-size: 13px;
}

.loading-box,
.empty-box {
  display: grid;
  min-height: 220px;
  place-items: center;
  gap: 10px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-dim);
  box-shadow: var(--card-shadow);
  text-align: center;
}

.loading-box .spinner-border {
  color: var(--accent);
}

.empty-box i {
  color: var(--text-dim);
  font-size: 34px;
}

.empty-box h3 {
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
}

.empty-box p {
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
}

#nodesGrid,
#projectsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

#projectsQuadPane:not(.d-none) {
  margin-bottom: 12px;
}

.projects-runtime-pane {
  margin-bottom: 12px;
}

.runtime-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
}

.runtime-empty,
.runtime-instance {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  padding: 10px 12px;
}

.runtime-empty {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 800;
}

.runtime-instance-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--accent);
}

.runtime-instance-copy {
  display: grid;
  min-width: 0;
  flex: 1;
}

.runtime-instance-copy strong,
.runtime-instance-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runtime-instance-copy strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.runtime-instance-copy small {
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
}

.node-card,
.project-card,
.media-card,
.folder-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 8px !important;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.node-card,
.project-card {
  padding: 14px;
  cursor: pointer;
}

.node-card:hover,
.project-card:hover,
.media-card:hover,
.folder-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--card-shadow-hover);
}

.node-card:focus,
.node-card:focus-visible,
.node-card:focus-within {
  outline: 0 !important;
  box-shadow: var(--card-shadow) !important;
}

.node-card:hover:focus,
.node-card:hover:focus-visible,
.node-card:hover:focus-within {
  box-shadow: var(--card-shadow-hover) !important;
}

.node-card .btn,
.node-card .btn:focus,
.node-card .btn:focus-visible,
.node-card .btn:active,
.node-card .btn.active,
.node-card .btn-check:focus + .btn,
.node-card .btn-check:checked + .btn {
  --bs-btn-focus-box-shadow: none;
  --bs-btn-focus-shadow-rgb: 0, 0, 0;
  outline: 0 !important;
  box-shadow: none !important;
}

.project-card[draggable="true"] {
  cursor: grab;
}

.project-card.is-dragging {
  opacity: 0.62;
  cursor: grabbing;
}

.node-card::before,
.project-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--text-dim);
}

.node-card.is-online::before,
.status-online::before {
  background: var(--success);
}

.node-card.is-degraded::before {
  background: var(--warn);
}

.node-card.is-offline::before,
.node-card.is-bootstrap::before {
  background: var(--danger);
}

.node-card.has-update::before {
  background: var(--warn);
}

.project-card.is-running::before {
  background: var(--success);
}

.project-card.is-loading::before,
.project-card.is-queued::before {
  background: var(--accent);
}

.project-card.is-stopping::before {
  background: var(--warn);
}

.project-card.is-stopped::before {
  background: var(--text-dim);
}

.project-card.is-no-target::before,
.project-card.is-offline::before {
  background: var(--warn);
}

.project-card.is-error::before {
  background: var(--danger);
}

.node-card-bootstrap-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--warn);
  font-size: 12px;
  font-weight: 700;
}

.node-card-update-banner,
.node-ota-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  color: var(--text);
  margin-bottom: 10px;
  padding: 9px 10px;
}

.node-card-update-banner > div,
.node-ota-alert > div {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
}

.node-card-update-banner .node-update-copy,
.node-ota-alert .node-update-copy {
  flex: 1 1 auto;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.node-card-update-banner .node-update-title,
.node-ota-alert .node-update-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.node-card-update-banner i,
.node-ota-alert i {
  color: var(--warn);
}

.node-card-update-banner strong,
.node-ota-alert strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.node-card-update-banner span,
.node-ota-alert span {
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.node-card-update-banner .node-update-version,
.node-ota-alert .node-update-version {
  display: block;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
}

.node-card-update-banner .btn,
.node-ota-alert .btn {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 850;
}

.local-ota-tools {
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--panel-strong);
  padding: 10px;
}

.local-ota-head,
.local-ota-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.local-ota-head strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.local-ota-head small {
  display: block;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.35;
}

.local-ota-row {
  margin: 10px 0;
}

.local-ota-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.local-ota-status {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-dim);
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 750;
}

.local-ota-status i {
  color: var(--ok);
}

.node-card-head,
.proj-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.node-card-head .name,
.proj-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-card-head .sub,
.proj-meta,
.media-meta,
.folder-meta {
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--panel-strong);
  color: var(--text-soft);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: lowercase;
}

.status-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.status-pill.is-online {
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
  background: color-mix(in srgb, var(--success) 9%, transparent);
  color: var(--success);
}

.status-pill.is-degraded,
.status-pill.is-bootstrap {
  border-color: color-mix(in srgb, var(--warn) 28%, transparent);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  color: var(--warn);
}

.status-pill.is-offline {
  border-color: color-mix(in srgb, var(--danger) 24%, transparent);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  color: var(--danger);
}

.node-card-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}

.node-card-offline-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger) 7%, transparent);
  color: var(--text-dim);
  padding: 7px 9px;
  font-size: 11px;
  line-height: 1.3;
}

.node-card-offline-note i {
  color: var(--danger);
}

.metric .lbl {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.metric .val {
  display: flex;
  align-items: center;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 700;
}

.bar-bg {
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--panel-strong);
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
}

.bar-fill.cpu,
.bar-fill.fps {
  background: var(--accent);
}

.bar-fill.gpu {
  background: var(--violet);
}

.bar-fill.mem,
.bar-fill.storage {
  background: var(--cyan);
}

.bar-fill.temp {
  background: var(--warn);
}

.node-card-actions,
.project-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.node-card-actions .remove-node-btn {
  margin-left: auto;
}

.proj-resolution-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

.proj-resolution-row span,
.editor-canvas-pill {
  align-items: center;
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--text-soft);
  display: inline-flex;
  gap: 6px;
  padding: 4px 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 800;
}

.project-layout-picker {
  border-radius: 8px;
  background: var(--panel-strong);
  padding: 12px;
}

.layout-picker-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.layout-picker-head strong {
  color: var(--text);
  font-size: 13px;
}

.layout-picker-head small {
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 800;
}

.btn,
.node-card-actions button,
.project-card-actions button {
  border-radius: 8px !important;
  font-weight: 750;
}

.quad-shell {
  display: grid;
  gap: 12px;
}

.project-node-filter,
.project-state-filter,
.project-sort-select {
  width: min(210px, 32vw);
}

.project-state-filter {
  width: min(180px, 28vw);
}

.project-sort-select {
  width: min(170px, 26vw);
}

.quad-control-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(210px, 260px) auto auto;
  align-items: end;
  gap: 10px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 12px;
  box-shadow: var(--card-shadow);
}

.quad-control-bar .form-label,
.quad-slot-form .form-label {
  margin: 0 0 4px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.quad-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
}

.quad-node-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}

.quad-node-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  padding: 10px;
  text-align: left;
  box-shadow: var(--card-shadow);
}

.quad-node-card.is-selected {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--card-border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent), var(--card-shadow);
}

.quad-node-name {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quad-node-meta {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.quad-slot-card {
  display: grid;
  grid-template-columns: minmax(120px, 32%) 1fr;
  gap: 12px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  padding: 12px;
  box-shadow: var(--card-shadow);
}

.quad-slot-card.is-drop-hover {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--card-border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent), var(--card-shadow-hover);
}

.quad-slot-preview {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 132px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent) 50%, transparent 50%),
    linear-gradient(0deg, color-mix(in srgb, var(--success) 9%, transparent) 50%, transparent 50%),
    var(--panel-strong);
  color: var(--text);
}

.quad-slot-preview span {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

.quad-slot-preview small {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.quad-slot-preview em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--card-bg);
  color: var(--text-soft);
  padding: 3px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.quad-slot-preview.is-running em {
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
}

.quad-slot-preview.is-stopped em {
  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  color: var(--warn);
}

.quad-slot-form {
  display: grid;
  align-content: start;
  gap: 8px;
}

.quad-slot-project-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quad-slot-project-meta {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 750;
}

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

.quad-ndi-row .form-check {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
}

.quad-slot-stream {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--text-dim);
  padding: 6px 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
}

.quad-slot-stream span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quad-slot-stream.is-live {
  border-color: color-mix(in srgb, var(--success) 32%, transparent);
  background: color-mix(in srgb, var(--success) 9%, transparent);
  color: var(--success);
}

.quad-slot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quad-slot-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.proj-mode,
.proj-runtime-pill,
.scene-chip,
.proj-node-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--panel-strong);
  color: var(--text-soft);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
}

.proj-runtime-pill {
  flex: 0 0 auto;
}

.proj-runtime-pill.is-running {
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
}

.proj-runtime-pill.is-loading,
.proj-runtime-pill.is-queued {
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}

.proj-runtime-pill.is-stopping {
  border-color: color-mix(in srgb, var(--warn) 32%, transparent);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  color: var(--warn);
}

.proj-runtime-pill.is-stopped {
  border-color: var(--line);
  color: var(--text-dim);
}

.proj-runtime-pill.is-no-target,
.proj-runtime-pill.is-offline {
  border-color: color-mix(in srgb, var(--warn) 28%, transparent);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  color: var(--warn);
}

.proj-runtime-pill.is-error {
  border-color: color-mix(in srgb, var(--danger) 34%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}

.proj-state-detail {
  margin-top: 6px;
  color: var(--text-soft);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proj-live-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--success) 28%, transparent);
  border-radius: 99px;
  background: color-mix(in srgb, var(--success) 8%, transparent);
  color: var(--success);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
}

.proj-route-row,
.project-user-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.proj-route-chip,
.project-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--text-soft);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
}

.proj-route-chip.is-running {
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
}

.proj-route-chip.is-stopped {
  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  color: var(--warn);
}

.project-user-chip.is-all {
  color: var(--text-dim);
}

.project-assignment-panel {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.assignment-current label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

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

.assignment-user-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  padding: 10px;
  color: var(--text);
}

.assignment-user-row strong,
.assignment-user-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assignment-user-row strong {
  font-size: 13px;
  font-weight: 850;
}

.assignment-user-row small {
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

.project-target-panel,
.project-duplicate-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.project-target-summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  padding: 12px;
}

.project-target-icon {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--accent);
}

.project-target-icon svg,
.project-target-icon [data-lucide] {
  width: 18px;
  height: 18px;
}

.project-target-summary strong,
.project-target-summary small,
.target-sync-row strong,
.target-sync-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-target-summary strong,
.target-sync-row strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.project-target-summary small,
.target-sync-row small {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.35;
}

.target-sync-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  padding: 10px;
}

.proj-scenes,
.proj-nodes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

.media-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
}

.media-folders {
  display: grid;
  align-content: start;
  gap: 6px;
  max-height: calc(100vh - 180px);
  overflow: auto;
  padding-right: 2px;
}

.folder-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  padding: 10px;
  text-align: left;
  min-width: 0;
  width: 100%;
}

.folder-item:hover,
.folder-item.active {
  border-color: var(--line);
  background: var(--panel);
  color: var(--text);
}

.folder-item .f-count {
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

.folder-item .f-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-item.node-root {
  margin-top: 8px;
  font-weight: 800;
  color: var(--text);
}

.folder-item.node-child {
  color: var(--text-soft);
}

.folder-item.node-child .f-name {
  font-size: 12px;
}

.folder-status {
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--text-dim);
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
}

.folder-status.offline {
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
  color: var(--danger);
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 180px));
  gap: 12px;
  align-items: start;
}

.media-card,
.folder-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 12px;
  text-align: left;
}

.media-card {
  cursor: pointer;
}

.media-card.selected {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent), var(--card-shadow-hover);
}

.media-select-btn {
  display: grid;
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  color: var(--text-soft);
  box-shadow: var(--card-shadow);
}

.media-select-btn.selected {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.media-thumb,
.folder-thumb {
  display: grid;
  position: relative;
  height: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  place-items: center;
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--text-dim);
}

.media-thumb i,
.folder-thumb i {
  font-size: 28px;
}

.media-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.media-thumb video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.media-type-glyph {
  display: grid;
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: rgba(10, 15, 25, 0.72);
  color: #fff;
}

.media-type-glyph i {
  font-size: 16px;
}

.media-name,
.folder-name {
  margin-top: 10px;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-name {
  display: -webkit-box;
  min-height: 34px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.media-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

.media-meta-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-source {
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-empty {
  grid-column: 1 / -1;
}

.media-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
}

.media-selection-count,
.media-selection-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.media-selection-count {
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 800;
}

.media-sync-badge {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--panel-strong);
  color: var(--text-dim);
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 800;
}

.media-sync-badge.synced {
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
  color: var(--success);
}

.media-sync-badge.failed {
  border-color: color-mix(in srgb, var(--danger) 24%, transparent);
  color: var(--danger);
}

.media-sync-badge.partial {
  border-color: color-mix(in srgb, var(--warn) 28%, transparent);
  color: var(--warn);
}

.project-media-hub {
  display: grid;
  gap: 10px;
}

.project-media-toolbar,
.project-media-folder-row,
.project-media-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.project-media-toolbar select,
.project-media-folder-row input {
  min-width: 0;
  border-color: var(--input-border);
  background-color: var(--input-bg);
  color: var(--text);
  font-size: 12px;
}

.project-media-toolbar .btn,
.project-media-folder-row .btn {
  flex: 0 0 auto;
  border-color: var(--input-border);
  background: var(--input-bg);
  color: var(--text-soft);
}

.project-media-mode {
  display: inline-flex;
  flex: 0 0 auto;
  max-width: 210px;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--input-border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 850;
}

.project-media-mode span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
}

.project-media-card {
  position: relative;
  padding: 10px;
}

.project-media-use {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 800;
}

.project-media-use.secondary {
  border-color: var(--line);
  background: var(--panel);
  color: var(--text-soft);
}

.project-media-use.secondary:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  color: var(--accent);
}

.project-media-filter {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text-soft);
}

.project-media-filter.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.project-media-modal-dialog {
  max-width: min(1120px, calc(100vw - 32px));
}

.project-media-modal-shell,
.editor-stream-modal-shell,
.editor-zoom-modal-shell {
  z-index: 2500;
}

.modal-backdrop {
  z-index: 2490;
}

.project-media-modal {
  max-height: calc(100vh - 48px);
  overflow: hidden;
}

.project-media-modal .modal-header {
  align-items: flex-start;
}

.project-media-modal .modal-body {
  max-height: calc(100vh - 150px);
  overflow: auto;
  padding: 14px;
}

.modal-subtitle {
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 12px;
}

.project-media-modal .project-media-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.media-preview-panel {
  display: grid;
  gap: 14px;
}

.media-preview-frame {
  display: grid;
  min-height: 220px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}

.media-preview-frame.compact {
  min-height: 150px;
}

.media-preview-frame.compact img,
.media-preview-frame.compact video {
  width: 100%;
  max-height: 210px;
  object-fit: contain;
}

.media-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.media-preview-tile {
  min-width: 0;
}

.media-preview-title {
  margin-top: 8px;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-preview-tile-path {
  margin-top: 3px;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-preview-meta,
.media-sync-list {
  display: grid;
  gap: 8px;
}

.media-preview-meta div,
.media-sync-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 7px;
  font-size: 12px;
}

.media-preview-meta span,
.media-sync-row span {
  color: var(--text-dim);
}

.media-preview-meta strong,
.media-sync-row strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-preview-path {
  align-items: flex-start !important;
}

.media-preview-path strong {
  overflow-wrap: anywhere;
  white-space: normal;
}

.media-sync-row strong.synced {
  color: var(--success);
}

.streams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.streams-node-filter {
  width: 180px;
  border-color: var(--line);
  background-color: var(--panel);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.stream-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  padding: 12px;
  cursor: pointer;
}

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

.stream-preview {
  display: grid;
  min-height: 132px;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--text-dim);
}

.stream-preview.large {
  min-height: 260px;
}

.stream-preview img,
.stream-preview video,
.stream-preview-frame {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: cover;
}

.stream-preview.large img,
.stream-preview.large video,
.stream-preview.large .stream-preview-frame {
  max-height: 55vh;
  object-fit: contain;
}

.stream-preview-placeholder {
  display: grid;
  gap: 8px;
  place-items: center;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.stream-preview-placeholder i {
  font-size: 34px;
}

.stream-preview-unavailable {
  display: grid;
  max-width: 520px;
  gap: 8px;
  place-items: center;
  padding: 22px;
  color: var(--text-dim);
  text-align: center;
}

.stream-preview-unavailable i {
  color: var(--warn);
  font-size: 34px;
}

.stream-preview-unavailable strong {
  color: var(--text);
  font-size: 13px;
}

.stream-preview-unavailable p {
  margin: 0;
  max-width: 46ch;
  font-size: 12px;
  line-height: 1.45;
}

.stream-name {
  margin-top: 10px;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  color: var(--text-dim);
  font-size: 11px;
}

.stream-meta-row span:first-child,
.stream-address {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream-address {
  margin-top: 4px;
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

.stream-status {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.stream-status.online {
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
  color: var(--success);
}

.stream-status.waiting {
  border-color: color-mix(in srgb, var(--warn) 28%, transparent);
  color: var(--warn);
}

.stream-status.offline {
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
  color: var(--danger);
}

.stream-preview-panel {
  display: grid;
  gap: 14px;
}

.stream-preview-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.stream-preview-actions span {
  min-width: 0;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
}

.zoom-layout {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 14px;
}

.zoom-control-panel,
.zoom-participant-panel {
  min-width: 0;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  padding: 14px;
}

.zoom-node-filter {
  width: 180px;
  border-color: var(--line);
  background-color: var(--panel);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.zoom-session-pane {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.zoom-account-pane {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.zoom-account-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  min-width: 0;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 9px;
}

.zoom-account-row.compact {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  padding: 8px 9px;
}

.zoom-account-row.compact i {
  width: 28px;
  height: 28px;
}

.zoom-account-row i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.zoom-account-row > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.zoom-account-row span {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.zoom-account-row strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zoom-account-actions .control-btn {
  min-height: 32px;
}

.zoom-account-actions .control-btn {
  flex: 1 1 auto;
}

.zoom-oauth-config-form {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
}

.zoom-oauth-config-form label {
  display: grid;
  gap: 4px;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.zoom-oauth-callback {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.zoom-oauth-callback span {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.zoom-oauth-callback code {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zoom-session-row,
.zoom-session-empty {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
}

.zoom-session-row {
  width: 100%;
  cursor: pointer;
  text-align: left;
}

.zoom-session-row:hover,
.zoom-session-row.selected {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.zoom-session-row.selected {
  box-shadow: inset 3px 0 0 var(--accent);
}

.zoom-session-row > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.zoom-session-row strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zoom-session-row span,
.zoom-session-empty {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 750;
}

.zoom-join-form {
  display: grid;
  gap: 10px;
}

.zoom-join-form label {
  display: grid;
  gap: 4px;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.zoom-quick-pane {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.zoom-quick-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  min-width: 0;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 9px;
}

.zoom-quick-row i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.zoom-quick-row > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.zoom-quick-row span,
.zoom-quick-meta span {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.zoom-quick-row strong,
.zoom-quick-meta strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.zoom-quick-meta > div {
  display: grid;
  min-width: 0;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 8px;
}

.zoom-quick-actions .control-btn {
  min-height: 32px;
  text-decoration: none;
}

.zoom-action-row,
.zoom-participant-toolbar {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 8px;
}

.zoom-search {
  position: relative;
  min-width: min(280px, 100%);
  flex: 1 1 260px;
}

.zoom-search i {
  position: absolute;
  top: 50%;
  left: 10px;
  color: var(--text-dim);
  transform: translateY(-50%);
  pointer-events: none;
}

.zoom-search input {
  padding-left: 32px;
}

.zoom-participants-grid,
.zoom-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.zoom-participant-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
  color: var(--text);
  cursor: grab;
}

.zoom-participant-card:active {
  cursor: grabbing;
}

.zoom-participant-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}

.zoom-participant-main {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.zoom-participant-main strong,
.zoom-participant-main span,
.zoom-participant-flags code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zoom-participant-main strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.zoom-participant-main span {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 750;
}

.zoom-participant-flags {
  grid-column: 1 / -1;
  display: grid;
  min-width: 0;
  gap: 6px;
}

.zoom-participant-flags code {
  color: var(--text-dim);
  font-size: 10px;
}

/* Per-participant management buttons (Admit / Mute / Unmute / Promote / Remove).
   The row sits below the flags row inside the card grid, full width. */
.zoom-participant-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--card-border) 80%, transparent);
}
.zoom-participant-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--panel-strong, color-mix(in srgb, var(--panel) 70%, var(--text)));
  color: var(--text);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.zoom-participant-action:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}
.zoom-participant-action[data-zoom-act="admit"] {
  background: color-mix(in srgb, #16a34a 16%, var(--panel));
  border-color: color-mix(in srgb, #16a34a 40%, var(--card-border));
  color: #15803d;
}
.zoom-participant-action[data-zoom-act="admit"]:hover {
  background: #16a34a;
  color: #fff;
  border-color: #15803d;
}
.zoom-participant-action[data-zoom-destructive="1"]:hover {
  background: color-mix(in srgb, #dc2626 88%, #000);
  color: #fff;
  border-color: #b91c1c;
}
.zoom-participant-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.zoom-participant-action i { font-size: 13px; }

/* Waiting-room visual: dashed border + soft amber background so the
   reviewer can tell at a glance there's someone to admit. */
.zoom-participant-card.is-waiting {
  border-style: dashed;
  border-color: color-mix(in srgb, #f59e0b 55%, var(--card-border));
  background: color-mix(in srgb, #f59e0b 7%, var(--panel));
}
.zoom-participant-card.is-waiting .zoom-participant-avatar {
  background: color-mix(in srgb, #f59e0b 24%, transparent);
  color: #b45309;
}
.zoom-participant-card.is-muted .zoom-participant-avatar {
  opacity: 0.7;
}

.zoom-preview-placeholder {
  display: grid;
  gap: 8px;
  place-items: center;
  padding: 18px;
  text-align: center;
}

.zoom-preview-placeholder i {
  color: var(--accent);
  font-size: 40px;
}

.zoom-preview-placeholder strong,
.zoom-preview-placeholder span {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.editor-zoom-search {
  flex: 0 0 auto;
}

.zoom-editor-card {
  min-width: 0;
}

.zoom-editor-card .zoom-participant-card {
  margin-bottom: 8px;
}

.zoom-surface-action-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 6px;
  width: 100%;
}

.zoom-surface-action-row .project-media-use,
.zoom-surface-action-row .control-btn {
  width: 100%;
  min-width: 0;
  margin-top: 0;
}

.zoom-surface-action-row .project-media-use span,
.zoom-surface-action-row .control-btn span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zoom-choice .zoom-participant-card {
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.inspector-source-note {
  margin-top: 6px;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-surface.drop-zoom {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── In-editor Zoom panel: meeting controls + routing matrix ─── */

.zoom-editor-meeting {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  margin: 8px 0;
  background: var(--panel-2, rgba(255,255,255,0.03));
  border: 1px solid var(--panel-border, rgba(255,255,255,0.08));
  border-radius: 8px;
}

.zoom-editor-meeting-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
}

.zoom-editor-meeting-status small {
  margin-left: auto;
  color: var(--text-dim);
  font-weight: 500;
  font-size: 11px;
}

.zoom-editor-meeting-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim, #6c757d);
}

.zoom-editor-meeting-dot.live {
  background: var(--success, #22c55e);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

.zoom-editor-meeting-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.zoom-editor-meeting-actions .control-btn {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
}

.zoom-editor-meeting-actions .control-btn.danger {
  color: var(--danger, #ef4444);
  border-color: rgba(239, 68, 68, 0.35);
}

.zoom-editor-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 4px 0 8px;
  background: var(--panel-2, rgba(255,255,255,0.03));
  border-radius: 8px;
}

.zoom-editor-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease;
}

.zoom-editor-tab:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.zoom-editor-tab.active {
  background: var(--accent, #6366f1);
  color: white;
}

.zoom-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
}

.zoom-editor-tab.active .zoom-tab-badge {
  background: rgba(255, 255, 255, 0.25);
}

.zoom-routing {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zoom-routing-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  background: var(--panel-2, rgba(255,255,255,0.03));
  border-radius: 8px;
}

.zoom-routing-summary {
  flex: 1;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
}

.zoom-routing-toolbar .control-btn {
  font-size: 11px;
  padding: 4px 8px;
}

.zoom-routing-toolbar .control-btn.disabled,
.zoom-routing-toolbar .control-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.zoom-routing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.zoom-routing-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--panel-border, rgba(255,255,255,0.08));
}

.zoom-routing-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}

.zoom-routing-row.unmapped {
  opacity: 0.65;
}

.zoom-routing-row.hidden .zoom-routing-name {
  text-decoration: line-through;
  opacity: 0.7;
}

.zoom-routing-name {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zoom-routing-name span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zoom-routing-type {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}

.zoom-routing-vis {
  width: 36px;
  text-align: right;
}

.zoom-routing-vis .vis-toggle {
  background: transparent;
  border: 0;
  color: var(--accent, #6366f1);
  cursor: pointer;
  padding: 4px;
}

.zoom-routing-vis .vis-toggle.off {
  color: var(--text-dim);
}

.zoom-routing-select {
  width: 100%;
  min-width: 120px;
}

.scene-add-overlay {
  border-color: rgba(245, 158, 11, 0.45);
  color: #f59e0b;
}

.scene-add-overlay:hover {
  background: rgba(245, 158, 11, 0.08);
}

.scene-additive-badge.always-on {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
}

.show-scene-card.always-on {
  cursor: not-allowed;
  opacity: 0.85;
}

.show-overlay-pill.always-on {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
}

.media-empty.empty-box.compact {
  padding: 16px 12px;
  min-height: 0;
}

.zoom-routing-empty {
  gap: 8px;
}

.zoom-routing-empty-add {
  margin-top: 2px;
}

/* ─── Zoom workspace tab (3rd workspace alongside Editor/Control) ─── */

.editor-workspace-tab-zoom {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 12px;
}

.editor-workspace-tab-zoom.active {
  color: #fff;
  background: linear-gradient(135deg, #2d8cff 0%, #5e60ce 100%);
}

.editor-zoom-workspace-shell {
  display: none;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.editor-shell.workspace-zoom .editor-main,
.editor-shell.workspace-zoom > .timeline-wrap {
  display: none;
}

.editor-shell.workspace-zoom .editor-zoom-workspace-shell {
  display: flex;
  flex-direction: column;
}

.zoom-workspace-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 200px;
  color: var(--text-dim);
}

.zoom-workspace {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 16px 20px 20px;
  gap: 14px;
  overflow: hidden;
}

.zoom-workspace-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(45, 140, 255, 0.08) 0%, rgba(94, 96, 206, 0.06) 100%);
  border: 1px solid rgba(45, 140, 255, 0.18);
  border-radius: 10px;
}

.zoom-workspace-status {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 200px;
}

.zoom-workspace-status strong {
  font-size: 14px;
}

.zoom-workspace-status small {
  margin-left: 8px;
  color: var(--text-dim);
  font-size: 11px;
}

.zoom-workspace-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.zoom-workspace-header-actions .control-btn {
  font-size: 12px;
}

.zoom-workspace-header-actions .control-btn.danger {
  color: var(--danger, #ef4444);
  border-color: rgba(239, 68, 68, 0.35);
}

.zoom-workspace-body {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(320px, 1fr);
  gap: 14px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 1100px) {
  .zoom-workspace-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
}

.zoom-workspace-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel-2, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  overflow: hidden;
}

.zoom-workspace-pane-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.18);
  border-bottom: 1px solid var(--panel-border, rgba(255, 255, 255, 0.08));
}

.zoom-workspace-pane-head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.zoom-workspace-pane-head .zoom-search {
  flex: 1;
  min-width: 180px;
  margin-left: auto;
}

.zoom-workspace-routing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.zoom-workspace-routing-actions .control-btn {
  font-size: 11px;
  padding: 4px 8px;
}

.zoom-workspace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 14px;
  overflow-y: auto;
  flex: 1;
}

.zoom-workspace-participant {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zoom-workspace-add-btn,
.zoom-workspace-map-btn {
  width: 100%;
  font-size: 12px;
}

.zoom-workspace-routing-table {
  flex: 1;
  margin: 0;
  overflow-y: auto;
  display: block;
}

.zoom-workspace-routing-table thead,
.zoom-workspace-routing-table tbody,
.zoom-workspace-routing-table tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.zoom-workspace-routing-table th,
.zoom-workspace-routing-table td {
  padding: 8px 12px;
}

/* ─── Left panel: Scenes / Overlays tabs + Overlay tab markup ─── */

.panel-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.panel-tab-overlay {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  padding-left: 12px;
}

.panel-tab-overlay.active {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.overlay-actions {
  border-bottom: 1px dashed rgba(245, 158, 11, 0.3);
  padding-bottom: 10px;
  margin-bottom: 8px;
}

.overlay-actions .scene-add-overlay {
  flex: 1;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
  border-color: rgba(245, 158, 11, 0.4);
  color: #f59e0b;
}

.overlay-actions .scene-add-overlay:hover {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.1) 100%);
}

.overlay-help-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  margin: 0 0 10px;
  background: rgba(245, 158, 11, 0.07);
  border-left: 3px solid rgba(245, 158, 11, 0.5);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

.overlay-help-banner i {
  color: #f59e0b;
  margin-top: 2px;
}

.overlay-empty-box {
  padding: 24px 16px;
  text-align: center;
}

.overlay-empty-box i {
  font-size: 28px;
  color: #f59e0b;
  display: block;
  margin-bottom: 8px;
}

.overlay-empty-box small {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

.scene-group.overlay-group {
  border-left: 2px solid rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.03);
}

.scene-group.overlay-group.always-on {
  border-left-color: #f59e0b;
}

.scene-group.overlay-group .scene-icon {
  color: #f59e0b;
}

.overlay-surface-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  margin-left: 6px;
  background: rgba(45, 140, 255, 0.1);
  color: #2d8cff;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
}

.overlay-surface-chip.zoom {
  background: linear-gradient(135deg, rgba(45, 140, 255, 0.12), rgba(94, 96, 206, 0.08));
  color: #5e60ce;
}

/* ─── Show-control: surface mapping chips + overlay-vs-scene split ─── */

.show-surface-mapping {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 3px 7px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  max-width: 100%;
  overflow: hidden;
}

.show-surface-mapping > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.show-surface-mapping.mapping-zoom {
  background: linear-gradient(135deg, rgba(45, 140, 255, 0.12), rgba(94, 96, 206, 0.08));
  border-color: rgba(45, 140, 255, 0.25);
  color: #5e60ce;
}

.show-surface-mapping.mapping-ndi {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.show-surface-mapping.mapping-media {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.show-surface-mapping.mapping-text {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.2);
  color: #a855f7;
}

.show-surface-mapping.mapping-web {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.2);
  color: #0ea5e9;
}

.show-surface-card.from-overlay {
  border-left: 3px solid rgba(245, 158, 11, 0.5);
}

.show-surface-grid-overlay {
  background: rgba(245, 158, 11, 0.04);
  border-radius: 8px;
  padding: 8px;
}

/* ─── Show-control: scenes as large 3x5 buttons, overlays as bundles ─── */

/* Big "playing card" scene buttons — 3:5 portrait ratio so the
   operator can tap them cleanly even on a touch display. One button
   per scene; the scene loads as a unit, no per-surface controls
   underneath (those live inside overlay bundles). */
.show-scene-grid-large {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.show-scene-grid-large .show-scene-card {
  display: flex;
  flex-direction: column;
  aspect-ratio: 3 / 5;
  min-height: 320px;
  padding: 0;
  gap: 0;
  overflow: hidden;
  font-size: 14px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.show-scene-grid-large .show-scene-card:hover:not([disabled]) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.show-scene-grid-large .show-scene-card .show-scene-preview {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.show-scene-grid-large .show-scene-card-copy {
  padding: 10px 12px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.show-scene-grid-large .show-scene-card-copy strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.show-scene-grid-large .show-scene-card-copy small {
  color: var(--text-dim);
  font-size: 11px;
}

.show-scene-grid-large .show-scene-card-state {
  padding: 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.show-scene-grid-large .show-scene-card-action,
.show-scene-grid-large .show-scene-action {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.show-scene-grid-large .show-scene-card.live .show-scene-action {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.06));
  color: #22c55e;
}

/* Overlay bundle — auto-sized card with master toggle + per-surface
   toggle stack. Header is fixed; body grows with the surface list.
   Bundles flow on their own auto-row track so a tall bundle pushes
   the next row down without leaving holes in the grid. */
.overlay-bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: min-content;
  gap: 12px;
  align-items: start;
}

.overlay-bundle {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.02) 100%);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 10px;
  overflow: hidden;
}

.overlay-bundle.live {
  border-color: rgba(34, 197, 94, 0.45);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2);
}

.overlay-bundle.always-on {
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25);
}

.overlay-bundle.off {
  opacity: 0.72;
}

.overlay-bundle-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.overlay-bundle-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.overlay-bundle-title > svg,
.overlay-bundle-title > i {
  color: #f59e0b;
  font-size: 16px;
  flex: 0 0 auto;
}

.overlay-bundle-title-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.overlay-bundle-title-text strong {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overlay-bundle-title-text small {
  font-size: 10px;
  color: var(--text-dim);
}

.overlay-bundle-master {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(34, 197, 94, 0.16);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.32);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease;
  flex: 0 0 auto;
}

.overlay-bundle-master:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.24);
}

.overlay-bundle-master.off {
  background: rgba(100, 116, 139, 0.18);
  color: var(--text-dim);
  border-color: rgba(100, 116, 139, 0.32);
}

.overlay-bundle-master.locked {
  background: rgba(245, 158, 11, 0.22);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.4);
  cursor: not-allowed;
}

.overlay-bundle-surfaces {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
}

.overlay-surface-btn {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.overlay-surface-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.overlay-surface-btn.on {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.25);
}

.overlay-surface-btn.off {
  opacity: 0.65;
}

.overlay-surface-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--text-dim);
}

.overlay-surface-btn.on .overlay-surface-eye {
  color: #22c55e;
}

.overlay-surface-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}

.overlay-surface-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overlay-surface-btn .overlay-surface-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 6px;
  border-radius: 3px;
  width: fit-content;
  max-width: 100%;
}

.overlay-surface-btn .overlay-surface-chip > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overlay-surface-btn.mapping-zoom .overlay-surface-chip {
  background: linear-gradient(135deg, rgba(45, 140, 255, 0.12), rgba(94, 96, 206, 0.08));
  color: #5e60ce;
}

.overlay-surface-btn.mapping-ndi .overlay-surface-chip {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.overlay-surface-btn.mapping-media .overlay-surface-chip {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.overlay-surface-btn.mapping-text .overlay-surface-chip {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
}

.overlay-surface-btn.mapping-web .overlay-surface-chip {
  background: rgba(14, 165, 233, 0.1);
  color: #0ea5e9;
}

.overlay-bundle-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  font-size: 11px;
  color: var(--text-dim);
  text-align: left;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 6px;
}

/* Hint visual emphasis for wider / taller bundles so they read
   differently in the grid — operators glance and see "this is a
   bigger overlay" without counting surfaces. */
.overlay-bundle[data-size-bucket="wide"] {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .overlay-bundle[data-size-bucket="wide"] {
    grid-column: span 1;
  }
}

/* ─── Control-layout palette: Scenes / Overlays tabs ─── */

.show-palette-tabs {
  display: flex;
  gap: 4px;
  margin: 12px 0 8px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--panel-border, rgba(255, 255, 255, 0.06));
  border-radius: 8px;
}

.show-palette-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.show-palette-tab:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.show-palette-tab.active {
  background: var(--accent, #6366f1);
  color: white;
}

.show-palette-tab[data-palette-tab="overlays"].active {
  background: linear-gradient(135deg, #f59e0b 0%, #ef9a08 100%);
  color: white;
}

.show-palette-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
}

.show-palette-tab.active .show-palette-tab-count {
  background: rgba(255, 255, 255, 0.25);
}

.show-palette-tab-pane {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.show-palette-tab-empty {
  padding: 18px 14px;
  text-align: left;
}

.show-palette-tab-empty i {
  display: block;
  margin-bottom: 6px;
  font-size: 22px;
  color: var(--text-dim);
}

.show-palette-tab-empty p {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
}

.show-palette-tab-empty small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* The old hierarchy nested surface-children under each scene; we now
   flatten the palette into one tab pane, so the children container is
   redundant. Hide it defensively in case any legacy rendering path
   slips through. */
.show-palette-children,
.show-palette-empty {
  display: none;
}

/* Overlay palette cards get an amber accent so they read distinct
   from base scene cards even when they share the same tab pane. */
.show-palette-card.is-scene[data-additive="true"] {
  border-color: rgba(245, 158, 11, 0.35);
}

/* ─── Canvas: 'editing overlay' state ─── */

.editor-canvas-wrap.editing-overlay {
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(245, 158, 11, 0.35);
  border-radius: 6px;
}

.editing-overlay-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.92), rgba(239, 154, 8, 0.92));
  color: #1a1a1a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 99px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.editing-overlay-banner i {
  font-size: 14px;
}

/* ─── Scene settings: overlay "transparent container" note ─── */

.scene-settings-overlay-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin: 8px 0;
  background: rgba(245, 158, 11, 0.08);
  border: 1px dashed rgba(245, 158, 11, 0.32);
  border-radius: 6px;
}

.scene-settings-overlay-note i {
  color: #f59e0b;
  font-size: 18px;
  margin-top: 2px;
}

.scene-settings-overlay-note strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 2px;
}

.scene-settings-overlay-note span {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* Ghosted overlay surfaces: rendered when the active scene is an
   overlay whose eye toggle is OFF. We still composite them so the
   operator can author, but mark them visibly hidden so the toggle
   feedback is obvious. */
.canvas-surface.overlay-surface.ghost-hidden {
  outline: 2px dashed rgba(245, 158, 11, 0.6);
  outline-offset: -2px;
  filter: saturate(0.4) opacity(0.35) !important;
}

.canvas-surface.overlay-surface.ghost-hidden::after {
  content: 'HIDDEN';
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 2px 6px;
  background: rgba(245, 158, 11, 0.85);
  color: #1a1a1a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
}

.editor-stream-picker {
  display: grid;
  gap: 18px;
}

.editor-stream-picker-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.editor-stream-picker-toolbar span {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-stream-picker section {
  display: grid;
  gap: 10px;
}

.editor-stream-picker h6 {
  margin: 0;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.editor-stream-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.editor-stream-choice {
  display: grid;
  min-width: 0;
  gap: 8px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  padding: 10px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.editor-stream-choice:hover {
  border-color: var(--line-strong);
  box-shadow: var(--card-shadow-hover);
}

.editor-stream-choice strong,
.editor-stream-choice span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-stream-choice strong {
  font-size: 12px;
  font-weight: 850;
}

.editor-stream-choice span {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 750;
}

.editor-stream-loading {
  min-height: 72px;
}

.media-sync-row strong.failed {
  color: var(--danger);
}

.asset-filter {
  display: inline-flex;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 3px;
}

.asset-filter button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-soft);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 750;
}

.asset-filter button.active {
  background: var(--accent);
  color: #ffffff;
}

.form-control,
.form-select {
  border-color: var(--input-border) !important;
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

.offcanvas,
.modal-content {
  background: var(--panel);
  color: var(--text);
}

.offcanvas {
  --bs-offcanvas-width: min(640px, 94vw);
}

.offcanvas-header,
.modal-header,
.modal-footer {
  border-color: var(--line);
}

.offcanvas-title {
  color: var(--text);
  font-weight: 850;
}

#panelSubtitle {
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

.nav-underline .nav-link {
  color: var(--text-soft);
}

.nav-underline .nav-link.active {
  color: var(--accent);
}

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

.node-card-meta .lbl {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.node-card-meta .val {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.mgmt-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 0;
}

.mgmt-row:last-child {
  border-bottom: 0;
}

.mgmt-row strong {
  color: var(--text);
  display: block;
  font-size: .9rem;
}

.mgmt-row small {
  color: var(--text-dim);
  display: block;
  margin-top: 2px;
}

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

.mgmt-form label {
  color: var(--text-soft);
  display: grid;
  font-size: .78rem;
  font-weight: 700;
  gap: 5px;
}

.display-settings {
  display: grid;
  gap: 14px;
}

.display-settings-section {
  background: var(--panel-strong);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.display-mosaic-preview {
  display: grid;
  grid-template-columns: repeat(var(--display-mosaic-cols, 4), minmax(74px, 1fr));
  gap: 8px;
  min-height: 92px;
  align-items: stretch;
}

.display-mosaic-preview.is-empty {
  min-height: 74px;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--text-dim);
}

.display-mosaic-tile {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 3px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  padding: 10px;
}

.display-mosaic-tile strong {
  color: var(--accent);
  font-size: 22px;
  line-height: 1;
}

.display-mosaic-tile span,
.display-mosaic-tile small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.display-mosaic-tile span {
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.display-mosaic-tile small {
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
}

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

.display-settings-head strong {
  color: var(--text);
  display: block;
  font-size: .88rem;
}

.display-settings-head small,
.display-output-row small,
.display-check small {
  color: var(--text-dim);
  display: block;
  font-size: .72rem;
  margin-top: 2px;
}

.display-output-row {
  padding: 8px 0;
}

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

.display-inline-form {
  align-items: end;
  grid-template-columns: minmax(0, 1fr) auto;
}

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

.display-check {
  align-items: center;
  background: var(--panel);
  border-radius: 8px;
  display: flex;
  gap: 9px;
  margin: 0;
  min-width: 0;
  padding: 8px 10px;
}

.display-check span {
  min-width: 0;
}

.display-check strong {
  color: var(--text);
  display: block;
  font-size: .78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.display-standby-preview {
  background:
    linear-gradient(135deg, var(--standby-preview-bg, #05070c), color-mix(in srgb, var(--standby-preview-accent, #4f8cff) 16%, #111827));
  border: 1px solid color-mix(in srgb, var(--standby-preview-accent, #4f8cff) 35%, var(--line));
  border-radius: 8px;
  color: #f8fafc;
  display: grid;
  gap: 6px;
  min-height: 136px;
  padding: 16px;
}

.display-standby-preview div {
  align-items: center;
  color: rgba(248, 250, 252, .72);
  display: flex;
  font-size: .72rem;
  font-weight: 850;
  gap: 8px;
  text-transform: uppercase;
}

.display-standby-preview div span {
  background: var(--standby-preview-accent, #4f8cff);
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.display-standby-preview h4 {
  color: #f8fafc;
  font-size: 1.4rem;
  line-height: 1.1;
  margin: 0;
}

.display-standby-preview p,
.display-standby-preview small {
  color: rgba(248, 250, 252, .72);
  margin: 0;
}

.display-standby-preview p {
  font-size: .82rem;
}

.display-standby-preview small {
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem;
}

.display-toggle {
  align-items: center;
  color: var(--text-soft);
  display: flex !important;
  gap: 8px !important;
  margin: 0;
}

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

@media (max-width: 560px) {
  .display-control-grid,
  .display-check-grid,
  .display-inline-form {
    grid-template-columns: 1fr;
  }
}

.console-box {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-soft);
  font-size: .78rem;
  margin: 0;
  max-height: 420px;
  min-height: 220px;
  overflow: auto;
  padding: 12px;
}

.toast-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2200;
  display: grid;
  gap: 8px;
}

.custom-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  color: #ffffff;
  padding: 10px 14px;
  box-shadow: var(--card-shadow-hover);
  font-size: 13px;
  font-weight: 750;
}

.custom-toast.info {
  background: var(--accent);
}

.custom-toast.ok {
  background: var(--success);
}

.custom-toast.warn {
  background: var(--warn);
}

.custom-toast.err {
  background: var(--danger);
}

.editor-view {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  flex-direction: column;
  background: var(--bg);
}

.editor-view.active {
  display: flex;
}

.editor-view.playback-locked .editor-left,
.editor-view.playback-locked .editor-right {
  opacity: 0.58;
}

.editor-view.playback-locked .editor-left,
.editor-view.playback-locked .editor-right,
.editor-view.playback-locked .editor-canvas,
.editor-view.playback-locked .timeline-body,
.editor-view.playback-locked .timeline-handle {
  pointer-events: none;
}

.editor-view.playback-locked .canvas-surface {
  cursor: default;
}

.editor-view.playback-locked button:disabled,
.editor-view.playback-locked input:disabled,
.editor-view.playback-locked select:disabled,
.editor-view.playback-locked textarea:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.editor-view.playback-locked #tlStop {
  cursor: pointer;
  opacity: 1;
}

.editor-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

.editor-bar {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.editor-bar .bar-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mode-group {
  display: inline-flex;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  padding: 3px;
}

.mode-btn {
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-soft);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
}

.mode-btn.on {
  background: var(--accent);
  color: #ffffff;
}

.editor-main {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.editor-left,
.editor-right {
  position: relative;
  display: flex;
  width: 280px;
  flex: 0 0 280px;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--panel);
  transition: width 180ms ease, flex-basis 180ms ease;
}

.editor-right {
  border-right: 0;
  border-left: 1px solid var(--line);
}

/* Collapsed-panel state: shrink the panel to a thin gutter showing only
   a re-expand handle. Operators on smaller screens (or who just want more
   canvas room) can hammer Scenes / Inspector down to ~28px each. */
.editor-left.is-collapsed,
.editor-right.is-collapsed {
  width: 28px;
  flex-basis: 28px;
}
.editor-left.is-collapsed > :not(.editor-panel-collapse-toggle),
.editor-right.is-collapsed > :not(.editor-panel-collapse-toggle) {
  display: none;
}

/* Collapse / expand handle anchored to the inner edge of the panel.
   Always present; chevron flips based on collapsed state. */
.editor-panel-collapse-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 56px;
  border: 1px solid var(--line);
  background: var(--panel-strong, var(--panel));
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  z-index: 5;
  transition: background-color 120ms ease, color 120ms ease;
}
.editor-panel-collapse-toggle:hover {
  background: color-mix(in srgb, var(--accent, #2563eb) 12%, var(--panel));
  color: var(--accent, #2563eb);
}
.editor-left .editor-panel-collapse-toggle {
  right: -10px;
  border-radius: 0 6px 6px 0;
}
.editor-right .editor-panel-collapse-toggle {
  left: -10px;
  border-radius: 6px 0 0 6px;
}
.editor-panel-collapse-toggle svg,
.editor-panel-collapse-toggle [data-lucide] {
  width: 13px;
  height: 13px;
  pointer-events: none;
}

.panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
}

.panel-tab {
  flex: 1;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-dim);
  padding: 11px 8px 9px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

.panel-body {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 10px;
}

.editor-canvas-wrap {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background: #111317;
}

.editor-canvas {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  background: #050608;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 60px rgba(0, 0, 0, 0.45);
}

.grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.grid-overlay.visible {
  opacity: 0.22;
  background-image: linear-gradient(to right, rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 20px 20px;
}

.snap-guide {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
}

.snap-guide.on {
  opacity: 1;
}

.snap-guide-v {
  top: 0;
  bottom: 0;
  width: 1px;
}

.snap-guide-h {
  left: 0;
  right: 0;
  height: 1px;
}

.display-seams {
  position: absolute;
  inset: 0;
  z-index: 35;
  pointer-events: none;
}

.display-seam {
  position: absolute;
  background: color-mix(in srgb, var(--accent) 74%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #ffffff 28%, transparent);
}

.display-seam-v {
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-1px);
}

.display-seam-h {
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-1px);
}

.canvas-surface {
  position: absolute;
  cursor: move;
  user-select: none;
  border: 1px solid transparent;
  transition: border-color 0.1s ease, outline-color 0.1s ease;
}

.canvas-surface:hover {
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
}

.canvas-surface.selected {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.canvas-surface.hidden-surface {
  opacity: 0.25;
}

.surface-content {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.canvas-surface.is-text .surface-content {
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}

.canvas-surface.is-text {
  overflow: hidden;
}

.editor-text-surface {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  /* Preserve engine-style line breaks while clipping to the operator-sized box. */
  white-space: pre;
  font-synthesis: none;
  pointer-events: none;
}

.editor-text-raster-surface {
  position: relative;
  padding: 0;
  background: transparent;
  overflow: hidden;
}

.editor-text-raster-surface img {
  position: absolute;
  display: block;
  max-width: none;
  max-height: none;
  pointer-events: none;
}

.inline-text-editor {
  box-sizing: border-box;
  border-radius: 0;
  caret-color: currentColor;
  font-synthesis: none;
}

.inspector-typography {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.inspector-typography.effects {
  margin-top: 2px;
}

.inspector-section-title {
  grid-column: 1 / -1;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.inspector-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
}

.inspector-field.wide {
  grid-column: 1 / -1;
}

.inspector-field input,
.inspector-field select {
  min-width: 0;
  font-size: 12px;
}

.inspector-field input[type="color"] {
  width: 100%;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background: var(--input-bg);
  cursor: pointer;
}

.hsv-color-field {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  gap: 6px;
}

.hsv-color-trigger {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 10px;
  align-items: center;
  gap: 2px;
  width: 38px;
  height: 32px;
  border: 1px solid var(--input-border);
  border-radius: 7px;
  background: var(--input-bg);
  padding: 3px;
  color: var(--text-dim);
}

.hsv-color-trigger:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.hsv-color-swatch,
.hsv-picker-preview-swatch {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(2, 6, 23, 0.2);
}

.hsv-color-swatch {
  width: 20px;
  height: 22px;
}

.hsv-color-swatch.transparent,
.hsv-picker-preview-swatch.transparent {
  background-image:
    linear-gradient(45deg, rgba(148, 163, 184, 0.45) 25%, transparent 25% 75%, rgba(148, 163, 184, 0.45) 75%),
    linear-gradient(45deg, rgba(148, 163, 184, 0.45) 25%, transparent 25% 75%, rgba(148, 163, 184, 0.45) 75%) !important;
  background-position: 0 0, 5px 5px !important;
  background-size: 10px 10px !important;
}

.hsv-color-chevron {
  width: 10px;
  height: 10px;
}

.hsv-color-input {
  width: 100%;
  min-width: 0;
  font-family: "JetBrains Mono", monospace;
  text-transform: uppercase;
}

.hsv-picker-popover {
  position: fixed;
  z-index: 3200;
  display: grid;
  width: min(236px, calc(100vw - 16px));
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 74%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow: 0 24px 70px rgba(2, 6, 23, 0.28);
  padding: 10px;
  backdrop-filter: blur(18px);
}

.hsv-picker-value-row,
.hsv-picker-alpha-row,
.hsv-picker-theme div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.hsv-picker-preview-swatch {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

.hsv-picker-value {
  height: 28px;
  min-width: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
}

.hsv-picker-sv {
  position: relative;
  height: 128px;
  overflow: hidden;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  cursor: crosshair;
  touch-action: none;
}

.hsv-picker-sv span {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(2, 6, 23, 0.72), 0 2px 8px rgba(2, 6, 23, 0.32);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hsv-picker-popover input[type="range"] {
  width: 100%;
  height: 14px;
  margin: 0;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
}

.hsv-picker-popover input[type="range"]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(2, 6, 23, 0.52);
  appearance: none;
  -webkit-appearance: none;
}

.hsv-picker-hue {
  background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.hsv-picker-alpha-row {
  gap: 6px;
}

.hsv-picker-alpha {
  flex: 1 1 auto;
  background:
    linear-gradient(45deg, rgba(148, 163, 184, 0.55) 25%, transparent 25% 75%, rgba(148, 163, 184, 0.55) 75%),
    linear-gradient(45deg, rgba(148, 163, 184, 0.55) 25%, transparent 25% 75%, rgba(148, 163, 184, 0.55) 75%),
    linear-gradient(90deg, transparent, var(--hsv-alpha-color, #ffffff));
  background-position: 0 0, 5px 5px, 0 0;
  background-size: 10px 10px, 10px 10px, auto;
}

.hsv-picker-alpha-label {
  width: 38px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 750;
  text-align: right;
}

.hsv-picker-eyedropper,
.hsv-picker-close {
  width: 28px;
  height: 28px;
  min-height: 28px;
}

.hsv-picker-close {
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: 0;
}

.hsv-picker-popover:hover .hsv-picker-close {
  opacity: 1;
}

.hsv-picker-theme {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.hsv-picker-theme > span {
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hsv-picker-theme div {
  flex-wrap: wrap;
  gap: 6px;
}

.hsv-theme-swatch {
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.inspector-field.checkbox-field {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.inspector-field.checkbox-field input {
  width: auto;
}

.carousel-card-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.carousel-card-nav {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 8px;
}

.carousel-card-nav-btn,
.carousel-card-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text);
  cursor: pointer;
}

.carousel-card-nav-btn {
  width: 32px;
  height: 30px;
}

.carousel-card-icon-btn {
  width: 26px;
  height: 24px;
  font-size: 12px;
}

.carousel-card-nav-btn:hover,
.carousel-card-icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.carousel-card-icon-btn.active {
  border-color: var(--accent);
  background: rgba(96, 165, 250, 0.14);
  color: var(--accent);
}

.carousel-card-icon-btn.danger:hover {
  border-color: #ef4444;
  color: #ef4444;
}

.carousel-card-icon-btn:disabled {
  cursor: default;
  opacity: 0.35;
}

.carousel-card-count {
  min-width: 0;
  text-align: center;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.carousel-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.carousel-card-editor-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.38);
}

.carousel-card-editor-card.active {
  border-color: rgba(96, 165, 250, 0.72);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.12) inset;
}

.carousel-card-editor-head,
.carousel-card-head-actions,
.carousel-card-color-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.carousel-card-editor-head {
  justify-content: space-between;
}

.carousel-card-number {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}

.carousel-card-design-summary {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel-strong) 72%, transparent);
  color: var(--text);
  padding: 8px;
  text-align: left;
}

.carousel-card-design-summary:hover {
  border-color: var(--accent);
}

.carousel-card-design-summary strong,
.carousel-card-design-summary span,
.carousel-card-design-summary em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carousel-card-design-summary strong {
  font-size: 12px;
}

.carousel-card-design-summary span {
  color: var(--text-dim);
  font-size: 11px;
  font-style: normal;
}

.carousel-card-design-summary em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.carousel-card-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
}

.carousel-card-field input,
.carousel-card-field textarea {
  min-width: 0;
  font-size: 12px;
}

.carousel-card-field textarea {
  resize: vertical;
}

.carousel-card-color-row .carousel-card-field {
  flex: 1;
}

.carousel-card-color-row input[type="color"] {
  width: 100%;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  background: var(--input-bg);
  cursor: pointer;
}

.carousel-card-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 32px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 800;
}

.carousel-card-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.carousel-design-modal-shell {
  z-index: 2500;
}

.carousel-design-modal-dialog {
  max-width: min(1540px, calc(100vw - 24px));
}

.carousel-design-modal {
  max-height: calc(100vh - 32px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line-strong) 68%, transparent);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 28px 90px rgba(2, 6, 23, 0.38);
}

.carousel-design-modal .modal-header {
  align-items: flex-start;
  min-height: 66px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, var(--panel-strong));
  padding: 16px 18px;
}

.carousel-design-modal .modal-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 850;
}

.carousel-design-modal .modal-subtitle {
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
}

.carousel-design-close {
  width: 32px;
  height: 32px;
  min-height: 32px;
}

.carousel-design-modal .modal-body {
  max-height: calc(100vh - 104px);
  overflow: auto;
  padding: 0;
}

.carousel-design-grid {
  display: grid;
  grid-template-columns: minmax(210px, 270px) minmax(0, 1fr);
  min-height: min(780px, calc(100vh - 106px));
}

.carousel-design-sidebar {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-strong) 68%, var(--panel));
  padding: 14px;
}

.carousel-design-card-tabs {
  display: flex;
  min-height: 0;
  max-height: calc(100vh - 214px);
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
}

.carousel-design-card-tab {
  display: grid;
  min-width: 0;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel) 84%, var(--panel-strong));
  color: var(--text);
  padding: 10px;
  text-align: left;
}

.carousel-design-card-tab.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent) inset;
}

.carousel-design-card-tab span {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.carousel-design-card-tab strong,
.carousel-design-card-tab small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carousel-design-card-tab strong {
  font-size: 12px;
}

.carousel-design-card-tab small {
  color: var(--text-dim);
  font-size: 11px;
}

.carousel-design-panel {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(380px, 440px);
  gap: 0;
  min-width: 0;
}

.carousel-design-preview-wrap {
  display: grid;
  min-height: 640px;
  align-content: start;
  justify-items: center;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(color-mix(in srgb, var(--line) 36%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 36%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--panel-soft) 78%, var(--panel));
  background-size: 32px 32px;
  padding: 14px;
  gap: 14px;
}

.carousel-design-preview-wrap canvas {
  width: 100%;
  max-width: 760px;
  height: auto;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 6px;
  background: #020617;
}

.carousel-mini-toolbar {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  padding: 8px;
  box-shadow: 0 8px 26px rgba(2, 6, 23, 0.06);
}

.carousel-mini-stage-frame {
  display: grid;
  width: 100%;
  min-height: 560px;
  place-items: center;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(45deg, rgba(148, 163, 184, 0.24) 25%, transparent 25% 75%, rgba(148, 163, 184, 0.24) 75%),
    linear-gradient(45deg, rgba(148, 163, 184, 0.24) 25%, transparent 25% 75%, rgba(148, 163, 184, 0.24) 75%),
    color-mix(in srgb, var(--panel) 72%, #020617);
  background-position: 0 0, 12px 12px, 0 0;
  background-size: 24px 24px, 24px 24px, auto;
  padding: 20px;
}

.carousel-mini-stage {
  position: relative;
  width: min(100%, 1040px);
  min-width: 240px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  touch-action: none;
}

.carousel-mini-shadow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.carousel-mini-accent {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  pointer-events: none;
}

.carousel-mini-fallback {
  position: absolute;
  inset: 12% 8% 12% 12%;
  z-index: 4;
  display: grid;
  align-content: start;
  gap: 8px;
  color: #fff;
  pointer-events: none;
}

.carousel-mini-fallback strong {
  font-size: 30px;
  line-height: 1.1;
}

.carousel-mini-fallback span {
  max-width: 44ch;
  color: rgba(226, 232, 240, 0.86);
  font-size: 14px;
  line-height: 1.35;
  white-space: pre-wrap;
}

.carousel-mini-layer {
  position: absolute;
  box-sizing: border-box;
  min-width: 16px;
  min-height: 16px;
  overflow: hidden;
  outline: 1px solid rgba(255, 255, 255, 0.16);
  cursor: move;
  transform-origin: center center;
  touch-action: none;
  user-select: none;
}

.carousel-mini-layer.selected {
  outline: 2px solid var(--accent);
  box-shadow: 0 0 0 1px rgba(2, 6, 23, 0.88), 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
}

.carousel-mini-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--layer-fit, cover);
  pointer-events: none;
}

.carousel-mini-layer-text {
  display: flex;
  flex-direction: column;
  align-items: var(--layer-align-items, flex-start);
  justify-content: var(--layer-justify-content, flex-start);
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: max(0px, calc(var(--layer-padding, 4) * var(--stage-scale, 1px)));
  font-size: calc(var(--layer-font-size, 32) * var(--stage-scale, 1px));
  line-height: calc(var(--layer-line-height, 38) * var(--stage-scale, 1px));
  letter-spacing: calc(var(--layer-letter-spacing, 0) * var(--stage-scale, 1px));
  overflow-wrap: anywhere;
  text-align: var(--layer-text-align, left);
  white-space: pre-wrap;
}

.carousel-mini-layer-empty {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: rgba(226, 232, 240, 0.78);
  background: rgba(15, 23, 42, 0.7);
}

.carousel-mini-resize {
  position: absolute;
  z-index: 6;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 72%, #020617);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.34);
  opacity: 0;
  pointer-events: none;
}

.carousel-mini-layer.selected .carousel-mini-resize,
.carousel-mini-layer.selected .carousel-mini-rotate {
  opacity: 1;
  pointer-events: auto;
}

.carousel-mini-resize.nw { left: -5px; top: -5px; cursor: nwse-resize; }
.carousel-mini-resize.n { left: calc(50% - 5px); top: -5px; cursor: ns-resize; }
.carousel-mini-resize.ne { right: -5px; top: -5px; cursor: nesw-resize; }
.carousel-mini-resize.e { right: -5px; top: calc(50% - 5px); cursor: ew-resize; }
.carousel-mini-resize.se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.carousel-mini-resize.s { left: calc(50% - 5px); bottom: -5px; cursor: ns-resize; }
.carousel-mini-resize.sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.carousel-mini-resize.w { left: -5px; top: calc(50% - 5px); cursor: ew-resize; }

.carousel-mini-rotate {
  position: absolute;
  z-index: 7;
  left: calc(50% - 6px);
  top: -30px;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.34);
  cursor: grab;
  opacity: 0;
  pointer-events: none;
}

.carousel-mini-rotate::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 2px;
  height: 18px;
  background: color-mix(in srgb, var(--accent) 72%, #fff);
}

.carousel-mini-snap-guide {
  position: absolute;
  z-index: 12;
  display: none;
  pointer-events: none;
  background: color-mix(in srgb, var(--accent) 74%, #fff);
  box-shadow: 0 0 0 1px rgba(2, 6, 23, 0.45);
}

.carousel-mini-snap-guide.on {
  display: block;
}

.carousel-mini-snap-guide.v {
  top: 0;
  bottom: 0;
  width: 1px;
}

.carousel-mini-snap-guide.h {
  left: 0;
  right: 0;
  height: 1px;
}

.carousel-layer-list,
.carousel-layer-inspector {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.carousel-layer-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--text);
  padding: 7px 9px;
  text-align: left;
}

.carousel-layer-row.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent) inset;
}

.carousel-layer-row span {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carousel-layer-empty {
  border: 1px dashed var(--line);
  border-radius: 7px;
  color: var(--text-dim);
  padding: 10px;
  font-size: 12px;
  line-height: 1.35;
}

.carousel-design-tools,
.carousel-design-section {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.carousel-design-tools {
  align-content: start;
  max-height: calc(100vh - 106px);
  overflow: auto;
  background: var(--panel);
  padding: 14px;
}

.carousel-design-section {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.carousel-design-section:last-child {
  border-bottom: 0;
}

.carousel-design-field-grid {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.carousel-design-field-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.carousel-design-field-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.carousel-design-field-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.carousel-design-image-row,
.carousel-design-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.carousel-design-image-row input {
  min-width: 0;
}

.carousel-design-image-row .btn {
  flex: 0 0 auto;
  border-color: var(--input-border);
  background: var(--input-bg);
  color: var(--text-soft);
}

.carousel-design-image-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.carousel-design-media-slot {
  max-height: 310px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-strong) 72%, transparent);
  padding: 10px;
}

.carousel-design-media-slot .project-media-grid {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}

.carousel-design-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.carousel-design-actions.compact {
  justify-content: flex-start;
}

@media (max-width: 980px) {
  .carousel-design-grid,
  .carousel-design-panel {
    grid-template-columns: 1fr;
  }

  .carousel-design-sidebar,
  .carousel-design-preview-wrap {
    border-right: 0;
  }

  .carousel-design-card-tabs {
    max-height: 190px;
  }

  .carousel-design-preview-wrap,
  .carousel-mini-stage-frame {
    min-height: 360px;
  }

  .carousel-design-field-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.editor-stream-embed,
.editor-web-preview {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #020617;
}

.editor-stream-embed .stream-preview {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

.editor-web-preview iframe,
.editor-web-preview video {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: cover;
  pointer-events: none;
}

.editor-web-preview span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  overflow: hidden;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.78);
  color: #ffffff;
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-stream-surface {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.84), rgba(30, 41, 59, 0.62));
  color: #e2e8f0;
}

.editor-stream-icon {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.18);
  color: #bfdbfe;
  font-size: 18px;
}

.editor-stream-text {
  min-width: 0;
}

.editor-stream-text strong,
.editor-stream-text span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-stream-text strong {
  color: #f8fafc;
  font-size: 12px;
  font-weight: 850;
}

.editor-stream-text span {
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.surface-label {
  position: absolute;
  top: -22px;
  left: 0;
  display: none;
  border-radius: 6px;
  background: var(--accent);
  color: #ffffff;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.canvas-surface.selected .surface-label {
  display: block;
}

.resize-handle,
.surface-handle {
  position: absolute;
  z-index: 50;
  display: none;
  width: 9px;
  height: 9px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: var(--accent);
}

.canvas-surface.selected .resize-handle,
.canvas-surface.selected .surface-handle {
  display: block;
}

.resize-handle.br,
.surface-handle.se {
  right: -5px;
  bottom: -5px;
  cursor: nwse-resize;
}

.resize-handle.bl,
.surface-handle.sw {
  left: -5px;
  bottom: -5px;
  cursor: nesw-resize;
}

.resize-handle.tr,
.surface-handle.ne {
  right: -5px;
  top: -5px;
  cursor: nesw-resize;
}

.resize-handle.tl,
.surface-handle.nw {
  left: -5px;
  top: -5px;
  cursor: nwse-resize;
}

.zoom-ctrls {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 3px;
  box-shadow: var(--card-shadow);
}

.zoom-ctrls button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-soft);
}

.zoom-ctrls button:hover {
  background: var(--panel-strong);
  color: var(--accent);
}

.zoom-val {
  min-width: 48px;
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.zoom-sep {
  width: 1px;
  height: 18px;
  background: var(--line);
}

.scene-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  margin-bottom: 8px;
}

.scene-group.active {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
}

.scene-group.live {
  border-color: rgba(22, 163, 74, 0.62);
  box-shadow: inset 3px 0 0 rgba(22, 163, 74, 0.88);
}

.scene-group.active.live {
  border-color: rgba(22, 163, 74, 0.82);
}

.scene-header {
  display: grid;
  gap: 6px;
  padding: 8px;
  cursor: pointer;
}

.scene-primary,
.scene-meta,
.surface-row,
.surface-main {
  display: flex;
  min-width: 0;
  align-items: center;
}

.scene-primary {
  gap: 7px;
}

.scene-meta {
  justify-content: flex-end;
  gap: 6px;
  padding-left: 0;
}

.scene-collapse,
.visibility-toggle,
.vis-toggle,
.scene-additive-toggle,
.scene-add-surface-inline,
.scene-settings,
.scene-delete,
.surface-delete {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text-soft);
}

.scene-settings:hover,
.scene-delete:hover,
.scene-collapse:hover,
.scene-additive-toggle:hover,
.scene-add-surface-inline:hover,
.vis-toggle:hover,
.surface-delete:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  color: var(--accent);
}

.surface-delete {
  color: var(--text-dim);
  opacity: 0.42;
}

.surface-row:hover .surface-delete,
.surface-row.selected .surface-delete {
  opacity: 1;
}

.surface-delete:hover {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  color: var(--danger);
}

.scene-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scene-name[contenteditable="true"] {
  min-height: 20px;
  border-radius: 5px;
  outline: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
  outline-offset: 2px;
}

.scene-duration {
  min-width: 30px;
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-align: right;
}

.scene-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  border: 1px solid rgba(22, 163, 74, 0.42);
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.scene-surfaces {
  display: grid;
  gap: 4px;
  padding: 0 6px 8px 28px;
}

.scene-group.collapsed .scene-surfaces {
  display: none;
}

.surface-row {
  position: relative;
  gap: 6px;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--text-soft);
  padding: 5px 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.surface-row[draggable="true"] {
  cursor: grab;
}

.surface-row.dragging {
  opacity: 0.42;
}

.surface-row.drop-before::before,
.surface-row.drop-after::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
}

.surface-row.drop-before::before {
  top: 0;
}

.surface-row.drop-after::after {
  bottom: 0;
}

.surface-drag-handle {
  display: grid;
  width: 12px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--text-dim);
  cursor: grab;
}

.surface-main {
  flex: 1 1 auto;
  gap: 6px;
}

.surface-type-icon {
  width: 14px;
  flex: 0 0 14px;
  text-align: center;
}

.surface-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.surface-row:hover {
  background: var(--panel-strong);
  color: var(--text);
}

.surface-row.selected {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
  color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}

.surface-row.selected .surface-drag-handle,
.surface-row.selected .surface-type-icon {
  color: var(--accent);
}

.surface-row.hidden {
  opacity: 0.45;
}

.editor-shell .scene-folders:not(.scene-folders-drawer),
.editor-shell .overlay-folders {
  display: grid;
  gap: 10px;
}

.editor-shell .scene-group {
  overflow: hidden;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 92%, black);
}

.editor-shell .scene-group.base-scene-group {
  border-left: 3px solid color-mix(in srgb, var(--accent) 62%, var(--line));
}

.editor-shell .scene-group.overlay-group {
  border-left: 3px solid rgba(217, 119, 6, 0.78);
  background: color-mix(in srgb, var(--panel-soft) 94%, #d97706 6%);
}

.editor-shell .scene-header {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
}

.editor-shell .scene-primary {
  min-height: var(--editor-control);
}

.editor-shell .scene-meta {
  min-height: 24px;
  padding-left: calc((var(--editor-control) * 2) + 30px);
}

.editor-shell .scene-surface-count {
  display: inline-flex;
  min-width: 0;
  max-width: 104px;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text-dim);
  padding: 0 8px;
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.editor-shell .overlay-surface-count {
  border-color: rgba(217, 119, 6, 0.36);
  color: #d97706;
}

.editor-shell .scene-surfaces {
  gap: 5px;
  padding: 0 8px 9px 34px;
}

.editor-shell .surface-empty {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  border: 1px dashed color-mix(in srgb, var(--line) 76%, var(--text-dim));
  border-radius: 7px;
  color: var(--text-dim);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
}

.editor-shell .surface-empty svg,
.editor-shell .surface-empty [data-lucide] {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

.editor-shell .base-scene-group.active .scene-name,
.editor-shell .base-scene-group.active .scene-icon {
  color: var(--accent);
}

.editor-shell .overlay-group.active .scene-name,
.editor-shell .overlay-group.active .scene-icon {
  color: #d97706;
}

.editor-shell .overlay-help-banner {
  align-items: center;
  border: 1px solid rgba(217, 119, 6, 0.26);
  border-left: 3px solid rgba(217, 119, 6, 0.78);
  background: color-mix(in srgb, var(--panel) 91%, #d97706 9%);
  color: var(--text-soft);
}

.editor-shell .scene-empty-box,
.editor-shell .overlay-empty-box {
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

@media (max-width: 560px) {
  .editor-shell .scene-meta {
    padding-left: 0;
  }

  .editor-shell .scene-surface-count {
    max-width: 88px;
  }
}

.inspector-actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.inspector-actions .control-btn {
  width: 100%;
}

.scene-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0 0 10px;
  padding: 0 0 10px;
  background: var(--panel);
}

.scene-actions button,
.surface-picker-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text-soft);
  padding: 8px;
  font-size: 12px;
  font-weight: 800;
}

.surface-picker {
  position: fixed;
  z-index: 2700;
  display: grid;
  width: 200px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow: auto;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 8px;
  box-shadow: var(--card-shadow-hover);
}

.surface-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}

.surface-picker-item:hover {
  background: var(--panel-strong);
  color: var(--text);
}

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

.scene-settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.scene-settings-head strong,
.scene-settings-head small {
  display: block;
}

.scene-settings-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.scene-settings-head small {
  overflow: hidden;
  max-width: 190px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scene-bg-swatch {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.scene-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.scene-settings-grid .wide {
  grid-column: 1 / -1;
}

.scene-settings-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.timeline-wrap {
  display: flex;
  min-height: 0;
  flex-direction: column;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.timeline-handle {
  height: 5px;
  cursor: ns-resize;
  background: var(--panel-strong);
}

.timeline-toolbar {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.timeline-body {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: auto;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.tl-grid {
  position: relative;
  width: max-content;
  min-width: 100%;
  padding-bottom: 8px;
}

.tl-row {
  display: grid;
  grid-template-columns: var(--tl-label-w) minmax(0, 1fr);
  min-height: 28px;
  border-bottom: 1px solid var(--line);
}

.tl-row.selected {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.tl-label {
  position: sticky;
  left: 0;
  z-index: 60;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  border-right: 1px solid var(--line);
  background: var(--panel);
  color: var(--text-soft);
  padding: 0 10px;
  font-size: 11px;
  font-weight: 750;
}

.tl-ruler-label {
  z-index: 70;
}

.tl-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-track-area {
  position: relative;
  min-height: 28px;
}

.tl-ruler {
  cursor: pointer;
  touch-action: none;
}

.tl-tick {
  position: absolute;
  top: 0;
  bottom: 0;
}

.tl-tick-line {
  width: 1px;
  height: 100%;
  background: var(--line);
}

.tl-tick-label {
  position: absolute;
  top: 4px;
  left: 4px;
  color: var(--text-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
}

.tl-bar {
  position: absolute;
  top: 5px;
  height: 18px;
  overflow: hidden;
  border-radius: 5px;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

.tl-bar-body {
  position: absolute;
  inset: 0 8px;
  cursor: grab;
}

.tl-bar-label {
  display: block;
  overflow: hidden;
  padding: 3px 6px;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-bar-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  background: rgba(255,255,255,.24);
}

.tl-bar-handle-l {
  left: 0;
}

.tl-bar-handle-r {
  right: 0;
}

.tl-bar-fade-in,
.tl-bar-fade-out {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.58), rgba(255,255,255,0));
}

.tl-bar-fade-in {
  left: 0;
}

.tl-bar-fade-out {
  right: 0;
  transform: rotate(180deg);
}

.tl-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  cursor: ew-resize;
  z-index: 30;
  touch-action: none;
}

.tl-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
}

.tl-scene-dur-input {
  width: 58px;
  height: 24px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text);
  padding: 0 6px;
  font-size: 11px;
}

.inspector-timing label,
.panel-body label {
  margin-bottom: 4px;
}

.ndi-refresh-btn {
  display: inline-grid;
  width: 26px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text-soft);
}

.shortcuts-overlay {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: none;
  place-items: center;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.shortcuts-overlay.on {
  display: grid;
  pointer-events: auto;
}

.shortcuts-overlay[hidden] {
  display: none !important;
}

kbd {
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--panel-strong);
  color: var(--text);
  box-shadow: none;
  padding: 3px 6px;
}

.ctx-menu {
  position: fixed;
  z-index: 2600;
  min-width: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 6px;
  box-shadow: var(--card-shadow-hover);
}

.ctx-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-soft);
  padding: 8px;
  text-align: left;
  font-size: 12px;
  font-weight: 750;
}

.ctx-item:hover {
  background: var(--panel-strong);
  color: var(--text);
}

.ctx-item.danger {
  color: var(--danger);
}

.ctx-header {
  padding: 6px 8px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 800;
}

.ctx-sep {
  height: 1px;
  margin: 4px;
  background: var(--line);
}

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar-open .sidebar {
    transform: translateX(0);
    width: var(--sidebar-w);
  }

  .main-wrap {
    margin-left: 0;
  }

  .media-shell {
    grid-template-columns: 1fr;
  }

  .zoom-layout {
    grid-template-columns: 1fr;
  }

  .zoom-quick-row,
  .zoom-quick-meta {
    grid-template-columns: 1fr;
  }

  .zoom-quick-row i {
    display: none;
  }

  .quad-control-bar {
    grid-template-columns: 1fr 1fr;
  }

  .project-node-filter {
    width: 100%;
  }

  .quad-grid {
    grid-template-columns: 1fr;
  }

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

  .topbar {
    padding: 0 14px;
  }

  .topbar-count {
    display: none;
  }

  .view-body {
    padding: 16px;
  }

  .editor-left,
  .editor-right {
    width: 240px;
    flex-basis: 240px;
  }
}

@media (max-width: 680px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 14px;
  }

  .topbar-actions,
  .view-header {
    width: 100%;
  }

  .view-header {
    align-items: flex-start;
    flex-direction: column;
  }

  #nodesGrid,
  #projectsGrid,
  .quad-control-bar,
  .quad-slot-card,
  .quad-node-strip,
  .media-grid,
  .streams-grid,
  .zoom-participants-grid,
  .zoom-editor-grid {
    grid-template-columns: 1fr;
  }

  .project-node-filter,
  .project-state-filter,
  .project-sort-select {
    width: 100%;
  }

  .media-selection-bar {
    align-items: stretch;
    flex-direction: column;
  }
}

/* === Data sheet modal (chart/table editor) === */
/* Editor view raises .modal-backdrop to z-index 2490 so per-editor modals
   (project-media, stream-source, zoom-source) can layer above it at 2500. The data-sheet
   modal needs the same lift, otherwise the backdrop covers the dialog. */
#dataSheetModal {
  z-index: 2510;
}
#dataSheetModal .modal-dialog {
  max-width: min(1280px, 96vw);
  height: calc(100vh - 48px);
}
#dataSheetModal .modal-content.data-sheet-content {
  height: 100%;
  background: var(--card);
  color: var(--text-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}
#dataSheetModal .data-sheet-header {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 14px 18px;
}
#dataSheetModal .data-sheet-title-block {
  flex: 1;
  min-width: 0;
}
#dataSheetModal .data-sheet-title-block .modal-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
#dataSheetModal .data-sheet-subtitle {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
#dataSheetModal .data-sheet-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
}
#dataSheetModal .ds-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-soft);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
#dataSheetModal .ds-tool-btn:hover {
  background: var(--accent-soft, rgba(96, 165, 250, 0.12));
  border-color: var(--accent, #60a5fa);
  color: var(--text);
}
#dataSheetModal .ds-tool-btn i {
  font-size: 13px;
}
#dataSheetModal .ds-tool-divider {
  width: 1px;
  height: 22px;
  background: var(--line);
  margin: 0 4px;
}
#dataSheetModal .data-sheet-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  padding: 16px 18px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#dataSheetModal .data-sheet-grid-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg, #0b1220);
  overflow: hidden;
}
#dataSheetModal .data-sheet-grid-wrap {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
}
#dataSheetModal .data-sheet-grid {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
}
#dataSheetModal .data-sheet-grid th,
#dataSheetModal .data-sheet-grid td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0;
  vertical-align: top;
  background: var(--card);
  position: relative;
}
#dataSheetModal .data-sheet-grid thead th {
  background: var(--input-bg);
  color: var(--text-dim);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 8px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 3;
  user-select: none;
}
#dataSheetModal .data-sheet-grid thead th.ds-corner {
  background: var(--input-bg);
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  left: 0;
  z-index: 4;
}
#dataSheetModal .data-sheet-grid tbody th.ds-row-head {
  background: var(--input-bg);
  color: var(--text-dim);
  font-weight: 600;
  font-size: 11px;
  text-align: center;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  position: sticky;
  left: 0;
  z-index: 2;
  user-select: none;
  padding: 0 6px;
}
#dataSheetModal .data-sheet-grid td.ds-cell {
  min-width: 110px;
}
#dataSheetModal .data-sheet-grid td.ds-cell .ds-cell-input {
  width: 100%;
  height: 100%;
  display: block;
  padding: 6px 8px;
  background: transparent;
  color: var(--text);
  border: 0;
  outline: 0;
  font: inherit;
  text-align: left;
  box-sizing: border-box;
}
#dataSheetModal .data-sheet-grid td.ds-cell.ds-numeric .ds-cell-input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#dataSheetModal .data-sheet-grid td.ds-cell.ds-header-row {
  background: var(--input-bg);
}
#dataSheetModal .data-sheet-grid td.ds-cell.ds-header-row .ds-cell-input {
  font-weight: 600;
  color: var(--text);
}
#dataSheetModal .data-sheet-grid td.ds-cell.ds-selected,
#dataSheetModal .data-sheet-grid th.ds-row-head.ds-selected,
#dataSheetModal .data-sheet-grid thead th.ds-selected {
  background: rgba(96, 165, 250, 0.18);
  color: var(--text);
}
#dataSheetModal .data-sheet-grid td.ds-cell.ds-active {
  outline: 2px solid var(--accent, #60a5fa);
  outline-offset: -2px;
}
#dataSheetModal .data-sheet-grid-status {
  border-top: 1px solid var(--line);
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-dim);
  background: var(--input-bg);
  font-variant-numeric: tabular-nums;
}
#dataSheetModal .data-sheet-preview-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg, #0b1220);
  overflow: hidden;
}
#dataSheetModal .data-sheet-preview-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  background: var(--input-bg);
  border-bottom: 1px solid var(--line);
}
#dataSheetModal .data-sheet-preview-label i {
  margin-right: 4px;
}
#dataSheetModal .data-sheet-preview-dim {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
#dataSheetModal .data-sheet-preview-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.65), rgba(2, 6, 23, 0.85));
  min-height: 0;
  overflow: hidden;
}
#dataSheetModal .data-sheet-preview-canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  background: #000;
  image-rendering: -webkit-optimize-contrast;
}
#dataSheetModal .data-sheet-preview-controls {
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  background: var(--card);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
#dataSheetModal .data-sheet-preview-controls .ds-ctl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#dataSheetModal .data-sheet-preview-controls .ds-ctl input,
#dataSheetModal .data-sheet-preview-controls .ds-ctl select {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  min-width: 110px;
}
#dataSheetModal .data-sheet-preview-controls .ds-ctl input[type="color"] {
  width: 56px;
  min-width: 56px;
  height: 28px;
  padding: 2px;
  cursor: pointer;
}
#dataSheetModal .data-sheet-footer {
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  gap: 10px;
}
#dataSheetModal .data-sheet-hint {
  font-size: 11px;
  color: var(--text-dim);
}
#dataSheetModal .data-sheet-footer > div {
  display: flex;
  gap: 8px;
}

/* "Edit Data Sheet" launcher button in inspector */
.inspector-data-launcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding: 8px 10px;
  width: 100%;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-soft);
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.inspector-data-launcher:hover {
  border-color: var(--accent, #60a5fa);
  background: rgba(96, 165, 250, 0.08);
  color: var(--text);
}
.inspector-data-launcher .left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.inspector-data-launcher .left i {
  font-size: 14px;
}
.inspector-data-launcher .summary {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  font-size: 11px;
}
@media (max-width: 900px) {
  #dataSheetModal .data-sheet-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

/* Premium control shell refresh */
:root {
  --sidebar-w: 260px;
  --sidebar-collapsed: 68px;
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel-strong: #eef1f4;
  --panel-soft: #fafbfc;
  --ink: #101214;
  --text: #181b20;
  --text-soft: #4d5664;
  --text-dim: #798391;
  --line: rgba(16, 20, 28, 0.11);
  --line-strong: rgba(16, 20, 28, 0.22);
  --accent: #2f5bea;
  --accent-strong: #2347bd;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --success: #11845b;
  --ok: #11845b;
  --warn: #b7791f;
  --danger: #c43d3d;
  --cyan: #0f766e;
  --violet: #6d5bd0;
  --input-bg: #ffffff;
  --input-border: rgba(16, 20, 28, 0.16);
  --card-bg: #ffffff;
  --card: #ffffff;
  --card-border: rgba(16, 20, 28, 0.11);
  --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px rgba(16, 24, 40, 0.06);
  --card-shadow-hover: 0 2px 6px rgba(16, 24, 40, 0.08), 0 18px 46px rgba(16, 24, 40, 0.12);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

[data-theme="dark"] {
  --bg: #0e1012;
  --panel: #17191c;
  --panel-strong: #202329;
  --panel-soft: #131518;
  --ink: #f6f7f9;
  --text: #eef1f5;
  --text-soft: #bcc4d0;
  --text-dim: #8a94a3;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --input-bg: #111316;
  --input-border: rgba(255, 255, 255, 0.15);
  --card-bg: #17191c;
  --card: #17191c;
  --card-border: rgba(255, 255, 255, 0.1);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 14px 34px rgba(0, 0, 0, 0.28);
  --card-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.25), 0 22px 54px rgba(0, 0, 0, 0.38);
}

[data-page-accent="blue"] { --page-accent: #2f5bea; }
[data-page-accent="green"] { --page-accent: #11845b; }
[data-page-accent="cyan"] { --page-accent: #0f766e; }
[data-page-accent="amber"] { --page-accent: #b7791f; }
[data-page-accent="violet"] { --page-accent: #6d5bd0; }

html {
  background: var(--bg);
}

body {
  min-height: 100vh;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 34%, transparent), transparent 280px),
    var(--bg);
  color: var(--text);
}

:where(h1, h2, h3, h4, h5, h6, .topbar-title h1, .view-header h2, .proj-name, .node-card-head .name) {
  letter-spacing: 0 !important;
}

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

[data-lucide],
svg[data-lucide],
.px-lucide-upgrade {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  stroke-width: 2;
  vertical-align: -0.15em;
}

svg[data-lucide] {
  display: inline-block;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 42%),
    #16181c;
  color: #dfe5ef;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 10px 0 34px rgba(0, 0, 0, 0.12);
}

.sidebar-head {
  min-height: 72px;
  padding: 0 18px;
}

.sidebar-brand-mark {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, #dbe5f3);
  color: #121417;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  font-size: 15px;
  letter-spacing: 0;
}

.sidebar-brand-text {
  font-size: 14px;
  letter-spacing: 0;
}

.sidebar-nav {
  gap: 6px;
  padding: 14px 10px;
}

.sidebar-link,
.sidebar-footer-btn {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(223, 229, 239, 0.72);
  font-weight: 760;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.sidebar-link:hover,
.sidebar-footer-btn:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.075);
  color: #ffffff;
}

.sidebar-link.active {
  border-color: rgba(255, 255, 255, 0.7);
  background: #ffffff;
  color: #121417;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.sidebar-footer {
  gap: 6px;
  padding: 12px 10px;
}

.main-wrap {
  min-height: 100vh;
}

.topbar {
  min-height: 72px;
  padding: 0 28px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 10px 28px rgba(16, 24, 40, 0.05);
  backdrop-filter: blur(18px);
}

.topbar-title h1 {
  font-size: 20px;
  font-weight: 850;
}

.topbar-page-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--page-accent, var(--accent)) 26%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--page-accent, var(--accent)) 10%, var(--panel));
  color: var(--page-accent, var(--accent));
}

.topbar-page-icon svg,
.topbar-page-icon [data-lucide] {
  width: 18px;
  height: 18px;
}

.topbar-title p,
.view-header p {
  color: var(--text-dim);
}

.topbar-actions,
.view-toolbar,
.panel-actions {
  gap: 10px;
}

.topbar-count,
.mini-kpi {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  color: var(--text-soft);
  padding: 0 12px;
  box-shadow: 0 1px 1px rgba(16, 24, 40, 0.03);
}

.topbar-count:empty {
  display: none;
}

.control-btn,
.icon-btn,
.btn {
  border-radius: 8px !important;
  font-weight: 780 !important;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.control-btn,
.icon-btn {
  min-height: 36px;
  border-color: var(--input-border);
  background: var(--input-bg);
  color: var(--text-soft);
  box-shadow: 0 1px 1px rgba(16, 24, 40, 0.03);
}

.control-btn:hover,
.icon-btn:hover,
.btn:hover {
  transform: translateY(-1px);
}

.control-btn.primary,
.btn-primary,
.btn.btn-primary {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 22%, transparent);
}

.control-btn.primary:hover,
.btn-primary:hover,
.btn.btn-primary:hover {
  border-color: var(--accent-strong) !important;
  background: var(--accent-strong) !important;
}

.control-btn.active {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--input-border));
  background: color-mix(in srgb, var(--accent) 11%, var(--input-bg));
  color: var(--accent);
}

.form-control,
.form-select,
.form-check-input {
  border-color: var(--input-border);
  border-radius: 8px;
  background-color: var(--input-bg);
  color: var(--text);
}

.form-control::placeholder {
  color: var(--text-dim);
}

.form-control:focus,
.form-select:focus {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--input-border)) !important;
  box-shadow: var(--focus-ring) !important;
}

.view-body {
  padding: 28px;
}

.view-header {
  align-items: center;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.view-section.active {
  animation: px-page-enter 0.22s ease both;
}

@keyframes px-page-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.view-header h2 {
  font-size: 24px;
  font-weight: 850;
}

#nodesGrid,
#projectsGrid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.runtime-strip,
.quad-node-strip,
.streams-grid,
.zoom-participants-grid,
.zoom-editor-grid {
  gap: 14px;
}

.node-card,
.project-card,
.media-card,
.folder-card,
.stream-card,
.quad-node-card,
.runtime-empty,
.runtime-instance,
.zoom-control-panel,
.zoom-participant-panel,
.zoom-participant-card,
.zoom-account-row,
.zoom-session-row,
.zoom-session-empty,
.zoom-quick-row,
.zoom-quick-meta > div,
.loading-box,
.empty-box {
  border-color: var(--card-border);
  border-radius: 8px !important;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

.node-card,
.project-card {
  padding: 16px;
}

.node-card:hover,
.project-card:hover,
.media-card:hover,
.folder-card:hover,
.stream-card:hover,
.quad-node-card:hover,
.zoom-participant-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-1px);
}

.node-card,
.project-card,
.media-card,
.folder-card,
.stream-card,
.quad-node-card,
.zoom-participant-card {
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.node-card::before,
.project-card::before {
  height: 4px;
}

.node-card-head .name,
.proj-name,
.stream-name,
.media-name {
  color: var(--text);
  font-weight: 850;
}

.node-card-head .name {
  font-size: 16px;
}

.proj-name {
  margin-top: 4px;
  font-size: 17px;
}

.status-pill,
.proj-runtime-pill,
.proj-mode,
.project-user-chip,
.scene-chip,
.stream-status,
.folder-status,
.media-sync-badge {
  border-radius: 999px;
  font-weight: 820;
  letter-spacing: 0;
}

.status-pill .dot {
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}

.node-card-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.metric {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.metric .lbl {
  letter-spacing: 0;
}

.bar-bg {
  height: 5px;
  background: color-mix(in srgb, var(--panel-strong) 84%, var(--line));
}

.node-card-actions,
.project-card-actions {
  gap: 8px;
  padding-top: 10px;
}

.node-card-actions .btn,
.project-card-actions .btn,
.quad-slot-actions .btn,
.display-action-row .btn {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.media-shell,
.zoom-layout {
  gap: 18px;
}

.media-folders,
.media-content,
.zoom-control-panel,
.zoom-participant-panel {
  border-color: var(--card-border);
  background: color-mix(in srgb, var(--card-bg) 92%, var(--panel-strong));
}

.folder-item {
  min-height: 38px;
  border-radius: 8px;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.folder-item.active {
  background: color-mix(in srgb, var(--accent) 11%, var(--panel));
  color: var(--accent);
}

.media-grid {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

.media-card {
  padding: 10px;
}

.media-thumb,
.folder-thumb,
.stream-preview {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 80%, transparent), var(--panel-soft));
}

.media-select-btn {
  border-radius: 8px;
  backdrop-filter: blur(8px);
}

.asset-filter {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  padding: 3px;
}

.asset-filter button {
  min-height: 30px;
  border-radius: 6px;
  font-weight: 800;
}

.asset-filter button.active {
  background: var(--panel);
  color: var(--accent);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.stream-card {
  padding: 10px;
}

.stream-preview-placeholder,
.zoom-preview-placeholder {
  text-transform: none;
  letter-spacing: 0;
}

.zoom-layout {
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
}

.zoom-control-panel,
.zoom-participant-panel {
  padding: 16px;
}

.zoom-account-row,
.zoom-session-row,
.zoom-session-empty,
.zoom-quick-row,
.zoom-quick-meta > div {
  background: var(--panel);
}

.zoom-participant-card {
  background: var(--panel);
}

.zoom-participant-avatar,
.runtime-instance-icon {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.zoom-account-row > svg,
.zoom-quick-row > svg {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  padding: 8px;
  box-sizing: border-box;
}

.media-thumb svg,
.folder-thumb svg {
  width: 30px;
  height: 30px;
}

.stream-preview-placeholder svg,
.stream-preview-unavailable svg,
.empty-box svg {
  width: 36px;
  height: 36px;
}

.zoom-preview-placeholder svg {
  width: 42px;
  height: 42px;
}

.loading-box,
.empty-box {
  min-height: 240px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, transparent), var(--panel)),
    var(--panel);
}

.empty-box i,
.empty-box svg {
  color: var(--accent);
}

.offcanvas,
.modal-content {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.22);
}

.offcanvas {
  --bs-offcanvas-width: min(680px, 94vw);
}

.offcanvas-header,
.modal-header {
  min-height: 64px;
  background: color-mix(in srgb, var(--panel) 86%, var(--panel-strong));
}

.modal-footer {
  background: color-mix(in srgb, var(--panel) 92%, var(--panel-strong));
}

.offcanvas-title,
.modal-title {
  font-weight: 850;
  letter-spacing: 0;
}

.node-card-meta {
  gap: 12px;
}

.node-card-meta .lbl {
  letter-spacing: 0;
}

.custom-toast {
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.editor-view {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel-strong) 34%, transparent), transparent 240px),
    var(--bg);
}

.editor-bar {
  min-height: 60px;
  justify-content: space-between;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.32) inset;
  backdrop-filter: blur(16px);
}

.editor-bar-main,
.editor-bar-actions,
.editor-tool-cluster,
.timeline-transition-controls {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.editor-bar-main {
  flex: 1 1 auto;
}

.editor-bar-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.editor-title-block {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.editor-bar .bar-title {
  font-size: 15px;
  letter-spacing: 0;
}

.bar-subtitle {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 720;
}

.editor-back-btn {
  flex: 0 0 auto;
}

.editor-push-btn {
  border-color: color-mix(in srgb, var(--success) 38%, var(--input-border));
  background: color-mix(in srgb, var(--success) 10%, var(--input-bg));
  color: var(--success);
}

.editor-push-btn:hover {
  border-color: var(--success);
  color: var(--success);
}

.editor-tool-cluster {
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  padding: 3px;
}

.editor-tool-cluster .icon-btn {
  min-height: 30px;
  width: 30px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.mode-group {
  border-radius: 8px;
  background: var(--panel-strong);
}

.mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 6px;
  letter-spacing: 0;
}

.editor-left,
.editor-right {
  width: 292px;
  flex-basis: 292px;
  background: color-mix(in srgb, var(--panel) 95%, var(--panel-strong));
}

.panel-tab {
  letter-spacing: 0;
}

.editor-canvas-wrap {
  background:
    linear-gradient(color-mix(in srgb, #ffffff 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #ffffff 7%, transparent) 1px, transparent 1px),
    #111317;
  background-size: 32px 32px;
}

.editor-canvas {
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.11), 0 22px 80px rgba(0, 0, 0, 0.52);
}

.scene-actions {
  background: color-mix(in srgb, var(--panel) 96%, transparent);
}

.scene-actions button,
.surface-picker-item,
.surface-row,
.scene-row,
.inspector-data-launcher {
  border-radius: 8px;
}

.surface-picker {
  border-color: var(--line);
  background: var(--panel);
  box-shadow: var(--card-shadow-hover);
}

.timeline-wrap {
  background: color-mix(in srgb, var(--panel) 95%, var(--panel-strong));
}

.timeline-handle {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-strong));
}

.drawer-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  padding: 6px 10px 0;
  scrollbar-width: none;
}

.drawer-tabs::-webkit-scrollbar {
  display: none;
}

.drawer-tab {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-dim);
  padding: 0 12px;
  font-size: 11px;
  font-weight: 850;
}

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

.drawer-pane {
  min-height: 0;
  flex: 1 1 auto;
}

.drawer-pane-timeline {
  display: flex;
  flex-direction: column;
}

.drawer-pane-scenes,
.drawer-pane-backgrounds,
.drawer-pane-show {
  overflow: hidden;
}

.scene-drawer-body {
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 10px;
}

.scene-drawer-body .scene-actions {
  margin-bottom: 10px;
}

.scene-drawer-body .scene-folders {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.scene-drawer-body .scene-group {
  margin: 0;
}

/* Simplified scene cards used in the bottom drawer. No buttons, no
   per-scene actions — operators do editing in the left panel; the
   drawer is for fast scene switching during live work. */
.scene-folders-drawer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.scene-card-drawer {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.scene-card-drawer:hover {
  border-color: var(--accent, #4f8cff);
  transform: translateY(-1px);
}

.scene-card-drawer.active {
  border-color: var(--accent, #4f8cff);
  background: color-mix(in srgb, var(--accent, #4f8cff) 10%, var(--panel));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #4f8cff) 25%, transparent);
}

.scene-card-drawer.live {
  border-color: #22c55e;
  background: color-mix(in srgb, #22c55e 10%, var(--panel));
}

.scene-card-drawer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #94a3b8);
  flex: 0 0 auto;
}

.scene-card-drawer.active .scene-card-drawer-icon,
.scene-card-drawer.live .scene-card-drawer-icon {
  color: inherit;
}

.scene-card-drawer-name {
  flex: 1 1 auto;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scene-card-drawer-live {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #22c55e;
  color: #fff;
  flex: 0 0 auto;
}

.scene-card-drawer-bg {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted, #94a3b8);
  flex: 0 0 auto;
}

.scene-card-drawer-duration {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.drawer-pane[hidden] {
  display: none !important;
}

.timeline-toolbar {
  background: color-mix(in srgb, var(--panel) 96%, transparent);
}

.timeline-icon-btn {
  width: 30px;
  min-height: 30px;
}

.timeline-loop-btn {
  min-height: 30px;
  padding: 0 10px;
}

.timeline-time {
  min-width: 74px;
  color: var(--text);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.timeline-scene-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-transition-controls {
  margin-left: auto;
  gap: 8px;
}

.timeline-transition-controls label,
.timeline-transition-controls span {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.timeline-transition-controls select {
  width: 148px;
  min-height: 28px;
  padding: 3px 28px 3px 8px;
  font-size: 11px;
  font-weight: 720;
}

.timeline-transition-controls input {
  width: 58px;
  min-height: 28px;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 720;
}

.background-drawer-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  gap: 8px;
  overflow: hidden;
  padding: 10px;
}

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

.background-current,
.background-drawer-actions,
.scene-background-media-copy,
.scene-background-media-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.background-current {
  flex: 1 1 auto;
}

.background-current-icon,
.scene-background-media-copy > span {
  display: inline-grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--accent);
}

.background-current-copy,
.scene-background-media-copy > div,
.background-tile-copy {
  display: grid;
  min-width: 0;
}

.background-current-copy strong,
.background-current-copy span,
.scene-background-media-copy strong,
.scene-background-media-copy small,
.background-tile-copy strong,
.background-tile-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.background-current-copy strong,
.scene-background-media-copy strong,
.background-tile-copy strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.background-current-copy span,
.scene-background-media-copy small,
.background-tile-copy small {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 750;
}

.background-drawer-actions {
  flex: 0 0 auto;
}

.background-drawer-actions select {
  width: 190px;
}

.background-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.background-tile {
  display: grid;
  grid-template-rows: 82px auto;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text-soft);
  padding: 7px;
  text-align: left;
}

.background-tile:hover,
.background-tile.active {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  color: var(--text);
}

.background-thumb {
  display: grid;
  overflow: hidden;
  place-items: center;
  border-radius: 7px;
  background: var(--panel-strong);
}

.background-thumb img,
.background-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.background-drawer-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 800;
}

.scene-background-media-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  padding: 9px;
}

.scene-background-media-card.has-media {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.show-control-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  gap: 10px;
  overflow: hidden;
  padding: 10px;
}

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

.show-control-head > div {
  display: grid;
  min-width: 0;
}

.show-control-head strong,
.show-scene-card-copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.show-control-head small,
.show-scene-card-copy small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.show-control-status,
.show-live-pill,
.show-overlay-pill,
.show-scene-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--text-soft);
  padding: 0 8px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.show-control-status {
  min-height: 28px;
}

.show-control-status.live,
.show-live-pill {
  border-color: color-mix(in srgb, #22c55e 42%, var(--line));
  background: color-mix(in srgb, #22c55e 10%, var(--panel));
  color: #16a34a;
}

.show-control-status.preview {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
  color: var(--accent);
}

.show-control-status svg,
.show-live-pill svg,
.show-overlay-pill svg,
.show-scene-action svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

.show-control-scroll {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.show-control-section {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.show-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.show-section-title small {
  color: var(--text-dim);
}

.show-scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 9px;
}

.show-scene-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
  min-height: 116px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text-soft);
  padding: 8px;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.show-scene-card:hover {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
  transform: translateY(-1px);
}

.show-scene-card.active {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.show-scene-card.live {
  border-color: color-mix(in srgb, #22c55e 44%, var(--line));
}

.show-scene-card.hidden {
  opacity: 0.66;
}

.show-scene-card.overlay {
  grid-template-columns: 96px minmax(0, 1fr);
  min-height: 104px;
}

.show-scene-preview {
  position: relative;
  grid-row: 1 / span 2;
  overflow: hidden;
  min-height: 82px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-radius: 7px;
  background:
    linear-gradient(45deg, rgba(148,163,184,0.11) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148,163,184,0.11) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(148,163,184,0.11) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(148,163,184,0.11) 75%);
  background-color: rgba(15, 23, 42, 0.3);
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-size: 12px 12px;
}

.show-preview-bg-media,
.show-preview-bg-color {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.show-preview-surfaces {
  position: absolute;
  inset: 0;
}

.show-preview-surface {
  position: absolute;
  display: grid;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(226, 232, 240, 0.28);
  background: rgba(15, 23, 42, 0.45);
  color: rgba(248, 250, 252, 0.9);
}

.show-preview-surface img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.show-preview-text {
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding: 1px 3px;
  font-size: 8px;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.show-scene-preview.is-overlay .show-preview-surface {
  border: 0;
  background: transparent;
}

.show-scene-preview.is-overlay .show-preview-text {
  padding: 0;
}

.show-preview-icon {
  display: inline-grid;
  place-items: center;
  color: rgba(248, 250, 252, 0.82);
}

.show-preview-icon svg {
  width: 13px;
  height: 13px;
}

.show-scene-card-copy,
.show-scene-card-state {
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 4px;
}

.show-scene-card-state {
  display: flex;
  flex-wrap: wrap;
  align-content: end;
  align-items: center;
}

.show-overlay-pill {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  color: var(--accent);
}

.show-scene-action {
  grid-column: 2;
  justify-self: start;
  min-height: 26px;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 11%, var(--panel));
  color: var(--accent);
}

.show-surface-card .show-surface-preview {
  min-height: 86px;
}

.show-visibility-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--text-soft);
  padding: 0 8px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.show-visibility-pill.on {
  border-color: color-mix(in srgb, #22c55e 42%, var(--line));
  background: color-mix(in srgb, #22c55e 10%, var(--panel));
  color: #16a34a;
}

.show-visibility-pill.off {
  border-color: color-mix(in srgb, #ef4444 34%, var(--line));
  background: color-mix(in srgb, #ef4444 8%, var(--panel));
  color: #dc2626;
}

.show-visibility-pill.scene {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
  color: var(--accent);
}

.show-layout-shell {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-strong) 70%, transparent);
  padding: 10px;
}

.show-layout-toolbar,
.show-layout-actions,
.show-layout-card-copy,
.show-layout-card-state,
.show-palette-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.show-layout-toolbar {
  justify-content: space-between;
}

.show-layout-toolbar > div:first-child {
  display: grid;
  min-width: 0;
}

.show-layout-toolbar strong,
.show-layout-card-copy strong,
.show-palette-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.show-layout-toolbar small,
.show-layout-card-copy small,
.show-palette-copy small {
  overflow: hidden;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.show-layout-actions {
  flex: 0 0 auto;
}

.show-layout-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  padding: 3px;
}

.show-layout-mode-toggle button {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  padding: 0 9px;
  font-size: 11px;
  font-weight: 850;
}

.show-layout-mode-toggle button.active {
  background: var(--accent);
  color: #ffffff;
}

.show-layout-tool {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text-soft);
  padding: 0 9px;
  font-size: 11px;
  font-weight: 850;
}

.show-layout-tool.primary {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--accent);
}

.show-layout-grid {
  display: grid;
  grid-template-columns: repeat(var(--control-columns, 48), var(--control-cell-size, 32px));
  grid-auto-rows: var(--control-cell-size, 32px);
  gap: 6px;
  align-content: start;
  min-height: 122px;
  width: 100%;
  border: 1px dashed color-mix(in srgb, var(--line) 80%, var(--accent));
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 74%, transparent);
  padding: 10px;
}

.show-layout-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 180px;
  color: var(--text-dim);
  text-align: center;
  /* Dashed drop-zone style so the empty state actually invites a drag.
     Previously the empty box was a flat tile with text only — operators
     couldn't tell the grid was interactive at all. */
  border: 2px dashed color-mix(in srgb, var(--text-secondary) 35%, transparent);
  border-radius: 12px;
  padding: 24px;
  background: color-mix(in srgb, var(--panel) 50%, transparent);
  transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

/* When the user is dragging a palette card over the grid, the empty zone
   pulses to make the drop target unmissable. The .is-drag-target class is
   set/cleared in bindControlLayoutDesigner's dragenter/dragleave handlers. */
.show-layout-grid.is-drag-target .show-layout-empty {
  border-color: var(--accent, #2563eb);
  background: color-mix(in srgb, var(--accent, #2563eb) 8%, var(--panel));
  transform: scale(1.005);
}

.show-layout-empty strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  margin-top: 4px;
}

.show-layout-empty small {
  font-size: 12px;
  font-weight: 500;
  max-width: 380px;
  line-height: 1.4;
}

/* A subtle "drag me" arrow shown inside the empty box pointing left toward
   the palette. Only renders when the empty state itself is visible. */
.show-layout-empty::before {
  content: '';
  display: block;
  width: 44px;
  height: 44px;
  background: var(--panel-strong, color-mix(in srgb, var(--panel) 60%, var(--text)));
  border: 2px dashed color-mix(in srgb, var(--text-secondary) 50%, transparent);
  border-radius: 50%;
  position: relative;
  opacity: .6;
}
.show-layout-empty::after {
  content: '+';
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  color: var(--text-secondary);
  position: absolute;
  margin-top: -54px;
  opacity: .55;
}

/* Help button: shows a small "?" key hint chip so the keyboard shortcut
   is discoverable without hovering. */
.editor-help-btn { display: inline-flex; align-items: center; gap: 6px; }
.editor-help-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  padding: 1px 5px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  background: color-mix(in srgb, var(--panel-strong, var(--panel)) 60%, var(--text));
  color: var(--text-secondary);
  border: 1px solid var(--line);
  border-radius: 3px;
  line-height: 1;
}

/* ─────────────────────────────────────────────────────────────────
   Editor: unsaved-changes dot + Save button dirty highlight
   ───────────────────────────────────────────────────────────────── */
.editor-dirty-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  margin-left: 8px;
  vertical-align: 1px;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
  animation: editorDirtyPulse 1.8s ease-in-out infinite;
}
.editor-dirty-dot[hidden] { display: none; }
@keyframes editorDirtyPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
  50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, .04); }
}
#edSave.is-dirty {
  background: linear-gradient(180deg, #f59e0b, #d97706);
  border-color: #b45309;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .14);
}
#edSave.is-dirty:hover { filter: brightness(1.05); }

.show-layout-card,
.show-palette-card {
  position: relative;
  display: grid;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text-soft);
  padding: 7px;
  text-align: left;
}

.show-layout-card {
  grid-column: var(--layout-grid-column, auto) / span var(--layout-col-span, 3);
  grid-row: var(--layout-grid-row, auto) / span var(--layout-row-span, 3);
  isolation: isolate;
  place-items: stretch;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  user-select: none;
}

.show-layout-card.hidden {
  opacity: 0.74;
}

.show-layout-card .show-scene-preview,
.show-palette-card .show-scene-preview {
  grid-row: auto;
  min-height: 0;
}

.show-layout-card-preview {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.show-layout-card-preview > .show-scene-preview,
.show-layout-card-preview .show-scene-preview,
.show-layout-card-preview > .show-label-preview {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: inherit;
}

.show-layout-card.hidden .show-layout-card-preview {
  opacity: 0.58;
  filter: saturate(0.72);
}

.show-layout-card:hover,
.show-palette-card:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}

.show-layout-card-copy,
.show-layout-card-state {
  justify-content: space-between;
}

.show-layout-card-copy {
  display: grid;
}

.show-layout-card-name {
  position: absolute;
  z-index: 3;
  right: 5px;
  bottom: 5px;
  left: 5px;
  display: -webkit-box;
  overflow: hidden;
  max-width: calc(100% - 10px);
  border: 1px solid rgba(226, 232, 240, 0.24);
  border-radius: 6px;
  background: color-mix(in srgb, var(--panel-strong) 88%, transparent);
  color: var(--text);
  padding: 4px 5px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.show-layout-kind-chip {
  position: absolute;
  z-index: 3;
  top: 5px;
  left: 5px;
  display: inline-flex;
  max-width: calc(100% - 34px);
  min-height: 22px;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(226, 232, 240, 0.28);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-strong) 88%, transparent);
  color: var(--text-soft);
  padding: 0 6px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.show-layout-kind-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.show-layout-kind-chip svg,
.show-layout-kind-chip [data-lucide] {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.show-layout-card.is-showing {
  cursor: pointer;
}

.show-layout-card.is-editing {
  cursor: grab;
}

.show-layout-card.is-showing:hover {
  transform: translateY(-1px);
  box-shadow: var(--card-shadow-hover);
}

.show-layout-card.dragging {
  z-index: 20;
  opacity: 0.78;
  pointer-events: none;
  cursor: grabbing;
  box-shadow: var(--card-shadow-hover);
}

.show-layout-card.is-surface .show-scene-preview,
.show-layout-card.is-scene .show-scene-preview {
  min-height: 0;
}

.show-layout-remove,
.show-layout-size,
.show-layout-toggle,
.show-palette-drag {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--text-dim);
  padding: 0;
}

.show-layout-remove {
  position: absolute;
  z-index: 5;
  right: 6px;
  bottom: 6px;
}

.show-layout-size {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: auto;
  min-width: 42px;
  grid-auto-flow: column;
  gap: 4px;
  padding: 0 6px;
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 850;
}

.show-layout-toggle {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 4;
}

.show-layout-toggle.on {
  border-color: color-mix(in srgb, #22c55e 44%, var(--line));
  background: color-mix(in srgb, #22c55e 14%, var(--panel-strong));
  color: #16a34a;
}

.show-layout-toggle.off {
  border-color: color-mix(in srgb, #ef4444 36%, var(--line));
  background: color-mix(in srgb, #ef4444 10%, var(--panel-strong));
  color: #dc2626;
}

.show-layout-toggle.scene {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-strong));
  color: var(--accent);
}

.show-layout-remove svg,
.show-layout-remove [data-lucide],
.show-layout-size svg,
.show-layout-size [data-lucide],
.show-layout-toggle svg,
.show-layout-toggle [data-lucide],
.show-palette-drag svg,
.show-palette-drag [data-lucide] {
  width: 14px;
  height: 14px;
}

.show-layout-palette {
  display: grid;
  gap: 8px;
}

.show-palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  gap: 8px;
}

.show-palette-card {
  grid-template-columns: 76px minmax(0, 1fr) 24px;
  gap: 8px;
  align-items: center;
}

.show-palette-card .show-scene-preview {
  width: 76px;
  height: 52px;
}

.show-palette-copy {
  display: grid;
}

.show-label-preview {
  display: grid;
  min-height: 52px;
  place-items: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-strong));
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.show-label-preview svg,
.show-label-preview [data-lucide] {
  width: 16px;
  height: 16px;
}

.show-palette-hierarchy {
  grid-template-columns: 1fr;
  align-content: start;
  gap: 10px;
}

.show-palette-section,
.show-palette-scene,
.show-palette-children {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.show-palette-scene {
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-strong) 48%, transparent);
  padding: 8px;
}

.show-palette-section-title {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.show-palette-section-title span,
.show-palette-section-title small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.show-palette-section-title small {
  font-size: 10px;
  text-transform: none;
}

.show-palette-card.is-surface {
  grid-template-columns: 54px minmax(0, 1fr) 24px;
  padding: 6px;
}

.show-palette-card.is-surface .show-scene-preview {
  width: 54px;
  height: 54px;
}

.show-palette-card.is-label .show-label-preview {
  width: 76px;
}

.show-palette-empty {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 800;
}

.control-designer-shell {
  display: grid;
  grid-template-columns: minmax(260px, 20vw) minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
}

.control-designer-shell.is-show-mode {
  grid-template-columns: minmax(0, 1fr);
}

/* ─────────────────────────────────────────────────────────────────
   ⌘K command palette — global launcher across nodes/projects/scenes
   ───────────────────────────────────────────────────────────────── */
.cmdk-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.55);
  z-index: 1080;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
  backdrop-filter: blur(2px);
}
.cmdk-overlay[hidden] { display: none; }
.cmdk-modal {
  width: min(640px, calc(100% - 32px));
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 32px 64px rgba(0,0,0,.35);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 70vh;
}
.cmdk-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.cmdk-input-icon { color: var(--text-secondary); font-size: 18px; }
.cmdk-input {
  flex: 1; border: 0; background: transparent; outline: none;
  font-size: 16px; color: var(--text); padding: 4px 0;
}
.cmdk-esc, .cmdk-footer kbd {
  background: var(--panel-strong, color-mix(in srgb, var(--panel) 60%, var(--text)));
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  color: var(--text-secondary);
}
.cmdk-results {
  overflow-y: auto;
  flex: 1;
}
.cmdk-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.cmdk-row:hover, .cmdk-row.is-active {
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, transparent);
  border-left-color: var(--accent, #2563eb);
}
.cmdk-row-icon {
  width: 18px; height: 18px;
  color: var(--text-secondary);
  flex: 0 0 18px;
}
.cmdk-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmdk-row-text strong { font-size: 14px; font-weight: 500; color: var(--text); }
.cmdk-row-text span { font-size: 12px; color: var(--text-secondary); }
.cmdk-empty { padding: 20px; text-align: center; color: var(--text-secondary); font-size: 13px; }
.cmdk-footer {
  display: flex; gap: 16px; justify-content: center;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  font-size: 11px; color: var(--text-secondary);
  background: color-mix(in srgb, var(--panel) 90%, var(--text));
}
.cmdk-footer span { display: flex; gap: 4px; align-items: center; }

/* ─────────────────────────────────────────────────────────────────
   First-run onboarding overlay — one-time, dismissible.
   ───────────────────────────────────────────────────────────────── */
.onboarding-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.65);
  z-index: 1090;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.onboarding-card {
  width: min(560px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 32px 64px rgba(0,0,0,.45);
  padding: 28px 32px;
  position: relative;
}
.onboarding-card h2 { margin: 0 0 4px; font-size: 22px; color: var(--text); }
.onboarding-sub { color: var(--text-secondary); margin: 0 0 18px; }
.onboarding-steps {
  margin: 0 0 18px;
  padding-left: 22px;
  display: flex; flex-direction: column; gap: 10px;
  color: var(--text);
}
.onboarding-steps li { line-height: 1.45; font-size: 14px; }
.onboarding-steps a { color: var(--accent, #2563eb); font-weight: 500; }
.onboarding-tips {
  display: grid; gap: 10px;
  background: color-mix(in srgb, var(--panel) 70%, var(--text));
  padding: 14px;
  border-radius: 10px;
  margin-bottom: 18px;
}
.onboarding-tip { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.onboarding-tip strong { font-size: 13px; color: var(--text); }
.onboarding-tip span { color: var(--text-secondary); }
.onboarding-tip kbd {
  display: inline-block; padding: 1px 6px; margin: 0 2px;
  background: var(--panel-strong, color-mix(in srgb, var(--panel) 50%, var(--text)));
  border: 1px solid var(--line);
  border-radius: 4px; font-family: ui-monospace, monospace; font-size: 11px;
}
.onboarding-cta {
  width: 100%;
  background: var(--accent, #2563eb);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 11px 16px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.onboarding-cta:hover { filter: brightness(1.05); }
.onboarding-close {
  position: absolute; top: 14px; right: 16px;
  background: transparent; border: 0;
  font-size: 22px; line-height: 1;
  color: var(--text-secondary); cursor: pointer;
}
.onboarding-close:hover { color: var(--text); }

/* Project card v2: primary CTA + secondary + overflow menu, replaces
   the 6+-button-per-card row that used to fight for the operator's eye. */
.project-card-actions-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
  align-items: stretch;
  margin-top: 12px;
}
.project-card-actions-v2 .project-primary-action {
  font-weight: 600;
  white-space: nowrap;
}
.project-card-actions-v2 .project-secondary-action {
  font-weight: 500;
  white-space: nowrap;
}
.project-card-actions-v2 .project-card-overflow-wrap {
  position: relative;
}
.project-card-actions-v2 .project-overflow-btn {
  width: 32px;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* The menu is portal'd into document.body — see toggleProjectOverflowMenu
   in app.js — so it always escapes the projects grid's stacking + overflow
   context. Positioning happens via JS using getBoundingClientRect. */
.project-overflow-menu.project-overflow-portal {
  position: fixed;
  min-width: 240px;
  background: var(--panel-strong, var(--panel));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 32px rgba(15,23,42,.22), 0 4px 8px rgba(15,23,42,.14);
  padding: 4px;
  /* z-index 5000 sits above Bootstrap modals (1055), tooltips (1080), the
     cmd+K palette (1080), the onboarding overlay (1090), and any plugin
     overlays. The menu is short-lived and dismisses on outside-click, so
     a high z-index can't hide other long-lived UI. */
  z-index: 5000;
  display: flex;
  flex-direction: column;
}
.project-overflow-menu button {
  text-align: left;
  background: transparent;
  border: 0;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.project-overflow-menu button:hover:not([disabled]) {
  background: var(--panel-hover, color-mix(in srgb, var(--panel) 80%, var(--text)));
}
.project-overflow-menu button[disabled] { opacity: .5; cursor: not-allowed; }
.project-overflow-menu .project-overflow-danger { color: #b91c1c; }
.project-overflow-menu .project-overflow-danger:hover:not([disabled]) { background: rgba(220,38,38,.10); }
.project-overflow-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 6px;
}
[data-theme="dark"] .project-overflow-menu {
  box-shadow: 0 16px 32px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.35);
}

/* PPTX-import badge in the media library — distinguishes auto-imported
   slide media (which used to show as raw `ppt-media-{hash}-image1.png`
   strings) from operator uploads. */
.media-source-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  margin-right: 6px;
  border-radius: 3px;
  background: #ddd6fe;
  color: #5b21b6;
  letter-spacing: 0.5px;
  vertical-align: 1px;
}
[data-theme="dark"] .media-source-badge { background: #4c1d95; color: #ddd6fe; }

/* Connection health indicator in the topbar */
.conn-health {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.conn-health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6b7280;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
.conn-health.is-ok    { border-color: rgba(22,163,74,.45); background: rgba(22,163,74,.10); color: #166534; }
.conn-health.is-ok    .conn-health-dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.conn-health.is-warn  { border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.10); color: #92400e; }
.conn-health.is-warn  .conn-health-dot { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.conn-health.is-error { border-color: rgba(220,38,38,.55); background: rgba(220,38,38,.12); color: #b91c1c; }
.conn-health.is-error .conn-health-dot { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.20); animation: connHealthPulse 1.6s ease-in-out infinite; }
@keyframes connHealthPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(220,38,38,.20); }
  50%     { box-shadow: 0 0 0 6px rgba(220,38,38,.05); }
}
[data-theme="dark"] .conn-health.is-ok    { color: #4ade80; }
[data-theme="dark"] .conn-health.is-warn  { color: #fbbf24; }
[data-theme="dark"] .conn-health.is-error { color: #f87171; }

/* Show / Edit mode banner — high-contrast strip at the top of the
   designer stage so an operator's mode is unmistakeable. Especially
   matters when in Show mode, where a stray drag would silently shuffle
   the grid and break the live show. */
.control-mode-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
  cursor: default;
}
.control-mode-banner svg { width: 16px; height: 16px; flex: 0 0 16px; }
.control-mode-banner em { font-style: normal; padding: 0 2px; border-radius: 3px; background: rgba(255,255,255,.18); }
.control-mode-banner.is-edit {
  background: color-mix(in srgb, var(--panel) 60%, transparent);
  color: var(--text-secondary);
}
.control-mode-banner.is-show {
  background: linear-gradient(90deg, #16a34a, #15803d);
  color: #ecfdf5;
  border-bottom-color: #15803d;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
}
.control-mode-banner.is-show em { background: rgba(0,0,0,.25); }
[data-theme="dark"] .control-mode-banner.is-edit {
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}

/* In show mode: hide drag handles + dotted drop zones so the grid reads
   as a clean operator surface, not an editor canvas. */
.control-designer-shell.is-show-mode .show-layout-card .grip,
.control-designer-shell.is-show-mode .show-layout-card .drag-handle,
.control-designer-shell.is-show-mode .show-layout-card .item-grip,
.control-designer-shell.is-show-mode .control-layout-item-grip,
.control-designer-shell.is-show-mode [data-drag-handle] {
  display: none !important;
}
.control-designer-shell.is-show-mode .control-design-grid.is-showing {
  background-image: none;
  background-color: var(--bg);
}

.control-designer-palette {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  gap: 12px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 96%, var(--panel-strong));
  padding: 14px;
}

.control-designer-head {
  display: grid;
  gap: 3px;
}

.control-designer-head strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 920;
}

.control-designer-head small {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 740;
  line-height: 1.35;
}

.control-designer-palette .show-palette-grid {
  grid-template-columns: 1fr;
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.control-designer-stage {
  display: grid;
  /* Three rows: banner (auto) + toolbar (auto) + grid (1fr). The grid
     MUST be the 1fr row — putting it in an implicit auto row collapses
     it to a narrow strip at the bottom because the auto-row track only
     gets the height of its children's min-content. */
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  gap: 12px;
  padding: 14px;
}

.control-design-grid {
  min-height: 0;
  height: 100%;
  align-content: start;
  overflow: auto;
  grid-auto-rows: var(--control-cell-size, 32px);
  background:
    linear-gradient(color-mix(in srgb, var(--line) 42%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 42%, transparent) 1px, transparent 1px),
    color-mix(in srgb, var(--panel) 74%, transparent);
  background-size: calc(var(--control-cell-size, 32px) + 6px) calc(var(--control-cell-size, 32px) + 6px);
}

.show-label-card {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  min-height: 0;
  height: 100%;
  align-items: center;
  gap: 8px;
  justify-items: center;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 56%),
    var(--panel);
  padding: 0;
}

.show-layout-label-icon {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-strong));
  color: var(--accent);
}

.show-layout-label-input {
  position: absolute;
  z-index: 4;
  right: 6px;
  bottom: 6px;
  left: 6px;
  min-width: 0;
  width: calc(100% - 12px);
  min-height: 30px;
  border: 1px solid var(--input-border);
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--text);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.show-layout-card.is-editing .show-layout-card-name {
  right: 34px;
  max-width: calc(100% - 39px);
}

.show-label-card.is-editing .show-layout-label-input {
  right: 34px;
  width: calc(100% - 40px);
}

.show-layout-label-text {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.user-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 14px;
  box-shadow: var(--card-shadow);
}

.user-card-main,
.user-card-footer,
.user-role-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.user-card-main > div {
  display: grid;
  min-width: 0;
}

.user-card-main strong {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-card-main small {
  overflow: hidden;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-avatar {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel-strong));
  color: var(--accent);
  font-size: 14px;
  font-weight: 950;
}

.user-role-row {
  flex-wrap: wrap;
}

.user-role-chip,
.user-status {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--text-soft);
  padding: 0 8px;
  font-size: 10px;
  font-weight: 900;
}

.user-role-chip.muted {
  color: var(--text-dim);
}

.user-status.active {
  border-color: color-mix(in srgb, #22c55e 38%, var(--line));
  color: #16a34a;
}

.user-status.disabled {
  border-color: color-mix(in srgb, #ef4444 30%, var(--line));
  color: #dc2626;
}

.user-card-footer {
  justify-content: space-between;
}

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

.user-form .form-label {
  display: grid;
  gap: 6px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 850;
}

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

.user-role-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 9px;
}

.user-role-option span {
  display: grid;
  min-width: 0;
}

.user-role-option strong,
.user-role-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-role-option strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.user-role-option small {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 740;
}

.tl-row.selected {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

/* Editor polish pass: center controls and prevent dense editor text collisions. */
.editor-shell {
  --editor-control: 30px;
}

.editor-shell :where(button, .control-btn, .icon-btn) {
  line-height: 1;
}

:where(.editor-view, .editor-zoom-modal-shell, .editor-stream-modal-shell, .project-media-modal-shell, .surface-picker) :where(button, [role="button"]) {
  min-width: 0;
  touch-action: manipulation;
  user-select: none;
  transition:
    transform 0.08s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease,
    opacity 0.16s ease;
}

.editor-view :where(button, .control-btn, .icon-btn, .btn, [role="button"]):hover,
.editor-zoom-modal-shell :where(button, .control-btn, .icon-btn, .btn, [role="button"]):hover,
.editor-stream-modal-shell :where(button, .control-btn, .icon-btn, .btn, [role="button"]):hover,
.project-media-modal-shell :where(button, .control-btn, .icon-btn, .btn, [role="button"]):hover,
.surface-picker :where(button, .control-btn, .icon-btn, .btn, [role="button"]):hover {
  transform: none;
}

:where(.editor-view, .editor-zoom-modal-shell, .editor-stream-modal-shell, .project-media-modal-shell, .surface-picker) :where(button, [role="button"]).is-editor-pressed {
  transform: translateY(1px) scale(0.985);
}

.editor-view :where(button, .control-btn, .icon-btn, .btn, [role="button"]).is-editor-pressed,
.editor-zoom-modal-shell :where(button, .control-btn, .icon-btn, .btn, [role="button"]).is-editor-pressed,
.editor-stream-modal-shell :where(button, .control-btn, .icon-btn, .btn, [role="button"]).is-editor-pressed,
.project-media-modal-shell :where(button, .control-btn, .icon-btn, .btn, [role="button"]).is-editor-pressed,
.surface-picker :where(button, .control-btn, .icon-btn, .btn, [role="button"]).is-editor-pressed {
  transform: translateY(1px) scale(0.985);
}

:where(.editor-view, .editor-zoom-modal-shell, .editor-stream-modal-shell, .project-media-modal-shell, .surface-picker) :where(button, [role="button"]).is-editor-clicked {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

:where(.editor-view, .editor-zoom-modal-shell, .editor-stream-modal-shell, .project-media-modal-shell, .surface-picker) :where(button, [role="button"]).is-editor-success {
  border-color: color-mix(in srgb, var(--success) 56%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent);
}

:where(.editor-view, .editor-zoom-modal-shell, .editor-stream-modal-shell, .project-media-modal-shell, .surface-picker) :where(button, [role="button"]).is-editor-error {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent);
}

:where(.editor-view, .editor-zoom-modal-shell, .editor-stream-modal-shell, .project-media-modal-shell, .surface-picker) :where(button, [role="button"]).is-editor-busy {
  cursor: wait !important;
  opacity: 0.76;
}

:where(.editor-view, .editor-zoom-modal-shell, .editor-stream-modal-shell, .project-media-modal-shell, .surface-picker) :where(button, [role="button"]).is-editor-busy :where(svg, [data-lucide], i) {
  animation: editorButtonBusySpin 0.85s linear infinite;
}

@keyframes editorButtonBusySpin {
  to { transform: rotate(360deg); }
}

.editor-shell :where(button svg, button [data-lucide], .scene-icon svg, .scene-icon [data-lucide], .surface-type-icon svg, .surface-type-icon [data-lucide], .tl-label svg, .tl-label [data-lucide]) {
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin: 0;
}

.editor-shell :where(.icon-btn, .timeline-icon-btn, .zoom-ctrls button, .scene-collapse, .vis-toggle, .scene-additive-toggle, .scene-add-surface-inline, .scene-settings, .scene-delete, .surface-delete, .ndi-refresh-btn, .carousel-card-icon-btn, #inspPickMediaInline) {
  display: inline-grid;
  width: var(--editor-control);
  min-width: var(--editor-control);
  height: var(--editor-control);
  min-height: var(--editor-control);
  place-items: center;
  padding: 0;
  text-align: center;
}

.editor-shell :where(.control-btn, .mode-btn, .scene-actions button, .surface-picker-item, .timeline-loop-btn, .project-media-use) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
}

.editor-shell :where(.control-btn span, .mode-btn span, .scene-actions button span, .surface-picker-item span, .project-media-mode span) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.editor-bar-main {
  min-width: 0;
}

.editor-title-block {
  min-width: 0;
  max-width: min(44vw, 560px);
}

.editor-bar .bar-title,
.bar-subtitle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-canvas-pill {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--text-soft);
  padding: 0 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 800;
}

.editor-canvas-pill svg,
.editor-canvas-pill [data-lucide] {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
}

.editor-bar-actions {
  flex-wrap: wrap;
  row-gap: 6px;
}

.mode-btn {
  min-height: var(--editor-control);
  padding: 0 10px;
}

.scene-actions button {
  min-height: 38px;
  padding: 0 10px;
}

.scene-header {
  gap: 7px;
}

.scene-primary {
  display: grid;
  grid-template-columns: var(--editor-control) var(--editor-control) 18px minmax(0, 1fr);
  width: 100%;
  align-items: center;
  gap: 6px;
}

.scene-icon,
.surface-type-icon,
.surface-drag-handle {
  display: inline-grid;
  place-items: center;
  color: var(--text-dim);
}

.scene-icon,
.surface-type-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.scene-name {
  display: block;
  min-width: 0;
}

.scene-meta {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: end;
  flex-wrap: wrap;
  gap: 6px;
  overflow: hidden;
}

.scene-duration {
  min-width: 34px;
  justify-self: end;
}

.scene-live-badge {
  min-width: 0;
  max-width: 86px;
  justify-content: center;
  overflow: hidden;
}

.scene-live-badge span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scene-additive-badge,
.scene-bg-media-badge {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent);
  padding: 0 7px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.scene-bg-media-badge {
  width: 24px;
  padding: 0;
}

.scene-additive-toggle.active {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--line));
  background: color-mix(in srgb, var(--accent) 15%, var(--panel));
  color: var(--accent);
}

.scene-surfaces {
  padding: 0 7px 8px 24px;
}

.surface-row {
  display: grid;
  grid-template-columns: 16px var(--editor-control) minmax(0, 1fr) var(--editor-control);
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 5px;
}

.canvas-bg-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
  transition: opacity var(--editor-bg-crossfade-ms, 650ms) ease;
  will-change: opacity;
}

.canvas-bg-media.is-fading-out {
  opacity: 0;
}

.canvas-bg-media img,
.canvas-bg-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--editor-bg-fit, cover);
  object-position: center;
}

.canvas-bg-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  align-content: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.38);
  color: rgba(226, 232, 240, 0.86);
  font-size: 12px;
  font-weight: 800;
}

.canvas-surface.read-only-surface {
  pointer-events: none;
}

.canvas-surface.overlay-surface {
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
  padding: 0;
}

.canvas-surface.overlay-surface .surface-content {
  padding: 0;
}

.canvas-surface.overlay-surface .surface-label {
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  background: color-mix(in srgb, var(--accent) 18%, rgba(15, 23, 42, 0.88));
}

.surface-main {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.surface-drag-handle {
  width: 16px;
  height: var(--editor-control);
}

.surface-name {
  display: block;
  min-width: 0;
}

.editor-right .panel-body,
.editor-left .panel-body {
  scrollbar-gutter: stable;
}

.scene-settings-head > div,
.inspector-field,
.inspector-field input,
.inspector-field select,
.inspector-field textarea {
  min-width: 0;
}

.inspector-field span,
.inspector-section-title,
.scene-settings-head strong,
.scene-settings-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-toolbar {
  display: grid;
  grid-template-columns: auto auto auto auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  white-space: normal;
}

.timeline-scene-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
}

.tl-scene-title {
  min-width: 0;
  max-width: min(22vw, 260px);
  overflow: hidden;
  color: var(--text-soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-scene-divider {
  color: var(--text-dim);
  font-weight: 800;
}

.tl-field,
.tl-auto-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  margin: 0;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.tl-auto-toggle {
  cursor: pointer;
}

.tl-auto-toggle input {
  width: 14px;
  height: 14px;
  margin: 0;
}

.tl-scene-dur-input,
.tl-auto-delay-input {
  width: 56px;
  height: 26px;
  min-height: 26px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text);
  padding: 0 6px;
  font-size: 11px;
  font-weight: 720;
}

.tl-auto-delay-input:disabled {
  opacity: 0.58;
}

.timeline-transition-controls {
  justify-self: end;
  margin-left: 0;
}

.timeline-transition-controls label,
.timeline-transition-controls span {
  white-space: nowrap;
}

@media (max-width: 1260px) {
  .editor-bar {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .editor-title-block {
    max-width: none;
  }

  .editor-bar-actions {
    justify-content: flex-start;
  }

  .timeline-toolbar {
    grid-template-columns: auto auto auto auto minmax(0, 1fr);
  }

  .timeline-transition-controls {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* Editor at tablet width: auto-collapse the inspector to free up canvas
   real-estate. Operators can manually expand via the toggle handle. */
@media (max-width: 1100px) {
  .editor-shell .editor-right { width: 28px; flex-basis: 28px; }
  .editor-shell .editor-right > :not(.editor-panel-collapse-toggle) { display: none; }
}

/* Editor at small-laptop width: also collapse Scenes by default. The
   bottom drawer (timeline / scene picker) remains as the main scene
   selector at this width. */
@media (max-width: 900px) {
  .editor-shell .editor-left { width: 28px; flex-basis: 28px; }
  .editor-shell .editor-left > :not(.editor-panel-collapse-toggle) { display: none; }

  /* Hide the canvas pill (1920x1080 / 1x1) and the mode-group buttons'
     text labels to keep the topbar manageable. Icon-only buttons remain
     clickable; tooltips kick in for clarity. */
  .editor-bar .editor-canvas-pill { display: none; }
  .editor-shell .mode-btn span,
  .editor-shell .editor-help-btn span,
  .editor-shell .editor-back-btn-label,
  .editor-shell #edExportPix span { display: none; }
  .editor-shell #edExportPix { width: 32px; padding: 0; }
}

/* Phone / very narrow: stack the workspace tabs below the title row and
   wrap actions into a thin scrollable row instead of forcing line breaks
   that eat vertical real-estate. */
@media (max-width: 680px) {
  .editor-bar { padding: 6px 10px; gap: 6px; }
  .editor-bar-main { gap: 6px; flex-wrap: wrap; }
  .editor-bar .bar-subtitle { display: none; }
  .editor-bar-actions {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
    padding-bottom: 2px;
  }
  .editor-bar-actions::-webkit-scrollbar { display: none; }
  .editor-workspace-tabs { width: 100%; justify-content: flex-start; }
}

@media (max-width: 980px) {
  .timeline-scene-name {
    flex-wrap: wrap;
    white-space: normal;
  }

  .tl-scene-title {
    max-width: 100%;
    flex-basis: 100%;
  }
}

.carousel-design-modal,
#dataSheetModal .modal-content.data-sheet-content {
  border-radius: 8px;
}

.carousel-design-modal .modal-header,
#dataSheetModal .data-sheet-header {
  background: color-mix(in srgb, var(--panel) 88%, var(--panel-strong));
}

.hsv-picker-popover {
  border-color: var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22);
}

@media (max-width: 980px) {
  .view-body {
    padding: 20px;
  }

  .view-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .zoom-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .topbar {
    padding: 0 16px;
  }

  .topbar-actions {
    justify-content: flex-end;
  }

  .view-body {
    padding: 16px;
  }

  #nodesGrid,
  #projectsGrid,
  .media-grid,
  .streams-grid,
  .zoom-participants-grid {
    grid-template-columns: 1fr;
  }

  .node-card-metrics {
    grid-template-columns: 1fr;
  }
}

/* Workspace mode pass: Edit now opens a choice modal and the editor shell can switch between design and show operation. */
.project-mode-choice-modal {
  z-index: 2500;
}

.project-mode-choice-dialog {
  max-width: min(760px, calc(100vw - 24px));
  pointer-events: auto;
}

.project-mode-choice-content {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 26px 80px rgba(2, 6, 23, 0.26);
}

.project-mode-choice-header {
  align-items: flex-start;
  background: color-mix(in srgb, var(--panel) 90%, var(--panel-strong));
  padding: 18px 20px 16px;
}

.project-mode-choice-titleblock {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.project-mode-eyebrow {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.project-mode-choice-titleblock h5 {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-mode-choice-titleblock p {
  margin: 0;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-mode-choice-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.project-mode-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 122px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--text);
  padding: 14px;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.project-mode-option:hover,
.project-mode-option:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.12);
  outline: 0;
  transform: translateY(-1px);
}

.project-mode-option-icon,
.project-mode-option-arrow {
  display: inline-grid;
  place-items: center;
}

.project-mode-option-icon {
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--accent);
}

.project-mode-option-icon.live {
  border-color: color-mix(in srgb, var(--success) 38%, var(--line));
  background: color-mix(in srgb, var(--success) 10%, var(--panel));
  color: var(--success);
}

.project-mode-option-icon svg,
.project-mode-option-icon [data-lucide] {
  width: 18px;
  height: 18px;
}

.project-mode-option-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.project-mode-option-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-mode-option-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.project-mode-option-arrow {
  color: var(--text-dim);
}

.project-card-actions .btn,
.quad-slot-actions .btn {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
}

.project-card-actions .btn i,
.quad-slot-actions .btn i {
  display: inline-flex;
  width: 15px;
  height: 15px;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}

.editor-workspace-tabs {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  padding: 3px;
  scrollbar-width: none;
}

.editor-workspace-tabs::-webkit-scrollbar {
  display: none;
}

.editor-workspace-tab {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-soft);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.editor-workspace-tab.active {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 22%, transparent);
}

.editor-workspace-tab svg,
.editor-workspace-tab [data-lucide] {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

.editor-shell.workspace-editor .drawer-tab[data-editor-drawer-tab="show"] {
  display: none;
}

.editor-shell.workspace-control .editor-left,
.editor-shell.workspace-control .editor-right {
  display: none;
}

.editor-shell.workspace-control .editor-main {
  display: none;
}

.editor-shell.workspace-control .editor-canvas-wrap {
  padding: 18px;
}

.editor-shell.workspace-control .editor-canvas,
.editor-shell.workspace-control .canvas-surface {
  cursor: default;
  pointer-events: none;
}

.editor-shell.workspace-control .timeline-wrap {
  display: flex !important;
  flex: 1 1 auto;
  width: 100%;
  height: auto !important;
  min-height: 0;
  border-top: 0;
}

.editor-shell.workspace-control .timeline-handle {
  display: none;
}

.editor-shell.workspace-control .drawer-tab:not([data-editor-drawer-tab="show"]) {
  display: none;
}

.editor-shell.workspace-control .drawer-tabs {
  display: none;
}

.editor-shell.workspace-control .drawer-tab[data-editor-drawer-tab="show"] {
  border-bottom-color: transparent;
  color: var(--text);
  pointer-events: none;
}

.editor-shell.workspace-control .show-control-body {
  display: flex;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  gap: 0;
  padding: 0;
}

.editor-shell.workspace-control .drawer-pane-show {
  display: flex;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
}

.editor-shell.workspace-control .drawer-pane {
  width: 100%;
}

.editor-shell.workspace-control .show-control-head {
  min-height: 38px;
}

.editor-shell.workspace-control .show-scene-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.editor-shell.workspace-control .show-scene-card {
  grid-template-columns: 132px minmax(0, 1fr);
  min-height: 136px;
}

.editor-shell.workspace-control .show-scene-card.overlay {
  grid-template-columns: 112px minmax(0, 1fr);
}

.editor-shell.workspace-control .show-scene-card .show-scene-preview {
  min-height: 98px;
}

.editor-shell.workspace-control .show-layout-card .show-scene-preview {
  min-height: 0;
}

@media (max-width: 1260px) {
  .editor-workspace-tabs {
    order: 4;
  }

  .editor-bar-actions {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }
}

@media (max-width: 980px) {
  .project-mode-choice-body {
    grid-template-columns: 1fr;
  }

  .editor-shell.workspace-control .editor-main {
    max-height: 36vh;
  }

  .editor-shell.workspace-control .show-scene-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  .control-designer-shell.is-edit-mode {
    grid-template-columns: minmax(180px, 26vw) minmax(0, 1fr);
  }

  .show-layout-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .show-layout-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .project-mode-choice-header {
    padding: 16px;
  }

  .project-mode-choice-body {
    padding: 12px;
  }

  .project-mode-option {
    min-height: 104px;
  }

  .editor-bar-main,
  .editor-bar-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .editor-workspace-tabs {
    width: 100%;
    min-width: 0;
  }

  .editor-workspace-tab {
    flex: 1 1 0;
  }

  .editor-canvas-pill {
    max-width: 100%;
  }

  .editor-shell.workspace-editor .editor-left,
  .editor-shell.workspace-editor .editor-right {
    display: none;
  }

  .editor-shell.workspace-control .editor-main {
    min-height: 160px;
    max-height: 32vh;
  }

  .editor-shell.workspace-control .timeline-wrap {
    height: auto !important;
    min-height: 0;
  }

  .control-designer-shell.is-edit-mode {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(150px, 30vh) minmax(0, 1fr);
  }

  .control-designer-shell.is-show-mode {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
  }

  .control-designer-palette {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .control-designer-palette .show-palette-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }

  .control-designer-stage {
    gap: 10px;
    padding: 10px;
  }

  .show-layout-tool,
  .show-layout-mode-toggle button {
    min-height: 30px;
  }

  .editor-shell.workspace-control .show-scene-grid {
    grid-template-columns: 1fr;
  }

  .editor-shell.workspace-control .show-scene-card,
  .editor-shell.workspace-control .show-scene-card.overlay {
    grid-template-columns: 112px minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .control-designer-palette {
    padding: 10px;
  }

  .control-designer-palette .show-palette-grid {
    grid-template-columns: 1fr;
  }

  .show-palette-card,
  .show-palette-card.is-surface {
    grid-template-columns: 54px minmax(0, 1fr) 24px;
  }

  .show-layout-kind-chip {
    max-width: calc(100% - 31px);
    padding: 0 5px;
  }

  .show-layout-kind-chip span {
    display: none;
  }
}