/* =====================================================
   CompX Orbit Studio — PREMIUM POLISH v2
   Loaded LAST so the cascade wins for the refined
   additions below (Match Cut, Studio SRT, Screenshot->
   Motion, Style Director). Core .tool-section/.tool-btn
   premium values live in orbit-redesign.css.
   ===================================================== */
/* ---- Match Cut (BETA) ---- */



.mc-match-row {
  border-radius: 9px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s;
}

.mc-match-row:hover {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: translateX(2px);
}

.mc-match-row.mc-previewing {
  border-color: #a855f7;
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.25), 0 0 16px rgba(168, 85, 247, 0.18);
}

.mc-match-bar { height: 7px; border-radius: 4px; }

.mc-match-bar i {
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.4), #a855f7, #5cffa2);
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}

.mc-match-score {
  font-weight: 800;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

/* ---- Studio SRT Captions ---- */
.cx-simple-srt { gap: 11px; }

.cx-simple-transcribe {
  background: linear-gradient(160deg, rgba(10, 20, 15, 0.7), rgba(6, 10, 8, 0.55));
  border-color: rgba(56, 255, 125, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 18px rgba(0, 0, 0, 0.25);
}

.cx-simple-transcribe-head strong {
  letter-spacing: 0.1em;
  text-shadow: 0 0 12px rgba(168, 85, 247, 0.2);
}

.cx-simple-srt-drop {
  min-height: 96px;
  background: linear-gradient(165deg, rgba(10, 22, 14, 0.75), rgba(5, 10, 7, 0.6));
  border-color: rgba(56, 255, 125, 0.5);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.cx-simple-srt-drop:hover {
  border-color: rgba(56, 255, 125, 0.85);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.cx-simple-srt-drop strong {
  font-size: 13px;
  text-shadow: 0 0 16px rgba(52, 255, 120, 0.45);
}

.cx-simple-divider { font-size: 8px; letter-spacing: 0.14em; font-weight: 700; }

.cx-simple-divider::before,
.cx-simple-divider::after {
  background: linear-gradient(90deg, transparent, rgba(100, 160, 120, 0.35), transparent);
}

.cx-simple-srt-file {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(100, 160, 120, 0.18);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.cx-cap-title { letter-spacing: 0.02em; }

.cx-cap-ready {
  border-radius: 999px;
  padding: 3px 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* ---- Screenshot -> Motion ---- */
.cx-ssae-drop.cx-pro-dropzone {
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(10, 20, 16, 0.72), rgba(5, 9, 7, 0.6));
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 22px rgba(0, 0, 0, 0.28);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.cx-ssae-drop.cx-pro-dropzone:hover {
  border-color: rgba(168, 85, 247, 0.8);
  box-shadow: 0 0 22px rgba(168, 85, 247, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.cx-exploder-bolt {
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(0, 200, 143, 0.08));
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.2);
}

.cx-exploder-title { letter-spacing: 0.04em; }

.cx-ssae-beta {
  border-radius: 999px;
  letter-spacing: 0.1em;
}

/* ---- Motion Lab action buttons ---- */
#btnAutoSequenceBuild,
#btnAutoSequenceBuildMotion,
#btnBuildAutoSeqMotion {
  border-radius: 9px;
  letter-spacing: 0.1em;
}

/* ---- Style Director (moodboard) ---- */
.mb-analysis-grid { gap: 8px; }

.mb-analysis-grid label { letter-spacing: 0.1em; }

.mb-swatches .mb-swatch,
.mb-swatches > div {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ---- Screenshot -> Motion action buttons ----
   Match the premium solid-button language (orbit-redesign .tool-btn /
   .tool-btn.primary): dark glass for ANALYSE, vibrant green gradient for
   BUILD, rounded 9px, glow, crisp uppercase type. Loads last, so it wins. */
.cx-ssae-actions .cx-exploder-paste,
.cx-ssae-actions .cx-exploder-build {
  min-height: 38px;
  border-radius: 9px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.cx-ssae-actions .cx-exploder-paste {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(38, 42, 50, 0.92), rgba(24, 27, 33, 0.92));
  color: #c3cdd6;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 3px 10px rgba(0, 0, 0, 0.25);
}

.cx-ssae-actions .cx-exploder-paste:hover {
  border-color: rgba(168, 85, 247, 0.5);
  color: #eafff2;
  background: linear-gradient(180deg, rgba(45, 50, 60, 0.96), rgba(30, 34, 41, 0.96));
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.22), 0 1px 0 rgba(255, 255, 255, 0.07) inset;
  transform: translateY(-1px);
}

.cx-ssae-actions .cx-exploder-build {
  border: 1px solid rgba(168, 85, 247, 0.7);
  background: linear-gradient(135deg, #a855f7 0%, #00c98f 100%);
  color: #04140b;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.38), 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 4px 14px rgba(0, 0, 0, 0.3);
}

.cx-ssae-actions .cx-exploder-build:hover {
  border-color: #9dffc6;
  background: linear-gradient(135deg, #5cffa2 0%, #00e8b8 100%);
  box-shadow: 0 0 26px rgba(168, 85, 247, 0.55), 0 1px 0 rgba(255, 255, 255, 0.34) inset, 0 5px 16px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

.cx-ssae-actions .cx-exploder-build:active,
.cx-ssae-actions .cx-exploder-paste:active {
  transform: translateY(0);
}

.cx-ssae-actions .cx-exploder-build:disabled {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.25);
  color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

/* =====================================================
   NEON v2 — rail glow animation + tools tab premium pass
   Loaded last → wins. All motion respects
   prefers-reduced-motion (auto-disabled).
   ===================================================== */

/* ---- Rail: active tab breathing neon glow ---- */
#app .app-tabs-row .app-tab.active,
#app #appTabsRow .app-tab.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28) 0%, rgba(124, 58, 237, 0.2) 100%) !important;
  border-color: #a855f7 !important;
  box-shadow: inset 0 -2px 0 #a855f7, 0 0 0 1px rgba(168, 85, 247, 0.5), 0 0 12px rgba(168, 85, 247, 0.35) !important;
  animation: cxNeonRailPulse 2.4s ease-in-out infinite !important;
}

/* Breathing glow rides on filter (drop-shadow) so it is never
   blocked by the !important box-shadow rules lower in the stack. */
@keyframes cxNeonRailPulse {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(168, 85, 247, 0.45))
            drop-shadow(0 0 7px rgba(168, 85, 247, 0.22));
  }
  50% {
    filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.95))
            drop-shadow(0 0 14px rgba(168, 85, 247, 0.5));
  }
}

/* Active tab icon: breathing glow */
.app-tabs-row .app-tab.active .orbit-tab-icon svg,
#appTabsRow .app-tab.active .orbit-tab-icon svg {
  stroke: #ffffff !important;
  animation: cxNeonIconBreathe 2.4s ease-in-out infinite !important;
}

@keyframes cxNeonIconBreathe {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(168, 85, 247, 0.55)); }
  50%      { filter: drop-shadow(0 0 5px rgba(168, 85, 247, 1)); }
}

