:root {
  --bg: #0e0613;
  --bg-2: #16091e;
  --panel: #1a0e23;
  --panel-2: #221031;
  --line: #2a1638;
  --text: #f3e7ff;
  --muted: #a387b6;
  --accent: #ff3ea5;
  --accent-2: #c7259f;
  --good: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: radial-gradient(ellipse at 15% -10%, #2a0d3a 0%, var(--bg) 55%);
  color: var(--text);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(14, 6, 19, 0.7);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.brand .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.badge {
  font-size: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 1px;
}

/* === Top-bar pinned items + tab strip === */
.topbar { gap: 14px; }
.topbar-tabs {
  display: flex; align-items: center; gap: 6px;
  flex: 1; min-width: 0; /* allow tab strip to shrink */
}
.tb-btn {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 12px;
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.tb-btn:hover { border-color: var(--accent); }

/* Shift tracker — green-tinted when clocked in so the operator can see at
   a glance whether the counter is live. Bold the number so it reads as
   a metric, not a label. */
#shift-btn.clocked-in {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.5);
  color: var(--text);
  font-weight: 600;
}
#shift-btn.clocked-in:hover {
  background: rgba(74, 222, 128, 0.25);
  border-color: rgba(74, 222, 128, 0.7);
}
.tb-dropdown { position: relative; }
.tb-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 280px; max-height: 60vh; overflow-y: auto;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4); padding: 6px; z-index: 100;
}
.tb-dropdown.open .tb-menu { display: block; }
.tb-menu .menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 6px; cursor: pointer;
}
.tb-menu .menu-item:hover { background: var(--panel); }
.tb-menu .menu-item img { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; }
.tb-menu .menu-item .mi-label { font-size: 13px; color: var(--text); }
.tb-menu .menu-item .mi-sub { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.tb-menu .menu-item .project-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 2px 7px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.tb-menu .menu-item:hover .project-num { color: var(--text); }

/* Zernio status pill (scheduled / publishing / published / failed / deleted) */
.zernio-status {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-left: 6px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
}
.zernio-status.status-published { background: rgba(74, 222, 128, 0.18); color: var(--good); border-color: rgba(74, 222, 128, 0.3); }
.zernio-status.status-publishing { background: rgba(251, 191, 36, 0.18); color: var(--warn); border-color: rgba(251, 191, 36, 0.3); }
.zernio-status.status-scheduled { background: rgba(255, 62, 165, 0.12); color: var(--accent); border-color: rgba(255, 62, 165, 0.3); }
.zernio-status.status-failed { background: rgba(248, 113, 113, 0.18); color: var(--bad); border-color: rgba(248, 113, 113, 0.3); }
.zernio-status.status-deleted { background: var(--panel-2); color: var(--muted); border-color: var(--line); }
.zernio-status.status-unknown { background: var(--panel-2); color: var(--muted); border-color: var(--line); }
.zernio-status.status-suspect {
  background: rgba(248, 113, 113, 0.25);
  color: var(--bad);
  border-color: rgba(248, 113, 113, 0.6);
  font-weight: 800;
  animation: suspect-pulse 1.4s ease-in-out infinite;
}
@keyframes suspect-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
  50% { box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.18); }
}

/* AI-suggested candidate highlight — thick green border + glow + a clear
   "AI PICK" banner across the bottom of the tile. Loud on purpose so the
   operator can see it at a glance without hovering. The badge moved to
   bottom-left so it doesn't collide with the fullscreen button (top-right). */
.tile.ai-pick {
  outline: 3px solid var(--good);
  outline-offset: -3px;
  box-shadow: 0 0 0 2px rgba(46, 213, 115, 0.25), 0 0 22px rgba(46, 213, 115, 0.45);
}
.tile .ai-pick-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent, rgba(46, 213, 115, 0.92) 30%);
  color: #0e0613;
  padding: 16px 8px 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  z-index: 2;
  pointer-events: none;
}
.tile .ai-pick-badge::before { content: "✨ "; }
.tile.picked.ai-pick {
  /* User picked the AI's suggestion — combine pink (picked) + green glow */
  outline: 3px solid var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 62, 165, 0.25), 0 0 22px rgba(46, 213, 115, 0.55);
}
.tile.picked.ai-pick .ai-pick-badge {
  background: linear-gradient(180deg, transparent, rgba(255, 62, 165, 0.92) 30%);
  color: #fff;
}

/* Image-generation progress (NBP / wan 2.7) — renders into the grid placeholder */
.gen-progress {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}
.gen-progress-text { text-align: center; font-variant-numeric: tabular-nums; }
.gen-progress-bar {
  width: min(80%, 320px);
  height: 6px;
  background: var(--panel);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.gen-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.4s ease;
}
.gen-progress-dots {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: min(80%, 320px);
}
.gen-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.gen-dot.state-pending { background: var(--panel); border-color: var(--line); }
.gen-dot.state-running {
  background: var(--warn);
  border-color: var(--warn);
  animation: gen-pulse 1.2s ease-in-out infinite;
}
.gen-dot.state-done { background: var(--good); border-color: var(--good); }
.gen-dot.state-failed { background: var(--bad); border-color: var(--bad); }
@keyframes gen-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* Pod-output picker (import latest from pod) */
.pod-pick-prompt {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--bg-2);
}
.pod-pick-prompt.match {
  border-color: rgba(74, 222, 128, 0.45);
  background: rgba(74, 222, 128, 0.06);
}
.pod-pick-prompt .pp-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--muted); margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.pod-pick-prompt .pp-head .pp-tag {
  background: var(--panel); border: 1px solid var(--line);
  padding: 2px 7px; border-radius: 4px; color: var(--text);
}
.pod-pick-prompt .pp-head .pp-match {
  background: rgba(74, 222, 128, 0.18);
  color: var(--good);
  border: 1px solid rgba(74, 222, 128, 0.3);
  padding: 2px 7px; border-radius: 4px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px; font-size: 9px;
}
.pod-pick-files { display: flex; flex-direction: column; gap: 6px; }
.pod-pick-file {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); cursor: pointer;
}
.pod-pick-file:hover { border-color: var(--accent); background: var(--panel-2); }
.pod-pick-file .pf-name { flex: 1; font-size: 12px; font-variant-numeric: tabular-nums; }
.pod-pick-file .pf-node { font-size: 10px; color: var(--muted); }
.pod-pick-file video {
  width: 90px; height: 60px; object-fit: cover; border-radius: 4px;
  background: #000;
}
.step-pill {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
}
.step-pill.step-7 { background: rgba(74,222,128,0.18); color: var(--good); border-color: rgba(74,222,128,0.3); }
.step-pill.step-6 { background: rgba(199,37,159,0.18); color: var(--accent); border-color: rgba(199,37,159,0.3); }
.step-pill.step-5, .step-pill.step-4 { background: rgba(251,191,36,0.18); color: var(--warn); border-color: rgba(251,191,36,0.3); }
.step-pill.step-3, .step-pill.step-2 { background: rgba(255,62,165,0.12); color: var(--accent); border-color: rgba(255,62,165,0.2); }
.step-pill.step-1 { background: var(--panel-2); color: var(--muted); }
.tb-menu .menu-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 12px; }

