/* MaxVidroom Hackend themes
   ─────────────────────────────────────────────────────
   Default (beach): warm cream + teal accent, matches the Beachspotting interface.
   data-theme="night": dark MCG-cyber. Toggle via top-nav button. */
:root,
:root[data-theme="beach"] {
  --bg: #f4ecd8;
  --bg-card: #f8f0dc;
  --bg-input: #efe4cb;
  --border: #c3a88a;
  --text: #2b1d0e;
  --text-mute: #8a7560;
  --cyan: #1a6b5a;         /* deep teal — beach "accent" */
  --cyan-dim: #2a8a76;
  --yellow: #c08820;
  --green: #1a6b3f;
  --red: #9b2c2c;
}
:root[data-theme="night"] {
  --bg: #0a0a0a;
  --bg-card: #141414;
  --bg-input: #1a1a1a;
  --border: #2a2a2a;
  --text: #f0f0f0;
  --text-mute: #888;
  --cyan: #00f9ff;
  --cyan-dim: #00b8c0;
  --yellow: #ffe14a;
  --green: #4ade80;
  --red: #ff5566;
}

/* Theme-toggle button (top nav) */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: all 120ms;
}
.theme-toggle:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

.topnav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-card), var(--bg));
}
.brand { font-weight: 700; font-size: 18px; }
.brand span { color: var(--cyan); }
.nav-links a {
  margin-left: 18px;
  color: var(--text);
  font-weight: 500;
}
.nav-links a:hover { color: var(--cyan); text-decoration: none; }

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px;
}

h1 {
  font-size: 28px; font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
h2 {
  font-size: 18px; font-weight: 700;
  margin: 24px 0 12px;
  color: var(--cyan);
  letter-spacing: -0.01em;
}
.subtitle { color: var(--text-mute); margin: 0 0 24px; }

/* Login */
.login-card {
  max-width: 400px;
  margin: 80px auto;
  padding: 40px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
}
.login-card h1 { font-size: 32px; margin-bottom: 6px; }
.login-card .subtitle { font-size: 13px; }
.login-card form { margin-top: 28px; text-align: left; }
.login-card label {
  display: block; margin-bottom: 16px;
}
.login-card span {
  display: block; margin-bottom: 6px;
  font-size: 12px; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.login-card input,
.brief-form input,
.brief-form textarea,
.brief-form select {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
}
.login-card input:focus,
.brief-form input:focus,
.brief-form textarea:focus,
.brief-form select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 249, 255, 0.15);
}
button, .btn-submit {
  width: 100%;
  padding: 12px 18px;
  background: var(--cyan);
  color: #000;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
button:hover, .btn-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(0, 249, 255, 0.35);
}

/* Flash messages */
.flash {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-weight: 500;
}
.flash-error { background: rgba(255,85,102,0.15); color: var(--red); border: 1px solid rgba(255,85,102,0.3); }
.flash-info { background: rgba(0,249,255,0.1); color: var(--cyan); border: 1px solid rgba(0,249,255,0.25); }