/* Rail hover: neon edge + soft bloom */
#app .app-tabs-row .app-tab:hover:not(.active),
#app #appTabsRow .app-tab:hover:not(.active) {
  border-color: rgba(168, 85, 247, 0.5) !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.18) !important;
  color: #e2e8f0 !important;
}
/* ---- Tools tab: premium neon pass ---- */
/* Section header: slow shimmer sweep across the green gradient */


@keyframes cxNeonHeadSweep {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}
/* Section title diamond: pulsing neon */


@keyframes cxNeonDiamond {
  0%, 100% { box-shadow: 0 0 6px rgba(168, 85, 247, 0.45); opacity: 0.85; }
  50%      { box-shadow: 0 0 15px rgba(168, 85, 247, 0.95); opacity: 1; }
}
/* Left accent bar on cards: breathing glow */


@keyframes cxNeonAccentBar {
  0%, 100% { opacity: 0.55; box-shadow: 0 0 8px rgba(168, 85, 247, 0.25); }
  50%      { opacity: 1;    box-shadow: 0 0 18px rgba(168, 85, 247, 0.65); }
}
/* Primary CTAs: always-on breathing glow */


@keyframes cxNeonCta {
  0%, 100% {
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.25),
                0 1px 0 rgba(255, 255, 255, 0.25) inset !important;
  }
  50% {
    box-shadow: 0 0 22px rgba(168, 85, 247, 0.55),
                0 1px 0 rgba(255, 255, 255, 0.25) inset !important;
  }
}
/* Icon grid buttons (align / anchor): neon on hover + focus ring */



/* ---- Accessibility: kill all neon motion ---- */
@media (prefers-reduced-motion: reduce) {
#app .app-tabs-row .app-tab.active,
  #app #appTabsRow .app-tab.active,
  .app-tabs-row .app-tab.active .orbit-tab-icon svg{
    animation: none !important;
  }
}