.tab-strip {
  display: flex; align-items: center; gap: 4px;
  flex: 1; min-width: 0; overflow-x: auto;
  scrollbar-width: thin;
}
/* Tab strip moved to the left-edge open-tabs sidebar; this element
   is now hidden but kept in the DOM for legacy renderTabStrip calls. */
.tab-strip.hidden { display: none; }
.tab-strip::-webkit-scrollbar { height: 6px; }
.tab-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px 5px 10px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 12px; cursor: pointer; white-space: nowrap;
  max-width: 200px;
}
.tab.active {
  background: linear-gradient(135deg, rgba(255,62,165,0.18), rgba(199,37,159,0.06));
  border-color: var(--accent);
}
.tab .tab-label { overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.tab .tab-x {
  background: transparent; border: 0; color: var(--muted);
  font-size: 14px; line-height: 1; padding: 0 2px; cursor: pointer; border-radius: 3px;
}
.tab .tab-x:hover { color: var(--bad); background: rgba(248,113,113,0.18); }

/* Quick Topaz overlay modal */
.qt-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 80px;
}
.qt-overlay.hidden { display: none; }
.qt-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; min-width: 460px; max-width: 600px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.qt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-weight: 600; }

/* Quick Topaz indeterminate progress bar */
.qt-progress { margin-top: 12px; }
.qt-progress.hidden { display: none; }
.qt-progress-bar {
  position: relative; height: 8px; border-radius: 4px;
  background: var(--panel-2); overflow: hidden;
}
.qt-progress-bar::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent) 30%,
    var(--accent-2) 60%,
    transparent 100%);
  animation: qt-slide 1.4s ease-in-out infinite;
  width: 50%;
}
@keyframes qt-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
.qt-progress.done .qt-progress-bar::before {
  animation: none; transform: none; width: 100%;
  background: var(--good);
}
.qt-progress-label {
  margin-top: 6px; font-size: 11px; color: var(--muted); text-align: center;
}

/* Output overlay layout: left = video, right = schedule panel (slides in) */
.oo-panel { min-width: 520px; max-width: 720px; transition: max-width .2s ease; }
.oo-panel.with-schedule { max-width: 1140px; }
.oo-flex { display: flex; gap: 16px; align-items: stretch; }
.oo-left { flex: 1; min-width: 0; }
.oo-left video { width: 100%; max-height: 60vh; border-radius: 8px; background: #000; }
.oo-right {
  width: 380px; flex-shrink: 0;
  border-left: 1px solid var(--line);
  padding-left: 16px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: 70vh; overflow-y: auto;
}
.oo-right.hidden { display: none; }
.oo-right-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px;
  margin-bottom: 4px;
}
.btn.mini { padding: 2px 8px; font-size: 11px; }
.oo-right textarea, .oo-right input[type="datetime-local"], .oo-right select {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 12px;
  color-scheme: dark; width: 100%;
}
.oo-right .field span { font-size: 11px; color: var(--muted); }

.topbar-right { display: flex; gap: 8px; align-items: center; }
.topbar-right .btn { padding: 6px 10px; font-size: 12px; }
.topbar-right .btn.hidden { display: none; }
.pill {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.pill.ok { color: var(--good); border-color: rgba(74, 222, 128, 0.3); }
.pill.bad { color: var(--bad); border-color: rgba(248, 113, 113, 0.3); }

.layout {
  display: block;
  padding: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Quiet auto-picker pill — operator doesn't want a loud indicator that
   credits are out. Smaller, muted, no colored variants override. */
.pill.auto-picker-pill {
  font-size: 10px;
  padding: 2px 8px;
  opacity: 0.55;
  color: var(--muted);
  border-color: var(--line);
  background: transparent;
  cursor: pointer;
  transition: opacity 0.15s;
}
.pill.auto-picker-pill:hover { opacity: 1; }

/* Open-projects sidebar — fixed to the left edge so it lives in the empty
   margin space outside the centered .layout column. Auto-hides when there
   are no open tabs (.empty class). On narrow viewports (<1400px the column
   sits closer to the edge), the sidebar gets a translucent backdrop so it
   still reads as separate from the main content. */
.open-tabs-sidebar {
  position: fixed;
  top: 56px; /* sits below the topbar */
  left: 12px;
  width: 230px;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  background: rgba(15, 15, 20, 0.55);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  z-index: 50;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.open-tabs-sidebar.empty { display: none; }
.open-tabs-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  padding: 2px 4px 4px;
  border-bottom: 1px solid var(--line);
}
.open-tabs-list { display: flex; flex-direction: column; gap: 6px; }
.open-tab-item {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  transition: background 0.1s, border-color 0.1s;
  position: relative;
}
.open-tab-item:hover { background: rgba(255, 255, 255, 0.06); }
.open-tab-item.active {
  background: rgba(255, 62, 165, 0.12);
  border-color: rgba(255, 62, 165, 0.4);
}

/* === Attention states for open-projects sidebar tiles ===
   - state-needs-attention: human decision required → gentle glow pulse.
     Per-step color comes from the .step-N modifier sitting on the same
     element (each step's CSS custom property --tab-glow sets the hue).
   - state-ready-to-post: special case of needs-attention — money step,
     overrides per-step color with a louder green pulse.
   - state-working: autonomous run in progress → steady amber tint, no
     animation. Tells the operator "this is cooking, leave it alone."
   - state-done: posted to Zernio → default styling, nothing to do.
   Animation is intentionally slow (2.4s cycle) — the operator catches it
   with peripheral vision but it doesn't get distracting on a screen with
   10 open projects. */
@keyframes tab-attention-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--tab-glow, rgba(255, 62, 165, 0)); border-color: var(--tab-glow-border, transparent); }
  50%      { box-shadow: 0 0 14px 2px var(--tab-glow, rgba(255, 62, 165, 0.55)); border-color: var(--tab-glow-border, rgba(255, 62, 165, 0.65)); }
}
.open-tab-item.state-needs-attention {
  /* fallback color if no step-N modifier matched; gets overridden below */
  --tab-glow: rgba(255, 62, 165, 0.45);
  --tab-glow-border: rgba(255, 62, 165, 0.6);
  animation: tab-attention-pulse 2.4s ease-in-out infinite;
}
/* Per-step glow colors mirror the existing .step-pill.step-N palette so the
   visual association the operator already has carries over. */