/* Queue status */
.queue-status { margin-bottom: 24px; }
.status-pill {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
}
.status-running {
  background: rgba(255,225,74,0.15);
  color: var(--yellow);
  border: 1px solid rgba(255,225,74,0.4);
  animation: pulse 1.5s infinite;
}
.status-idle {
  background: rgba(74,222,128,0.1);
  color: var(--green);
  border: 1px solid rgba(74,222,128,0.3);
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Render grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.render-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.15s, border-color 0.15s;
  color: inherit;
}
.render-card:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
  text-decoration: none;
}
.thumb {
  aspect-ratio: 9 / 16;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  max-height: 360px;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-empty {
  font-size: 48px;
  color: var(--text-mute);
}
.thumb-empty.large { font-size: 96px; aspect-ratio: 9/16; max-height: 60vh; display: flex; align-items: center; justify-content: center; }
.meta {
  padding: 12px 14px;
}
.slug {
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 11px;
  color: var(--text-mute);
  margin-bottom: 6px;
  word-break: break-all;
}
.script-preview {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.badges {
  display: flex; gap: 6px; flex-wrap: wrap;
  font-size: 11px;
}
.badge {
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--text-mute);
  font-weight: 500;
}
.badge.ok { color: var(--green); }
.badge.time { color: var(--cyan); }
.badge.dur { color: var(--yellow); }

/* Brief form */
.brief-form fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin: 0 0 20px;
  background: var(--bg-card);
}
.brief-form legend {
  padding: 0 8px;
  font-weight: 700;
  color: var(--cyan);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.brief-form label {
  display: block;
  margin-bottom: 12px;
}
.brief-form label > span {
  display: block;
  font-size: 12px;
  color: var(--text-mute);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.brief-form .radio {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.1s;
}
.brief-form .radio:hover { border-color: var(--cyan-dim); }
.brief-form .radio input[type=radio] { margin: 0; }
.hint {
  font-size: 12px;
  color: var(--text-mute);
  margin: 6px 0 0;
}
.hidden { display: none; }

/* Render detail */
.render-flex {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  margin-top: 24px;
}
@media (max-width: 1000px) {
  .render-flex { grid-template-columns: 1fr; }
}
.render-preview { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; display: flex; align-items: center; justify-content: center; }
.render-meta { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; }

.pipeline-steps {
  list-style: none;
  padding: 0; margin: 0;
}
.step {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.step:last-child { border-bottom: none; }
.step-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-weight: 700; font-size: 13px;
}
.step.done .step-icon { background: rgba(74,222,128,0.2); color: var(--green); }
.step.pending .step-icon { background: var(--bg-input); color: var(--text-mute); }
.step-label { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.step-size { color: var(--text-mute); font-size: 11px; }

.timing-table, .files-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.timing-table td, .files-table td, .files-table th {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.timing-table tr:last-child td { border-bottom: none; }
.timing-table tr.total td { color: var(--cyan); font-weight: 700; padding-top: 10px; }

/* ───────────────────────── Inventory Dashboard ───────────────────────── */
.inv-hero { padding: 12px 0 6px; }
.inv-title { margin: 0 0 4px; font-size: 22px; }
.inv-sub { color: var(--text-mute); font-size: 12px; margin: 0 0 12px; }
.inv-sub a { color: var(--cyan); text-decoration: none; }
.inv-sub a:hover { text-decoration: underline; }
.inv-idle { color: #4ade80; padding: 6px 14px; border: 1px solid rgba(74,222,128,0.3); border-radius: 16px; display: inline-block; margin: 6px 0 12px; font-size: 12px; }

.inv-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 12px;
}
.inv-table th, .inv-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.inv-table thead th {
  background: rgba(0, 249, 255, 0.03);
  color: var(--cyan);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.inv-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.inv-table tbody tr.inv-row-active { background: rgba(255,225,74,0.06); }
.inv-table tbody tr.inv-row-pending { opacity: 0.7; }

.inv-slug code {
  color: var(--cyan-dim);
  background: transparent;
  font-size: 11px;
  word-break: break-all;
}
.inv-slug a { text-decoration: none; }
.inv-slug a:hover code { color: var(--cyan); }
.inv-meta-title {
  color: var(--text);
  font-size: 11.5px;
  margin-top: 3px;
  font-style: italic;
  max-width: 380px;
}

.inv-date {
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-mute);
  font-family: ui-monospace, monospace;
}

.inv-assets { white-space: nowrap; }
.inv-asset {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  font-weight: 700;
  margin-right: 3px;
}
.inv-asset.ok   { background: rgba(74,222,128,0.15); color: #4ade80; }
.inv-asset.miss { background: rgba(235,87,87,0.10); color: rgba(235,87,87,0.5); }

.inv-yt-link {
  color: #ff5555;
  text-decoration: none;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
.inv-yt-link:hover { text-decoration: underline; }
.inv-yt-pending {
  color: var(--text-mute);
  font-size: 11px;
  font-style: italic;
}

.eng-pill {
  display: inline-block;
  padding: 1px 7px;
  background: rgba(0,249,255,0.08);
  color: var(--cyan);
  border-radius: 10px;
  font-size: 11px;
  margin-right: 4px;
  font-family: ui-monospace, monospace;
}
.eng-pending {
  color: var(--text-mute);
  font-size: 11px;
  font-style: italic;
}

.inv-empty {
  text-align: center;
  color: var(--text-mute);
  padding: 32px;
  font-style: italic;
}

.script-box {
  background: var(--bg-input);
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--border);
}

/* Reusable post-meta block on render-detail */
.meta-asset {
  background: var(--bg-input);
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
}
.meta-asset > div { margin-bottom: 8px; }
.meta-asset b { color: var(--cyan); }
.meta-desc {
  background: transparent;
  margin: 4px 0 0;
  padding: 0;
  font-family: inherit;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}
.meta-tag {
  display: inline-block;
  background: rgba(0, 249, 255, 0.08);
  color: var(--cyan);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  margin: 0 2px 2px 0;
}

.files-details {
  margin-top: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
}
.files-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--cyan);
  font-size: 13px;
}

/* ────────────────────────────── Analytics */
.metric-explainer {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.metric-explainer summary {
  cursor: pointer; color: var(--cyan); font-weight: 600;
}
.explainer-body { margin-top: 12px; font-size: 13.5px; }
.explainer-body h3 { color: var(--yellow); margin: 14px 0 6px; font-size: 14px; }
.explainer-body ul, .explainer-body ol { padding-left: 22px; }
.explainer-body li { margin-bottom: 4px; }
.explainer-body code {
  background: var(--bg-input);
  padding: 1px 5px; border-radius: 3px;
  font-family: ui-monospace, monospace; font-size: 12px;
}
.explainer-body .warn {
  background: rgba(255,225,74,0.07);
  border-left: 3px solid var(--yellow);
  padding: 8px 12px; margin: 10px 0;
}

.filters {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.filters input[type=text], .filters input:not([type]) {
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 10px; font-size: 13px; min-width: 220px;
}
.filters label {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--text-mute);
  cursor: pointer;
}
.filters .meta { margin-left: auto; color: var(--text-mute); font-size: 12px; }
.filters button {
  background: var(--bg-input); color: var(--cyan);
  border: 1px solid var(--cyan-dim);
  padding: 5px 10px; border-radius: 4px;
  cursor: pointer; font-size: 12px;
}
.filters button:hover {
  background: var(--cyan); color: var(--bg);
}

.analytics-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  font-size: 12.5px;
}
.analytics-table thead th {
  background: #181818;
  color: var(--cyan);
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  user-select: none;
}
.analytics-table thead th.num { text-align: right; }
.analytics-table thead th.sort-asc::after { content: " ▲"; }
.analytics-table thead th.sort-desc::after { content: " ▼"; }
.analytics-table tbody td {
  padding: 8px;
  border-bottom: 1px solid #1a1a1a;
}
.analytics-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.analytics-table .title-cell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analytics-table tbody tr:hover { background: #1a1a1a; }
.analytics-table tbody tr.ad-row {
  background: rgba(255, 85, 102, 0.06);
}
.analytics-table tbody tr.ad-row:hover { background: rgba(255, 85, 102, 0.12); }

.loading { color: var(--text-mute); font-style: italic; padding: 20px; }

/* Channel summary panel */
.channel-summary { margin-bottom: 20px; }
.channel-summary h2 { color: var(--cyan); font-size: 18px; margin: 0 0 12px; }
.summary-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }
@media (max-width: 1200px) { .summary-grid { grid-template-columns: 1fr; } }
.summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
}
.summary-card h3 { color: var(--yellow); font-size: 13px; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.summary-card h3 .warn-inline { color: var(--red); font-weight: 600; margin-left: 8px; font-size: 12px; }
.kv { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #1a1a1a; }
.kv:last-child { border: 0; }
.kv span { color: var(--text-mute); font-size: 12px; }
.kv b { font-variant-numeric: tabular-nums; }

.mini-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.mini-table th { color: var(--text-mute); font-weight: 500; padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--border); }
.mini-table th.num, .mini-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.mini-table td { padding: 4px 6px; border-bottom: 1px solid #1a1a1a; }
.mini-table tr.ad-row { background: rgba(255, 85, 102, 0.08); }
.mini-table tr.ad-row td { color: var(--red); font-weight: 600; }

.analytics-table .hot-pct { color: var(--green); font-weight: 700; }

/* Date-range bar */
.daterange {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.daterange .dr-label { color: var(--text-mute); margin-right: 6px; }
.daterange .dr-sep { color: var(--text-mute); margin: 0 6px; }
.daterange .preset {
  background: var(--bg-input); color: var(--text-mute);
  border: 1px solid var(--border);
  padding: 4px 10px; border-radius: 4px;
  cursor: pointer; font-size: 12px;
}
.daterange .preset:hover { color: var(--cyan); border-color: var(--cyan-dim); }
.daterange .preset.active { background: var(--cyan); color: var(--bg); border-color: var(--cyan); }
.daterange input[type=date] {
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 8px; font-size: 12px;
  color-scheme: dark;
}
.daterange label { color: var(--text-mute); display: flex; align-items: center; gap: 4px; }
.daterange #applyRange {
  background: var(--bg-input); color: var(--cyan);
  border: 1px solid var(--cyan-dim);
  padding: 4px 10px; border-radius: 4px;
  cursor: pointer; font-size: 12px;
}
.daterange #applyRange:hover { background: var(--cyan); color: var(--bg); }
.daterange .meta { margin-left: auto; color: var(--text-mute); font-size: 11px; }

.period-label {
  color: var(--text-mute); font-size: 12px; font-weight: 400; margin-left: 10px;
}

/* Group headers */
.analytics-table thead .grp {
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-mute);
  background: #121212;
  cursor: default;
}
.analytics-table thead .grp.grp-life { color: var(--yellow); border-left: 2px solid #2a2a1a; }
.analytics-table thead .grp.grp-period { color: var(--green); border-left: 2px solid #1a2a1a; }

.warn-li { color: var(--text-mute); font-size: 12px; font-style: italic; }

/* ────────────────────────────── Topics */
.add-topic { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; margin-bottom: 16px; }
.add-topic summary { cursor: pointer; color: var(--cyan); font-size: 14px; }
.topic-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.topic-form .row { display: flex; gap: 12px; }
.topic-form .row label { flex: 1; }
.topic-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-mute); }
.topic-form input, .topic-form select, .topic-form textarea {
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 10px; font-size: 13px; font-family: inherit;
}
.topic-form button {
  align-self: flex-start;
  background: var(--cyan); color: var(--bg);
  border: 0; padding: 8px 18px; border-radius: 4px;
  cursor: pointer; font-weight: 600; font-size: 13px;
}

.chip {
  display: inline-block; padding: 4px 10px; border-radius: 12px;
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-mute); font-size: 12px; cursor: pointer;
  text-decoration: none;
}
.chip:hover { color: var(--cyan); border-color: var(--cyan-dim); text-decoration: none; }
.chip.active { background: var(--cyan); color: var(--bg); border-color: var(--cyan); }
.chip.brand-chip { border-left: 4px solid var(--bc); }
.chip.status-new { color: #fff; }
.chip.status-queued { color: var(--yellow); }
.chip.status-scripted { color: var(--cyan); }
.chip.status-rendering { color: var(--green); }
.chip.status-published { color: var(--green); border-color: var(--green); }
.chip.status-archived { color: var(--text-mute); }

.topics-table {
  width: 100%; border-collapse: collapse;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
  font-size: 13px;
}
.topics-table thead th {
  background: #181818; color: var(--cyan);
  text-align: left; padding: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
}
.topics-table tbody td { padding: 10px; border-bottom: 1px solid #1a1a1a; vertical-align: top; }
.topics-table tbody tr:hover { background: #1a1a1a; }
.topics-table tr.status-published { opacity: 0.7; }
.topics-table tr.status-archived { opacity: 0.4; }
.brand-pill {
  display: inline-block; padding: 3px 9px; border-radius: 10px;
  color: #000; font-weight: 600; font-size: 11px;
}
.topic-text b { color: var(--text); }
.topic-desc { font-size: 12px; color: var(--text-mute); margin-top: 3px; max-width: 480px; }
.topic-notes { font-size: 11px; color: var(--yellow); margin-top: 3px; opacity: 0.7; }
.topics-table .actions { display: flex; gap: 6px; }
.inline-form { display: inline; }
.inline-form select {
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 3px 6px; font-size: 11px;
}
.btn-produce {
  background: linear-gradient(135deg, var(--cyan), var(--cyan-dim)); color: var(--bg);
  border: 0; padding: 5px 10px; border-radius: 4px;
  cursor: pointer; font-weight: 600; font-size: 11px;
}
.btn-del {
  background: rgba(255,85,102,0.15); color: var(--red);
  border: 1px solid rgba(255,85,102,0.3); padding: 4px 9px; border-radius: 4px;
  cursor: pointer; font-size: 13px; line-height: 1;
}
.empty { text-align: center; color: var(--text-mute); padding: 24px; font-style: italic; }
.src { font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-mute); }

/* ────────────────────────────── Brands */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
.brand-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand-primary);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.brand-card.inactive { opacity: 0.5; }
.brand-header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.brand-header h2 { margin: 0; font-size: 16px; color: var(--brand-primary); display: flex; align-items: center; gap: 8px; }
.brand-header h2 .slug { font-size: 11px; color: var(--text-mute); font-weight: 400; font-family: ui-monospace, monospace; }
.brand-swatch-row { display: flex; gap: 4px; }
.swatch { width: 22px; height: 22px; border-radius: 3px; cursor: help; }
.active-toggle { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-mute); }
.brand-card label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-mute); }
.brand-card input, .brand-card textarea, .brand-card select {
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 5px 8px; font-size: 12px; font-family: inherit;
}
.brand-card input[type=color] { padding: 0; height: 28px; cursor: pointer; }
.colors-fs { border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; }
.colors-fs legend { color: var(--text-mute); font-size: 11px; padding: 0 4px; }
.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.brand-card button[type=submit] {
  align-self: flex-start; margin-top: 6px;
  background: var(--brand-primary); color: var(--brand-bg);
  border: 0; padding: 8px 18px; border-radius: 4px;
  cursor: pointer; font-weight: 600; font-size: 12px;
}

/* ────────────────────────────── Pipeline (Kanban) */
.pipeline-status-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 8px;
  margin-bottom: 14px; font-size: 13px;
}
.qb { padding: 3px 10px; border-radius: 12px; font-weight: 600; font-size: 12px; }
.qb-active { background: rgba(74,222,128,0.15); color: var(--green); border: 1px solid var(--green); }
.qb-idle { background: var(--bg-input); color: var(--text-mute); }

.kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1400px) { .kanban { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px) { .kanban { grid-template-columns: 1fr; } }

.kanban-col {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px;
  min-height: 300px;
}
.kanban-col h3 {
  margin: 0 0 10px;
  color: var(--cyan); font-size: 13px;
  display: flex; align-items: center; justify-content: space-between;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.kanban-col h3 .count {
  background: var(--bg-input); color: var(--text-mute);
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  font-weight: 400;
}
.kanban-cards { display: flex; flex-direction: column; gap: 8px; }
.kc {
  background: var(--bg-input);
  border-left: 3px solid var(--cyan);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 12px;
}
.kc-title { font-weight: 600; color: var(--text); margin-bottom: 5px; line-height: 1.3; }
.kc-desc { font-size: 11px; color: var(--text-mute); margin: 4px 0; }
.kc-meta { display: flex; gap: 6px; font-size: 10px; flex-wrap: wrap; }
.kc-meta span { background: rgba(255,255,255,0.05); color: var(--text-mute); padding: 2px 6px; border-radius: 6px; }
.kc-meta .brand-tag { color: var(--cyan); }
.kc-meta .pri-high { background: rgba(255,85,102,0.15); color: var(--red); }
.kc-meta .pri-low { opacity: 0.5; }
.kc-meta .status-badge { background: rgba(255,225,74,0.15); color: var(--yellow); }
.kc-action button {
  margin-top: 6px;
  background: var(--cyan); color: var(--bg);
  border: 0; padding: 4px 10px; border-radius: 3px;
  cursor: pointer; font-size: 11px; font-weight: 600;
}
.kc-link {
  display: inline-block; margin-top: 6px;
  font-size: 11px; color: var(--cyan);
}
.kc.kc-done { opacity: 0.75; }
.kc-empty { color: var(--text-mute); font-size: 12px; font-style: italic; padding: 20px 6px; text-align: center; }

/* Filters v2 — tristate + numeric ranges */
.filters-v2 {
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 12px 14px !important;
  gap: 10px !important;
}
.fr { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fr-row1 #search { flex: 0 0 280px; }
.fr-row1 .meta { color: var(--text-mute); font-size: 12px; }
.fr-row1 button {
  background: var(--bg-input); color: var(--cyan);
  border: 1px solid var(--cyan-dim);
  padding: 5px 10px; border-radius: 4px;
  cursor: pointer; font-size: 12px;
}
.fr-row1 button:hover { background: var(--cyan); color: var(--bg); }
.fr-row1 #resetFilters { color: var(--text-mute); border-color: var(--border); }
.fr-row1 #resetFilters:hover { color: var(--red); border-color: var(--red); background: var(--bg-input); }

.fr-tris { padding-top: 4px; border-top: 1px solid var(--border); }
.tri-label { color: var(--text-mute); font-size: 11px; margin-right: 2px; }
.tri {
  display: inline-flex; gap: 0;
  border-radius: 4px; overflow: hidden;
  margin-right: 12px;
}
.tri button {
  background: var(--bg-input);
  color: var(--text-mute);
  border: 1px solid var(--border);
  border-right-width: 0;
  padding: 3px 9px; font-size: 11px;
  cursor: pointer;
}
.tri button:last-child { border-right-width: 1px; }
.tri button:hover { color: var(--text); }
.tri button.active { background: var(--cyan); color: var(--bg); border-color: var(--cyan); }
.tri button[data-val="exclude"].active { background: var(--red); border-color: var(--red); color: #fff; }

.advanced-filters {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.advanced-filters summary {
  cursor: pointer; color: var(--cyan);
  font-size: 12px; font-weight: 600;
}
.num-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
@media (max-width: 1100px) { .num-grid { grid-template-columns: 1fr; } }
.num-grid fieldset {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 12px;
  background: var(--bg-input);
}
.num-grid legend { color: var(--yellow); font-size: 11px; padding: 0 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.nf {
  display: grid; grid-template-columns: 110px 1fr 1fr; gap: 6px;
  align-items: center;
  padding: 3px 0;
  font-size: 11px;
}
.nf span { color: var(--text-mute); }
.nf input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 6px;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  width: 100%;
}
.nf input:focus { border-color: var(--cyan); outline: none; }

.analytics-table .ad-share-high { color: var(--red); font-weight: 700; }

/* Scheduler */
.sched-stats { display: flex; gap: 14px; margin-bottom: 16px; }
.sched-stats .stat {
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 8px 14px; border-radius: 6px; font-size: 13px;
}
.sched-stats .stat b { color: var(--cyan); font-size: 16px; margin-right: 4px; }
.sched-stats .stat.posting b { color: var(--yellow); }
.sched-stats .stat.posted b { color: var(--green); }
.sched-stats .stat.failed b { color: var(--red); }

.badge-due {
  background: var(--red); color: #fff;
  font-size: 9px; padding: 1px 6px; border-radius: 3px;
  margin-left: 6px; vertical-align: middle;
  text-transform: uppercase; font-weight: 700;
}
.when { font-family: ui-monospace, monospace; }

/* Timing Analytics — heatmap */
.timing-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  margin-top: 18px;
}
.timing-section h2 { color: var(--cyan); font-size: 16px; margin: 0 0 6px; }
.timing-section .timing-meta { color: var(--text-mute); font-size: 12px; margin-bottom: 14px; }

.heatmap-grid {
  display: grid;
  grid-template-columns: 80px repeat(24, 1fr);
  gap: 2px;
  font-size: 10px;
  margin-bottom: 14px;
}
.heatmap-grid .hm-day { color: var(--text-mute); padding: 4px 0; text-align: right; padding-right: 8px; font-weight: 600; }
.heatmap-grid .hm-cell {
  height: 26px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  cursor: help;
  font-size: 9px;
  color: rgba(0,0,0,0.55);
  font-weight: 600;
}
.heatmap-grid .hm-cell.empty { background: rgba(255,255,255,0.04); color: var(--text-mute); }
.heatmap-grid .hm-hour-row { display: contents; }
.heatmap-grid .hm-axis { color: var(--text-mute); padding: 4px 0; text-align: center; font-size: 9px; }

.heatmap-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-mute); margin-top: 4px; }
.heatmap-legend .lg-grad {
  width: 200px; height: 14px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(0,249,255,0.05), var(--cyan));
}

.timing-recos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
@media (max-width: 1100px) { .timing-recos { grid-template-columns: 1fr; } }
.timing-card { background: var(--bg-input); border-radius: 6px; padding: 12px 14px; }
.timing-card h3 { color: var(--yellow); font-size: 12px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.timing-card ol { padding-left: 22px; margin: 0; font-size: 12px; }
.timing-card li { padding: 3px 0; }

.timeline-bars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--bg);
  padding: 4px 0;
  height: 80px;
  align-items: end;
  margin-bottom: 10px;
  position: relative;
}
.timeline-bars-inner {
  display: flex; gap: 1px; align-items: end; height: 100%;
}
.tl-bar {
  flex: 1; background: var(--cyan-dim); min-height: 2px;
  transition: background 0.1s;
  border-radius: 1px 1px 0 0;
  cursor: help;
}
.tl-bar.organic { background: var(--green); }
.tl-bar:hover { background: var(--cyan); }

.timeline-axis { display: flex; gap: 1px; font-size: 9px; color: var(--text-mute); margin-top: 4px; }
.timeline-axis span { flex: 1; text-align: center; }