/* ---- Align-to mode toggle (comp / selection / key) + distribute row ---- */
.align-mode-row {
  display: flex !important;
  gap: 4px !important;
  margin-top: 9px !important;
  padding: 3px !important;
  background: rgba(6, 9, 13, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
}

.align-mode-btn {
  flex: 1 !important;
  min-height: 22px !important;
  padding: 3px 4px !important;
  font: 800 7.5px/1 inherit !important;
  letter-spacing: 0.1em !important;
  color: #6f7a72 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: color 0.12s, background 0.12s, border-color 0.12s, box-shadow 0.12s !important;
}

.align-mode-btn:hover {
  color: #d9e8dd !important;
  background: rgba(168, 85, 247, 0.07) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}

.align-mode-btn.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important;
  border-color: rgba(168, 85, 247, 0.8) !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.35) !important;
}

.align-distribute-row {
  display: none !important;
}
/* ---- Tools: ALIGN redesign + compact one-page layout ---- */

/* Align icon grid: larger neon buttons, tighter rhythm */




/* Align panel: fill height, mode + distribute pinned at the bottom */


/* Compact top rows so the full Tools page fits one screen */








/* Smart Grid inline in LAYERS: prominent full-width bar */




@media (prefers-reduced-motion: no-preference) {

}

/* ---- Smart Grid modal ---- */
.cx-smart-grid-box { width: 320px !important; max-width: 92vw !important; }
.cx-smart-grid-body { max-height: 62vh !important; overflow-y: auto !important; }
.sg-section-label {
  margin: 10px 0 5px !important;
  color: #a855f7 !important;
  font: 800 9px/1 inherit !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.sg-section-label::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 2px !important;
  background: linear-gradient(135deg, #a855f7, #00e8b8) !important;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.6) !important;
  transform: rotate(45deg) !important;
}
.sg-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; margin-bottom: 6px !important; }
.sg-grid label { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; }
.sg-grid label span { font: 700 7.5px/1 inherit !important; letter-spacing: 0.08em !important; color: #7c887f !important; text-transform: uppercase !important; }
.sg-grid .counter-input, .sg-grid .counter-select, .sg-grid input[type="color"] { width: 100% !important; min-width: 0 !important; }
.sg-grid input[type="color"] { height: 26px !important; padding: 2px !important; border-radius: 6px !important; background: rgba(6, 9, 13, 0.55) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; cursor: pointer !important; }
.sg-image-row { flex-direction: column !important; gap: 4px !important; margin-bottom: 6px !important; }
.sg-image-row:not([hidden]) { display: flex !important; }
.sg-image-row span { font: 700 7.5px/1 inherit !important; letter-spacing: 0.08em !important; color: #7c887f !important; text-transform: uppercase !important; }

/* ---- Caption Studio redesign (Studio tab) ---- */
.cx-cap-header-studio .cx-cap-title { font-size: 15px !important; }
.cx-cap-header-studio .cx-cap-sub { font-size: 9.5px !important; }

/* 2-step Source -> Style & Create progress bar */
.cx-cap-stepbar {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 7px 8px !important;
  background: rgba(6, 9, 13, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 9px !important;
}
.cx-cap-stepbar-step {
  flex: 1 !important;
  appearance: none !important;
  font-family: inherit !important;
  margin: 0 !important;
  cursor: pointer;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 5px 3px !important;
  border-radius: 7px !important;
  border: 1px solid transparent !important;
  color: #6f7a72 !important;
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s !important;
}
.cx-cap-stepbar-step:disabled { cursor: default !important; opacity: 0.48 !important; }
.cx-cap-stepbar-step b { font: 800 8px/1 inherit !important; letter-spacing: 0.12em !important; }
.cx-cap-stepbar-step small { font: 600 7px/1 inherit !important; letter-spacing: 0.04em !important; opacity: 0.75 !important; }
.cx-cap-stepbar-step span {
  font: 800 9px/1 inherit !important;
  letter-spacing: 0.08em !important;
  color: #a855f7 !important;
  opacity: 0.55 !important;
}
.cx-cap-stepbar-step.active {
  color: #eaffef !important;
  border-color: rgba(168, 85, 247, 0.55) !important;
  background: rgba(168, 85, 247, 0.07) !important;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.16) !important;
}

.cx-simple-stage-panel[hidden] { display: none !important; }
.cx-simple-stage-panel {
  padding-top: 8px !important;
}
.cx-simple-stage-note {
  margin-top: 8px !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(168, 85, 247, 0.22) !important;
  border-radius: 8px !important;
  background: rgba(168, 85, 247, 0.045) !important;
  color: #9eb2a5 !important;
  font-size: 9px !important;
  line-height: 1.45 !important;
}
.cx-cap-stepbar-step.active span { opacity: 1 !important; text-shadow: 0 0 8px rgba(168, 85, 247, 0.6) !important; }
.cx-cap-stepbar-arrow { color: #3a453e !important; font-style: normal !important; font-weight: 800 !important; }

/* Source picker: two cards + OR */
.cx-cap-sources { display: grid !important; grid-template-columns: 1fr auto 1fr !important; gap: 6px !important; align-items: stretch !important; }
.cx-cap-source-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 10px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  background: linear-gradient(160deg, rgba(23, 27, 32, 0.9), rgba(15, 18, 24, 0.9)) !important;
  text-align: center !important;
  transition: border-color 0.14s, box-shadow 0.14s !important;
}
.cx-cap-source-card.active { border-color: rgba(168, 85, 247, 0.65) !important; box-shadow: 0 0 14px rgba(168, 85, 247, 0.18) !important; }
.cx-cap-source-card strong { font: 800 10px/1.2 inherit !important; color: #eef3f5 !important; letter-spacing: 0.04em !important; }
.cx-cap-source-card > span { font-size: 8px !important; color: #829087 !important; }
.cx-cap-source-icon {
  width: 30px !important; height: 30px !important;
  display: grid !important; place-items: center !important;
  border-radius: 8px !important;
  background: rgba(168, 85, 247, 0.12) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  color: #a855f7 !important;
  font-size: 12px !important;
  margin-bottom: 2px !important;
}
.cx-cap-source-card .tool-btn { width: 100% !important; min-height: 26px !important; font-size: 7.5px !important; }
.cx-cap-source-card .cx-simple-srt-file { width: 100% !important; padding: 4px 6px !important; font-size: 8px !important; }
.cx-cap-source-or {
  align-self: center !important;
  font: 800 8px/1 inherit !important;
  letter-spacing: 0.1em !important;
  color: #a855f7 !important;
  padding: 4px 5px !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  border-radius: 999px !important;
  background: rgba(168, 85, 247, 0.08) !important;
}

/* Quick style: 5-column param row + advanced toggle */
.cx-quickstyle-head { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-top: 2px !important; }
.cx-quickstyle-title {
  display: flex !important; align-items: center !important; gap: 6px !important;
  font: 800 9px/1 inherit !important; letter-spacing: 0.12em !important; color: #a855f7 !important;
}
.cx-quickstyle-title i {
  width: 7px !important; height: 7px !important; border-radius: 2px !important;
  background: linear-gradient(135deg, #a855f7, #00e8b8) !important;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.6) !important;
  transform: rotate(45deg) !important;
}
.cx-quickstyle-advanced {
  font: 800 7.5px/1 inherit !important; letter-spacing: 0.08em !important;
  color: #8fa597 !important; background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 6px !important;
  padding: 4px 8px !important; cursor: pointer !important;
  transition: color 0.12s, border-color 0.12s !important;
}
.cx-quickstyle-advanced:hover { color: #d9e8dd !important; border-color: rgba(168, 85, 247, 0.4) !important; }
.cx-quickstyle-advanced.active { color: #a855f7 !important; border-color: rgba(168, 85, 247, 0.5) !important; }
.cx-quickstyle-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.2fr 0.7fr 1fr 0.6fr !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}
.cx-quickstyle-grid .cx-cap-field { min-width: 0 !important; }
.cx-quickstyle-color input[type="color"] {
  width: 100% !important; height: 26px !important; padding: 2px !important;
  border-radius: 6px !important; background: rgba(6, 9, 13, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important; cursor: pointer !important;
}

/* Footer status bar */
.cx-simple-srt-status {
  display: flex !important; align-items: center !important; gap: 6px !important;
  padding: 6px 9px !important;
  border: 1px solid rgba(100, 130, 110, 0.2) !important;
  border-radius: 8px !important;
  background: rgba(8, 18, 12, 0.5) !important;
}
.cx-simple-srt-status i {
  width: 7px !important; height: 7px !important; border-radius: 50% !important;
  background: #a855f7 !important;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.8) !important;
  flex-shrink: 0 !important;
}
.cx-simple-srt-status .hint { margin: 0 !important; font-size: 9px !important; }

/* ---- Caption Studio motion (step transition + card glow) ---- */
@media (prefers-reduced-motion: no-preference) {
  /* Step card: entrance pop + breathing glow on the active one */
  @keyframes cxCapStepIn {
    0% { opacity: 0; transform: translateY(5px) scale(0.94); }
    60% { opacity: 1; transform: translateY(-1px) scale(1.03); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes cxCapGlowPulse {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(168, 85, 247, 0.28)); }
    50% { filter: drop-shadow(0 0 11px rgba(168, 85, 247, 0.62)); }
  }
  @keyframes cxCapArrowPulse {
    0%, 100% { opacity: 0.45; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(1px); }
  }
  @keyframes cxCapCardLift {
    0% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-2px) scale(1.02); }
    70% { transform: translateY(0) scale(0.995); }
    100% { transform: translateY(0) scale(1); }
  }
  @keyframes cxCapIconPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.14) rotate(4deg); }
  }

  .cx-cap-stepbar-step { will-change: transform, filter; }
  .cx-cap-stepbar-step:not(.active) { cursor: pointer; transition: border-color 0.16s, background 0.16s, transform 0.16s, box-shadow 0.16s !important; }
  .cx-cap-stepbar-step:not(.active):hover { border-color: rgba(168, 85, 247, 0.3) !important; background: rgba(168, 85, 247, 0.04) !important; transform: translateY(-1px) !important; }
  .cx-cap-stepbar-step.active { animation: cxCapStepIn 0.42s cubic-bezier(0.22, 0.8, 0.2, 1), cxCapGlowPulse 2.6s ease-in-out 0.42s infinite; }
  .cx-cap-stepbar-step.active b { text-shadow: 0 0 12px rgba(168, 85, 247, 0.45); }
  .cx-cap-stepbar-arrow { animation: cxCapArrowPulse 2.6s ease-in-out infinite; }

  /* Source cards: hover lift + neon edge, active breathing glow, icon pulse */
  .cx-cap-source-card { will-change: transform, filter; }
  .cx-cap-source-card:hover { border-color: rgba(168, 85, 247, 0.85) !important; box-shadow: 0 0 18px rgba(168, 85, 247, 0.3), inset 0 0 12px rgba(168, 85, 247, 0.05) !important; transform: translateY(-2px) !important; animation: cxCapCardLift 0.3s ease-out !important; }
  .cx-cap-source-card:not(.active):hover .cx-cap-source-icon { background: rgba(168, 85, 247, 0.2) !important; }
  .cx-cap-source-card.active { animation: cxCapGlowPulse 2.8s ease-in-out infinite; }
  .cx-cap-source-card.active .cx-cap-source-icon { animation: cxCapIconPulse 3.2s ease-in-out infinite; }
  .cx-cap-source-card .tool-btn { transition: transform 0.14s, box-shadow 0.14s, background 0.14s !important; }
  .cx-cap-source-card .tool-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), 0 0 10px rgba(168, 85, 247, 0.25) !important; }
  .cx-cap-source-or { animation: cxCapGlowPulse 3s ease-in-out infinite; }

  /* Quick style: header diamond + color swatch + advanced button */
  .cx-quickstyle-title i { animation: cxCapGlowPulse 2.4s ease-in-out infinite; }
  .cx-quickstyle-advanced { transition: color 0.14s, border-color 0.14s, box-shadow 0.14s, transform 0.14s !important; }
  .cx-quickstyle-advanced:hover { transform: translateY(-1px) !important; box-shadow: 0 0 10px rgba(168, 85, 247, 0.22) !important; }
  .cx-quickstyle-color input[type="color"] { transition: box-shadow 0.16s, transform 0.16s !important; }
  .cx-quickstyle-color input[type="color"]:hover { box-shadow: 0 0 12px rgba(168, 85, 247, 0.3) !important; transform: scale(1.03) !important; }

  /* Status dot + ready badge: soft pulse */
  .cx-simple-srt-status i { animation: cxCapGlowPulse 2.2s ease-in-out infinite; }
  .cx-cap-ready i { animation: cxCapGlowPulse 2.2s ease-in-out infinite; }
}
/* === 2026-08 Flex-parity workspace pass === */
/* Tools: fixed dashboard, compact controls, no dead anchor whitespace. */