.open-tab-item.state-needs-attention.step-2 { --tab-glow: rgba(255, 165, 0, 0.45); --tab-glow-border: rgba(255, 165, 0, 0.65); }   /* orange — pick NBP */
.open-tab-item.state-needs-attention.step-3 { --tab-glow: rgba(168, 85, 247, 0.5); --tab-glow-border: rgba(168, 85, 247, 0.7); }   /* purple — pick wan 2.7 */
.open-tab-item.state-needs-attention.step-4 { --tab-glow: rgba(56, 189, 248, 0.5); --tab-glow-border: rgba(56, 189, 248, 0.7); }   /* cyan — pick motion engine */
.open-tab-item.state-needs-attention.step-6 { --tab-glow: rgba(251, 191, 36, 0.55); --tab-glow-border: rgba(251, 191, 36, 0.75); } /* amber — click run topaz */
/* Ready-to-post is the money step — loud green, overrides per-step coloring. */
.open-tab-item.state-ready-to-post {
  --tab-glow: rgba(74, 222, 128, 0.65);
  --tab-glow-border: rgba(74, 222, 128, 0.85);
  animation: tab-attention-pulse 1.6s ease-in-out infinite;
}
/* Working state — autonomous, steady soft amber border, no pulse. */
.open-tab-item.state-working {
  border-color: rgba(251, 191, 36, 0.25);
  background: rgba(251, 191, 36, 0.04);
}
/* Done state — no special styling; let default + .active rules apply. */
.open-tab-item.state-done { /* intentionally empty */ }
.open-tab-item img,
.open-tab-item .open-tab-thumb-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  background: #222;
}
.open-tab-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.open-tab-label {
  font-size: 12px;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.open-tab-handle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.open-tab-num {
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.open-tab-step {
  font-size: 10px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.open-tab-close {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: none;
}
.open-tab-item:hover .open-tab-close,
.open-tab-item.active .open-tab-close { display: block; }
.open-tab-close:hover {
  background: rgba(248, 113, 113, 0.6);
  color: white;
}
@media (max-width: 1400px) {
  /* on narrower screens the sidebar would overlap the centered .layout —
     drop the fixed position and let it just be hidden; operators use
     desktops, but mobile/small windows shouldn't render a broken overlay. */
  .open-tabs-sidebar { display: none; }
}
.content { display: flex; flex-direction: column; gap: 16px; }
/* tiny visual touches for engine pills inside outputs dropdown */
.tb-menu .engine {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase;
}
.tb-menu .engine.kling { background: rgba(251,191,36,0.18); color: var(--warn); }
.tb-menu .engine.wan { background: rgba(74,222,128,0.18); color: var(--good); }
.tb-menu .engine.quick { background: rgba(255,62,165,0.18); color: var(--accent); }
/* topaz history collapsed dropdown */
.side-card.collapsed { padding: 10px 14px; }
.side-card.collapsed summary {
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 0;
}
.side-card.collapsed summary::after { content: " ▾"; opacity: 0.6; }
.side-card.collapsed[open] summary::after { content: " ▴"; }
.side-card.collapsed[open] { padding-bottom: 14px; }

.content { display: flex; flex-direction: column; gap: 16px; }
.sidebar { display: flex; flex-direction: column; gap: 16px; }

.card, .side-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
}
.card.hidden { display: none; }

.step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.step-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--accent);
  color: #18001a;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 0 16px rgba(255, 62, 165, 0.35);
}
.caption {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  max-width: 50%;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.field span {
  font-size: 12px;
  color: var(--muted);
  text-transform: lowercase;
  letter-spacing: 0.2px;
}
.field input {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  width: 100%;
}
.field input:focus { outline: none; border-color: var(--accent); }

.actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; }

.btn {
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.04s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { background: var(--panel-2); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none;
  color: #170018;
  box-shadow: 0 6px 24px -8px var(--accent);
}
.btn.ghost { background: transparent; border-color: var(--line); color: var(--muted); }
.btn.ghost.toggled {
  background: rgba(255, 62, 165, 0.12);
  border-color: var(--accent);
  color: var(--text);
}

/* Segmented engine selector for step 6.5 + step 7 */
.engine-toggle {
  display: inline-flex;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-2);
}
.engine-toggle .engine-btn {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  color: var(--muted);
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.engine-toggle .engine-btn:first-child { border-left: 0; }
.engine-toggle .engine-btn:hover:not([disabled]) { background: var(--panel-2); color: var(--text); }
.engine-toggle .engine-btn.active {
  background: rgba(255, 62, 165, 0.18);
  color: var(--text);
}
.engine-toggle .engine-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.status {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  min-height: 16px;
}
.status.err { color: var(--bad); }
.status.ok { color: var(--good); }

.picker-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 700px) {
  .picker-row { grid-template-columns: 1fr; }
  .reference-pane { display: flex; gap: 10px; align-items: center; }
}