/* Pipeline live + stale */
.live-indicator {
  font-size: 12px; font-weight: 400; color: var(--green); margin-left: 12px;
  vertical-align: middle;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.qb-stale { background: rgba(255,225,74,0.15); color: var(--yellow); border: 1px solid var(--yellow); }
.kc-stale { opacity: 0.5; border-left-color: var(--text-mute) !important; }
.stale-details {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.stale-details summary {
  cursor: pointer; color: var(--text-mute); font-size: 11px;
  padding: 4px 0;
}

/* Scripting */
.meta-row { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.variant-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 14px; margin: 14px 0;
}
.variant-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-mute);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.variant-card.selected {
  border-left-color: var(--cyan);
  background: rgba(0, 249, 255, 0.04);
}
.variant-header { display: flex; gap: 10px; font-size: 11px; flex-wrap: wrap; }
.variant-angle {
  background: var(--bg-input); color: var(--cyan);
  padding: 2px 8px; border-radius: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.variant-hook { color: var(--text-mute); }
.variant-words { color: var(--yellow); margin-left: auto; font-variant-numeric: tabular-nums; }
.variant-script {
  font-size: 14px; line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
  white-space: pre-wrap;
  font-family: Georgia, serif;
}
.variant-rationale {
  color: var(--text-mute); font-size: 11px; font-style: italic;
}
.btn-select {
  background: var(--bg-input); color: var(--cyan);
  border: 1px solid var(--cyan-dim);
  padding: 6px 14px; border-radius: 4px; cursor: pointer;
  font-size: 12px; font-weight: 600;
}
.btn-select:hover { background: var(--cyan); color: var(--bg); }
.variant-card.selected .btn-select { background: var(--cyan); color: var(--bg); border-color: var(--cyan); }

.edit-form { display: flex; flex-direction: column; gap: 8px; }
.script-edit {
  width: 100%;
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 14px;
  font-family: Georgia, serif; font-size: 16px; line-height: 1.6;
  resize: vertical; min-height: 130px;
}
.script-edit:focus { border-color: var(--cyan); outline: none; }
.word-count { color: var(--text-mute); font-size: 11px; }

.btn-approve {
  background: linear-gradient(135deg, var(--green), #2e9c5b);
  color: #002817; border: 0;
  padding: 10px 22px; border-radius: 4px;
  font-weight: 700; font-size: 14px; cursor: pointer;
}
.btn-approve:hover { filter: brightness(1.15); }

.chip.status-draft { color: var(--cyan); }
.chip.status-edited { color: var(--yellow); }
.chip.status-approved { color: var(--green); }
.chip.status-produced { color: var(--green); border-color: var(--green); background: rgba(74,222,128,0.1); }
.chip.status-discarded { color: var(--text-mute); opacity: 0.5; }

/* Brand sub in topnav */
.brand-sub { color: var(--text-mute); font-weight: 400; font-size: 13px; margin-left: 4px; }

/* ──────────────────────────── Videojoy / MAXIVIDI Studio */
.vj-hero {
  background: radial-gradient(ellipse at top, rgba(0,249,255,0.15), transparent 60%),
              linear-gradient(180deg, #0e0e16 0%, var(--bg) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 36px 32px 30px;
  margin-bottom: 24px;
}
.vj-hero-mark {
  font-family: ui-monospace, monospace;
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 8px;
}
.vj-title {
  font-size: 42px;
  margin: 0 0 8px;
  letter-spacing: -1px;
  background: linear-gradient(135deg, var(--cyan), #ff5fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.vj-num {
  font-family: Georgia, serif;
  font-style: italic;
  -webkit-text-fill-color: var(--yellow);
}
.vj-tagline {
  color: var(--text-mute);
  font-size: 16px;
  line-height: 1.5;
  max-width: 680px;
  margin: 0;
}

.vj-section { margin-bottom: 32px; }
.vj-h2 {
  color: var(--cyan);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 6px;
  font-weight: 600;
}
.vj-sub { color: var(--text-mute); font-size: 13px; margin: 0 0 14px; }

.vj-pattern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}
.vj-pattern-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
  position: relative;
}
.vj-pattern-card:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
  text-decoration: none;
}
.vj-pattern-card.vj-status-active { border-left: 3px solid var(--green); }
.vj-pattern-card.vj-status-planned { opacity: 0.65; }
.vj-pattern-status { position: absolute; top: 14px; right: 18px; }
.vj-active-pill {
  background: rgba(74,222,128,0.15); color: var(--green);
  padding: 3px 10px; border-radius: 10px;
  font-size: 10px; font-weight: 600;
  border: 1px solid rgba(74,222,128,0.3);
}
.vj-planned-pill {
  background: var(--bg-input); color: var(--text-mute);
  padding: 3px 10px; border-radius: 10px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  border: 1px solid var(--border);
}
.vj-pattern-name {
  margin: 0 70px 4px 0;
  font-size: 17px;
  color: var(--text);
}
.vj-pattern-nick {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  background: var(--yellow);
  color: #0a0a0a;
  font-size: 11px;
  font-family: ui-monospace, monospace;
  font-weight: 700;
  border-radius: 9px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}
.vj-pattern-subtitle {
  color: var(--cyan-dim);
  font-size: 12px;
  margin-bottom: 10px;
  font-style: italic;
}
.vj-pattern-desc { color: var(--text-mute); font-size: 12.5px; line-height: 1.5; margin: 0 0 12px; }
.vj-pattern-slots { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.vj-slot-chip {
  background: var(--bg-input); color: var(--text-mute);
  padding: 2px 8px; border-radius: 8px; font-size: 10px;
  border: 1px solid var(--border);
}
.vj-pattern-meta { color: var(--yellow); font-size: 11px; margin-top: 8px; font-family: ui-monospace, monospace; }

.vj-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}
.vj-slot-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.vj-slot-h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
.vj-slot-icon { font-size: 18px; }
.vj-comp-list { list-style: none; padding: 0; margin: 0; font-size: 11.5px; }
.vj-comp { padding: 3px 0; display: flex; align-items: baseline; gap: 6px; }
.vj-comp-dot { font-size: 8px; }
.vj-avail .vj-comp-dot, .vj-avail.vj-comp-pill::before { color: var(--green); }
.vj-locked { color: var(--text-mute); }
.vj-locked .vj-comp-dot { color: #444; }
.vj-comp-label { color: inherit; }
.vj-comp.vj-avail .vj-comp-label { color: var(--text); }
.vj-comp-note { color: var(--text-mute); font-size: 10px; font-style: italic; }

.vj-vision { margin-top: 20px; }
.vj-blockquote {
  border-left: 3px solid var(--cyan);
  padding: 10px 18px;
  margin: 12px 0;
  color: var(--text);
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  background: var(--bg-card);
  border-radius: 0 6px 6px 0;
}
.vj-vision-points { padding-left: 22px; color: var(--text-mute); font-size: 13px; line-height: 1.7; }
.vj-vision-points li { margin-bottom: 5px; }
.vj-vision-points b { color: var(--text); }

/* Pattern Detail */
.vj-back {
  display: inline-block;
  color: var(--text-mute);
  font-size: 12px;
  margin-bottom: 12px;
}
.vj-pattern-hero {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 28px;
  margin-bottom: 22px;
}
.vj-pattern-h1 { margin: 0 0 8px; font-size: 26px; display: flex; align-items: center; gap: 12px; }
.vj-pattern-subtitle-big { color: var(--cyan); font-size: 14px; font-style: italic; margin-bottom: 10px; }
.vj-pattern-desc-big { color: var(--text); font-size: 14px; line-height: 1.6; max-width: 720px; margin: 0; }

.vj-preview-video {
  max-width: 360px; max-height: 640px;
  background: #000; border-radius: 8px;
  border: 1px solid var(--border);
}
.vj-preview-meta { color: var(--text-mute); font-size: 11px; margin-top: 6px; }

.vj-slot-table { display: flex; flex-direction: column; gap: 1px; background: var(--border); border-radius: 6px; overflow: hidden; }
.vj-slot-row {
  display: grid; grid-template-columns: 200px 1fr 1fr; gap: 12px;
  padding: 10px 14px; background: var(--bg-card);
  align-items: center;
}
.vj-slot-col-name { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.vj-comp-pill {
  display: inline-block;
  padding: 4px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 500;
  background: var(--bg-input);
  border: 1px solid var(--border);
}
.vj-comp-pill.vj-avail {
  color: var(--green);
  border-color: rgba(74,222,128,0.3);
  background: rgba(74,222,128,0.07);
}
.vj-comp-pill.vj-locked { color: var(--text-mute); }
.vj-slot-col-alt details { font-size: 11px; }
.vj-slot-col-alt summary { cursor: pointer; color: var(--cyan); }
.vj-alt-list { list-style: none; padding: 8px 0 0; margin: 0; font-size: 11px; }
.vj-alt-list li { padding: 2px 0; }
.vj-alt-list .vj-avail { color: var(--green); }
.vj-alt-list .vj-locked { color: var(--text-mute); }

.vj-bestfor { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.vj-bestfor li {
  background: var(--bg-input); color: var(--cyan);
  padding: 4px 12px; border-radius: 12px; font-size: 12px;
  border: 1px solid var(--border);
}

.vj-cta-section { text-align: center; padding: 24px; background: var(--bg-card); border-radius: 10px; }
.vj-cta {
  display: inline-block;
  background: linear-gradient(135deg, var(--cyan), #ff5fff);
  color: var(--bg);
  padding: 12px 28px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}
.vj-cta:hover { filter: brightness(1.1); text-decoration: none; }
.vj-locked-banner {
  background: rgba(255,225,74,0.1);
  color: var(--yellow);
  padding: 14px 22px;
  border-radius: 6px;
  border: 1px solid rgba(255,225,74,0.3);
  font-size: 13px;
}

/* ──────────────────────────── Zeitmaschine */
.zm-hero {
  background: radial-gradient(ellipse at top, rgba(218, 165, 32, 0.12), transparent 60%),
              linear-gradient(180deg, #14110a 0%, var(--bg) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 32px 22px;
  margin-bottom: 18px;
}
.zm-hero-mark {
  font-family: ui-monospace, monospace;
  color: var(--yellow);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 6px;
}
.zm-title {
  font-family: Georgia, serif;
  font-size: 38px;
  font-style: italic;
  margin: 0 0 6px;
  color: var(--yellow);
  letter-spacing: -0.5px;
}
.zm-tagline { color: var(--text-mute); font-size: 14px; margin: 0; }

.zm-controls {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 14px;
}
.zm-model-picker { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-mute); }
.zm-l { color: var(--text-mute); }
.zm-model-picker select {
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 10px; font-size: 13px;
}
.zm-vibe {
  flex: 1; min-width: 260px;
  color: var(--cyan-dim); font-size: 12px; font-style: italic;
  border-left: 2px solid var(--yellow);
  padding: 2px 12px;
}
.zm-reset-form { margin: 0; }
.zm-reset {
  background: var(--bg-input); color: var(--text-mute);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 12px; font-size: 12px; cursor: pointer;
}
.zm-reset:hover { color: var(--red); border-color: var(--red); }

.zm-chat {
  background: linear-gradient(180deg, #0f0c08 0%, var(--bg-card) 100%);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  height: 56vh;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 12px;
}
.zm-empty {
  color: var(--text-mute); font-style: italic;
  font-size: 13px; padding: 30px; text-align: center;
}
.zm-msg { display: flex; flex-direction: column; gap: 4px; max-width: 88%; }
.zm-msg-user { align-self: flex-end; }
.zm-msg-assistant { align-self: flex-start; }
.zm-role {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-mute);
}
.zm-msg-user .zm-role { color: var(--cyan); text-align: right; }
.zm-msg-assistant .zm-role { color: var(--yellow); }
.zm-msg-model { font-family: ui-monospace, monospace; font-size: 9px; opacity: 0.6; margin-left: 6px; }
.zm-content {
  padding: 10px 14px; border-radius: 8px;
  font-size: 14px; line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.zm-msg-user .zm-content {
  background: var(--cyan); color: var(--bg);
  border-bottom-right-radius: 2px;
}
.zm-msg-assistant .zm-content {
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 2px;
  font-family: Georgia, serif;
}
.zm-pulse { color: var(--text-mute); animation: pulse 1.5s ease-in-out infinite; font-style: italic; }
.zm-err { color: var(--red); }

.zm-input-form {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
}
.zm-input-form textarea {
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px;
  font-family: inherit; font-size: 14px;
  resize: vertical; min-height: 60px;
}
.zm-input-form textarea:focus { border-color: var(--cyan); outline: none; }
.zm-input-actions { display: flex; align-items: center; justify-content: space-between; }
.zm-hint { color: var(--text-mute); font-size: 11px; font-family: ui-monospace, monospace; }
#zmSend {
  background: linear-gradient(135deg, var(--yellow), #d4a017);
  color: #0a0a0a;
  border: 0;
  padding: 8px 22px;
  border-radius: 4px;
  cursor: pointer; font-weight: 700; font-size: 13px;
}
#zmSend:disabled { opacity: 0.4; cursor: wait; }

/* Avatar Lab */
.avatar-upload-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
.upload-grid { display: grid; grid-template-columns: 320px 1fr; gap: 20px; }
@media (max-width: 800px) { .upload-grid { grid-template-columns: 1fr; } }
.upload-dropzone {
  position: relative;
  width: 320px; height: 320px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-input);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  overflow: hidden;
}
.upload-dropzone:hover, .upload-dropzone.dragging {
  border-color: var(--cyan); background: rgba(0,249,255,0.05);
}
.upload-dropzone img {
  max-width: 100%; max-height: 100%; object-fit: contain;
}
.upload-prompt { text-align: center; color: var(--text-mute); }
.upload-icon { font-size: 48px; margin-bottom: 8px; }
.upload-text { font-size: 14px; line-height: 1.5; }
.upload-link { color: var(--cyan); text-decoration: underline; }
.upload-hint { font-size: 11px; margin-top: 6px; opacity: 0.6; }
.upload-fields { display: flex; flex-direction: column; gap: 12px; }
.upload-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-mute); }
.upload-fields input[type=text], .upload-fields select {
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 8px 10px; font-size: 13px;
}
.upload-fields .checkbox-row { flex-direction: row; align-items: center; gap: 6px; }
#uploadBtn {
  background: linear-gradient(135deg, var(--cyan), var(--cyan-dim));
  color: var(--bg);
  border: 0; padding: 10px 18px; border-radius: 4px;
  cursor: pointer; font-weight: 700; font-size: 13px;
  margin-top: 6px;
}
#uploadBtn:disabled { opacity: 0.5; cursor: wait; }

.avatar-brands { display: flex; flex-direction: column; gap: 14px; }
.avatar-brand-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; }
.avatar-brand-card h3 { margin: 0 0 8px; font-size: 14px; }
.avatar-brand-card h3 .slug { color: var(--text-mute); font-size: 11px; font-weight: 400; margin-left: 8px; font-family: ui-monospace, monospace; }
.avatar-thumb-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.avatar-thumb {
  width: 140px;
  background: var(--bg-input);
  border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.avatar-thumb.is-default { border-color: var(--cyan); }
.avatar-thumb img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.avatar-thumb-fallback { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; font-size: 48px; opacity: 0.4; }
.avatar-thumb-meta { padding: 6px 8px; font-size: 11px; }
.avatar-thumb-meta code { color: var(--text-mute); font-size: 10px; display: block; margin: 2px 0; }
.default-pill { background: var(--cyan); color: var(--bg); padding: 1px 6px; border-radius: 8px; font-size: 9px; font-weight: 700; }
.btn-del-tiny {
  background: transparent; color: var(--text-mute);
  border: 0; cursor: pointer; padding: 0 2px;
  font-size: 14px;
}
.btn-del-tiny:hover { color: var(--red); }

/* DB Explorer + Pattern-Edit */
.dbex-items { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.dbex-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0;
}
.dbex-item summary {
  cursor: pointer; padding: 10px 14px; font-size: 13px;
}
.dbex-item summary:hover { background: var(--bg-input); }
.dbex-item summary .meta { color: var(--text-mute); font-size: 11px; }
.dbex-json {
  margin: 0; padding: 12px 16px;
  background: var(--bg);
  font-family: ui-monospace, monospace; font-size: 11px;
  color: var(--text); white-space: pre-wrap; overflow-x: auto;
  border-top: 1px solid var(--border);
  max-height: 500px;
  word-break: break-word;
}

.vj-slot-edit-table { display: flex; flex-direction: column; gap: 6px; }
.vj-slot-edit-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 12px;
  background: var(--bg-input); padding: 8px 12px; border-radius: 4px;
  align-items: center;
}
.vj-slot-edit-col-name { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.vj-slot-edit-col-comp select {
  width: 100%;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 10px; font-size: 12px;
}
.vj-slot-edit-col-comp option[data-locked] { color: var(--text-mute); }

/* Brand card actions row (Save + Delete side-by-side) */
.brand-card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.btn-save-brand {
  flex: 1;
  background: var(--brand-primary); color: var(--brand-bg);
  border: 0;
  padding: 8px 18px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
}
.btn-del-brand {
  background: transparent;
  color: var(--text-mute);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
}
.btn-del-brand:hover {
  background: rgba(255, 85, 102, 0.12);
  color: var(--red);
  border-color: var(--red);
}
/* Override the previous .brand-card button[type=submit] rule */
.brand-card .brand-card-actions button[type=submit] {
  align-self: auto;
  margin-top: 0;
}

/* ──────────────────────────── Videobeats */
.vb-transport {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 12px;
}
.vb-btn {
  background: var(--bg-input); color: var(--cyan);
  border: 1px solid var(--cyan-dim);
  padding: 8px 14px; border-radius: 4px;
  cursor: pointer; font-size: 13px; font-weight: 600;
}
.vb-btn:hover { background: var(--cyan); color: var(--bg); }
.vb-btn-play { background: var(--cyan); color: var(--bg); border-color: var(--cyan); }
.vb-btn-save { background: var(--green); color: #002; border-color: var(--green); }
.vb-btn-save:hover { filter: brightness(1.15); }
.vb-divider { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }
.vb-knob { display: flex; flex-direction: column; gap: 2px; color: var(--text-mute); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.vb-knob input, .vb-knob select {
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 4px 8px; font-size: 13px; width: 80px;
}
.vb-readout {
  background: rgba(0,249,255,0.06);
  color: var(--text-mute);
  padding: 4px 10px; border-radius: 12px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
.vb-readout b { color: var(--cyan); }
.vb-match-ok b, .vb-match-ok { color: var(--green); }
.vb-match-bad b, .vb-match-bad { color: var(--yellow); }

.vb-stage {
  display: grid; grid-template-columns: 290px 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 1100px) { .vb-stage { grid-template-columns: 1fr; } }

.vb-preview {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.vb-preview canvas {
  background: #000;
  border-radius: 4px;
  width: 270px; height: 480px;
}
.vb-step-indicator {
  color: var(--text-mute); font-family: ui-monospace, monospace; font-size: 12px;
}
.vb-step-indicator b { color: var(--cyan); }

.vb-tracks {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  overflow-x: auto;
}
.vb-track {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
}
.vb-track.vb-muted { opacity: 0.4; }
.vb-track-head {
  display: flex; align-items: center; gap: 6px;
  min-width: 240px; flex-shrink: 0;
}
.vb-track-label {
  font-size: 12px; font-weight: 600; color: var(--text);
  min-width: 80px;
}
.vb-track-cfg { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.vb-mini, .vb-mini-input, .vb-mini-sel, .vb-mini-num {
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 3px 6px; font-size: 10px;
}
.vb-mini-input { width: 80px; }
.vb-mini-num { width: 50px; }
.vb-mini-sel { font-size: 10px; max-width: 110px; }
.vb-mini input[type=color] {
  width: 26px; height: 22px; padding: 0; border-radius: 3px; cursor: pointer; border: 1px solid var(--border);
}
.vb-mute {
  background: transparent; color: var(--text-mute);
  border: 1px solid var(--border);
  padding: 3px 7px; border-radius: 3px;
  cursor: pointer; font-size: 11px;
}
.vb-mute:hover { color: var(--red); border-color: var(--red); }

.vb-step-row { display: flex; gap: 2px; flex: 1; }
.vb-step {
  width: 28px; height: 28px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.08s, border-color 0.08s;
}
.vb-step.fourth { border-color: var(--cyan-dim); border-left-width: 2px; }
.vb-step:hover { background: #1f1f1f; }
.vb-step.on {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 8px rgba(0,249,255,0.4);
}
.vb-step.playing {
  outline: 2px solid var(--yellow);
  outline-offset: -1px;
}
/* STOP-Step (right-click): red kill-trigger — when the playhead hits this,
   any in-flight sources on the track get fade-killed (~25ms ramp). */
.vb-step.stop {
  background: #ff5151 !important;
  border-color: #ff5151;
  box-shadow: 0 0 8px rgba(255, 81, 81, 0.5);
  position: relative;
}
.vb-step.stop:hover {
  background: #ff6e6e !important;
}
.vb-step-stop-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.vb-track-add {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 14px;
}
.vb-btn-add {
  background: var(--bg-input); color: var(--text-mute);
  border: 1px solid var(--border);
  padding: 5px 10px; font-size: 11px;
  border-radius: 3px;
}
.vb-btn-add:hover { color: var(--cyan); border-color: var(--cyan-dim); background: var(--bg-input); }

.vb-library, .vb-patterns {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 14px 18px;
  margin-bottom: 14px;
}
.vb-library h3, .vb-patterns h3 {
  margin: 0 0 10px; color: var(--cyan); font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;
}
.vb-img-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.vb-img-tile {
  width: 110px; position: relative;
  border: 1px solid var(--border); border-radius: 4px;
  overflow: hidden; background: var(--bg-input);
}
.vb-img-tile img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.vb-img-label { padding: 4px 6px; font-size: 10px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-img-del {
  position: absolute; top: 2px; right: 2px;
  background: rgba(0,0,0,0.6); color: var(--red);
  border: 0; width: 22px; height: 22px;
  border-radius: 11px; cursor: pointer; font-size: 14px;
  line-height: 1;
}
.vb-img-del:hover { background: var(--red); color: #fff; }
.vb-img-upload {
  width: 110px; aspect-ratio: 1/1;
  border: 2px dashed var(--border); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-mute); font-size: 11px; text-align: center;
}
.vb-img-upload:hover { border-color: var(--cyan); color: var(--cyan); }

.vb-pattern-list {
  display: flex; flex-direction: column; gap: 6px;
}
.vb-pattern-list > input[type=text] {
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 10px; font-size: 13px;
  margin-bottom: 4px;
}
.vb-saved-pattern {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; background: var(--bg-input); border-radius: 4px;
  font-size: 12px;
}
.vb-saved-name { flex: 1; font-weight: 600; }
.vb-saved-pattern .meta { color: var(--text-mute); font-size: 11px; }
.vb-btn-tiny {
  background: transparent; color: var(--cyan);
  border: 1px solid var(--cyan-dim);
  padding: 3px 8px; border-radius: 3px;
  cursor: pointer; font-size: 11px;
}
.vb-btn-tiny.vb-btn-del { color: var(--red); border-color: rgba(255,85,102,0.3); }

/* ──────────────────────────── Palette Generator (in Brand Card) */
.palette-gen {
  margin-top: 10px;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}
.palette-gen summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--cyan);
  font-weight: 600;
}
.pg-body { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.pg-row { display: flex; flex-direction: column; gap: 4px; }
.pg-row > label { color: var(--text-mute); font-size: 11px; }
.pg-preset {
  width: 100%;
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 8px; font-size: 11px;
}
.pg-gen-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pg-hue { flex: 1; min-width: 100px; }
.pg-hue-out {
  font-family: ui-monospace, monospace;
  color: var(--cyan); font-size: 10px;
  background: var(--bg-input);
  padding: 2px 6px; border-radius: 3px;
  min-width: 40px; text-align: center;
}
.pg-scheme, .pg-mood {
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 4px 6px; font-size: 10px;
}
.pg-generate {
  background: var(--cyan); color: var(--bg);
  border: 0; padding: 4px 10px; border-radius: 3px;
  cursor: pointer; font-weight: 600; font-size: 11px;
}

.pg-preview {
  margin-top: 6px;
}
.pg-preview-card {
  background: var(--bg);
  border-radius: 8px;
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--border);
}
.pg-h {
  margin: 0; font-size: 22px; font-weight: 700;
  color: var(--t);
  letter-spacing: -0.5px;
}
.pg-p {
  margin: 0; font-size: 12px; line-height: 1.5;
  color: var(--t); opacity: 0.7;
}
.pg-cta {
  align-self: flex-start;
  background: var(--p); color: var(--bg);
  border: 0;
  padding: 8px 18px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px; font-weight: 600;
}
.pg-cta:hover {
  background: var(--a);
}
.pg-swatches { display: flex; gap: 5px; margin-top: 4px; }
.pg-sw {
  display: inline-block; width: 18px; height: 18px;
  border-radius: 3px; border: 1px solid rgba(255,255,255,0.1);
  position: relative;
}
.pg-sw::after {
  content: attr(data-l);
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  font-size: 8px; color: var(--text-mute);
  margin-top: 2px; font-family: ui-monospace, monospace;
}

/* ──────────────────────────── Videobeats v2 — Layout-Fix + Per-Step Color */

/* Override v1 .vb-track styles */
.vb-track {
  display: grid !important;
  grid-template-columns: 360px 1fr;
  gap: 14px;
  align-items: center;
}
.vb-track-head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: 6px;
  min-width: 0 !important;  /* override v1's min-width: 240px */
  width: 100%;
}
.vb-track-label {
  flex: 0 0 80px;
  font-size: 12px; font-weight: 600;
}
.vb-track-cfg {
  flex: 1 1 140px;
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}
.vb-track-ctrls {
  flex: 0 0 auto;
  display: flex;
  gap: 3px;
  margin-left: auto;
}
.vb-mute-del:hover { background: rgba(255,85,102,0.15); color: var(--red); border-color: var(--red); }

.vb-step-row {
  display: grid;
  grid-template-columns: repeat(var(--vb-steps, 16), 1fr);
  gap: 2px;
  min-width: 0;
}

/* Per-step color corner indicator */
.vb-step {
  position: relative;
}
.vb-step-corner {
  position: absolute;
  top: 0; right: 0;
  width: 12px; height: 12px;
  border-bottom-left-radius: 4px;
  cursor: pointer;
  z-index: 2;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
}
.vb-step-corner input[type=color] {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.vb-step-dot {
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  pointer-events: none;
}

/* ──────────────────────────── Color Picker Popover */
.cp-popover {
  position: absolute;
  z-index: 1000;
  background: #0e0e14;
  border: 1px solid var(--cyan-dim);
  border-radius: 8px;
  padding: 12px;
  min-width: 280px;
  max-width: 320px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,249,255,0.1);
  font-size: 12px;
}
.cp-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.cp-title { color: var(--cyan); font-weight: 600; font-size: 13px; }
.cp-close {
  background: transparent; color: var(--text-mute);
  border: 1px solid var(--border); border-radius: 3px;
  width: 22px; height: 22px;
  cursor: pointer; font-size: 14px; line-height: 1;
}
.cp-close:hover { color: var(--red); border-color: var(--red); }
.cp-section { margin-bottom: 10px; }
.cp-section:last-child { margin-bottom: 0; }
.cp-section-title {
  color: var(--text-mute);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.cp-swatches {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.cp-swatch, .cp-sw {
  width: 22px; height: 22px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.15);
  transition: transform 0.08s, border-color 0.08s;
  display: inline-block;
}
.cp-sw:hover {
  transform: scale(1.15);
  border-color: var(--cyan);
}
.cp-brand-row {
  display: grid;
  grid-template-columns: 1fr repeat(4, 22px);
  gap: 4px;
  align-items: center;
  margin-bottom: 4px;
}
.cp-brand-name {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-empty {
  color: var(--text-mute);
  font-size: 11px;
  font-style: italic;
}
.cp-freehand {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 6px;
  align-items: center;
}
.cp-freehand .cp-section-title { grid-column: 1 / -1; margin-bottom: 4px; }
#cpNative {
  width: 32px; height: 28px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px;
  cursor: pointer;
}
#cpHex {
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
#cpApply {
  background: var(--cyan); color: var(--bg);
  border: 0;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  font-size: 11px;
}
#cpApply:hover { filter: brightness(1.15); }

/* ──────────────────────────── Image Picker Popover (Videobeats) */
.vb-mini-img-btn {
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 3px 8px 3px 3px;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 180px;
}
.vb-mini-img-btn:hover { border-color: var(--cyan); }
.vb-mini-img-thumb {
  width: 22px; height: 22px;
  object-fit: cover;
  border-radius: 3px;
}
.vb-mini-img-none {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border-radius: 3px;
  font-size: 12px; color: var(--text-mute);
}

.ip-popover {
  position: absolute;
  z-index: 1000;
  background: #0e0e14;
  border: 1px solid var(--cyan-dim);
  border-radius: 8px;
  padding: 12px;
  width: 480px;
  max-width: 90vw;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,249,255,0.1);
  font-size: 12px;
}
.ip-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.ip-tab {
  background: transparent; color: var(--text-mute);
  border: 0; padding: 6px 10px;
  cursor: pointer; font-size: 11px;
  border-bottom: 2px solid transparent;
}
.ip-tab:hover { color: var(--text); }
.ip-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); font-weight: 600; }
.ip-content { min-height: 200px; }
.ip-meta { color: var(--text-mute); font-size: 11px; margin-bottom: 8px; }
.ip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
}
.ip-grid-scroll { max-height: 380px; overflow-y: auto; }
.ip-tile {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.1s, transform 0.1s;
}
.ip-tile:hover { border-color: var(--cyan); transform: translateY(-1px); }
.ip-tile img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: #000; }
.ip-tile-label {
  padding: 3px 6px; font-size: 10px;
  color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ip-sub-sel {
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 5px 8px; font-size: 11px;
  margin-right: 6px;
}
.ip-reddit-controls {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ip-topic-input {
  flex: 1;
  min-width: 180px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 12px;
  font-family: inherit;
}
.ip-topic-input:focus { border-color: var(--cyan); outline: none; }
.ip-topic-input::placeholder { color: var(--text-mute); font-style: italic; }

/* ──────────────────────────── Image Frame Editor */
.vb-img-gear {
  background: var(--bg-input); color: var(--text-mute);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 3px 7px; font-size: 11px;
  cursor: pointer;
  margin-left: 2px;
}
.vb-img-gear:hover { color: var(--cyan); border-color: var(--cyan); }

.fe-modal {
  position: fixed; inset: 0;
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
}
.fe-modal[hidden],
.cp-popover[hidden],
.ip-popover[hidden] { display: none !important; }
.fe-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
}
.fe-dialog {
  position: relative;
  background: #0e0e14;
  border: 1px solid var(--cyan-dim);
  border-radius: 10px;
  padding: 16px;
  width: 640px; max-width: 95vw; max-height: 92vh;
  box-shadow: 0 18px 60px rgba(0,0,0,0.9), 0 0 0 1px rgba(0,249,255,0.15);
  display: flex; flex-direction: column;
}
.fe-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.fe-body {
  display: grid; grid-template-columns: 290px 1fr;
  gap: 16px;
  overflow: auto;
}
.fe-preview-wrap { display: flex; flex-direction: column; gap: 6px; align-items: center; }
#feCanvas {
  width: 270px; height: 480px;
  background: #000;
  border: 2px solid var(--border);
  border-radius: 4px;
  cursor: grab;
  user-select: none;
}
#feCanvas:active { cursor: grabbing; }
.fe-hint {
  color: var(--text-mute); font-size: 10px;
  font-family: ui-monospace, monospace;
}
.fe-controls {
  display: flex; flex-direction: column; gap: 12px;
}
.fe-slider { display: flex; flex-direction: column; gap: 3px; }
.fe-slider > span {
  display: flex; justify-content: space-between;
  color: var(--text-mute);
  font-size: 11px;
}
.fe-slider output {
  color: var(--cyan);
  font-family: ui-monospace, monospace;
}
.fe-slider input[type=range] {
  width: 100%;
  accent-color: var(--cyan);
}
.fe-fit-row { display: flex; gap: 10px; font-size: 11px; color: var(--text-mute); align-items: center; }
.fe-fit-row label { display: flex; align-items: center; gap: 4px; }
.fe-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Videobeats v3 — Layer stack + opacity */
.vb-track {
  grid-template-columns: 480px 1fr !important;
}
.vb-layer-stack {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 0;
  flex: 0 0 28px;
  margin-right: 4px;
}
.vb-layer-btn {
  background: transparent;
  color: var(--text-mute);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0;
  width: 22px; height: 14px;
  font-size: 9px;
  cursor: pointer;
  line-height: 1;
}
.vb-layer-btn:hover:not(:disabled) { color: var(--cyan); border-color: var(--cyan); }
.vb-layer-btn:disabled { opacity: 0.25; cursor: default; }
.vb-layer-idx {
  font-size: 10px;
  color: var(--text-mute);
  font-family: ui-monospace, monospace;
  line-height: 1.2;
  padding: 1px 0;
  cursor: help;
}

.vb-opacity {
  display: flex; align-items: center; gap: 4px;
  flex: 0 0 110px;
  margin-left: 4px;
}
.vb-op-label {
  color: var(--text-mute);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  min-width: 10px;
}
.vb-op-slider {
  flex: 1;
  height: 4px;
  accent-color: var(--cyan);
}
.vb-op-readout {
  color: var(--cyan);
  font-family: ui-monospace, monospace;
  font-size: 10px;
  min-width: 22px;
  text-align: right;
}

/* Frame Editor: Chromakey section */
.fe-chroma {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 6px;
}
.fe-chroma legend {
  color: var(--text-mute);
  font-size: 10px;
  padding: 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fe-chroma-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.fe-chroma-row input[type=color] {
  width: 32px; height: 26px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px;
  cursor: pointer;
}

/* Sample picker + drum dropdown */
.vb-add-label { color: var(--text-mute); font-size: 11px; margin-right: 4px; }
.vb-add-sel {
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 5px 8px; font-size: 12px;
}

.sp-list { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
.sp-item {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 8px;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
}
.sp-preview {
  background: var(--cyan); color: var(--bg);
  border: 0; border-radius: 3px;
  width: 28px; height: 24px;
  cursor: pointer; font-size: 11px;
}
.sp-preview:hover { filter: brightness(1.2); }
.sp-label { font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-meta { color: var(--text-mute); font-size: 10px; font-family: ui-monospace, monospace; }
.sp-pick {
  background: transparent; color: var(--cyan);
  border: 1px solid var(--cyan-dim); border-radius: 3px;
  padding: 4px 10px; cursor: pointer; font-size: 11px;
}
.sp-pick:hover { background: var(--cyan); color: var(--bg); }

/* Step velocity-bar (at bottom of each on-cell) */
.vb-step { position: relative; overflow: hidden; }
.vb-step-velbar {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
  z-index: 1;
  border-radius: 0 0 2px 2px;
}
.vb-step.on .vb-step-velbar {
  background: rgba(255, 255, 255, 0.3);
}
.vb-step:hover::after {
  content: "↕";
  position: absolute;
  top: 1px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.4);
  font-size: 8px;
  pointer-events: none;
}

.vb-mini-preview {
  background: var(--cyan); color: var(--bg);
  border: 0; border-radius: 3px;
  padding: 3px 8px; font-size: 11px;
  cursor: pointer; font-weight: 600;
}
.vb-mini-preview:hover { filter: brightness(1.2); }

.vb-tip {
  color: var(--text-mute);
  font-size: 10px;
  font-family: ui-monospace, monospace;
  background: rgba(0,249,255,0.05);
  padding: 4px 8px;
  border-radius: 12px;
}

/* Export Modal */
.ex-body { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.ex-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
}
.ex-row label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-mute); }
.ex-row input, .ex-row select {
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 8px; font-size: 12px;
}
.ex-readouts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.ex-stat { display: flex; flex-direction: column; gap: 2px; }
.ex-stat-l { color: var(--text-mute); font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; }
.ex-stat b { color: var(--cyan); font-family: ui-monospace, monospace; font-size: 13px; }
.ex-progress-wrap { display: flex; flex-direction: column; gap: 6px; }
.ex-progress-bar {
  height: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.ex-progress-bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--yellow));
  width: 0%;
  transition: width 0.2s;
}
.ex-progress-label {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-mute);
}
.ex-hint {
  color: var(--text-mute);
  font-size: 11px;
  line-height: 1.5;
  background: rgba(255, 225, 74, 0.06);
  border-left: 3px solid var(--yellow);
  padding: 8px 12px;
  border-radius: 3px;
}