.subgroup-procedural-grid,#smartGridModal{display:none}
/* Strong, unmistakable workflow actions. */
#panel-studio button.primary,#panel-studio .cx-simple-srt-generate,#panel-studio #btnStudioRemoveBg,#panel-studio #btnStudioRestoreBg,#panel-toolkit button.primary,#panel-comps button.primary{background:linear-gradient(135deg,#a855f7,#7c3aed);color:#ffffff;border-color:#c084fc;font-weight:700;box-shadow:0 4px 14px rgba(168,85,247,.25)}
/* Motion: stable card rhythm and four controls per row where space allows. */


#panel-pro .cx-graph-card{order:10}

/* Library: folders remain readable but preview/content owns the majority width. */
#sfxMogrtView .main-layout{grid-template-columns:minmax(105px,22%) minmax(0,1fr)}
#sfxMogrtView .sidebar{width:auto;min-width:105px;max-width:180px}
#sfxMogrtView .folder-row{font-size:9px;padding:3px 4px}


/* === 2026-08 scoped action hierarchy and Motion Lab layout pass === */
#toolkitProductionUtilities{display:none}

/* Shared action language: compact, readable, and visibly clickable. */
#panel-studio #btnSimpleTranscribe,
#panel-studio #btnSimpleSrtGenerate,
#panel-studio #btnAiRemoveBackground,
#panel-toolkit #btnLayerFactoryGenerate,
#panel-advanced #btnCameraApplyAnim,
#panel-advanced #btnBuildCinematicLook,
#panel-advanced [data-showcase-action="build"],
#panel-advanced #btnCreate3DExtrusion,
#panel-pro #btnSsToAeBuild,
#panel-pro #btnProEditMonkeyGenerate,
#panel-pro #btnMcAnalyze,
#panel-pro #fx20-apply{
  position:relative;min-height:32px;border:1px solid #63ff9c;border-radius:7px;
  background:linear-gradient(135deg,#28ff76 0%,#08dc82 58%,#00b968 100%);
  color:#03130a;font-weight:900;letter-spacing:.055em;
  box-shadow:0 4px 14px rgba(20,255,112,.18),inset 0 1px rgba(255,255,255,.28);
  transition:transform .14s ease,filter .14s ease,box-shadow .14s ease,border-color .14s ease;
}
#panel-studio #btnSimpleTranscribe:not(:disabled):hover,
#panel-studio #btnSimpleSrtGenerate:not(:disabled):hover,
#panel-studio #btnAiRemoveBackground:not(:disabled):hover,
#panel-toolkit #btnLayerFactoryGenerate:not(:disabled):hover,
#panel-advanced #btnCameraApplyAnim:not(:disabled):hover,
#panel-advanced #btnBuildCinematicLook:not(:disabled):hover,
#panel-advanced [data-showcase-action="build"]:not(:disabled):hover,
#panel-advanced #btnCreate3DExtrusion:not(:disabled):hover,
#panel-pro #btnSsToAeBuild:not(:disabled):hover,
#panel-pro #btnProEditMonkeyGenerate:not(:disabled):hover,
#panel-pro #btnMcAnalyze:not(:disabled):hover,
#panel-pro #fx20-apply:not(:disabled):hover{
  filter:brightness(1.08);transform:translateY(-1px);
  box-shadow:0 7px 20px rgba(20,255,112,.28),inset 0 1px rgba(255,255,255,.32);
}
#panel-studio #btnSimpleTranscribe:active,
#panel-studio #btnSimpleSrtGenerate:active,
#panel-studio #btnAiRemoveBackground:active,
#panel-toolkit #btnLayerFactoryGenerate:active,
#panel-advanced #btnCameraApplyAnim:active,
#panel-advanced [data-showcase-action="build"]:active,
#panel-advanced #btnCreate3DExtrusion:active,
#panel-pro #btnSsToAeBuild:active,
#panel-pro #btnProEditMonkeyGenerate:active,
#panel-pro #btnMcAnalyze:active,
#panel-pro #fx20-apply:active{transform:translateY(0) scale(.992)}
#panel-studio #btnSimpleTranscribe:disabled,
#panel-studio #btnSimpleSrtGenerate:disabled,
#panel-advanced [data-showcase-action="build"]:disabled,
#panel-pro #btnSsToAeBuild:disabled{
  background:linear-gradient(135deg,rgba(28,64,44,.7),rgba(11,39,29,.72));
  color:#66776d;border-color:rgba(77,131,99,.38);box-shadow:none;
}