.reference-pane { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 80px; }
.ref-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--accent);
  font-weight: 600;
}
.ref-img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid var(--accent);
  background: black;
  box-shadow: 0 0 16px -4px rgba(255, 62, 165, 0.4);
}
@media (max-width: 700px) {
  .ref-img { width: 90px; height: auto; }
}

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

.tile {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--bg-2);
  cursor: pointer;
  aspect-ratio: 9 / 16;
  transition: border-color 0.15s ease, transform 0.04s ease;
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile:hover { border-color: var(--accent-2); }
.tile.picked { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255, 62, 165, 0.25); }
.tile .tag {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
}
.tile.picked .tag { background: var(--accent); color: #170018; }
.tile .checkbox {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: transparent;
}
.tile.picked .checkbox {
  background: var(--accent);
  border-color: var(--accent);
  color: #170018;
}
.tile.picked .checkbox::after { content: "✓"; font-weight: 900; }

/* AI pick reasoning line — sits right below the candidate grid so the
   operator sees what the auto-picker thought without hovering. */
.ai-pick-reasoning {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(124, 58, 237, 0.08);
  border-left: 3px solid var(--accent-2);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}
.ai-pick-tag {
  display: inline-block;
  background: var(--accent-2);
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
  margin-right: 6px;
  font-size: 11px;
}

/* Fullscreen button — tile top-right corner. Always visible (not hover-only)
   so it's discoverable even on touch devices, but with a low base opacity so
   it doesn't fight the image. Hover lights it up. The checkbox indicator is
   shifted left to make room. */
.tile .fullscreen-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  opacity: 0.7;
  transition: opacity 0.12s ease, background 0.12s ease, transform 0.06s ease;
  z-index: 2;
  padding: 0;
}
.tile .fullscreen-btn:hover { opacity: 1; background: rgba(0, 0, 0, 0.75); transform: scale(1.06); }
.tile .fullscreen-btn:active { transform: scale(0.94); }
.tile .fullscreen-btn svg { width: 14px; height: 14px; }
/* Shift checkbox left so it doesn't overlap the fullscreen button. */
.tile .checkbox { right: 38px; }

/* === Lightbox modal (fullscreen image viewer with prev/next navigation) === */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
#lightbox.hidden { display: none; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 0, 12, 0.92);
  backdrop-filter: blur(4px);
}
.lightbox-stage {
  position: relative;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.lightbox-stage figure { margin: 0; }
/* Default (non-compare) layout: main pane is display:contents so the <img>
   acts as a direct flex child of .lightbox-stage (preserves the original
   single-image lightbox layout for step 3 / phase7 / etc). The compare
   pane is fully hidden — including its <img>, which would otherwise
   render its alt text since it has no src outside compare mode. */
.lightbox-stage .lightbox-main-pane { display: contents; }
.lightbox-stage .lightbox-compare-pane { display: none; }
.lightbox-stage img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}
/* Compare mode (step 2 NBP grid only). #lightbox[data-compare="1"] flips
   the stage to a two-column layout: source frame left, candidate right. */
#lightbox[data-compare="1"] .lightbox-stage {
  gap: 16px;
  max-width: 96vw;
}
#lightbox[data-compare="1"] .lightbox-stage .lightbox-main-pane,
#lightbox[data-compare="1"] .lightbox-stage .lightbox-compare-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#lightbox[data-compare="1"] .lightbox-stage img {
  max-width: 46vw;
  max-height: 84vh;
}
#lightbox[data-compare="1"] figcaption {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  z-index: 2;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 62, 165, 0.18);
  border-color: rgba(255, 62, 165, 0.5);
}
.lightbox-close:active,
.lightbox-prev:active,
.lightbox-next:active { transform: scale(0.92); }
.lightbox-close {
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  font-size: 24px;
  line-height: 1;
  font-weight: 300;
}
.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  font-size: 36px;
  line-height: 1;
  font-weight: 300;
}
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-prev:active { transform: translateY(-50%) scale(0.92); }
.lightbox-next:active { transform: translateY(-50%) scale(0.92); }
.lightbox-caption {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 6px 14px;
  border-radius: 18px;
  font-size: 13px;
  letter-spacing: 0.5px;
}

/* === Pending tile (Higgsfield-style "loading rectangle" in the grid) ===
   Placeholder shown while a NBP / wan-2.7 candidate is generating. Same
   aspect ratio as a finished tile so the grid layout doesn't reflow when it
   flips to the real image. Per-slot mini progress bar fills based on
   elapsed time vs the model's typical duration. */
.tile.pending-tile {
  cursor: default;
  background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border-color: rgba(255, 62, 165, 0.18);
}
.tile.pending-tile:hover { border-color: rgba(255, 62, 165, 0.18); /* don't react to hover, it's not clickable */ }
.tile.pending-tile .tag { background: rgba(255, 62, 165, 0.65); color: #170018; }
/* Failed state — red border + dimmed icon so the operator sees AT A GLANCE
   that the AI gave up on this slot (and they should try a different video
   or different frame). */
.tile.pending-tile[data-state="failed"] {
  border-color: rgba(255, 80, 80, 0.55);
  background: linear-gradient(135deg, rgba(60, 0, 0, 0.4) 0%, var(--bg-1) 100%);
}
.tile.pending-tile[data-state="failed"] .pending-icon { animation: none; opacity: 0.35; color: rgba(255, 100, 100, 0.6); }
.tile.pending-tile[data-state="failed"] .pending-label { color: rgba(255, 130, 130, 0.95); font-weight: 600; }
.tile.pending-tile[data-state="failed"] .pending-fill { background: rgba(255, 80, 80, 0.4); animation: none; }
.pending-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  text-align: center;
  color: var(--muted);
}
.pending-icon {
  color: rgba(255, 62, 165, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pending-pulse 1.6s ease-in-out infinite;
}
@keyframes pending-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
.pending-label {
  font-size: 11px;
  letter-spacing: 0.3px;
  opacity: 0.85;
}
.pending-bar {
  width: 80%;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}
.pending-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 2px;
  transition: width 0.18s linear;
  /* Indeterminate shimmer overlay so the bar doesn't look stalled if the
     model takes longer than NBP_ETA_SEC. */
  background-size: 200% 100%;
  animation: pending-shimmer 1.4s linear infinite;
}
@keyframes pending-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === ComfyUI-style live progress bar (step 5 wan-animate) === */
.comfy-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}
.comfy-progress-text {
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.comfy-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.comfy-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 3px;
  transition: width 0.25s ease;
}
/* Indeterminate stripe shows while we're waiting for the first WS update
   ("queuing…" state). Slides forever so user sees something is happening. */