/* TTS Form */
.tts-form { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.tts-form > label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-mute); }
.tts-form input[type=text], .tts-form select, .tts-form input[type=number] {
  background: var(--bg-input); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 10px; font-size: 13px;
}
.tts-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px; }
.tts-row label { display: flex; flex-direction: column; gap: 3px; font-size: 10px; color: var(--text-mute); }

/* Step pitch badge (synth tracks, shift+drag) */
.vb-step-pitch {
  position: absolute;
  top: 1px; left: 2px;
  font-family: ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  color: var(--yellow);
  background: rgba(0,0,0,0.5);
  padding: 0 3px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
  line-height: 1.2;
}

/* ─────────────────────────────────────────────────────────────
   Track height-modes: minimal / normal / maxi
   Controlled via data-height-mode on .vb-tracks container.
   ───────────────────────────────────────────────────────────── */

/* Mode toggle button */
.vb-btn-mode {
  font-family: ui-monospace, monospace;
  text-transform: lowercase;
  letter-spacing: 0.05em;
}
.vb-btn-mode[data-mode="minimal"] { background: var(--bg-input); color: var(--text-mute); border-color: var(--border); }
.vb-btn-mode[data-mode="normal"]  { background: var(--cyan-dim); color: var(--cyan); }
.vb-btn-mode[data-mode="maxi"]    { background: var(--yellow); color: #0a0a0a; }

/* Drag handle — visible in all modes, only handle initiates row drag */
.vb-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: -2px;
  color: var(--text-mute);
  width: 16px;
  flex: 0 0 auto;
  line-height: 1;
}
.vb-drag-handle:hover { color: var(--cyan); }
.vb-drag-handle:active { cursor: grabbing; }