/* Caption actions no longer read as one oversized flat bar. */
#panel-studio #btnSimpleTranscribe,
#panel-studio #btnSimpleSrtGenerate{width:min(100%,300px);align-self:center;margin:4px auto 2px}
@media (prefers-reduced-motion:no-preference){
  #panel-studio #btnSimpleTranscribe:not(:disabled),
  #panel-studio #btnSimpleSrtGenerate:not(:disabled){animation:cxActionGlow 2.8s ease-in-out infinite}
}
@keyframes cxActionGlow{
  0%,100%{box-shadow:0 4px 14px rgba(20,255,112,.16),inset 0 1px rgba(255,255,255,.25)}
  50%{box-shadow:0 5px 22px rgba(20,255,112,.32),inset 0 1px rgba(255,255,255,.32)}
}

/* Paired actions keep equal weight and stay on one row. */
.cx-dual-actions,
#layerFactoryModal .modal-footer,
#panel-advanced .tool-grid.tool-grid-2,
#panel-advanced .cx-extrusion-actions,
#panel-pro .cx-ssae-actions{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-items:stretch;
}
.cx-dual-actions>.tool-btn,
#layerFactoryModal .modal-footer>.btn,
#panel-advanced .tool-grid.tool-grid-2>.tool-btn,
#panel-advanced .cx-extrusion-actions>.tool-btn,
#panel-pro .cx-ssae-actions>button{width:100%;min-width:0;margin:0}
.cx-ai-bg-actions{margin-top:7px}
#panel-studio #btnAiBgRestore,
#layerFactoryModal #btnLayerFactoryCancel,
#panel-advanced #btnRemoveCinematicLook,
#panel-advanced #btnRestore3DExtrusion,
#panel-pro #btnSsToAeAnalyze{
  min-height:32px;border:1px solid rgba(72,216,142,.38);border-radius:7px;
  background:linear-gradient(160deg,rgba(20,38,31,.94),rgba(8,18,14,.96));
  color:#d4e8dc;font-weight:850;letter-spacing:.035em;
  box-shadow:inset 0 1px rgba(255,255,255,.04);
  transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease;
}
#panel-studio #btnAiBgRestore:hover,
#layerFactoryModal #btnLayerFactoryCancel:hover,
#panel-advanced #btnRestore3DExtrusion:hover,
#panel-pro #btnSsToAeAnalyze:hover{
  transform:translateY(-1px);border-color:rgba(44,255,125,.7);
  background:linear-gradient(160deg,rgba(25,55,41,.96),rgba(10,27,19,.98));
  box-shadow:0 5px 14px rgba(0,0,0,.24),0 0 12px rgba(168, 85, 247,.1);
}
#panel-advanced #btnRemoveCinematicLook{
  border-color:rgba(255,104,104,.42);color:#ffb0b0;
  background:linear-gradient(160deg,rgba(54,24,26,.92),rgba(25,13,16,.96));
}
#panel-advanced #btnRemoveCinematicLook:hover{border-color:rgba(255,112,112,.78);background:linear-gradient(160deg,rgba(72,29,32,.96),rgba(34,15,19,.98))}