.comfy-progress-fill.comfy-indeterminate {
  width: 30% !important;
  animation: comfy-indeterminate 1.6s linear infinite;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
}
@keyframes comfy-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

.commit-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.commit-row .hint { font-size: 12px; color: var(--muted); margin-right: auto; }

.reframe-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}
.reframe-row input {
  width: 64px; padding: 6px; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 6px; text-align: center; font: inherit;
  font-variant-numeric: tabular-nums;
}
/* Hide native browser spinner — we provide our own ▲▼ buttons that auto-reframe. */
.reframe-row input::-webkit-outer-spin-button,
.reframe-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.reframe-row input[type=number] { -moz-appearance: textfield; }
/* Big chunky step buttons that are obvious targets, unlike the native spinner. */
.frame-step-btn {
  min-width: 30px; padding: 6px 8px !important; font-size: 14px !important;
  line-height: 1; font-weight: 700;
}
.frame-step-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.engines-row { display: flex; gap: 16px; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.engines-row label { display: flex; align-items: center; gap: 6px; }

.results-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) { .results-row { grid-template-columns: 1fr; } }
.result-col { display: flex; flex-direction: column; gap: 6px; }
.result-title { font-size: 12px; color: var(--muted); text-transform: lowercase; letter-spacing: 0.2px; }
.result-box {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  min-height: 80px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.result-box video { width: 100%; border-radius: 8px; background: black; }
.result-box.done { color: var(--good); }
.result-box.err { color: var(--bad); }

.side-card h3 { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.projects { display: flex; flex-direction: column; gap: 8px; max-height: 600px; overflow-y: auto; }
.project-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  font-size: 12px;
}
.project-item img { width: 38px; height: 38px; object-fit: cover; border-radius: 6px; flex-shrink: 0; background: black; }
.project-item .pid { font-weight: 700; color: var(--text); }
.project-item .pcap { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-item .pmark { margin-left: auto; font-size: 11px; padding: 2px 6px; border-radius: 4px; background: var(--panel-2); color: var(--muted); }
.project-item .pmark.done { background: rgba(74, 222, 128, 0.15); color: var(--good); }

.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}
.history-item {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}
.history-item:hover { border-color: var(--accent-2); }
.history-item .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  gap: 6px;
}
.history-item .row .pid { color: var(--text); font-weight: 700; }
.history-item .row .engine {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.4px;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--panel-2);
}
.history-item .row .engine.kling { color: #fbbf24; }
.history-item .row .engine.wan { color: #4ade80; }
.history-item video {
  width: 100%;
  aspect-ratio: 9/16;
  background: black;
  border-radius: 6px;
  object-fit: cover;
  display: none;
}
.history-item.expanded video { display: block; }
.project-item { cursor: pointer; transition: border-color 0.15s ease; }
.project-item:hover { border-color: var(--accent-2); }

/* Project detail panel */
.folder-section {
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.folder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--accent);
}
.folder-header .count { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.folder-body { padding: 12px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.file-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.file-card img, .file-card video { width: 100%; aspect-ratio: 9/16; object-fit: cover; background: black; display: block; }
.file-card .file-meta {
  padding: 6px 8px;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.file-card .file-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.file-card.video-card video { aspect-ratio: 9/16; }
.file-card.json-card { padding: 10px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--muted); white-space: pre-wrap; max-height: 280px; overflow: auto; aspect-ratio: unset; }
.file-card a { color: var(--accent); text-decoration: none; }
.file-card a:hover { text-decoration: underline; }

/* === Multi-project: new-project button + active highlight === */
.newproject-row { display: flex; align-items: center; gap: 12px; margin-bottom: -4px; }
.newproject-row .btn { padding: 8px 14px; font-size: 13px; }
.newproject-row .caption { color: var(--muted); font-size: 12px; }
.project-item.active {
  background: linear-gradient(135deg, rgba(255,62,165,0.18), rgba(199,37,159,0.06));
  border: 1px solid rgba(255,62,165,0.55);
}
.project-del {
  background: transparent; color: var(--muted); border: 0;
  font-size: 16px; line-height: 1; padding: 4px 6px; cursor: pointer;
  border-radius: 4px; opacity: 0.4; transition: opacity .15s, background .15s, color .15s;
}
.project-item:hover .project-del { opacity: 1; }
.project-del:hover { background: rgba(248,113,113,0.18); color: var(--bad); }
/* NBP-as-pick tile in the wan 2.7 grid (skip enlargement) */
.nbp-tile { border: 1px dashed var(--accent); position: relative; }
.nbp-tile .tag { background: var(--accent); color: #fff; font-weight: 600; }
.nbp-tile-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  color: #fff; font-size: 11px; padding: 14px 6px 6px; text-align: center;
  pointer-events: none; letter-spacing: 0.4px;
}

/* === Platform chips (Step 7) === */
.platform-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.platform-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--line); cursor: pointer;
  font: inherit; font-size: 12px;
  transition: border-color .15s, color .15s, background .15s, opacity .15s;
  opacity: 0.55;
}
.platform-chip:hover { opacity: 1; }
.platform-chip .chip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--panel); font-weight: 600; font-size: 10px;
  color: var(--text);
}
.platform-chip .chip-check { display: none; color: var(--good); font-weight: 700; }
.platform-chip.selected {
  opacity: 1; color: var(--text);
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(255,62,165,0.12), rgba(199,37,159,0.06));
}
.platform-chip.selected .chip-check { display: inline; }

/* === Quick Topaz mini card (lives in .left-utility) === */
.mini-card { padding: 10px 12px; opacity: 0.85; }
.mini-card:hover { opacity: 1; }
.mini-head {
  font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}