/* Color dot — accent color identifying the track type */
.vb-track-color {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}

/* Maxi-mode extra block (placeholder for automations) */
.vb-track-extra {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  margin-top: 4px;
  background: rgba(0, 249, 255, 0.04);
  border-left: 2px solid var(--cyan-dim);
  border-radius: 0 4px 4px 0;
  font-size: 11px;
}
.vb-extra-section {
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.vb-extra-label {
  color: var(--cyan);
  font-weight: 600;
  font-family: ui-monospace, monospace;
}
.vb-extra-hint {
  color: var(--text-mute);
  font-style: italic;
}

/* ─── MINIMAL mode ─── */
.vb-tracks[data-height-mode="minimal"] .vb-track {
  min-height: 26px;
  padding: 2px 6px;
}
.vb-tracks[data-height-mode="minimal"] .vb-track-head {
  gap: 6px;
  padding: 0;
  min-height: 22px;
  align-items: center;
}
.vb-tracks[data-height-mode="minimal"] .vb-layer-stack,
.vb-tracks[data-height-mode="minimal"] .vb-track-cfg,
.vb-tracks[data-height-mode="minimal"] .vb-opacity,
.vb-tracks[data-height-mode="minimal"] .vb-track-ctrls {
  display: none !important;
}
.vb-tracks[data-height-mode="minimal"] .vb-track-label {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
  flex: 0 0 auto;
}
.vb-tracks[data-height-mode="minimal"] .vb-step {
  height: 20px;
  min-height: 20px;
}
.vb-tracks[data-height-mode="minimal"] .vb-step-row {
  flex: 1;
}
.vb-tracks[data-height-mode="minimal"] .vb-track-extra {
  display: none;
}

/* ─── MAXI mode ─── */
.vb-tracks[data-height-mode="maxi"] .vb-track {
  padding: 8px 10px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.vb-tracks[data-height-mode="maxi"] .vb-track-head {
  margin-bottom: 6px;
}
.vb-tracks[data-height-mode="maxi"] .vb-step {
  height: 44px;
}

/* ─── Drag-and-drop visuals ─── */
.vb-track.vb-dragging {
  opacity: 0.4;
}
.vb-track.vb-drag-over-top {
  box-shadow: 0 -2px 0 0 var(--cyan) inset, 0 -2px 8px 0 var(--cyan);
}
.vb-track.vb-drag-over-bottom {
  box-shadow: 0 2px 0 0 var(--cyan) inset, 0 2px 8px 0 var(--cyan);
}

/* ─────────────────────────────────────────────────────────────
   MaxiCap track — word-streamer + per-step transitions
   ───────────────────────────────────────────────────────────── */
.vb-mc-cfg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.vb-mc-textarea {
  width: 100%;
  min-height: 38px;
  resize: vertical;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.3;
}
.vb-mc-textarea:focus { border-color: var(--yellow); outline: none; }
.vb-mc-row {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.vb-mc-readout {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 10px;
  color: var(--text-mute);
  font-family: ui-monospace, monospace;
}
.vb-mc-readout b { color: var(--yellow); font-weight: 700; }
.vb-mc-loops { color: var(--cyan); }
.vb-mc-loops b { color: var(--yellow); }
.vb-mc-tip {
  color: var(--text-mute);
  font-style: italic;
  margin-left: auto;
}
.vb-mc-swatches {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.vb-mc-swatch {
  display: inline-block;
  width: 16px; height: 16px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
  transition: transform 0.1s;
}
.vb-mc-swatch:hover { transform: scale(1.15); }
.vb-mc-addcolor {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-mute);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
}
.vb-mc-addcolor:hover { color: var(--cyan); border-color: var(--cyan); }
.vb-mini-sep { color: var(--text-mute); padding: 0 2px; }

/* Per-step transition indicator (right-side overlay) */
.vb-step-trans {
  position: absolute;
  top: 1px; right: 2px;
  font-family: ui-monospace, monospace;
  font-size: 9px;
  font-weight: 700;
  color: var(--yellow);
  background: rgba(0,0,0,0.55);
  padding: 0 3px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
  line-height: 1.3;
}

/* ─────────────────────────────────────────────────────────────
   MaxiMeme — bin of up to 16 images, picker stays open
   ───────────────────────────────────────────────────────────── */
.vb-mm-bin {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  padding: 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  min-height: 56px;
}
.vb-mm-tile {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  flex: 0 0 auto;
  transition: transform 0.1s;
}
.vb-mm-tile:hover { transform: scale(1.08); border-color: #eb5757; }
.vb-mm-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.vb-mm-miss {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: var(--text-mute);
  font-size: 20px;
}
.vb-mm-tile-x {
  position: absolute;
  top: 1px; right: 1px;
  width: 14px; height: 14px;
  background: rgba(0,0,0,0.7);
  color: var(--text-mute);
  border-radius: 50%;
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  font-weight: bold;
  opacity: 0;
  transition: opacity 0.12s;
}
.vb-mm-tile:hover .vb-mm-tile-x { opacity: 1; color: #ff5555; }
.vb-mm-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 10px;
  background: linear-gradient(135deg, #ff8c00, #d4730f);
  color: #0a0a0a;
  font-weight: 700;
  font-size: 12px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  flex: 0 0 auto;
  font-family: ui-monospace, monospace;
}
.vb-mm-add:hover:not(:disabled) { filter: brightness(1.15); }
.vb-mm-add:disabled { opacity: 0.4; cursor: not-allowed; }
.vb-mm-empty {
  color: var(--text-mute);
  font-size: 11px;
  font-style: italic;
  padding: 0 8px;
}

/* MaxiCap: alignment buttons + 9-position anchor grid + box-frame toggle */
.vb-mc-align-group {
  display: inline-flex;
  gap: 2px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px;
}
.vb-mc-align {
  background: transparent;
  border: 0;
  color: var(--text-mute);
  padding: 2px 6px;
  font-size: 14px;
  border-radius: 2px;
  cursor: pointer;
  line-height: 1;
}
.vb-mc-align:hover { color: var(--cyan); background: rgba(0, 249, 255, 0.08); }
.vb-mc-align.active { color: #0a0a0a; background: var(--yellow); }

.vb-mc-anchor {
  display: inline-grid;
  grid-template-columns: repeat(3, 18px);
  grid-template-rows: repeat(3, 18px);
  gap: 1px;
  padding: 2px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.vb-mc-anchor-cell {
  background: #1a1a1a;
  border: 0;
  color: var(--text-mute);
  font-size: 10px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  border-radius: 1px;
}
.vb-mc-anchor-cell:hover { color: var(--cyan); background: rgba(0, 249, 255, 0.12); }
.vb-mc-anchor-cell.active { color: #0a0a0a; background: var(--yellow); font-weight: 700; }

.vb-mc-frametoggle {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-mute);
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  font-family: ui-monospace, monospace;
}
.vb-mc-frametoggle:hover { color: var(--cyan); border-color: var(--cyan-dim); }
.vb-mc-frametoggle.on {
  color: #0a0a0a;
  background: var(--yellow);
  border-color: var(--yellow);
}

/* MaxiMosaic fill-order preview grid */
.vb-mosaic-preview {
  display: grid;
  gap: 1px;
  width: 90px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 3px;
  flex: 0 0 auto;
}
.vb-mosaic-cell {
  background: #1a1a1a;
  color: var(--cyan);
  font-family: ui-monospace, monospace;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}
.vb-mosaic-cell:first-child { color: var(--yellow); font-weight: 700; }

/* Chromakey toggle button (MaxiMeme + MaxiMosaic) */
.vb-mm-key {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vb-mm-keytoggle {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-mute);
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 10px;
  font-family: ui-monospace, monospace;
}
.vb-mm-keytoggle:hover { color: var(--cyan); border-color: var(--cyan-dim); }
.vb-mm-keytoggle.on {
  color: #0a0a0a;
  background: var(--cyan);
  border-color: var(--cyan);
  font-weight: 700;
}

/* Hint when image picker is open in bin-mode */
.ip-popover.ip-mode-bin {
  border-color: #ff8c00;
  box-shadow: 0 0 0 1px #ff8c00, 0 12px 32px rgba(0,0,0,0.7);
}
.ip-popover.ip-mode-bin .cp-title { color: #ff8c00; }

/* ─────────────────────────────────────────────────────────────
   LFO badge — click cycles slider modulation rate
   ───────────────────────────────────────────────────────────── */
.vb-lfo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 3px;
  padding: 0 5px;
  min-width: 18px;
  height: 18px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-mute);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  line-height: 1;
  letter-spacing: -0.5px;
  transition: all 0.1s;
}
.vb-lfo:hover {
  color: var(--cyan);
  border-color: var(--cyan-dim);
}
.vb-lfo.on {
  color: #0a0a0a;
  background: var(--yellow);
  border-color: var(--yellow);
  animation: vb-lfo-pulse 1.2s ease-in-out infinite;
}
.vb-lfo.on:hover {
  background: #fff080;
}
/* Beats-mode LFOs render in cyan to visually distinguish from free-running Hz */
.vb-lfo.on.beats {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #0a0a0a;
  animation: vb-lfo-pulse-cyan 1.2s ease-in-out infinite;
}
.vb-lfo.on.beats:hover { background: #5af8ff; }
@keyframes vb-lfo-pulse-cyan {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,249,255,0.7); }
  50% { box-shadow: 0 0 0 4px rgba(0,249,255,0); }
}
@keyframes vb-lfo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,225,74,0.7); }
  50% { box-shadow: 0 0 0 4px rgba(255,225,74,0); }
}

/* ───────────── Modal / Confirm / Alert ───────────── */
/* Replaces native browser alert/confirm popups with smooth dark modals.
   Auto-fades in/out (~180ms), centered, with backdrop blur. */
.vb-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
}
.vb-modal-backdrop.vb-modal-show {
  opacity: 1;
  pointer-events: auto;
}
.vb-modal {
  background: linear-gradient(180deg, #1a1a1a 0%, #0c0c0c 100%);
  border: 1px solid rgba(0, 249, 255, 0.32);
  border-radius: 10px;
  padding: 26px 30px 22px;
  min-width: 320px;
  max-width: 520px;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.75),
    0 0 32px rgba(0, 249, 255, 0.10);
  transform: scale(0.96) translateY(6px);
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
  font-family: Inter, system-ui, sans-serif;
}
.vb-modal-backdrop.vb-modal-show .vb-modal {
  transform: scale(1) translateY(0);
}
.vb-modal-body {
  color: #f0f0f0;
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 22px;
  word-wrap: break-word;
}
.vb-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.vb-modal-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #c8c8c8;
  padding: 9px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all 140ms ease-out;
  outline: none;
  font-family: inherit;
}
.vb-modal-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}
.vb-modal-confirm {
  background: var(--cyan);
  color: #0a0a0a;
  border-color: transparent;
}
.vb-modal-confirm:hover {
  background: #5afaff;
  color: #0a0a0a;
  box-shadow: 0 0 20px rgba(0, 249, 255, 0.32);
  border-color: transparent;
}
.vb-modal-confirm:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
/* Danger variant for destructive actions (delete pattern, remove track) */
.vb-modal-confirm.vb-modal-danger {
  background: #ff5151;
  color: #fff;
}
.vb-modal-confirm.vb-modal-danger:hover {
  background: #ff7575;
  box-shadow: 0 0 20px rgba(255, 81, 81, 0.4);
}