/* Layer Factory footer: equal, full-size actions. */
#layerFactoryModal .modal-footer{padding:8px 10px}
#layerFactoryModal #btnLayerFactoryGenerate,
#layerFactoryModal #btnLayerFactoryCancel{min-height:33px}

/* Showcase keeps Build dominant while Update/Render remain clear secondary actions. */
#panel-advanced .cx-showcase-actions{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(150px,1fr);gap:6px}
#panel-advanced .cx-showcase-actions-secondary{display:grid;grid-template-columns:minmax(0,1fr) minmax(58px,.55fr);gap:6px}
#panel-advanced .cx-showcase-actions button{border-radius:7px;min-height:32px}
#panel-advanced .cx-showcase-actions-secondary button{
  border:1px solid rgba(169,120,255,.38);background:linear-gradient(160deg,rgba(31,25,48,.92),rgba(14,14,25,.96));
  color:#d8c9f7;font-weight:850;letter-spacing:.03em;
}
#panel-advanced .cx-showcase-actions-secondary button:not(:disabled):hover{border-color:#a978ff;box-shadow:0 0 14px rgba(169,120,255,.16)}
#panel-advanced .cx-extrusion-actions{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Screenshot, Auto Sequence, Match Cut and Motion Curve action alignment. */
#panel-pro .cx-ssae-actions{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:8px}
#panel-pro #btnProEditMonkeyGenerate,
#panel-pro #btnMcAnalyze{margin-top:8px}
#panel-pro>.tools-scroll{display:flex;flex-direction:column;gap:8px}
#panel-pro #cxGraphCardWrap{order:-100;margin:0 0 2px}