/* Quick Topaz drop zone — compact variant */
.drop-zone {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255,255,255,0.01);
  transition: border-color .15s, background .15s;
  cursor: default;
  font-size: 12px; color: var(--muted);
}
.drop-zone.dragging { border-color: var(--accent); background: rgba(255,62,165,0.06); color: var(--text); }
.drop-zone.mini .btn { padding: 3px 8px; font-size: 11px; }
.btn.mini { padding: 3px 8px; font-size: 11px; }
.status.mini { font-size: 11px; min-height: 0; padding: 2px 0; }
#topaz-direct-result { margin-top: 8px; }
#topaz-direct-result video { width: 100%; border-radius: 6px; background: #000; }

/* === Step 7 (Zernio post) === */
.phase7-row { display: grid; grid-template-columns: 220px 1fr 1fr; gap: 16px; align-items: start; }
.phase7-col { display: flex; flex-direction: column; gap: 10px; }
/* Step 7 card itself gets positioned so children can absolute-anchor to it. */
#phase7-card { position: relative; }

/* High-quality preview panel — absolutely positioned just outside the
   step 7 card's right edge so it sits in the empty right margin AND
   scrolls together with the card itself (instead of floating fixed at
   the top of the viewport, which made it visually disconnected from
   step 7 when scrolled). */
.phase7-hq-sidebar {
  position: absolute;
  top: 12px;
  left: calc(100% + 16px);
  width: 260px;
  background: rgba(15, 15, 20, 0.55);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  z-index: 50;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phase7-hq-sidebar.empty { display: none; }
.phase7-hq-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 4px 4px;
  border-bottom: 1px solid var(--line);
}
.phase7-hq-head > span:first-child {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent);
  font-weight: 600;
}
.phase7-hq-sub {
  font-size: 9px;
  color: var(--muted);
  opacity: 0.7;
}
.phase7-hq-sidebar video {
  width: 100%;
  max-height: 60vh;
  border-radius: 6px;
  background: #000;
}
@media (max-width: 1500px) {
  /* under 1500px the centered .layout starts crowding the right margin;
     hide the HQ panel so it doesn't overlap the main column. Operator can
     still download the HQ file via the ⬇ download button. */
  .phase7-hq-sidebar { display: none; }
}

/* === Step 7 day calendar === */
/* Extra calendars sidebar — mirror of .phase7-hq-sidebar but on the LEFT
   side of the step 7 card. Absolutely positioned outside the card's
   left edge so it floats in the empty margin without disturbing the
   centered .layout. Stacks one .phase7-cal-instance per extra Zernio
   profile (cap 2 to keep sidebar height manageable).
   #phase7-card already has position:relative for the HQ sidebar, so
   absolute positioning works against it for this aside too. */
.phase7-cal-extras-sidebar {
  position: absolute;
  top: 12px;
  right: calc(100% + 16px);
  width: 240px;
  background: rgba(15, 15, 20, 0.55);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  z-index: 50;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.phase7-cal-extras-sidebar.empty { display: none; }
.phase7-cal-instance {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  border-left: 3px solid transparent;
  padding-left: 8px;
}
.phase7-cal-instance-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phase7-cal-instance .cal-grid {
  min-width: 0;
  height: 672px;
}
/* Tint colors for extra calendars — left-border accent + inset shadow
   on the cal-block backgrounds so blocks are distinguishable from
   primary pink. */
.extra-tint-1 { border-left-color: rgba(56, 189, 248, 0.6); }   /* cyan */
.extra-tint-1 .cal-block { box-shadow: inset 3px 0 0 rgba(56, 189, 248, 0.6); }
.extra-tint-2 { border-left-color: rgba(168, 85, 247, 0.6); }   /* purple */
.extra-tint-2 .cal-block { box-shadow: inset 3px 0 0 rgba(168, 85, 247, 0.6); }
.extra-tint-3 { border-left-color: rgba(74, 222, 128, 0.6); }   /* green */
.extra-tint-3 .cal-block { box-shadow: inset 3px 0 0 rgba(74, 222, 128, 0.6); }
/* Below 1500px the centered .layout starts crowding the left margin;
   hide the extras sidebar so it doesn't overlap the main column.
   Operator can still see extra-profile scheduled posts in Zernio's
   own dashboard. */
@media (max-width: 1500px) {
  .phase7-cal-extras-sidebar { display: none; }
}

.phase7-cal-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  min-width: 0;
}
.cal-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
}
.cal-header .mini { padding: 2px 8px; font-size: 11px; }
.cal-header #cal-day-label {
  flex: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 4px;
}
.cal-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.cal-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--accent);
}
.cal-swatch.trial-manual { background: var(--warn); }
.cal-swatch.trial-auto { background: var(--good); }
/* Each hour row is 28px tall = 24 * 28 = 672px total grid height */
.cal-grid {
  position: relative;
  height: 672px;
  border-top: 1px solid var(--line);
  background: linear-gradient(to bottom, transparent calc(28px - 1px), var(--line) calc(28px - 1px), var(--line) 28px) 0 0 / 100% 28px;
  overflow: hidden;
}
.cal-hour {
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  display: flex;
  align-items: flex-start;
  padding-top: 1px;
  font-size: 9px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.cal-hour-label {
  width: 36px;
  padding-left: 4px;
  flex-shrink: 0;
}
.cal-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent);
  box-shadow: 0 0 4px var(--accent);
  z-index: 5;
  pointer-events: none;
}
.cal-now-line::before {
  content: "";
  position: absolute;
  left: 32px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.cal-block {
  position: absolute;
  left: 40px;
  right: 6px;
  background: rgba(255, 62, 165, 0.18);
  border: 1px solid var(--accent);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: transform 0.08s ease;
  font-variant-numeric: tabular-nums;
}
.cal-block:hover {
  transform: translateX(-1px);
  background: rgba(255, 62, 165, 0.28);
}
.cal-block.trial-manual {
  background: rgba(251, 191, 36, 0.18);
  border-color: var(--warn);
  border-left-color: var(--warn);
}
.cal-block.trial-manual:hover { background: rgba(251, 191, 36, 0.28); }
.cal-block.trial-auto {
  background: rgba(74, 222, 128, 0.16);
  border-color: var(--good);
  border-left-color: var(--good);
}
.cal-block.trial-auto:hover { background: rgba(74, 222, 128, 0.28); }

/* Half-and-half tint for any single Zernio post that posts to BOTH IG
   and TT in the same go. Left half = the IG color (pink for regular
   reels, yellow for trial-manual, green for trial-auto), right half =
   white for TT. Operator can tell at a glance whether a block is a
   cross-platform combo vs a separate single-platform post.
   `background` rule wins over the solid-color rules above because it
   targets `.cal-block.multi-ig-tt` directly. */
.cal-block.multi-ig-tt {
  /* Regular reel · IG+TT — pink half + white half */
  background: linear-gradient(
    to right,
    rgba(255, 62, 165, 0.20) 50%,
    rgba(255, 255, 255, 0.18) 50%
  );
}
.cal-block.multi-ig-tt:hover {
  background: linear-gradient(
    to right,
    rgba(255, 62, 165, 0.32) 50%,
    rgba(255, 255, 255, 0.28) 50%
  );
}
.cal-block.multi-ig-tt.trial-manual {
  /* Trial reel (manual) · IG+TT — yellow half + white half */
  background: linear-gradient(
    to right,
    rgba(251, 191, 36, 0.22) 50%,
    rgba(255, 255, 255, 0.18) 50%
  );
}
.cal-block.multi-ig-tt.trial-manual:hover {
  background: linear-gradient(
    to right,
    rgba(251, 191, 36, 0.32) 50%,
    rgba(255, 255, 255, 0.28) 50%
  );
}
.cal-block.multi-ig-tt.trial-auto {
  /* Trial reel (auto) · IG+TT — green half + white half */
  background: linear-gradient(
    to right,
    rgba(74, 222, 128, 0.20) 50%,
    rgba(255, 255, 255, 0.18) 50%
  );
}
.cal-block.multi-ig-tt.trial-auto:hover {
  background: linear-gradient(
    to right,
    rgba(74, 222, 128, 0.32) 50%,
    rgba(255, 255, 255, 0.28) 50%
  );
}
.cal-block.story {
  background: rgba(59, 130, 246, 0.20);
  border-color: #3b82f6;
  border-left-color: #3b82f6;
}
.cal-block.story:hover { background: rgba(59, 130, 246, 0.32); }
.cal-swatch.story { background: #3b82f6; }
.cal-block.published { opacity: 0.55; }
.cal-block.suspect {
  background: rgba(248, 113, 113, 0.22);
  border-color: var(--bad);
  border-left-color: var(--bad);
}
.cal-block-time { font-weight: 700; margin-right: 4px; }
.cal-block-id { color: var(--muted); margin-left: auto; }
.cal-empty {
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  padding: 14px;
}
.phase7-col textarea {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font: inherit; resize: vertical;
}
.phase7-col input[type="datetime-local"],
.phase7-col select,
.wan-pod-select {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font: inherit;
  color-scheme: dark;
  width: 100%;
  cursor: pointer;
}
.wan-pod-select:hover { border-color: var(--accent); }
.wan-pod-select:focus { outline: none; border-color: var(--accent); }
/* Option styling — works on most modern browsers when color-scheme:dark
   is set on the select. Firefox honors these explicitly. */
.wan-pod-select option {
  background: var(--panel-2);
  color: var(--text);
  padding: 6px;
}
#phase7-video { width: 100%; max-height: 360px; border-radius: 8px; background: #000; }
#phase7-thumb-grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) {
  .phase7-row { grid-template-columns: 1fr; }
  #phase7-thumb-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Step 6.5 trim controls */
#phase6_5-video { width: 100%; max-height: 360px; border-radius: 8px; background: #000; margin-top: 6px; }
.trim-scrubber { margin-top: 14px; user-select: none; }
.trim-track {
  position: relative; height: 22px;
  background: var(--panel-2); border-radius: 6px;
  cursor: pointer;
}
.trim-keep {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(255,62,165,0.35), rgba(199,37,159,0.18));
  border: 1px solid var(--accent);
  pointer-events: none;
  border-radius: 6px;
}
.trim-handle {
  position: absolute; top: -4px; bottom: -4px;
  width: 14px; margin-left: -7px;
  background: var(--accent);
  border: 2px solid #fff;
  border-radius: 4px;
  cursor: ew-resize;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  z-index: 2;
}
.trim-handle:hover { background: var(--accent-2); }
.trim-handle::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 2px; height: 12px; background: #fff; opacity: 0.8;
  transform: translate(-50%, -50%);
}
.trim-times {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px; font-size: 11px; color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.trim-times strong { color: var(--text); font-weight: 600; }
.trim-times-mid { color: var(--accent); }

.thumb-controls {
  display: flex; align-items: end; gap: 10px; margin-top: 6px;
}
.thumb-controls .field.tight { gap: 4px; }
.thumb-controls .field.tight span { font-size: 11px; color: var(--muted); }
.thumb-controls input[type="number"] {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 8px; font: inherit; width: 90px;
}
.thumb-controls .btn { padding: 7px 14px; font-size: 12px; align-self: end; }
.thumb-tile { position: relative; }
.thumb-time {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  color: #fff; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; padding: 14px 6px 5px; text-align: center;
  pointer-events: none;
}
.thumb-delta { color: var(--muted); }

/* Step 1 source-video frame scrubber — single-handle position picker (NOT
   the two-handle trim-style scrubber from step 6.5). Drag the handle across
   the timeline; wherever it lands is the chosen source frame. */
.frame-scrubber {
  user-select: none;
  -webkit-user-select: none;
}
.frame-scrubber-track {
  position: relative;
  height: 28px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  cursor: pointer;
}
.frame-scrubber-handle {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent, #818cf8);
  border: 2px solid #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  cursor: grab;
  z-index: 2;
}
.frame-scrubber-handle:active { cursor: grabbing; }
.frame-scrubber-times {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.frame-scrubber-times strong { color: var(--text); font-weight: 600; }

/* Wan-animate pod queue sidebar — pinned to the right of step 5's card so
   the operator can see "project 0068 running 47% · 0069 next · 0070 in
   queue" no matter which project they're currently viewing. Hidden when
   the queue is empty. */
#phase5-card { position: relative; }
.wan-queue-sidebar {
  position: absolute;
  top: 12px;
  left: calc(100% + 12px);
  width: 220px;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  font-size: 11px;
  color: var(--text);
}
.wan-queue-head {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.wan-queue-row {
  padding: 6px 8px;
  margin-bottom: 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid transparent;
}
.wan-queue-row.running { border-left-color: #22c55e; background: rgba(34, 197, 94, 0.07); }
.wan-queue-row.pending { border-left-color: #fbbf24; background: rgba(251, 191, 36, 0.05); }
.wan-queue-row.is-current {
  outline: 1px solid var(--accent, #818cf8);
  background: rgba(129, 140, 248, 0.12);
}
.wan-queue-label {
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.wan-queue-progress {
  margin-top: 4px;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.wan-queue-progress-fill {
  height: 100%;
  background: #22c55e;
  transition: width 0.4s ease;
}
.wan-queue-msg {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wan-queue-empty {
  font-size: 11px;
  color: var(--muted);
  padding: 6px 4px;
}
/* On narrow viewports — hide instead of overflowing/overlapping. */
@media (max-width: 1380px) {
  .wan-queue-sidebar { display: none; }
}

/* Per-tile cancel button — small ✕ in the top-right corner of pending NBP
   tiles. Lets the operator kill a single stuck generation (e.g. nano-banana-pro
   keeps failing the safety filter on attempt 7) without affecting siblings. */
.pending-cancel-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.pending-cancel-btn:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
  transform: scale(1.08);
}
.pending-tile { position: relative; }
/* Cancelled tile — desaturated tombstone, no animation, no actions. */
.pending-tile[data-state="cancelled"] {
  opacity: 0.55;
  background: rgba(255, 255, 255, 0.03);
}
.pending-tile[data-state="cancelled"] .pending-fill {
  background: #6b7280;
  width: 100% !important;
}
.pending-tile[data-state="cancelled"] .pending-icon { opacity: 0.3; }

/* Pods dropdown — pulsing border on the status banner while a pod is in a
   transitional state (STARTING / LOADING MODELS). Makes the operator's eye
   catch the change between renders. */
.pod-status-pulse {
  animation: pod-status-pulse 1.4s ease-in-out infinite;
}
@keyframes pod-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes pod-toast-in {
  0% { transform: translate(-50%, -20px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 1; }
}

/* === scroll panel — left-side swipe iframe ===
   Fixed to the left edge so it lives in the empty space next to the centered
   pipeline UI without pushing or blocking it. Upvotes inside the iframe
   postMessage to the parent which feeds Phase 1. */
.scroll-panel {
  position: fixed;
  top: 56px; /* sits below the topbar */
  left: 0;
  bottom: 0;
  width: clamp(440px, 48vw, 720px);
  background: var(--bg-2);
  border-right: 1px solid rgba(255, 62, 165, 0.22);
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 0.22s ease;
  z-index: 50;
}
.scroll-panel.hidden {
  transform: translateX(-105%);
  pointer-events: none;
}
.scroll-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 62, 165, 0.18);
  background: rgba(20, 9, 30, 0.7);
}
.scroll-panel-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
}
.scroll-panel-status {
  flex: 1 1 auto;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.scroll-panel-status.ok { color: #3dff8a; }
.scroll-panel-status.err { color: #ff4470; }
.scroll-panel-iframe {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: var(--bg);
}
.scroll-panel-error {
  position: absolute;
  inset: 56px 0 0 0;
  background: var(--bg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  text-align: center;
}
.scroll-panel-error.hidden { display: none; }
.scroll-panel-error code {
  display: block;
  background: rgba(0, 0, 0, 0.45);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 11px;
  word-break: break-all;
  color: #f5e9ff;
}
.scroll-panel-hint { font-size: 11px; color: rgba(255, 255, 255, 0.45); }
#tb-scroll.active {
  background: var(--accent);
  color: #1a0a1f;
  border-color: var(--accent);
}

/* === scroll analytics — right-side panel ===
   Mirror of .scroll-panel on the right. Toggles together with the left panel.
   Populated from postMessage events emitted by the embedded swipe iframe. */
.scroll-analytics {
  position: fixed;
  top: 56px;
  right: 0;
  bottom: 0;
  width: clamp(320px, 28vw, 420px);
  background: var(--bg-2);
  border-left: 1px solid rgba(255, 62, 165, 0.22);
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 0.22s ease;
  z-index: 50;
  overflow-y: auto;
  padding: 16px 18px;
}
.scroll-analytics.hidden {
  transform: translateX(105%);
  pointer-events: none;
}
.scroll-analytics-section { margin-bottom: 18px; }
.scroll-analytics-section h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
  margin: 0 0 10px;
  font-weight: 600;
}
.scroll-analytics-meta .row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 62, 165, 0.12);
  font-size: 13px;
  gap: 12px;
}
.scroll-analytics-meta .row .k { color: rgba(255,255,255,0.55); }
.scroll-analytics-meta .row .v {
  font-variant-numeric: tabular-nums;
  text-align: right;
  word-break: break-all;
}
.scroll-analytics-meta .row .v.big { color: #4ade80; font-weight: 600; }
.scroll-analytics-meta a { color: var(--accent); text-decoration: none; }
.scroll-analytics-meta a:hover { text-decoration: underline; }
.scroll-analytics-meta .desc {
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  margin-top: 8px;
  line-height: 1.4;
  word-break: break-word;
}
.scroll-analytics-meta .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.scroll-analytics-meta .tag {
  background: rgba(255, 62, 165, 0.1);
  border: 1px solid rgba(255, 62, 165, 0.22);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--accent);
}
.scroll-analytics-weights .row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 4px 0;
  color: rgba(255,255,255,0.55);
}
.scroll-analytics-weights .row .name { color: rgba(255,255,255,0.85); }
.scroll-analytics-weights .row .w {
  color: #4ade80;
  font-variant-numeric: tabular-nums;
}
.scroll-analytics-weights .sep { height: 8px; }
.scroll-analytics-empty {
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  font-style: italic;
}