#panel-pro #cxFlow20 .fx20-topbar{align-items:center;gap:5px}
#panel-pro #cxFlow20 .fx20-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#panel-pro #cxFlow20 .fx20-actions button{min-height:30px;border-radius:7px}
#panel-pro #cxFlow20 .fx20-spline-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#panel-pro #cxFlow20 .fx20-models,
#panel-pro #cxFlow20 .fx20-presets{gap:5px}
#panel-pro #cxFlow20 .fx20-chip,
#panel-pro #cxFlow20 .fx20-model,
#panel-pro #cxFlow20 .fx20-preset,
#panel-pro #cxFlow20 .fx20-savechip{min-height:27px;border-radius:6px}
@media(max-width:520px){
  #panel-advanced .cx-showcase-actions{grid-template-columns:1fr}
  #panel-advanced .cx-showcase-actions-secondary{grid-template-columns:1fr 70px}
}
@media(max-width:390px){
  .cx-dual-actions,
  #layerFactoryModal .modal-footer,
  #panel-advanced .cx-extrusion-actions,
  #panel-pro .cx-ssae-actions{grid-template-columns:1fr}
}
/* Live 3D Card Showcase preview */
.cx-showcase-preview{margin:0 0 8px;padding:6px;border:1px solid rgba(169,120,255,.2);border-radius:9px;background:linear-gradient(145deg,rgba(10,16,30,.96),rgba(4,8,16,.98));overflow:hidden}
.cx-showcase-preview-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;color:#8f9bad;font-size:6.5px;font-weight:850;letter-spacing:.11em}
.cx-showcase-preview-head span{display:flex;align-items:center;gap:5px}.cx-showcase-preview-head i{width:5px;height:5px;border-radius:50%;background:#a855f7;box-shadow:0 0 8px #a855f7}.cx-showcase-preview-head b{color:#bfa8ff;font-size:6.5px}
.cx-showcase-preview-viewport{position:relative;height:132px;overflow:hidden;border:1px solid rgba(101,168,255,.12);border-radius:7px;background:#080808;perspective:560px;transition:background-color .2s ease,perspective .2s ease}
.cx-showcase-preview-grid{position:absolute;inset:54% -20% -35%;transform:rotateX(72deg);transform-origin:center top;background-image:linear-gradient(rgba(101,168,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(101,168,255,.1) 1px,transparent 1px);background-size:18px 18px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent)}
.cx-showcase-preview-scene{position:absolute;left:50%;top:50%;width:1px;height:1px;transform-style:preserve-3d;animation:cxShowcaseOrbit 11s linear infinite}
.cx-showcase-preview-scene.is-helix{animation-duration:14s}.cx-showcase-preview-scene.is-depth{animation:cxShowcaseDepth 5s ease-in-out infinite alternate}
.cx-showcase-preview-card{position:absolute;left:-34px;top:-24px;width:68px;height:48px;padding:4px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;transform-style:preserve-3d;border:1px solid hsla(var(--card-hue),85%,68%,.65);border-radius:5px;background:linear-gradient(145deg,hsla(var(--card-hue),70%,48%,.38),rgba(7,12,24,.95) 62%);box-shadow:0 0 16px hsla(var(--card-hue),85%,55%,.14);color:#eaf3ff}
.cx-showcase-preview-card:before{content:"";position:absolute;inset:4px 4px 16px;border-radius:3px;background:radial-gradient(circle at 70% 25%,hsla(var(--card-hue),90%,72%,.85),transparent 23%),linear-gradient(135deg,hsla(var(--card-hue),82%,45%,.5),rgba(8,12,22,.2))}
.cx-showcase-preview-card span,.cx-showcase-preview-card b{position:relative;z-index:1}.cx-showcase-preview-card span{align-self:flex-end;font-size:5px;color:hsla(var(--card-hue),90%,80%,.9)}.cx-showcase-preview-card b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:5.5px;letter-spacing:.05em}.cx-showcase-preview-card.is-demo{opacity:.78}
.cx-showcase-preview-scene.has-pulse .cx-showcase-preview-card{animation:cxShowcasePulse 1.8s ease-in-out infinite alternate}.cx-showcase-preview-glow{position:absolute;left:25%;right:25%;bottom:3px;height:12px;border-radius:50%;background:rgba(168, 85, 247,.15);filter:blur(10px);pointer-events:none}
@keyframes cxShowcaseOrbit{from{transform:rotateX(-8deg) rotateY(0deg)}to{transform:rotateX(-8deg) rotateY(360deg)}}
@keyframes cxShowcaseDepth{from{transform:rotateX(-7deg) rotateY(-11deg) translateZ(-12px)}to{transform:rotateX(4deg) rotateY(11deg) translateZ(12px)}}
@keyframes cxShowcasePulse{from{filter:brightness(.86);opacity:.82}to{filter:brightness(var(--cx-preview-pulse));opacity:1}}