@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DESIGN TOKENS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --font-sans: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Backgrounds */
  --bg-page:       #0d0b1a;
  --bg-header:     #0a0915;
  --bg-sidebar:    #0f0c1f;
  --bg-workspace:  #0d0b1a;
  --bg-card:       rgba(26, 20, 52, 0.85);
  --bg-card-hover: rgba(35, 27, 68, 0.9);
  --bg-hero:       linear-gradient(135deg, #130d2e 0%, #1a0e3d 40%, #200a45 100%);
  --bg-input:      rgba(18, 13, 38, 0.95);

  /* Gold */
  --gold:          #FFD700;
  --gold-rich:     #D4AF37;
  --gold-deep:     #B8860B;
  --gold-glow:     rgba(212,175,55,0.28);
  --gold-border:   rgba(212,175,55,0.35);
  --gold-border-hi: rgba(255,215,0,0.65);

  /* Purple */
  --purple-bright: #c084fc;
  --purple-rich:   #9333ea;
  --purple-deep:   #6d28d9;
  --purple-glow:   rgba(147,51,234,0.3);
  --purple-border: rgba(192,132,252,0.35);

  /* Structural borders — dark/subtle (matches reference) */
  --border-structural: rgba(255,255,255,0.07);
  --border-card:       rgba(120,80,200,0.18);
  --border-subtle:     rgba(255,255,255,0.05);
  --border-input:      rgba(255,255,255,0.1);

  /* Text */
  --txt-primary:   #f0ecff;
  --txt-secondary: #a89bc5;
  --txt-muted:     #5e5480;
  --txt-gold:      #D4AF37;

  /* Legacy aliases (keep app.js working) */
  --border-color:       rgba(255,255,255,0.07);
  --border-focus:       rgba(212,175,55,0.5);
  --accent-purple:      var(--purple-bright);
  --accent-purple-glow: var(--purple-glow);
  --accent-emerald:     #10b981;
  --accent-emerald-glow: rgba(16,185,129,0.15);
  --accent-gold:        var(--gold-rich);
  --accent-gold-glow:   var(--gold-glow);
  --accent-rose:        #f43f5e;
  --accent-blue:        #3b82f6;
  --bg-dark:            var(--bg-page);
  --color-text-primary: var(--txt-primary);
  --color-text-secondary: var(--txt-secondary);
  --color-text-muted:   var(--txt-muted);
  --font-mono:          'JetBrains Mono', monospace;

  --ease: all 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--bg-page);
  color: var(--txt-primary);
  font-family: var(--font-sans);
  line-height: 1.5;
}

#app-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
body.auth-locked { overflow: hidden; }
body.auth-locked #app-shell { display: none; }

.auth-gate {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(147,51,234,0.22), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(212,175,55,0.12), transparent 45%),
    var(--bg-page);
}
.auth-gate[hidden] { display: none !important; }
.auth-card {
  width: min(420px, 100%);
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: 1rem;
  padding: 1.6rem 1.5rem 1.35rem;
  box-shadow: 0 28px 70px rgba(0,0,0,0.5);
}
.auth-logo { display: block; height: 72px; width: auto; margin: 0 auto 0.6rem; object-fit: contain; }
.auth-card h1 { text-align: center; font-size: 1.25rem; margin-bottom: 0.35rem; }
.auth-sub { text-align: center; color: var(--txt-secondary); font-size: 0.85rem; margin-bottom: 1.1rem; }
.auth-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.75rem; }
.auth-field span { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--txt-muted); }
.auth-field input {
  height: 42px; padding: 0 0.75rem;
  border-radius: 0.5rem; border: 1px solid var(--border-input);
  background: var(--bg-input); color: var(--txt-primary);
  font-family: inherit; font-size: 0.95rem;
}
.auth-field input:focus { outline: none; border-color: var(--gold-border-hi); }
.auth-submit { width: 100%; justify-content: center; height: 42px; margin-top: 0.25rem; }
.auth-create {
  display: block; width: 100%; margin-top: 0.55rem;
  background: none; border: none; color: var(--txt-muted);
  font-size: 0.8rem; cursor: pointer; text-decoration: underline;
}
.auth-create:hover { color: var(--gold); }
.auth-error { color: #f0a0a0; font-size: 0.8rem; margin: 0 0 0.6rem; }
.auth-hint { margin-top: 0.9rem; font-size: 0.7rem; color: var(--txt-muted); line-height: 1.4; }

.admin-panel {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4.5rem 1rem 1.5rem;
  background: rgba(6,4,16,0.72);
  overflow: auto;
}
.admin-panel[hidden] { display: none !important; }
.admin-card {
  width: min(760px, 100%);
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: 0.9rem;
  padding: 1.2rem 1.3rem 1.4rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.admin-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.admin-card-head h2 { font-size: 1.1rem; color: var(--gold); }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin-bottom: 0.85rem; }
@media (max-width: 720px) { .admin-grid { grid-template-columns: 1fr; } }
.admin-block {
  border: 1px solid var(--border-structural);
  border-radius: 0.65rem;
  padding: 0.85rem 0.95rem;
  background: rgba(255,255,255,0.02);
}
.admin-block h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--txt-muted); margin-bottom: 0.55rem; }
.admin-block p { font-size: 0.85rem; margin-bottom: 0.35rem; }
.admin-k { display: inline-block; min-width: 4.2rem; color: var(--txt-muted); font-size: 0.72rem; text-transform: uppercase; }
.admin-balance-line { font-size: 1.15rem !important; font-weight: 800; }
.admin-grant label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; color: var(--txt-secondary); }
.admin-grant input {
  height: 38px; padding: 0 0.65rem; margin: 0.35rem 0 0.55rem;
  border-radius: 0.45rem; border: 1px solid var(--border-input);
  background: var(--bg-input); color: var(--txt-primary);
}
.admin-muted { color: var(--txt-muted); font-size: 0.8rem; }
.admin-ledger-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.admin-ledger-table th, .admin-ledger-table td { text-align: left; padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--border-structural); }
.admin-ledger-table .neg { color: #f0a0a0; }
.admin-ledger-table .pos { color: #86efac; }
#admin-uid { font-size: 0.7rem; word-break: break-all; }

/* Publish / games review */
.admin-panel .admin-block + .admin-block { margin-top: 0.85rem; }
.pub-st { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.12rem 0.55rem; border-radius: 999px; border: 1px solid var(--border-structural); }
.pub-st-draft { color: var(--txt-muted); }
.pub-st-pending { color: #fcd34d; border-color: rgba(252, 211, 77, 0.45); }
.pub-st-live { color: #86efac; border-color: rgba(134, 239, 172, 0.45); }
.pub-st-rejected { color: #f0a0a0; border-color: rgba(240, 160, 160, 0.45); }
.pub-note { color: #f0c0a0; }
.pub-links a, .pub-fine a { color: var(--gold); }
.pub-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; color: var(--txt-secondary); margin-bottom: 0.7rem; }
.pub-form input[type="text"], .pub-form textarea {
  padding: 0.5rem 0.65rem; border-radius: 0.45rem; border: 1px solid var(--border-input);
  background: var(--bg-input); color: var(--txt-primary); font: inherit; font-size: 0.85rem; resize: vertical;
}
.pub-form .pub-check { flex-direction: row; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.pub-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.pub-fine { margin-top: 0.8rem; }
.auth-error.pub-ok { color: #86efac; }
.pub-review-card { width: min(940px, 100%); }
.pub-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border-structural); }
.pub-row:last-child { border-bottom: none; }
.pub-row-main { font-size: 0.85rem; display: grid; gap: 0.2rem; }
.pub-row-actions { display: flex; gap: 0.4rem; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; }
.pub-row-actions a.hbtn { text-decoration: none; display: inline-flex; align-items: center; }
.pub-badge { margin-left: 0.3rem; background: var(--accent-rose, #ff5e8a); color: #fff; border-radius: 999px; font-size: 0.65rem; padding: 0 0.4rem; font-weight: 800; }
.pub-badge[hidden] { display: none; }
@media (max-width: 720px) { .pub-row { flex-direction: column; } .pub-row-actions { justify-content: flex-start; } }

/* ── Hidden legacy div the original HTML adds ── */
.bg-gradient-radial { display: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HEADER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#main-header {
  height: 64px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-structural);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  position: relative;
  z-index: 100;
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.logo-img {
  /* Source PNG has transparent padding; scale up so the lockup fills the header. */
  height: 96px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.4));
  transition: filter 0.3s;
}
.logo-img:hover {
  filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.7)) drop-shadow(0 0 32px rgba(147, 51, 234, 0.45));
}

@media (max-width: 1100px) {
  .logo-img { height: 80px; max-width: 220px; }
}

/* hidden legacy logo elements */
.logo-icon, .logo-text, .logo-container { display: none !important; }

.header-center {
  display: flex; justify-content: center; align-items: center; gap: 0.55rem;
  min-width: 0; overflow: hidden;
  container-type: inline-size; container-name: header-center;
}

#model-badge {
  display: none !important;
}
.model-dot { color: #10b981; font-size: 0.55rem; }

#credits-badge {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 700;
  color: var(--gold);
  border: 1px solid var(--gold-border);
  background: rgba(212,175,55,0.08);
  padding: 0.25rem 0.7rem;
  border-radius: 2rem;
  font-variant-numeric: tabular-nums;
}
#credits-badge.low { color: #f0a0a0; border-color: rgba(244,63,94,0.45); background: rgba(244,63,94,0.08); }
.credits-badge-ico { font-size: 0.7rem; }
.credits-badge-lbl { font-size: 0.62rem; font-weight: 600; color: var(--txt-muted); text-transform: uppercase; letter-spacing: 0.04em; }

.token-chip {
  display: inline-flex; align-items: center;
  margin-left: 0.35rem;
  font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.08rem 0.35rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.hbtn-gold-fill .token-chip { background: rgba(0,0,0,0.18); color: #3a2800; margin-left: 0; }
.btn-generate-symbol .token-chip { background: rgba(147,51,234,0.18); color: #e9d5ff; }

.credits-modal {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,4,16,0.72); padding: 1.25rem;
}
.credits-modal[hidden] { display: none !important; }
.credits-modal-card {
  width: min(420px, 100%);
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: 0.85rem;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.credits-modal-card h2 { font-size: 1.05rem; margin-bottom: 0.45rem; color: var(--gold); }
.credits-modal-card p { font-size: 0.85rem; color: var(--txt-secondary); line-height: 1.45; }
.credits-modal-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem;
  margin: 0.9rem 0;
}
.credits-modal-stats div {
  padding: 0.65rem 0.75rem; border-radius: 0.5rem;
  border: 1px solid var(--border-structural); background: rgba(255,255,255,0.03);
}
.credits-modal-stats span { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--txt-muted); }
.credits-modal-stats strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.credits-modal-hint { font-size: 0.72rem !important; color: var(--txt-muted) !important; margin-bottom: 0.9rem; }
.credits-modal-card .hbtn { width: 100%; justify-content: center; }

.header-right {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: nowrap; justify-content: flex-end;
  flex-shrink: 0;
}

/* Project dropdown in top bar (beside Quick Test) */
.project-picker {
  display: inline-flex; align-items: center; gap: 0.4rem;
  height: 36px; padding: 0 0.55rem 0 0.7rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-structural);
  border-radius: 0.5rem;
  max-width: min(280px, 32vw);
}
.project-picker-label {
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--txt-muted); flex-shrink: 0;
}
.project-select {
  appearance: none; -webkit-appearance: none;
  background: transparent;
  border: none; outline: none;
  color: var(--txt-primary);
  font-family: var(--font-sans);
  font-size: 0.8rem; font-weight: 600;
  min-width: 120px; max-width: 200px;
  cursor: pointer;
  padding-right: 1.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%94a3b8' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}
.project-select option { background: #12121c; color: #e2e8f0; }
.project-select optgroup { background: #0b0b12; color: #94a3b8; font-style: normal; }
.project-select option:disabled { color: #64748b; }

/* Model dropdowns in the header centre. Fixed widths so long option names never
   stretch them; they collapse by the space the centre column actually has. */
.model-pickers { display: flex; align-items: center; gap: 0.4rem; min-width: 0; flex-shrink: 1; }
.model-picker { max-width: none; flex-shrink: 0; padding: 0 0.45rem 0 0.6rem; }
.model-picker .project-select {
  min-width: 0; max-width: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.model-picker-ai .project-select { width: 140px; }
.model-picker-image .project-select { width: 150px; }
.model-picker-detail .project-select { width: 80px; }

@container header-center (max-width: 800px) {
  .model-picker .project-picker-label { display: none; }
  .model-picker { padding: 0 0.35rem 0 0.5rem; }
  .model-picker-ai .project-select,
  .model-picker-image .project-select { width: 124px; }
  .model-picker-detail .project-select { width: 74px; }
}
@container header-center (max-width: 540px) {
  .model-picker-detail { display: none; }
}
@container header-center (max-width: 420px) {
  .model-picker-image { display: none; }
}
@container header-center (max-width: 300px) {
  .model-picker-ai .project-picker-label { display: inline; }
  .model-picker-ai .project-select { width: 64px; }
}
@container header-center (max-width: 250px) {
  .model-pickers { display: none; }
}

.hbtn-icon { width: 36px; padding: 0; justify-content: center; font-size: 0.95rem; }
.header-right .project-picker { max-width: 230px; }
.header-right .project-select { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Narrower screens: give the centre model pickers room by collapsing labels. */
@media (max-width: 1800px) {
  #main-header { padding: 0 1rem; gap: 0.75rem; }
  .logo-img { height: 84px; max-width: 240px; }
  .hbtn-collapse { width: 36px; padding: 0; justify-content: center; font-size: 0.95rem; }
  .hbtn-collapse .hbtn-txt { display: none; }
  .header-right .project-picker-label,
  .credits-badge-lbl { display: none; }
  .header-right .project-select { max-width: 150px; }
}
@media (max-width: 1100px) {
  .logo-img { height: 72px; max-width: 190px; }
}

/* ── Header buttons ── */
.hbtn {
  height: 36px;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 0.3rem;
  white-space: nowrap;
  transition: var(--ease);
  flex-shrink: 0;
}

.hbtn-outline {
  background: rgba(255,255,255,0.05);
  border-color: var(--border-structural);
  color: var(--txt-primary);
}
.hbtn-outline:hover {
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
}

.hbtn-purple {
  border-color: rgba(147,51,234,0.4) !important;
  color: var(--purple-bright) !important;
}
.hbtn-purple:hover { background: rgba(147,51,234,0.12) !important; border-color: var(--purple-bright) !important; }

.hbtn-gold {
  border-color: rgba(212,175,55,0.35) !important;
  color: var(--gold) !important;
}
.hbtn-gold:hover { background: rgba(212,175,55,0.1) !important; border-color: var(--gold) !important; }

.hbtn-gold-fill {
  background: linear-gradient(135deg, #c8961a, #e8b220, #ffd700, #d4a017);
  border-color: var(--gold);
  color: #0a0600;
  font-weight: 800;
  box-shadow: 0 4px 20px rgba(212,175,55,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
.hbtn-gold-fill:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(212,175,55,0.5);
}
.hbtn-gold-fill:disabled { opacity: 0.45; cursor: not-allowed; }

.hbtn-green { border-color: rgba(16,185,129,0.4) !important; color: #10b981 !important; }

.hbtn-blue { border-color: rgba(56,189,248,0.4) !important; color: #38bdf8 !important; }
.hbtn-blue:hover:not(:disabled) { background: rgba(56,189,248,0.1) !important; border-color: #38bdf8 !important; }
.hbtn:disabled { opacity: 0.4; cursor: not-allowed; }

.run-pipeline-wrap {
  display: flex; flex-direction: row; align-items: center; gap: 0.35rem;
}

/* ── Toggle (kept in DOM for JS; hidden so the header does not name the model) ── */
.toggle-label {
  display: none !important;
}

.toggle-track {
  width: 28px; height: 16px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--txt-muted);
  transition: transform 0.2s, background 0.2s;
}

#local-llm-toggle { display: none; }

#local-llm-toggle:checked + .toggle-track { background: rgba(212,175,55,0.3); border-color: var(--gold-border); }
#local-llm-toggle:checked + .toggle-track .toggle-thumb { transform: translateX(12px); background: var(--gold); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   APP LAYOUT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.app-layout {
  display: grid;
  grid-template-columns: 188px 1fr;
  height: calc(100vh - 64px);
  overflow: hidden;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SIDEBAR — vertical studio tabs
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-structural);
  display: flex;
  flex-direction: column;
  padding: 0.85rem 0.55rem 0.75rem;
  gap: 0.55rem;
  overflow: hidden;
  min-height: 0;
}

.sidebar-section-title {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--txt-muted);
  padding: 0.15rem 0.55rem 0.45rem;
  border-bottom: 1px solid var(--border-structural);
  flex-shrink: 0;
}

.sidebar-spacer { flex: 0 0 0.35rem; min-height: 0; }

/* Legacy project-card styles kept for any residual markup */
.project-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 0.7rem;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--ease);
}
.project-card:hover { border-color: rgba(147,51,234,0.35); background: var(--bg-card-hover); }
.project-card.active {
  border-color: var(--purple-rich);
  box-shadow: 0 0 18px rgba(147,51,234,0.2);
}
.project-name { font-weight: 700; font-size: 0.9rem; color: var(--txt-primary); margin-bottom: 0.2rem; }
.project-theme { font-size: 0.75rem; color: var(--txt-secondary); }

/* ── Upgrade to Pro card ── */
.upgrade-card {
  background: linear-gradient(135deg, rgba(109,40,217,0.2), rgba(147,51,234,0.1));
  border: 1px solid rgba(147,51,234,0.3);
  border-radius: 0.75rem;
  padding: 0.7rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
}
.upgrade-crown { font-size: 1.3rem; }
.upgrade-title { font-size: 0.88rem; font-weight: 800; color: var(--gold); }
.upgrade-desc { font-size: 0.72rem; color: var(--txt-secondary); line-height: 1.4; }
.btn-upgrade {
  width: 100%; height: 34px;
  background: linear-gradient(135deg, var(--purple-deep), var(--purple-rich));
  border: none;
  border-radius: 0.5rem;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--ease);
  box-shadow: 0 3px 12px rgba(147,51,234,0.3);
}
.btn-upgrade:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(147,51,234,0.5); }

/* ── User profile ── */
.user-profile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.5rem;
  border-top: 1px solid var(--border-structural);
  cursor: pointer;
  border-radius: 0.6rem;
  transition: var(--ease);
  flex-shrink: 0;
}
.user-profile:hover { background: rgba(255,255,255,0.03); }

.user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-rich), var(--purple-deep));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; color: #fff;
  flex-shrink: 0;
  border: 1.5px solid rgba(147,51,234,0.4);
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 0.82rem; font-weight: 700; color: var(--txt-primary); display: flex; align-items: center; gap: 0.35rem; }
.user-email { font-size: 0.68rem; color: var(--txt-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chevron { color: var(--txt-muted); font-size: 1.1rem; }

.pro-badge {
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
  color: #0a0600;
  font-size: 0.6rem;
  font-weight: 900;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WORKSPACE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.workspace {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-workspace);
}

/* ── VERTICAL TAB NAV (sidebar) ── */
.tab-nav {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.15rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border-structural) transparent;
}
.tab-nav::-webkit-scrollbar { width: 3px; }
.tab-nav::-webkit-scrollbar-thumb { background: var(--border-structural); border-radius: 2px; }

.tab-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding: 0.48rem 0.55rem;
  background: none; border: 1px solid transparent;
  border-radius: 0.45rem;
  color: var(--txt-muted);
  font-family: var(--font-sans);
  font-size: 0.76rem; font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: var(--ease);
  white-space: nowrap;
}
.tab-btn .tab-ico { width: 1.15rem; text-align: center; flex-shrink: 0; font-size: 0.9rem; line-height: 1; }
.tab-btn .tab-lbl { overflow: hidden; text-overflow: ellipsis; }
.tab-btn .tab-step {
  width: 1.15rem; height: 1.15rem; flex-shrink: 0;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.14);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.58rem; font-weight: 800; color: var(--txt-muted);
  background: rgba(255,255,255,0.03);
}
.tab-btn:hover { color: var(--txt-secondary); background: rgba(255,255,255,0.04); }
.tab-btn.active {
  color: var(--gold);
  background: rgba(147,51,234,0.14);
  border-color: rgba(147,51,234,0.35);
}
.tab-btn.active .tab-step {
  color: #0a0600; background: var(--gold); border-color: var(--gold);
}
.tab-btn.active::before {
  content: '';
  position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--gold-deep), var(--gold), var(--purple-bright));
  box-shadow: 0 0 8px rgba(255,215,0,0.45);
}
.tab-btn.active::after { display: none; }

.nav-group { display: flex; flex-direction: column; gap: 0.12rem; }
.nav-advanced {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border-structural);
}
.nav-advanced-toggle {
  width: 100%; display: flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.55rem; border: 1px solid transparent; border-radius: 0.45rem;
  background: none; color: var(--txt-muted); cursor: pointer;
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.nav-advanced-toggle:hover { color: var(--txt-secondary); background: rgba(255,255,255,0.04); }
.nav-advanced.open .nav-advanced-toggle { color: var(--gold); }
.nav-advanced-caret { width: 0.9rem; transition: transform 0.15s ease; }
.nav-advanced.open .nav-advanced-caret { transform: rotate(90deg); }
.nav-advanced-items {
  display: flex; flex-direction: column; gap: 0.12rem;
  margin-top: 0.25rem; padding-left: 0.15rem;
}
.nav-advanced-items[hidden] { display: none !important; }
.nav-advanced-divider {
  height: 1px; margin: 0.35rem 0.4rem;
  background: var(--border-structural);
}
.nav-advanced-items .tab-btn { font-size: 0.72rem; padding: 0.4rem 0.5rem; }

.workflow-hub { display: flex; flex-direction: column; gap: 1rem; }
.workflow-hub-hero {
  padding: 1.1rem 1.25rem; border-radius: 0.7rem;
  border: 1px solid var(--border-structural);
  background: linear-gradient(135deg, rgba(147,51,234,0.12), rgba(15,12,31,0.4));
}
.workflow-hub-hero h2 { margin: 0 0 0.35rem; font-size: 1.25rem; }
.workflow-hub-hero p { margin: 0; color: var(--txt-secondary); font-size: 0.88rem; line-height: 1.45; }
.workflow-hub-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }
.workflow-metric-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.65rem;
}
.workflow-metric {
  padding: 0.75rem 0.85rem; border-radius: 0.55rem;
  border: 1px solid var(--border-structural); background: var(--bg-card);
}
.workflow-metric .v { font-size: 1.2rem; font-weight: 800; color: var(--gold); }
.workflow-metric .l { font-size: 0.7rem; color: var(--txt-muted); margin-top: 0.2rem; text-transform: uppercase; letter-spacing: 0.04em; }
.workflow-list { display: flex; flex-direction: column; gap: 0.45rem; }
.workflow-list-item {
  display: flex; justify-content: space-between; gap: 0.75rem; align-items: center;
  padding: 0.65rem 0.8rem; border-radius: 0.5rem;
  border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02);
  font-size: 0.85rem;
}
.workflow-list-item strong { color: var(--txt-primary); }
.workflow-list-item span { color: var(--txt-secondary); font-size: 0.78rem; }

/* ── TAB CONTENT CONTAINER ── */
.tab-content-container {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-card) transparent;
}
.tab-content-container:has(#tab-content-layout.active) {
  overflow-anchor: none;
}
.tab-content-container::-webkit-scrollbar { width: 4px; }
.tab-content-container::-webkit-scrollbar-thumb { background: var(--border-card); border-radius: 2px; }

.tab-content { display: none; animation: fadeIn 0.35s ease; }
.tab-content.active { display: block; }

/* ── PIPELINE BAR ── */
.pipeline-card {
  border: 1px solid var(--border-card);
  border-radius: 0.75rem;
  background: rgba(15,12,30,0.9);
  padding: 0.9rem 1.25rem;
  margin-bottom: 1.25rem;
}
.pipeline-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.6rem;
  font-size: 0.88rem; font-weight: 700;
  color: var(--gold);
}
.pipeline-track {
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  border: 1px solid var(--border-structural);
  overflow: hidden;
}
.pipeline-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--purple-bright));
  box-shadow: 0 0 8px rgba(255,215,0,0.4);
  transition: width 0.4s ease;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STEPPER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stepper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  margin-bottom: 1.25rem;
  padding: 0 0.5rem;
}
.stepper::before {
  content: '';
  position: absolute; top: 18px; left: 0; width: 100%; height: 1px;
  background: rgba(255,255,255,0.08);
  z-index: 0;
}
.stepper-progress {
  position: absolute; top: 18px; left: 0; height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--purple-bright));
  box-shadow: 0 0 6px var(--gold-glow);
  z-index: 1;
  transition: var(--ease);
  width: 0%;
}

.step {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  z-index: 2; flex: 1;
}
.step-node {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-page);
  border: 1.5px solid var(--border-structural);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 700; color: var(--txt-muted);
  transition: var(--ease);
}
.step.active .step-node {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 16px rgba(255,215,0,0.4);
  background: rgba(212,175,55,0.06);
}
.step.complete .step-node {
  background: linear-gradient(135deg, var(--gold-rich), var(--gold));
  border-color: var(--gold);
  color: #0a0600;
  box-shadow: 0 0 14px rgba(255,215,0,0.4);
}
.step-label {
  font-size: 0.68rem; font-weight: 600;
  color: var(--txt-muted); text-align: center;
}
.step.active .step-label { color: var(--gold); }
.step.complete .step-label { color: var(--gold-deep); }
.step.active.thinking .step-node { animation: ncs-step-pulse 1.3s ease-in-out infinite; }
@keyframes ncs-step-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255,215,0,0.3); transform: scale(1); }
  50% { box-shadow: 0 0 26px rgba(255,215,0,0.75); transform: scale(1.08); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BUSY OVERLAY (save / load project)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ncs-busy {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.2s ease;
}
.ncs-busy.show { opacity: 1; }
.ncs-busy-card {
  min-width: 300px; max-width: min(420px, 90vw);
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  padding: 2rem 2.25rem 1.5rem; text-align: center;
}
.ncs-busy-icon { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.ncs-busy-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 4px solid rgba(255,215,0,0.15); border-top-color: var(--gold);
  animation: ncs-busy-spin 1s linear infinite;
}
.ncs-busy-glyph { font-size: 3.4rem; line-height: 1; animation: ncs-busy-bob 1.6s ease-in-out infinite; }
.ncs-busy.ok .ncs-busy-ring { animation: none; border-color: var(--accent-emerald); }
.ncs-busy.ok .ncs-busy-glyph { color: var(--accent-emerald); font-weight: 800; animation: none; }
.ncs-busy.err .ncs-busy-ring { animation: none; border-color: var(--accent-rose); }
.ncs-busy.err .ncs-busy-glyph { color: var(--accent-rose); font-weight: 800; animation: none; }
@keyframes ncs-busy-spin { to { transform: rotate(360deg); } }
@keyframes ncs-busy-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ncs-busy-title { font-size: 1.2rem; font-weight: 700; color: var(--txt-primary); }
.ncs-busy-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; align-self: stretch; }
.ncs-busy-steps li {
  display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; color: var(--txt-muted);
  text-align: left; transition: color 0.2s ease;
}
.ncs-busy-dot {
  flex: 0 0 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.18);
  display: grid; place-items: center; font-size: 0.7rem;
}
.ncs-busy-steps li.active { color: var(--txt-primary); }
.ncs-busy-steps li.active .ncs-busy-dot { border-color: var(--gold); border-top-color: transparent; animation: ncs-busy-spin 0.8s linear infinite; }
.ncs-busy-steps li.done { color: var(--txt-secondary); }
.ncs-busy-steps li.done .ncs-busy-dot { border-color: var(--accent-emerald); background: var(--accent-emerald); }
.ncs-busy-steps li.done .ncs-busy-dot::after { content: '✓'; color: #04130c; font-weight: 800; }
.ncs-busy-steps li.failed { color: var(--accent-rose); }
.ncs-busy-steps li.failed .ncs-busy-dot { border-color: var(--accent-rose); }
.ncs-busy-msg { font-size: 0.9rem; color: var(--txt-secondary); }
.ncs-busy.err .ncs-busy-msg { color: #fda4af; }
.ncs-busy-time { font-size: 0.75rem; color: var(--txt-muted); font-variant-numeric: tabular-nums; }
.ncs-busy.ok .ncs-busy-time, .ncs-busy.err .ncs-busy-time { display: none; }
.ncs-busy-actions { display: flex; gap: 0.6rem; }

/* Producer "working" bubble + phase chips */
.chat-thinking { display: flex; flex-direction: column; gap: 0.4rem; min-width: 220px; }
.chat-thinking-head { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.chat-thinking-dots { display: inline-flex; gap: 3px; }
.chat-thinking-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  animation: ncs-dot 1.2s ease-in-out infinite;
}
.chat-thinking-dots i:nth-child(2) { animation-delay: 0.15s; }
.chat-thinking-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ncs-dot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.chat-thinking-status { font-size: 0.82rem; color: var(--txt-secondary); transition: opacity 0.25s ease; }
.chat-thinking-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.72rem; color: var(--txt-muted); }
.chat-thinking-cancel {
  background: none; border: 1px solid rgba(255,255,255,0.15); color: var(--txt-secondary);
  border-radius: 0.35rem; padding: 0.15rem 0.5rem; font-size: 0.72rem; cursor: pointer;
}
.chat-thinking-cancel:hover { border-color: var(--accent-rose); color: #fda4af; }
.chat-phase-chip {
  align-self: center; margin: 0.4rem 0; padding: 0.3rem 0.8rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; color: var(--gold);
  background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.35);
  animation: ncs-chip-in 0.35s ease-out;
}
@keyframes ncs-chip-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ncs-busy-ring, .ncs-busy-glyph, .chat-thinking-dots i, .step.active.thinking .step-node { animation: none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CHAT CONTAINER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.chat-container {
  display: flex;
  flex-direction: column;
  background: rgba(16,10,36,0.7);
  border: 1px solid var(--border-card);
  border-radius: 1.1rem;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(100,60,200,0.08);
}

/* ── Welcome Hero ── */
.welcome-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 2rem 1.5rem;
  background: var(--bg-hero);
  border-bottom: 1px solid var(--border-structural);
  min-height: 280px;
}

.welcome-left { flex: 1; min-width: 0; }

.welcome-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.welcome-title {
  font-size: 2.6rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 0.3rem;
  letter-spacing: -0.02em;
}
.welcome-ai {
  background: linear-gradient(135deg, #67e8f9, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.welcome-slogan {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--txt-secondary);
  margin: 0.15rem 0 0.55rem;
  max-width: 420px;
}
.welcome-stars {
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.3rem;
  margin-bottom: 0.75rem;
}
.welcome-desc {
  font-size: 0.9rem;
  color: var(--txt-secondary);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  max-width: 420px;
}

/* ── Feature chips ── */
.feature-chips {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
}
.feature-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.25rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-structural);
  border-radius: 0.75rem;
  padding: 0.65rem 0.85rem;
  min-width: 90px; text-align: center;
  transition: var(--ease);
}
.feature-chip:hover {
  border-color: rgba(147,51,234,0.35);
  background: rgba(147,51,234,0.06);
}
.chip-icon { font-size: 1.4rem; }
.chip-main { font-size: 0.78rem; font-weight: 700; color: var(--txt-primary); }
.chip-sub  { font-size: 0.65rem; color: var(--txt-muted); }

/* ── Right banner ── */
.welcome-right {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.welcome-banner-img {
  height: auto;
  width: auto;
  max-width: 480px;
  max-height: 200px;
  object-fit: contain;
  filter: drop-shadow(0 8px 32px rgba(34, 211, 238, 0.35)) drop-shadow(0 0 48px rgba(147, 51, 234, 0.35));
  animation: floatBanner 4s ease-in-out infinite;
}
@keyframes floatBanner {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* ── Chat messages area ── */
.chat-messages {
  flex: 1;
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-height: 80px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-border) transparent;
}

.chat-bubble {
  max-width: 78%;
  padding: 0.8rem 1.1rem;
  border-radius: 1rem;
  font-size: 0.92rem;
  line-height: 1.5;
  animation: slideIn 0.3s ease;
  white-space: pre-wrap;
}
.chat-bubble-assistant {
  background: rgba(26,18,54,0.8);
  border: 1px solid var(--border-card);
  align-self: flex-start;
  border-top-left-radius: 0.2rem;
}
.chat-bubble-user {
  background: linear-gradient(135deg, var(--purple-deep), var(--purple-rich));
  border: 1px solid rgba(192,132,252,0.25);
  color: #fff;
  align-self: flex-end;
  border-top-right-radius: 0.2rem;
  box-shadow: 0 4px 14px rgba(147,51,234,0.25);
}

/* ── Chat input ── */
.chat-input-area {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--border-structural);
  background: rgba(8,6,20,0.8);
}
.chat-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border-structural);
  border-radius: 0.65rem;
  padding: 0.7rem 1.1rem;
  color: var(--txt-primary);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  transition: var(--ease);
}
.chat-input::placeholder { color: var(--txt-muted); }
.chat-input:focus {
  outline: none;
  border-color: rgba(147,51,234,0.5);
  box-shadow: 0 0 14px rgba(147,51,234,0.12);
}

.btn-send {
  height: 40px; padding: 0 1.25rem;
  background: linear-gradient(135deg, var(--purple-deep), var(--purple-rich));
  border: 1px solid rgba(192,132,252,0.3);
  border-radius: 0.65rem;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.85rem; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; gap: 0.4rem;
  transition: var(--ease);
  box-shadow: 0 4px 14px rgba(147,51,234,0.25);
  flex-shrink: 0;
}
.btn-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(147,51,234,0.4);
}

/* ── Suggestion chips ── */
.suggestion-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--border-structural);
  background: rgba(8,5,18,0.6);
}
.suggestion-label {
  font-size: 0.72rem; font-weight: 700;
  color: var(--txt-muted);
  white-space: nowrap;
}
.suggestion-chip {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-structural);
  border-radius: 2rem;
  padding: 0.3rem 0.8rem;
  font-size: 0.75rem; font-weight: 600;
  color: var(--txt-secondary);
  cursor: pointer;
  transition: var(--ease);
  font-family: var(--font-sans);
  white-space: nowrap;
}
.suggestion-chip:hover {
  border-color: rgba(147,51,234,0.45);
  color: var(--purple-bright);
  background: rgba(147,51,234,0.07);
}

/* ── Bottom feature row ── */
.bottom-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-structural);
  background: rgba(10,7,22,0.7);
}
.bottom-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1.25rem;
  border-right: 1px solid var(--border-structural);
  transition: var(--ease);
}
.bottom-feature:last-child { border-right: none; }
.bottom-feature:hover { background: rgba(147,51,234,0.04); }
.bottom-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 0.1rem; }
.bottom-feat-title { font-size: 0.8rem; font-weight: 700; color: var(--txt-primary); }
.bottom-feat-sub   { font-size: 0.7rem; color: var(--txt-muted); line-height: 1.4; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   OTHER TAB CONTENT — CARDS / TABLES / METRICS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.placeholder-msg {
  text-align: center;
  color: var(--txt-muted);
  padding: 4rem 2rem;
  font-size: 0.92rem;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 1rem;
  padding: 1.5rem;
  backdrop-filter: blur(16px);
  position: relative;
  transition: var(--ease);
}
.card:hover { border-color: rgba(147,51,234,0.35); box-shadow: 0 4px 28px rgba(100,60,200,0.1); }

.card-highlight { border-color: rgba(147,51,234,0.3); }

.section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
  font-weight: 800;
  margin-bottom: 0.75rem;
}

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }

/* Tables */
table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
th, td { padding: 0.65rem 0.9rem; text-align: left; border-bottom: 1px solid var(--gold-border); }
th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gold-deep); font-weight: 800; background: rgba(212,175,55,0.04); }
td { font-size: 0.88rem; color: var(--txt-primary); }
td:first-child { color: var(--gold-rich); font-weight: 600; }
.value-mono { font-family: var(--font-mono); color: var(--gold); }

/* Metrics row */
.metric-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-bottom: 1.5rem; }
.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 0.85rem;
  padding: 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: var(--ease);
}
.metric-card:hover { border-color: rgba(147,51,234,0.35); box-shadow: 0 4px 18px rgba(100,60,200,0.1); }
.metric-val {
  font-size: 1.55rem; font-weight: 900;
  background: linear-gradient(135deg, var(--gold), var(--gold-rich));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.2rem;
}
.metric-lbl { font-size: 0.68rem; color: var(--txt-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }

/* Histograms */
.histogram { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.histo-bar-container { display: flex; align-items: center; gap: 1rem; }
.histo-lbl { width: 80px; font-size: 0.82rem; font-family: var(--font-mono); color: var(--gold-rich); }
.histo-bar-bg { flex: 1; height: 0.6rem; background: rgba(255,255,255,0.04); border-radius: 3px; overflow: hidden; border: 1px solid var(--border-structural); }
.histo-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--purple-bright)); transition: var(--ease); }
.histo-val { width: 50px; font-size: 0.82rem; font-family: var(--font-mono); text-align: right; color: var(--gold-rich); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SYMBOLS TAB
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.symbol-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 1.5rem; }
.symbol-card {
  background: var(--bg-card); border: 1px solid var(--border-card);
  border-radius: 1rem; padding: 1.25rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: var(--ease); position: relative;
}
.symbol-card:hover { border-color: rgba(147,51,234,0.4); box-shadow: 0 4px 24px rgba(100,60,200,0.12); }
.symbol-header { display: flex; justify-content: space-between; align-items: center; }
.symbol-title { font-weight: 700; font-size: 1.05rem; color: var(--txt-primary); }
.symbol-details { font-size: 0.82rem; color: var(--txt-secondary); }
.symbol-image-prompt {
  font-size: 0.78rem; color: var(--txt-muted);
  border-left: 2px solid var(--gold-border); padding-left: 0.65rem; margin-top: 0.5rem;
}

.badge { padding: 0.18rem 0.55rem; border-radius: 0.3rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.badge-high  { background: rgba(147,51,234,0.15); color: var(--purple-bright); border: 1px solid rgba(192,132,252,0.25); }
.badge-low   { background: rgba(255,255,255,0.05); color: var(--txt-secondary); border: 1px solid var(--gold-border); }
.badge-wild  { background: rgba(212,175,55,0.12); color: var(--gold); border: 1px solid var(--gold-border); }
.badge-scatter { background: rgba(16,185,129,0.1); color: #10b981; border: 1px solid rgba(16,185,129,0.2); }

/* Symbol image */
.symbol-image-container {
  width: 100%; height: 210px; border-radius: 0.75rem;
  border: 1px solid var(--border-card); background: rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; margin: 0.4rem 0;
}
.symbol-image-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.65rem; padding: 1.5rem; width: 100%; height: 100%;
  border: 2px dashed var(--border-structural); border-radius: 0.75rem; transition: var(--ease);
}
.symbol-image-placeholder .art-slot-actions {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: center;
}
.symbol-image-placeholder:hover { background: rgba(147,51,234,0.03); border-color: rgba(147,51,234,0.3); }
.placeholder-icon { font-size: 2rem; opacity: 0.4; }

/* Previous-image history strip under each generate/upload slot */
.art-history {
  display: flex; align-items: center; gap: 0.45rem;
  margin: 0 0 0.55rem; min-height: 0;
}
.art-history[hidden] { display: none !important; }
.art-history-label {
  flex: 0 0 auto; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--txt-muted); opacity: 0.85;
}
.art-history-strip {
  display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.15rem 0;
  scrollbar-width: thin; flex: 1 1 auto; min-width: 0;
}
.art-history-thumb {
  flex: 0 0 auto; width: 48px; height: 48px; padding: 0; border-radius: 0.4rem;
  border: 1px solid var(--border-structural); background: rgba(0,0,0,0.35);
  cursor: pointer; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.art-history-thumb:hover { border-color: rgba(251,191,36,0.55); }
.art-history-thumb.is-active {
  border-color: rgba(251,191,36,0.85);
  box-shadow: 0 0 0 1px rgba(251,191,36,0.35);
}
.art-history-thumb:focus-visible { outline: 2px solid rgba(251,191,36,0.65); outline-offset: 1px; }
.art-history-thumb img {
  display: block; width: 100%; height: 100%; object-fit: contain; background: #0b0e1a;
}
.art-upload-btn { cursor: pointer; }
.symbol-image-loader {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.65rem; padding: 1.5rem;
  font-size: 0.82rem; color: var(--txt-secondary);
}
.loader-spinner {
  width: 1.4rem; height: 1.4rem;
  border: 2px solid rgba(147,51,234,0.2);
  border-top-color: var(--purple-bright);
  border-radius: 50%;
  animation: spin 0.8s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.symbol-img-wrapper { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; }
.symbol-generated-img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.75rem; transition: transform 0.5s ease; }
.symbol-img-wrapper:hover .symbol-generated-img { transform: scale(1.04); }

.symbol-img-actions {
  position: absolute; inset: 0;
  background: rgba(8,8,15,0.8); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; gap: 0.65rem;
  opacity: 0; transition: opacity 0.25s; padding: 1rem; z-index: 10;
}
.symbol-img-wrapper:hover .symbol-img-actions { opacity: 1; }

.btn-action-glass {
  background: rgba(255,255,255,0.06); border: 1px solid var(--border-structural);
  color: var(--txt-primary); padding: 0.45rem 0.9rem; border-radius: 0.45rem;
  font-size: 0.78rem; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: var(--ease); display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--font-sans);
}
.btn-action-glass:hover { background: rgba(147,51,234,0.15); border-color: var(--purple-rich); }

.btn-generate-symbol {
  width: auto; padding: 0.45rem 0.9rem; border-radius: 0.45rem;
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  border: 1px solid var(--border-card); background: rgba(147,51,234,0.06); color: var(--purple-bright);
  transition: var(--ease);
}
.btn-generate-symbol:hover:not(:disabled) { border-color: var(--purple-rich); background: rgba(147,51,234,0.14); box-shadow: 0 0 12px rgba(147,51,234,0.2); }
.btn-generate-symbol:disabled { opacity: 0.5; cursor: not-allowed; }

.symbol-prompt-box {
  background: rgba(0,0,0,0.2); border: 1px solid var(--border-structural);
  border-radius: 0.55rem; padding: 0.65rem; font-size: 0.78rem; margin-top: auto;
}
.prompt-title { font-weight: 800; color: var(--gold-deep); display: block; margin-bottom: 0.2rem; font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.06em; }
.prompt-text  { color: var(--txt-muted); font-style: italic; line-height: 1.4; display: block; }

/* ── Editable prompt box (art / sounds / effects) ── */
.prompt-edit-box {
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--border-structural);
  border-radius: 0.55rem;
  padding: 0.6rem 0.7rem;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.prompt-edit-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.prompt-edit-title { font-weight: 800; color: var(--gold-deep); font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.06em; }
.prompt-edit-actions { display: flex; gap: 0.35rem; }
.prompt-edit-btn {
  font-size: 0.68rem; font-weight: 700; line-height: 1;
  padding: 0.28rem 0.5rem; border-radius: 0.35rem; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border-structural);
  color: var(--txt-secondary); transition: var(--ease);
}
.prompt-edit-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: var(--txt-primary); }
.prompt-save-btn { border-color: rgba(16,185,129,0.45); color: #10b981; }
.prompt-save-btn:hover { background: rgba(16,185,129,0.12); border-color: #10b981; }
.prompt-edit-input {
  width: 100%; box-sizing: border-box; resize: vertical;
  min-height: 3.4rem; max-height: 320px;
  background: rgba(0,0,0,0.28); border: 1px solid var(--border-structural);
  border-radius: 0.4rem; padding: 0.5rem 0.6rem;
  color: var(--txt-primary); font-family: var(--font-sans);
  font-size: 0.78rem; line-height: 1.45;
}
.prompt-edit-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212,175,55,0.15); }
.prompt-edit-hint { font-size: 0.68rem; color: var(--txt-muted); line-height: 1.3; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   AUDIO TAB
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.audio-deck { display: flex; flex-direction: column; gap: 2rem; animation: fadeIn 0.4s ease; }
.audio-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: 1.5rem; }
.audio-card {
  background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 1rem;
  padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem;
  position: relative; transition: var(--ease);
}
.audio-card:hover { border-color: rgba(147,51,234,0.4); background: var(--bg-card-hover); box-shadow: 0 4px 22px rgba(100,60,200,0.1); }
.audio-header { display: flex; justify-content: space-between; align-items: center; }
.audio-title  { font-weight: 700; font-size: 1.05rem; color: var(--txt-primary); }
.audio-details{ font-size: 0.82rem; color: var(--txt-secondary); line-height: 1.4; }

.audio-player-container { background: rgba(0,0,0,0.3); border: 1px solid var(--border-structural); border-radius: 0.75rem; padding: 0.7rem 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.audio-controls { display: flex; align-items: center; gap: 0.65rem; }
.btn-play-pause {
  background: linear-gradient(135deg, var(--gold-rich), var(--gold));
  border: none; color: #0a0600;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; box-shadow: 0 3px 10px rgba(212,175,55,0.3); transition: var(--ease);
}
.btn-play-pause:hover { transform: scale(1.07); box-shadow: 0 5px 18px rgba(212,175,55,0.45); }

.audio-progress-bar-container { flex-grow: 1; height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; position: relative; cursor: pointer; }
.audio-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-rich), var(--gold)); border-radius: 2px; transition: width 0.1s linear; }

.audio-time { font-family: var(--font-mono); font-size: 0.72rem; color: var(--txt-muted); min-width: 60px; text-align: right; }
.audio-actions { display: flex; justify-content: flex-end; gap: 0.45rem; margin-top: 0.2rem; }
.btn-audio-action {
  padding: 0.3rem 0.65rem; border-radius: 0.35rem; font-size: 0.72rem; font-weight: 700;
  cursor: pointer; border: 1px solid var(--border-structural); background: rgba(255,255,255,0.04);
  color: var(--txt-secondary); display: inline-flex; align-items: center; gap: 0.25rem; transition: var(--ease);
}
.btn-audio-action:hover { background: rgba(147,51,234,0.1); border-color: rgba(147,51,234,0.4); color: var(--purple-bright); }

.audio-prompt-box { background: rgba(0,0,0,0.15); border-top: 1px solid var(--border-structural); margin: 0.25rem -1.25rem -1.25rem -1.25rem; padding: 0.65rem 1.25rem; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.audio-prompt-title { font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-deep); font-weight: 800; }
.audio-prompt-text  { font-size: 0.78rem; color: var(--txt-secondary); line-height: 1.4; }

.audio-filter-bar { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1.1rem 0; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border-structural); }
.audio-filter-btn { padding: 0.4rem 0.9rem; font-size: 0.78rem; font-weight: 700; border-radius: 2rem; border: 1px solid var(--border-structural); background: rgba(255,255,255,0.03); color: var(--txt-muted); cursor: pointer; transition: all 0.2s; font-family: var(--font-sans); }
.audio-filter-btn:hover { background: rgba(147,51,234,0.07); color: var(--purple-bright); border-color: rgba(147,51,234,0.4); }
.audio-filter-btn.active { background: rgba(147,51,234,0.15); color: var(--purple-bright); border-color: var(--purple-rich); box-shadow: 0 0 10px rgba(147,51,234,0.2); }

.audio-waveform-visualization { display: flex; align-items: center; gap: 3px; height: 26px; margin: 0.4rem 0; justify-content: center; width: 100%; }
.audio-waveform-bar { width: 3px; background: rgba(212,175,55,0.15); height: 35%; border-radius: 1px; transition: height 0.15s ease, background-color 0.3s ease; }
.audio-waveform-visualization.playing .audio-waveform-bar { background: linear-gradient(180deg, var(--gold), var(--purple-bright)); animation: audioWavePulse 1.2s ease-in-out infinite alternate; }
.audio-waveform-visualization.playing .audio-waveform-bar:nth-child(1)  { animation-delay: 0.05s; }
.audio-waveform-visualization.playing .audio-waveform-bar:nth-child(2)  { animation-delay: 0.15s; }
.audio-waveform-visualization.playing .audio-waveform-bar:nth-child(3)  { animation-delay: 0.30s; }
.audio-waveform-visualization.playing .audio-waveform-bar:nth-child(4)  { animation-delay: 0.10s; }
.audio-waveform-visualization.playing .audio-waveform-bar:nth-child(5)  { animation-delay: 0.40s; }
.audio-waveform-visualization.playing .audio-waveform-bar:nth-child(6)  { animation-delay: 0.20s; }
.audio-waveform-visualization.playing .audio-waveform-bar:nth-child(7)  { animation-delay: 0.25s; }
.audio-waveform-visualization.playing .audio-waveform-bar:nth-child(8)  { animation-delay: 0.35s; }
.audio-waveform-visualization.playing .audio-waveform-bar:nth-child(9)  { animation-delay: 0.12s; }
.audio-waveform-visualization.playing .audio-waveform-bar:nth-child(10) { animation-delay: 0.22s; }
.audio-waveform-visualization.playing .audio-waveform-bar:nth-child(11) { animation-delay: 0.07s; }
.audio-waveform-visualization.playing .audio-waveform-bar:nth-child(12) { animation-delay: 0.32s; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LEGACY BUTTON ALIASES (app.js compatibility)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn { padding: 0.5rem 1.1rem; border-radius: 0.5rem; font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: var(--ease); border: 1px solid transparent; display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-sans); }
.btn-primary { background: linear-gradient(135deg,#c8961a,#e8b220,#ffd700,#d4a017); color: #0a0600; border-color: var(--gold); box-shadow: 0 4px 18px rgba(212,175,55,0.3); }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 7px 24px rgba(212,175,55,0.45); }
.btn-secondary { background: rgba(255,255,255,0.04); border-color: var(--border-structural); color: var(--txt-secondary); }
.btn-secondary:hover:not(:disabled) { background: rgba(147,51,234,0.07); border-color: rgba(147,51,234,0.4); color: var(--purple-bright); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* legacy form-input alias */
.form-input { flex: 1; background: var(--bg-input); border: 1px solid var(--border-structural); padding: 0.7rem 1.1rem; border-radius: 0.65rem; color: var(--txt-primary); font-family: var(--font-sans); font-size: 0.92rem; transition: var(--ease); }
.form-input::placeholder { color: var(--txt-muted); }
.form-input:focus { outline: none; border-color: rgba(147,51,234,0.5); box-shadow: 0 0 12px rgba(147,51,234,0.12); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCROLLBAR SWATCHES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: 1rem; }
.swatch-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border-card); border-radius: 0.75rem; padding: 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; transition: var(--ease); }
.swatch-card:hover { border-color: rgba(147,51,234,0.4); }
.swatch-color { height: 3.2rem; border-radius: 0.45rem; border: 1px solid var(--border-structural); }
.swatch-hex  { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--gold-rich); }
.swatch-name { font-size: 0.82rem; font-weight: 700; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ANIMATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes fadeIn  { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideIn { from { opacity:0; transform:translateY(10px);} to { opacity:1; transform:translateY(0); } }
@keyframes audioWavePulse { 0% { height:20%; } 100% { height:100%; } }
@keyframes purplePulse { 0%,100% { box-shadow:0 0 12px rgba(147,51,234,0.15); } 50% { box-shadow:0 0 24px rgba(147,51,234,0.35); } }

.project-card.active { animation: purplePulse 3s ease-in-out infinite; }

/* ── Paylines tab ───────────────────────────────────────────────────────── */
.payline-card { cursor: pointer; transition: var(--ease); }
.payline-card:hover { border-color: rgba(110,231,255,0.5); box-shadow: 0 0 14px rgba(110,231,255,0.15); }
.payline-card.selected { border-color: #34d399; box-shadow: 0 0 16px rgba(52,211,153,0.25); }
.payline-preview {
  background: rgba(0,0,0,0.28); border: 1px solid var(--border-structural);
  border-radius: 0.55rem; padding: 0.5rem; display: flex; align-items: center; justify-content: center;
}
.payline-svg { width: 100%; height: auto; display: block; }
.payline-line {
  stroke-dasharray: 7 6;
  animation: paylineFlow 1.1s linear infinite;
  filter: drop-shadow(0 0 3px currentColor);
}
@keyframes paylineFlow { to { stroke-dashoffset: -13; } }
.payline-check { font-size: 0.72rem; font-weight: 700; color: var(--color-text-muted, #71717a); }
.payline-card.selected .payline-check { color: #34d399; }

/* ── Layout Studio (hierarchy + preview + inspector) ─────────────────────── */
.layout-studio {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  gap: 0.85rem;
  align-items: stretch;
  min-height: calc(100vh - 210px);
  overflow-anchor: none;
}
@media (max-width: 1100px) {
  .layout-studio { grid-template-columns: 1fr; }
}
.layout-hier {
  padding: 0.65rem 0.55rem;
  overflow: auto;
  max-height: calc(100vh - 220px);
}
.layout-hier-head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #71717a);
  margin-bottom: 0.5rem;
  padding: 0 0.35rem;
}
.layout-hier-layout {
  font-size: 0.8rem;
  font-weight: 700;
  color: #e2e8f0;
  padding: 0.25rem 0.35rem 0.45rem;
}
.layout-hier-sec { margin-bottom: 0.15rem; }
.layout-hier-sec-row { display: flex; align-items: center; gap: 0.15rem; }
.layout-hier-twist {
  width: 1.4rem; height: 1.4rem; border: none; background: transparent;
  color: #94a3b8; cursor: pointer; font-size: 0.75rem; padding: 0;
}
.layout-hier-sec-btn, .layout-hier-item, .layout-hier-add {
  flex: 1;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.4rem;
  color: var(--color-text-secondary, #a1a1aa);
  padding: 0.32rem 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.layout-hier-sec-btn:hover, .layout-hier-item:hover, .layout-hier-add:hover {
  background: rgba(255,255,255,0.05); color: #fff;
}
.layout-hier-sec-btn.active, .layout-hier-item.active {
  background: rgba(212, 175, 55, 0.16);
  border-color: rgba(212, 175, 55, 0.45);
  color: #ffe08a;
}
.layout-hier-sec.active-sec > .layout-hier-sec-row .layout-hier-sec-btn {
  color: #e2e8f0;
}
.layout-hier-kids { padding: 0.15rem 0 0.25rem 1.15rem; }
.layout-hier-dot {
  display: inline-block; width: 0.45rem; height: 0.45rem;
  border-radius: 50%; margin-right: 0.25rem; vertical-align: middle;
}
.layout-hier-empty {
  font-size: 0.7rem; color: #64748b; padding: 0.25rem 0.4rem;
}
.layout-hier-add { color: #86efac; font-size: 0.72rem; }

.layout-preview-pane {
  display: flex; flex-direction: column; gap: 0.5rem; min-width: 0;
  /* Let HUD boxes spill past the stage edge while dragging. */
  overflow: visible;
  padding-bottom: 2.5rem;
}
.layout-studio.ss-split > .layout-preview-pane.ss-split-pane {
  overflow: visible !important;
}
.layout-preview-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem; color: var(--color-text-muted, #71717a);
}
.layout-preview-title { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.layout-preview-sel { color: #ffe08a; font-weight: 600; }
.layout-preview-foot {
  font-size: 0.7rem; color: var(--color-text-muted, #71717a); margin: 0;
}
.layout-inspector {
  padding: 0.85rem;
  overflow: auto;
  max-height: calc(100vh - 220px);
}
/* StudioShell split panes default to overflow:hidden — keep Layout panels scrollable */
.layout-studio.ss-split > .layout-inspector.ss-split-pane,
.layout-studio.ss-split > .layout-hier.ss-split-pane {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 220px);
  overscroll-behavior: contain;
}
.layout-insp-actions {
  display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.75rem;
}
.layout-insp-hint {
  font-size: 0.72rem; color: var(--color-text-muted, #71717a); line-height: 1.4;
}
.layout-art-panel {
  grid-column: 1 / -1;
  margin-top: 0.75rem;
  padding: 0.65rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.5rem;
  background: rgba(0,0,0,0.18);
}
.layout-art-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0.35rem 0.5rem; margin-bottom: 0.35rem; }
.layout-art-ico { font-size: 1.1rem; }
.layout-art-title { font-size: 0.82rem; font-weight: 700; }
.layout-art-sub { font-size: 0.65rem; color: #71717a; }
.layout-art-name { font-size: 0.85rem; font-weight: 700; margin: 0.25rem 0; }
.layout-art-desc, .layout-art-details { font-size: 0.72rem; color: #a1a1aa; margin-bottom: 0.5rem; }
.layout-art-panel .symbol-image-container { min-height: 120px !important; }
.layout-art-panel .prompt-edit-box { margin: 0.5rem 0; }
.layout-art-panel .symbol-card { background: transparent; border: none; padding: 0; }
.layout-art-panel .art-history,
.layout-edge-card .art-history,
.symbol-card .art-history { margin-top: 0.35rem; }
.layout-edge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.layout-edge-card { padding: 0.35rem; border: 1px solid rgba(255,255,255,0.06); border-radius: 0.4rem; overflow: visible; }
.layout-hud-presets { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.layout-hud-preset {
  font-size: 0.68rem; font-weight: 600; padding: 0.3rem 0.5rem; border-radius: 0.35rem;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: #a1a1aa; cursor: pointer;
}
.layout-hud-preset.selected, .layout-hud-preset:hover {
  border-color: #34d399; color: #6ee7b7; background: rgba(52,211,153,0.12);
}
.layout-hud-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
.layout-hud-toggle {
  display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: #a1a1aa;
  padding: 0.25rem 0.35rem; border: 1px solid rgba(255,255,255,0.06); border-radius: 0.35rem; cursor: pointer;
}
.layout-hud-row { display: flex; align-items: stretch; gap: 0.2rem; min-width: 0; }
.layout-hud-row .layout-hud-toggle { flex: 1 1 auto; min-width: 0; }
.layout-hud-row .layout-hud-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layout-hud-up {
  flex: 0 0 auto; padding: 0 0.3rem; font-size: 0.68rem; line-height: 1; color: #a1a1aa; cursor: pointer;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.35rem;
}
.layout-hud-up:hover { border-color: #a78bfa; color: #e4e4e7; }
.layout-hud-up.has-art { border-color: rgba(52,211,153,0.55); color: #34d399; }
.layout-inspector { min-width: 280px; }
@media (min-width: 1100px) {
  .layout-studio { grid-template-columns: 220px minmax(0, 1fr) 340px; }
}
.layout-overlay-row {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.45rem;
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.45rem;
  grid-column: 1 / -1;
}
.layout-overlay-head {
  font-size: 0.78rem; font-weight: 700; color: #e2e8f0; margin-bottom: 0.35rem;
}
.layout-nums select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.4rem;
  color: #fff;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
}
.layout-guides { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.layout-guide-v, .layout-guide-h {
  position: absolute; background: rgba(148, 163, 184, 0.28);
}
.layout-guide-v { top: 0; bottom: 0; width: 1px; }
.layout-guide-h { left: 0; right: 0; height: 1px; }
.layout-overlay-layer {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.35rem;
  padding: 0.5rem; background: linear-gradient(180deg, rgba(192,132,252,0.08), transparent 40%);
}
.layout-overlay-layer.active { box-shadow: inset 0 0 0 2px rgba(192,132,252,0.55); }
.layout-overlay-chip {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.15rem 0.4rem; border-radius: 999px;
  background: rgba(192,132,252,0.25); color: #e9d5ff;
  border: 1px solid rgba(192,132,252,0.45);
}
.layout-stage-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-color: #0b0e1a;
  background-position: var(--layout-bg-pos, center);
  background-size: var(--layout-bg-size, cover);
  background-repeat: no-repeat;
  opacity: var(--layout-bg-opacity, 1);
  filter: blur(var(--layout-bg-blur, 0px));
  transform: scale(1.02);
}
.layout-stage-bgfx {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: var(--layout-bg-overlay, transparent);
}
.layout-stage.layout-stage-bg-selected {
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.65);
}
.layout-box.dimmed { cursor: pointer; pointer-events: auto; }

.layout-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #0b0e1a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.6rem;
  /* Visible so HUD can be dragged past the bottom/side of the frame. */
  overflow: visible;
  touch-action: none;
  user-select: none;
}
.layout-stage-bg,
.layout-stage-bgfx {
  border-radius: inherit;
  overflow: hidden;
  clip-path: inset(0 round 0.6rem);
}
.layout-stage .layout-box,
.layout-stage .layout-guides,
.layout-stage .layout-overlay-layer { z-index: 2; }

/* Segmented control for picking which element (Border/Grid/Title) is being edited. */
.layout-selector {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}
.layout-sel-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
  color: var(--color-text-secondary, #a1a1aa);
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.layout-sel-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.layout-sel-btn.active {
  background: rgba(212, 175, 55, 0.18);
  border-color: #d4af37;
  color: #ffe08a;
}

/* "Game Frame" vs "HUD Controls" groups — separate coordinate spaces, shown
 * one group's boxes at a time on the stage. */
.layout-selector-group { margin-top: 0.6rem; }
.layout-selector-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted, #71717a);
  margin-top: 0.6rem;
}
.layout-selector-group .layout-selector { margin-top: 0.35rem; }

/* One box per element (Border / Grid / Title). Colors distinguish them at a
 * glance; only the active one is interactive — the others render dimmed so
 * the user keeps spatial context while editing. */
.layout-box {
  position: absolute;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  transition: opacity 0.15s ease;
}
.layout-box-border { border: 2px solid #d4af37; background: rgba(212, 175, 55, 0.10); }
.layout-box-grid   { border: 2px solid #3b82f6; background: rgba(59, 130, 246, 0.16); }
.layout-box-title  { border: 2px dashed #f472b6; background: rgba(244, 114, 182, 0.14); }

.layout-box.dimmed {
  opacity: 0.45;
  pointer-events: auto;
  cursor: pointer;
}
.layout-box.active {
  cursor: move;
  z-index: 5;
  opacity: 1;
}
.layout-box-disabled.dimmed { opacity: 0.22; }

/* Other-group context (e.g. reels while editing HUD) stays readable when art is on. */
.layout-box-context { opacity: 0.5; }

/* Art is shown exactly as the game draws it (its own Opacity / Blend); only the
 * outline and label fade on unselected boxes. */
.layout-box-has-art.dimmed,
.layout-box-has-art.layout-box-context {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.layout-box-has-art.dimmed .layout-box-label { opacity: 0.6; }
.layout-box-has-art.dimmed:hover { border-color: rgba(255, 255, 255, 0.45) !important; }
.layout-box-has-art.layout-box-disabled.dimmed { opacity: 0.22; }
.layout-box-hud-layer { z-index: 3; }
.layout-box-frame-layer { z-index: 2; }
.layout-box-hud-layer.active { z-index: 6; }

.layout-box-art {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}
.layout-box-has-art {
  background: transparent !important;
  box-shadow: none;
}
.layout-box-border.layout-box-has-art .layout-box-art,
.layout-box-hudbg.layout-box-has-art .layout-box-art {
  background-size: 100% 100%;
}
.layout-box-has-art .layout-box-label {
  top: 3px;
  left: 4px;
  transform: none;
  font-size: 0.58rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.55);
  letter-spacing: 0.03em;
}

.layout-reel-grid {
  position: absolute;
  inset: 7%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2.5%;
  pointer-events: none;
  z-index: 0;
}
.layout-reel-cell {
  border-radius: 3px;
  background-color: rgba(0, 0, 0, calc(0.28 * var(--layout-backer-alpha, 1)));
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.layout-box-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.72rem;
  font-weight: 700;
  color: #cfe0ff;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
}

.layout-handle {
  position: absolute;
  width: 12px; height: 12px;
  background: #fff;
  border: 2px solid #3b82f6;
  border-radius: 3px;
  transform: translate(-50%, -50%);
  z-index: 6;
}
.layout-box-border .layout-handle { border-color: #d4af37; }
.layout-box-title .layout-handle { border-color: #f472b6; }
.lh-nw { left: 0; top: 0; }
.lh-n  { left: 50%; top: 0; }
.lh-ne { left: 100%; top: 0; }
.lh-e  { left: 100%; top: 50%; }
.lh-se { left: 100%; top: 100%; }
.lh-s  { left: 50%; top: 100%; }
.lh-sw { left: 0; top: 100%; }
.lh-w  { left: 0; top: 50%; }

/* Border-only: the 4 amber dots that drag each side's ornament thickness. */
.layout-thickness-handle {
  position: absolute;
  width: 14px; height: 14px;
  background: #d4af37;
  border: 2px solid #1a1f3d;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 7;
}
.layout-thickness-handle:active { cursor: grabbing; }

.layout-nums {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 0.75rem;
}
.layout-num { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; color: var(--color-text-secondary, #a1a1aa); }
.layout-num input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.4rem;
  color: #fff;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
}
.layout-num input[type="checkbox"] {
  padding: 0;
  height: 1.1rem;
  width: 1.1rem;
}
.layout-num input[type="range"] {
  padding: 0;
  border: none;
  background: transparent;
  accent-color: #60a5fa;
}
.layout-look-alpha span { display: flex; justify-content: space-between; }
.layout-look-alpha output { color: #fff; font-variant-numeric: tabular-nums; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAYLINE STUDIO — professional 3-pane visual editor (dark theme)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pls-root { display: flex; flex-direction: column; gap: 0.6rem; height: calc(100vh - 210px); min-height: 560px; font-family: var(--font-sans); color: var(--txt-primary); }

/* Toolbar */
.pls-toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem 0.6rem; background: var(--bg-sidebar); border: 1px solid var(--border-structural); border-radius: 0.6rem; }
.pls-tb-group { display: flex; align-items: center; gap: 0.35rem; }
.pls-tb-group.pls-grow { flex: 1 1 auto; }
.pls-lbl { font-size: 0.72rem; color: var(--txt-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.pls-x { color: var(--txt-muted); }
.pls-btn { background: var(--bg-input); color: var(--txt-primary); border: 1px solid var(--border-input); border-radius: 0.45rem; padding: 0.4rem 0.7rem; font-size: 0.82rem; cursor: pointer; transition: var(--ease); white-space: nowrap; }
.pls-btn:hover { border-color: var(--gold-border); background: var(--bg-card-hover); }
.pls-btn.sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.pls-btn.pls-primary { border-color: var(--purple-border); color: var(--purple-bright); }
.pls-btn.pls-good { border-color: rgba(16,185,129,0.4); color: var(--accent-emerald); }
.pls-btn.pls-danger { border-color: rgba(244,63,94,0.4); color: var(--accent-rose); }
.pls-btn.pls-toggle.on { background: rgba(255,150,60,0.18); border-color: rgba(255,150,60,0.6); color: #ffb04a; }
.pls-btn.flash { animation: plsFlash 0.9s ease; }
@keyframes plsFlash { 0% { background: rgba(16,185,129,0.5); } 100% { background: var(--bg-input); } }
.pls-select, .pls-num, .pls-text, .pls-search, .pls-cat { background: var(--bg-input); color: var(--txt-primary); border: 1px solid var(--border-input); border-radius: 0.45rem; padding: 0.35rem 0.5rem; font-size: 0.82rem; font-family: inherit; }
.pls-num { width: 3.4rem; text-align: center; }
.pls-text { width: 14rem; }

/* Body split */
.pls-stack { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 0.6rem; }
.pls-body { display: grid; grid-template-columns: 240px 1fr 250px; gap: 0.6rem; flex: 1 1 auto; min-height: 0; }

/* Left sidebar */
.pls-left { display: flex; flex-direction: column; min-height: 0; background: var(--bg-sidebar); border: 1px solid var(--border-structural); border-radius: 0.6rem; overflow: hidden; }
.pls-left-head { display: flex; gap: 0.35rem; padding: 0.5rem; border-bottom: 1px solid var(--border-structural); }
.pls-search { flex: 1 1 auto; min-width: 0; }
.pls-cat { max-width: 6rem; }
.pls-list { flex: 1 1 auto; overflow-y: auto; padding: 0.35rem; }
.pls-item { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.45rem; border-radius: 0.45rem; cursor: pointer; border: 1px solid transparent; }
.pls-item:hover { background: var(--bg-card-hover); }
.pls-item.sel { background: rgba(147,51,234,0.16); border-color: var(--purple-border); }
.pls-item.off { opacity: 0.5; }
.pls-swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; box-shadow: 0 0 6px rgba(0,0,0,0.4); }
.pls-item-name { flex: 1 1 auto; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pls-item-meta { font-size: 0.68rem; color: var(--txt-muted); font-family: var(--font-mono); }
.pls-item-actions { display: none; gap: 0.1rem; }
.pls-item:hover .pls-item-actions, .pls-item.sel .pls-item-actions { display: flex; }
.pls-ic { background: transparent; border: none; cursor: pointer; font-size: 0.8rem; padding: 0.1rem 0.15rem; opacity: 0.75; }
.pls-ic:hover { opacity: 1; }
.pls-left-foot { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; padding: 0.45rem; border-top: 1px solid var(--border-structural); }
.pls-muted { font-size: 0.75rem; color: var(--txt-muted); }
.pls-empty, .pls-insp-empty { padding: 1rem; text-align: center; color: var(--txt-muted); font-size: 0.82rem; }

/* Center canvas */
.pls-center { display: flex; min-height: 0; }
.pls-canvas-wrap { position: relative; flex: 1 1 auto; background:
    radial-gradient(circle at 50% 40%, rgba(147,51,234,0.06), transparent 60%), var(--bg-page);
  border: 1px solid var(--border-structural); border-radius: 0.6rem; overflow: hidden; touch-action: none; }
.pls-scene-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: saturate(1.05) brightness(0.72);
}
.pls-scene-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(10,12,24,0.2), rgba(8,10,20,0.72) 72%);
}
.pls-svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; cursor: crosshair; }
.pls-cell { stroke: rgba(255,255,255,0.12); stroke-width: 1.5; transition: fill 0.15s, stroke 0.15s; }
.pls-cell.win { stroke: rgba(255,215,94,0.85); stroke-width: 2.5; filter: drop-shadow(0 0 8px rgba(255,215,94,0.35)); }
.pls-cell:hover { fill: rgba(147,51,234,0.14) !important; }
.pls-cellnum { fill: rgba(255,255,255,0.7); font-size: 13px; font-family: var(--font-mono); pointer-events: none; }
.pls-sym { fill: rgba(255,255,255,0.85); font-size: 22px; font-weight: 700; pointer-events: none; }
.pls-sym-img { opacity: 0.92; }
.pls-sym-img.win { opacity: 1; filter: brightness(1.12); }
.pls-line { cursor: pointer; transition: stroke-width 0.12s; }
.pls-line.sel { stroke-dasharray: none; }
.pls-node { cursor: grab; stroke: #0d0b1a; stroke-width: 2; }
.pls-node:hover { r: 11; }
.pls-draft { pointer-events: none; }
.pls-draft-node { pointer-events: none; }
.pls-hint { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.4rem 0.7rem; font-size: 0.78rem; color: var(--txt-secondary); background: linear-gradient(transparent, rgba(0,0,0,0.55)); pointer-events: none; text-align: center; }

/* Right inspector */
.pls-right { display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; overflow-y: auto; background: var(--bg-sidebar); border: 1px solid var(--border-structural); border-radius: 0.6rem; padding: 0.6rem; }
.pls-insp-head { font-size: 0.85rem; font-weight: 700; color: var(--gold-rich); }
.pls-field { display: flex; flex-direction: column; gap: 0.2rem; }
.pls-field.two { flex-direction: row; align-items: center; justify-content: space-between; }
.pls-field label { font-size: 0.72rem; color: var(--txt-secondary); }
.pls-field label b { color: var(--txt-primary); }
.pls-field input[type="text"], .pls-field input[type="number"], .pls-field select, .pls-field textarea { background: var(--bg-input); color: var(--txt-primary); border: 1px solid var(--border-input); border-radius: 0.4rem; padding: 0.3rem 0.45rem; font-size: 0.8rem; font-family: inherit; }
.pls-field input[type="range"] { width: 100%; }
.pls-field input[type="color"], .pls-color { width: 2.4rem; height: 1.6rem; border: 1px solid var(--border-input); border-radius: 0.35rem; background: none; cursor: pointer; padding: 0; }
.pls-insp-row { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }

/* Bottom stats */
.pls-bottom { display: flex; gap: 0.5rem; padding: 0.55rem; background: var(--bg-sidebar); border: 1px solid var(--border-structural); border-radius: 0.6rem; overflow-x: auto; }
.pls-stat { flex: 0 0 auto; min-width: 78px; padding: 0.15rem 0.5rem; border-right: 1px solid var(--border-structural); }
.pls-stat-k { font-size: 0.66rem; color: var(--txt-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.pls-stat-v { font-size: 1rem; font-weight: 700; }
.pls-stat-v.good { color: var(--accent-emerald); }
.pls-stat-v.warn { color: #fbbf24; }
.pls-stat-issues { flex: 1 1 auto; min-width: 220px; border-right: none; }
.pls-issues { max-height: 62px; overflow-y: auto; margin-top: 0.2rem; }
.pls-issue { font-size: 0.72rem; padding: 0.1rem 0; }
.pls-issue.error { color: var(--accent-rose); }
.pls-issue.warn { color: #fbbf24; }
.pls-issue.good { color: var(--accent-emerald); }
.pls-badge { display: inline-block; min-width: 1.1rem; text-align: center; border-radius: 0.4rem; font-size: 0.68rem; padding: 0 0.25rem; margin-left: 0.2rem; }
.pls-badge.err { background: rgba(244,63,94,0.2); color: var(--accent-rose); }
.pls-badge.warn { background: rgba(251,191,36,0.2); color: #fbbf24; }
.pls-badge.good { background: rgba(16,185,129,0.2); color: var(--accent-emerald); }

/* ── Line animations (visual styles) ─────────────────────────────────────── */
.pls-anim-pulse { animation: plsPulse 1.3s ease-in-out infinite; }
@keyframes plsPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.pls-anim-glow { animation: plsGlow 1.6s ease-in-out infinite; }
@keyframes plsGlow { 0%,100% { filter: drop-shadow(0 0 3px currentColor); } 50% { filter: drop-shadow(0 0 12px currentColor); } }
.pls-anim-flow, .pls-anim-movingLight { stroke-dasharray: 14 10; animation: plsFlow 0.9s linear infinite; }
@keyframes plsFlow { to { stroke-dashoffset: -24; } }
.pls-anim-dash { stroke-dasharray: 8 8; animation: plsFlow 1.1s linear infinite; }
.pls-anim-wave { animation: plsWave 1.4s ease-in-out infinite; transform-origin: center; }
@keyframes plsWave { 0%,100% { stroke-width: 3; } 50% { stroke-width: 6; } }
.pls-anim-rainbow { animation: plsRainbow 3s linear infinite; }
@keyframes plsRainbow { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
.pls-anim-electric { stroke-dasharray: 3 5; animation: plsFlow 0.35s linear infinite, plsGlow 0.7s ease-in-out infinite; }
.pls-anim-fire { animation: plsGlow 0.6s ease-in-out infinite; filter: drop-shadow(0 0 8px #ff7a1a); }

@media (max-width: 1100px) {
  .pls-body { grid-template-columns: 200px 1fr 210px; }
  .pls-text { width: 9rem; }
}

/* ── Payline Studio v2 (Presentation hub layout) ─────────────────────────── */
.pls-v2 { gap: 0.5rem; }
.pls-v2 .pls-hero {
  display: grid; grid-template-columns: minmax(0,1.4fr) auto auto; gap: 0.75rem; align-items: center;
  padding: 0.65rem 0.85rem; background: var(--bg-sidebar); border: 1px solid var(--border-structural); border-radius: 0.65rem;
}
.pls-title { margin: 0; font-size: 1.35rem; font-weight: 800; color: #fff; }
.pls-sub { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--txt-muted); max-width: 42rem; line-height: 1.35; }
.pls-hero-stats { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pls-hstat {
  min-width: 72px; padding: 0.4rem 0.55rem; border-radius: 0.45rem; text-align: center;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
}
.pls-hstat b { display: block; font-size: 1.05rem; font-weight: 800; color: #e9d5ff; }
.pls-hstat span { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--txt-muted); }
.pls-hero-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }
.pls-pane-head {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--txt-muted); padding: 0.55rem 0.65rem 0.35rem;
}
.pls-v2 .pls-body { grid-template-columns: 220px minmax(0,1.5fr) 280px; }
.pls-v2 .pls-center { flex-direction: column; background: var(--bg-sidebar); border: 1px solid var(--border-structural); border-radius: 0.6rem; overflow: hidden; min-height: 0; }
.pls-v2 .pls-center .pls-pane-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-structural); }
.pls-v2 .pls-canvas-wrap { border: none; border-radius: 0; min-height: 220px; }
.pls-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.45rem 0.55rem; border-top: 1px solid var(--border-structural); }
.pls-check { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--txt-secondary); cursor: pointer; }
.pls-status-tabs { display: flex; gap: 0.25rem; padding: 0 0.5rem 0.45rem; }
.pls-stab {
  flex: 1; border: 1px solid rgba(255,255,255,0.08); background: transparent; color: var(--txt-muted);
  border-radius: 0.35rem; padding: 0.3rem 0.2rem; font-size: 0.68rem; font-weight: 700; cursor: pointer;
}
.pls-stab.on { border-color: var(--purple-border); color: #e9d5ff; background: rgba(147,51,234,0.16); }
.pls-v2 .pls-item { gap: 0.35rem; }
.pls-item-idx { font-size: 0.7rem; font-weight: 800; color: var(--txt-muted); width: 1.4rem; flex: 0 0 auto; }
.pls-thumb { width: 56px; height: 34px; flex: 0 0 auto; border-radius: 0.3rem; background: rgba(0,0,0,0.25); }
.pls-wide { width: 100%; justify-content: center; }
.pls-v2 .pls-right { padding: 0; overflow: hidden; }
.pls-insp-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0.55rem 0.65rem 0.75rem; display: flex; flex-direction: column; gap: 0.45rem; }
.pls-insp-sub { padding: 0.55rem 0 0.2rem; margin-top: 0.25rem; border-top: 1px solid rgba(255,255,255,0.06); }
.pls-color-row { display: flex; gap: 0.35rem; align-items: center; }
.pls-hex { flex: 1; min-width: 0; background: var(--bg-input); color: var(--txt-primary); border: 1px solid var(--border-input); border-radius: 0.4rem; padding: 0.3rem 0.45rem; font-size: 0.8rem; font-family: var(--font-mono); }
.pls-swatch-row { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.pls-swatch-btn { width: 1.15rem; height: 1.15rem; border-radius: 999px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.pls-swatch-btn.on { border-color: #fff; box-shadow: 0 0 0 1px rgba(184,77,255,0.6); }
.pls-win-preview { display: flex; justify-content: center; padding: 0.45rem; border-radius: 0.45rem; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.06); }
.pls-win-preview .pls-thumb { width: 120px; height: 72px; }
.pls-bottom-wrap { display: flex; flex-direction: column; gap: 0.35rem; background: var(--bg-sidebar); border: 1px solid var(--border-structural); border-radius: 0.6rem; padding: 0.35rem 0.55rem 0.45rem; min-height: 120px; }
.pls-bottom-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.pls-bottom-bar .pls-pane-head { padding: 0.2rem 0; }
.pls-cat-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; flex: 1; }
.pls-chip {
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: var(--txt-muted);
  border-radius: 999px; padding: 0.2rem 0.55rem; font-size: 0.68rem; font-weight: 700; cursor: pointer;
}
.pls-chip.on { border-color: var(--purple-border); color: #e9d5ff; background: rgba(147,51,234,0.16); }
.pls-bottom-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pls-btn.pls-gold { border-color: rgba(251,191,36,0.45); color: #fbbf24; background: rgba(251,191,36,0.08); }
.pls-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 0.4rem;
  max-height: 140px; overflow: auto; padding: 0.15rem 0;
}
.pls-gcard {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.35rem; border-radius: 0.45rem; border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.2); cursor: pointer; color: inherit;
}
.pls-gcard:hover { border-color: rgba(184,77,255,0.45); }
.pls-gcard.sel { border-color: #fbbf24; box-shadow: 0 0 0 1px rgba(251,191,36,0.35); }
.pls-gcard-idx { font-size: 0.65rem; font-weight: 800; color: var(--txt-muted); align-self: flex-start; }
.pls-gcard .pls-thumb { width: 100%; height: 40px; }
.pls-footer { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding-top: 0.25rem; border-top: 1px solid rgba(255,255,255,0.06); }
.pls-foot-left, .pls-foot-right { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.pls-foot-ok { color: var(--accent-emerald); font-weight: 700; font-size: 0.78rem; }
.pls-switch { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--txt-secondary); cursor: pointer; }
.pls-linenum { fill: #0d0b1a; font-size: 11px; font-weight: 800; font-family: var(--font-sans); pointer-events: none; }
@media (max-width: 1200px) {
  .pls-v2 .pls-hero { grid-template-columns: 1fr; }
  .pls-v2 .pls-body { grid-template-columns: 1fr; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   VFX STUDIO — event-driven, layered, timeline VFX authoring (dark theme)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.vfx-root { display: flex; flex-direction: column; gap: 0.6rem; height: calc(100vh - 210px); min-height: 560px; font-family: var(--font-sans); color: var(--txt-primary); }
.vfx-toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem 0.6rem; background: var(--bg-sidebar); border: 1px solid var(--border-structural); border-radius: 0.6rem; }
.vfx-tb-group { display: flex; align-items: center; gap: 0.35rem; }
.vfx-tb-group.vfx-grow { flex: 1 1 auto; }
.vfx-btn { background: var(--bg-input); color: var(--txt-primary); border: 1px solid var(--border-input); border-radius: 0.45rem; padding: 0.4rem 0.7rem; font-size: 0.82rem; cursor: pointer; transition: var(--ease); white-space: nowrap; }
.vfx-btn:hover { border-color: var(--gold-border); background: var(--bg-card-hover); }
.vfx-btn.vfx-primary { border-color: var(--purple-border); color: var(--purple-bright); }
.vfx-btn.vfx-good { border-color: rgba(16,185,129,0.4); color: var(--accent-emerald); }
.vfx-btn.on { background: rgba(147,51,234,0.2); border-color: var(--purple-border); color: var(--purple-bright); }
.vfx-btn.flash { animation: plsFlash 0.9s ease; }
.vfx-select, .vfx-text { background: var(--bg-input); color: var(--txt-primary); border: 1px solid var(--border-input); border-radius: 0.45rem; padding: 0.35rem 0.5rem; font-size: 0.82rem; font-family: inherit; }
.vfx-text { width: 16rem; }
.vfx-text.sm { width: 8rem; }

.vfx-stack { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 0.6rem; }
.vfx-body { display: grid; grid-template-columns: 220px 1fr 260px; gap: 0.6rem; flex: 1 1 auto; min-height: 0; }

/* Left tree */
.vfx-left { min-height: 0; overflow-y: auto; background: var(--bg-sidebar); border: 1px solid var(--border-structural); border-radius: 0.6rem; padding: 0.5rem; }
.vfx-tree-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--txt-muted); margin-bottom: 0.5rem; }
.vfx-obj-head { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.4rem; border-radius: 0.4rem; cursor: pointer; font-weight: 600; font-size: 0.85rem; }
.vfx-obj-head:hover { background: var(--bg-card-hover); }
.vfx-events { display: none; padding-left: 0.6rem; }
.vfx-obj.open .vfx-events { display: block; }
.vfx-event { display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.4rem; border-radius: 0.4rem; cursor: pointer; font-size: 0.8rem; color: var(--txt-secondary); }
.vfx-event:hover { background: var(--bg-card-hover); }
.vfx-event.sel { background: rgba(147,51,234,0.16); color: var(--txt-primary); }
.vfx-badge { font-size: 0.6rem; padding: 0 0.3rem; border-radius: 0.35rem; text-transform: uppercase; letter-spacing: 0.3px; }
.vfx-badge.live { background: rgba(16,185,129,0.2); color: var(--accent-emerald); }
.vfx-badge.dormant { background: rgba(120,120,140,0.2); color: var(--txt-muted); }
.vfx-count { margin-left: auto; font-size: 0.68rem; font-family: var(--font-mono); background: var(--bg-input); border-radius: 0.6rem; padding: 0 0.35rem; }
.vfx-left { display: flex; flex-direction: column; gap: 0.4rem; }
.vfx-tree { min-height: 0; overflow-y: auto; }
.vfx-search { background: var(--bg-input); color: var(--txt-primary); border: 1px solid var(--border-input); border-radius: 0.45rem; padding: 0.35rem 0.5rem; font-size: 0.78rem; font-family: inherit; flex: 0 0 auto; }
.vfx-search:focus { outline: none; border-color: var(--gold-border); }
.vfx-event-name { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vfx-fav { cursor: pointer; font-size: 0.8rem; color: var(--txt-muted); flex: 0 0 auto; line-height: 1; }
.vfx-fav.on { color: var(--gold-rich); }
.vfx-fav:hover { color: var(--gold-border-hi); }

/* Center preview + timeline */
.vfx-center { display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; }
.vfx-preview-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-page); border: 1px solid var(--border-structural); border-radius: 0.6rem; overflow: hidden; }
.vfx-canvas { max-width: 100%; max-height: 100%; border-radius: 0.4rem; }
.vfx-preview-hint { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.35rem 0.6rem; font-size: 0.75rem; color: var(--txt-secondary); background: linear-gradient(transparent, rgba(0,0,0,0.6)); text-align: center; pointer-events: none; }
.vfx-timeline { flex: 0 0 auto; background: var(--bg-sidebar); border: 1px solid var(--border-structural); border-radius: 0.6rem; padding: 0.5rem 0.6rem; position: relative; }
.vfx-tl-head { font-size: 0.72rem; color: var(--txt-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.35rem; }
.vfx-tl-rows { display: flex; flex-direction: column; gap: 0.25rem; }
.vfx-tl-row { display: flex; align-items: center; gap: 0.4rem; }
.vfx-tl-label { width: 1.2rem; text-align: center; }
.vfx-tl-track { position: relative; flex: 1 1 auto; height: 1.1rem; background: var(--bg-input); border-radius: 0.35rem; }
.vfx-tl-bar { position: absolute; top: 0; height: 100%; border-radius: 0.35rem; cursor: pointer; opacity: 0.85; }
.vfx-tl-bar.sel { outline: 2px solid var(--gold-border-hi); }
.vfx-bar-particle { background: linear-gradient(90deg,#ffd75e,#d4820b); }
.vfx-bar-glow { background: linear-gradient(90deg,#ffe08a,#d4af37); }
.vfx-bar-screenFlash { background: linear-gradient(90deg,#ffffff,#94a3ff); }
.vfx-bar-screenTint { background: linear-gradient(90deg,#a855f7,#4a2a8e); }
.vfx-bar-vignette { background: linear-gradient(90deg,#334,#111); }
.vfx-bar-cameraShake { background: linear-gradient(90deg,#f472b6,#a11a5e); }
.vfx-bar-audio { background: linear-gradient(90deg,#34d399,#0f766e); }
.vfx-bar-delay { background: linear-gradient(90deg,#64748b,#334155); }
.vfx-bar-animation { background: linear-gradient(90deg,#60a5fa,#1e3a8a); }
.vfx-bar-filter { background: linear-gradient(90deg,#22d3ee,#0e7490); }
.vfx-bar-childEffect { background: linear-gradient(90deg,#c084fc,#6b21a8); }
.vfx-tl-ruler { position: relative; height: 1rem; margin-top: 0.2rem; }
.vfx-tl-ruler span { position: absolute; font-size: 0.6rem; color: var(--txt-muted); font-family: var(--font-mono); transform: translateX(-50%); }

/* Right inspector */
.vfx-right { min-height: 0; overflow-y: auto; background: var(--bg-sidebar); border: 1px solid var(--border-structural); border-radius: 0.6rem; padding: 0.6rem; }
.vfx-insp-head { font-size: 0.85rem; font-weight: 700; color: var(--gold-rich); display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.vfx-insp-sec { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--txt-muted); margin: 0.6rem 0 0.3rem; display: flex; align-items: center; justify-content: space-between; }
.vfx-add-menu { display: flex; gap: 0.15rem; }
.vfx-chip { background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 0.35rem; cursor: pointer; font-size: 0.8rem; padding: 0.1rem 0.3rem; }
.vfx-chip:hover { border-color: var(--gold-border); }
.vfx-field { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.3rem; }
.vfx-field.two { flex-direction: row; align-items: center; justify-content: space-between; }
.vfx-field label { font-size: 0.72rem; color: var(--txt-secondary); }
.vfx-field label b { color: var(--txt-primary); }
.vfx-field input, .vfx-field select { background: var(--bg-input); color: var(--txt-primary); border: 1px solid var(--border-input); border-radius: 0.4rem; padding: 0.25rem 0.4rem; font-size: 0.78rem; font-family: inherit; }
.vfx-field.two input, .vfx-field.two select { width: 55%; }
.vfx-field input[type="range"] { width: 100%; }
.vfx-field input[type="color"] { padding: 0; height: 1.5rem; }
.vfx-layer { border: 1px solid var(--border-structural); border-radius: 0.45rem; margin-bottom: 0.35rem; overflow: hidden; }
.vfx-layer.sel { border-color: var(--purple-border); }
.vfx-layer-head { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.45rem; cursor: pointer; background: var(--bg-input); }
.vfx-layer-name { flex: 1 1 auto; font-size: 0.8rem; }
.vfx-layer-time { font-size: 0.66rem; color: var(--txt-muted); font-family: var(--font-mono); }
.vfx-layer-body { padding: 0.45rem; }
.vfx-ic { background: transparent; border: none; cursor: pointer; opacity: 0.7; font-size: 0.8rem; }
.vfx-ic:hover { opacity: 1; }
.vfx-empty { padding: 0.8rem; text-align: center; color: var(--txt-muted); font-size: 0.8rem; }
.vfx-hint-sm { font-size: 0.72rem; color: var(--txt-muted); padding: 0.2rem 0.1rem 0.3rem; line-height: 1.35; }
.vfx-attach-sec, .vfx-pixi-sec { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--purple-border); margin: 0.5rem 0 0.3rem; padding-top: 0.4rem; border-top: 1px dashed var(--border-structural); }
.vfx-attach-sec { color: var(--accent-emerald); }
.vfx-toolbar-2 { border-top: 1px solid var(--border-structural); }
.vfx-tb-lbl { font-size: 0.72rem; color: var(--txt-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-right: 0.15rem; }
.vfx-tex { display: flex; align-items: center; gap: 0.3rem; width: 55%; justify-content: flex-end; }
.vfx-tex-name { font-size: 0.7rem; font-family: var(--font-mono); color: var(--accent-emerald); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 8rem; }
.vfx-tex-none { font-size: 0.7rem; color: var(--txt-muted); }
.vfx-field input[type="file"] { font-size: 0.68rem; padding: 0.15rem; }
.vfx-pixi-grid { display: flex; flex-direction: column; gap: 0.15rem; }
.vfx-pixi-grid input[type="checkbox"] { width: auto; }

/* Bottom analysis */
.vfx-bottom { display: flex; gap: 0.5rem; padding: 0.55rem; background: var(--bg-sidebar); border: 1px solid var(--border-structural); border-radius: 0.6rem; }
.vfx-stat { flex: 0 0 auto; min-width: 78px; padding: 0.15rem 0.5rem; border-right: 1px solid var(--border-structural); }
.vfx-stat-k { font-size: 0.66rem; color: var(--txt-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.vfx-stat-v { font-size: 1rem; font-weight: 700; }
.vfx-stat-v.good { color: var(--accent-emerald); }
.vfx-stat-v.warn { color: #fbbf24; }
.vfx-stat-v.bad { color: #f87171; }
.vfx-est-note { font-size: 0.6rem; text-transform: none; letter-spacing: 0; color: var(--txt-muted); font-weight: 400; margin-left: 0.3rem; }
.vfx-stat-issues { flex: 1 1 auto; border-right: none; }
.vfx-issues { max-height: 60px; overflow-y: auto; margin-top: 0.2rem; }
.vfx-issue { font-size: 0.72rem; padding: 0.05rem 0; }
.vfx-issue.warn { color: #fbbf24; }
.vfx-issue.info { color: var(--txt-secondary); }

@media (max-width: 1100px) { .vfx-body { grid-template-columns: 170px 1fr 220px; } .vfx-text { width: 10rem; } }

/* Library-first VFX Studio shell (injected CSS supplements these layout hooks) */
#particles-results-container { min-height: calc(100vh - 180px); }
#particles-results-container .vfx-root { height: calc(100vh - 190px); min-height: 640px; border-radius: 0.6rem; overflow: hidden; border: 1px solid var(--border-structural); }
.vfx-bar-border { background: linear-gradient(90deg,#FFD700,#d4af37); }
.vfx-bar-sparkle { background: linear-gradient(90deg,#fff,#ffe08a); }
.vfx-bar-light { background: linear-gradient(90deg,#fffbe0,#fbbf24); }
.vfx-bar-gradient { background: linear-gradient(90deg,#ffe08a,#d4820b); }
.vfx-bar-energy { background: linear-gradient(90deg,#6ee7ff,#4aa3ff); }
.vfx-bar-distortion { background: linear-gradient(90deg,#a78bfa,#5b21b6); }
.vfx-bar-shader { background: linear-gradient(90deg,#c084fc,#6d28d9); }
.vfx-bar-overlay { background: linear-gradient(90deg,#9aa0b5,#475569); }
.vfx-bar-mask { background: linear-gradient(90deg,#64748b,#1e293b); }
.vfx-bar-trail { background: linear-gradient(90deg,#fde68a,#b45309); }
.vfx-bar-screenFx { background: linear-gradient(90deg,#ffffff,#94a3ff); }
.vfx-bar-cameraFx { background: linear-gradient(90deg,#f472b6,#a11a5e); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOTION STUDIO — per-symbol-state timeline editor (mirrors VFX Studio shell)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.mst-root { display: flex; flex-direction: column; gap: 0.6rem; font-family: var(--font-sans); color: var(--txt-primary); }
.mst-editor { height: calc(100vh - 210px); min-height: 560px; }
.mst-loading { padding: 2rem; text-align: center; color: var(--txt-muted); }
.mst-ov-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.mst-ov-copy { font-size: 0.82rem; color: var(--color-text-secondary, var(--txt-secondary)); max-width: 70ch; line-height: 1.45; }
.mst-ov-actions { display: flex; gap: 0.4rem; }
.mst-card { display: flex; flex-direction: column; gap: 0.45rem; }
.mst-card-preview { position: relative; height: 140px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(11,14,26,0.35); border-radius: 12px; }
.mst-card-art { width: 78%; height: 78%; object-fit: contain; }
.mst-card-art-ph { width: 70%; height: 70%; display: flex; align-items: center; justify-content: center; background: rgba(148,163,184,0.15); border-radius: 10px; font-weight: 700; color: var(--color-text-muted, var(--txt-muted)); }
.mst-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; }
.mst-chip { background: var(--bg-input); color: var(--txt-secondary); border: 1px solid var(--border-input); border-radius: 0.4rem; padding: 0.2rem 0.45rem; font-size: 0.68rem; cursor: pointer; transition: var(--ease); }
.mst-chip:hover { border-color: var(--gold-border); color: var(--txt-primary); }
.mst-chip.filled { border-color: rgba(16,185,129,0.45); color: var(--accent-emerald); }
.mst-chip.dormant { opacity: 0.7; }
.mst-edit-btn { font-size: 0.78rem; padding: 0.4rem 0.7rem; align-self: stretch; border-color: var(--purple-border); color: var(--purple-bright); }

.mst-toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem 0.6rem; background: var(--bg-sidebar); border: 1px solid var(--border-structural); border-radius: 0.6rem; }
.mst-tb-group { display: flex; align-items: center; gap: 0.35rem; }
.mst-grow { flex: 1 1 auto; }
.mst-tb-title { font-weight: 700; font-size: 0.9rem; color: var(--gold-rich); }
.mst-tb-sub { font-weight: 500; color: var(--txt-secondary); }
.mst-btn { background: var(--bg-input); color: var(--txt-primary); border: 1px solid var(--border-input); border-radius: 0.45rem; padding: 0.4rem 0.7rem; font-size: 0.82rem; cursor: pointer; transition: var(--ease); white-space: nowrap; }
.mst-btn:hover { border-color: var(--gold-border); background: var(--bg-card-hover); }
.mst-btn.mst-primary { border-color: var(--purple-border); color: var(--purple-bright); }
.mst-btn.mst-good { border-color: rgba(16,185,129,0.4); color: var(--accent-emerald); }
.mst-btn.flash { animation: plsFlash 0.9s ease; }
.mst-text { background: var(--bg-input); color: var(--txt-primary); border: 1px solid var(--border-input); border-radius: 0.45rem; padding: 0.35rem 0.5rem; font-size: 0.82rem; font-family: inherit; width: 18rem; }
.mst-badge { font-size: 0.6rem; padding: 0 0.3rem; border-radius: 0.35rem; text-transform: uppercase; letter-spacing: 0.3px; }
.mst-badge.live { background: rgba(16,185,129,0.2); color: var(--accent-emerald); }
.mst-badge.dormant { background: rgba(120,120,140,0.2); color: var(--txt-muted); }

.mst-stack { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 0.6rem; }
.mst-body { display: grid; grid-template-columns: 160px 1fr 260px; gap: 0.6rem; flex: 1 1 auto; min-height: 0; }
.mst-center { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.mst-left { min-height: 0; overflow-y: auto; background: var(--bg-sidebar); border: 1px solid var(--border-structural); border-radius: 0.6rem; padding: 0.5rem; }
.mst-tree-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--txt-muted); margin-bottom: 0.5rem; }
.mst-state { display: flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.45rem; border-radius: 0.4rem; cursor: pointer; font-size: 0.82rem; color: var(--txt-secondary); }
.mst-state:hover { background: var(--bg-card-hover); }
.mst-state.sel { background: rgba(147,51,234,0.16); color: var(--txt-primary); }
.mst-count { margin-left: auto; color: var(--accent-emerald); font-size: 0.7rem; }

.mst-center { display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; }
.mst-preview-wrap { position: relative; flex: 1 1 auto; min-height: 180px; display: flex; align-items: center; justify-content: center; background: var(--bg-page); border: 1px solid var(--border-structural); border-radius: 0.6rem; overflow: hidden; }
.mst-canvas { max-width: 100%; max-height: 100%; border-radius: 0.4rem; }
.mst-preview-hint { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.35rem 0.6rem; font-size: 0.75rem; color: var(--txt-secondary); background: linear-gradient(transparent, rgba(0,0,0,0.6)); text-align: center; pointer-events: none; }
.mst-preview-sprite { position: absolute; width: 64px; height: 64px; opacity: 0; pointer-events: none; }

.mst-timeline { flex: 0 0 auto; background: var(--bg-sidebar); border: 1px solid var(--border-structural); border-radius: 0.6rem; padding: 0.5rem 0.6rem; }
.mst-tl-head { font-size: 0.72rem; color: var(--txt-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.5rem; }
.mst-tl-note { text-transform: none; letter-spacing: 0; font-size: 0.66rem; opacity: 0.8; }
.mst-tl-rows { display: flex; flex-direction: column; gap: 0.25rem; }
.mst-tl-row { display: flex; align-items: center; gap: 0.4rem; }
.mst-tl-label { width: 1.6rem; text-align: center; font-size: 0.85rem; }
.mst-tl-track { position: relative; flex: 1 1 auto; height: 1.15rem; background: var(--bg-input); border-radius: 0.35rem; }
.mst-tl-bar { position: absolute; top: 0; height: 100%; border-radius: 0.35rem; cursor: pointer; opacity: 0.88; }
.mst-tl-bar.sel { outline: 2px solid var(--gold-border-hi); }
.mst-tl-add { position: absolute; right: 2px; top: 1px; bottom: 1px; width: 1.1rem; border: none; background: rgba(255,255,255,0.06); color: var(--txt-muted); border-radius: 0.25rem; cursor: pointer; font-size: 0.7rem; line-height: 1; }
.mst-tl-add:hover { color: var(--txt-primary); background: rgba(255,255,255,0.12); }
.mst-tl-ruler { position: relative; height: 1rem; margin-top: 0.2rem; }
.mst-tl-ruler span { position: absolute; font-size: 0.6rem; color: var(--txt-muted); font-family: var(--font-mono); transform: translateX(-50%); }

.mst-assets { flex: 0 0 auto; background: var(--bg-sidebar); border: 1px solid var(--border-structural); border-radius: 0.6rem; padding: 0.45rem 0.55rem; }
.mst-assets-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.mst-assets-h { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--txt-muted); margin-bottom: 0.3rem; }
.mst-assets-list { display: flex; flex-wrap: wrap; gap: 0.25rem; max-height: 72px; overflow-y: auto; }
.mst-asset { background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 0.35rem; color: var(--txt-secondary); font-size: 0.68rem; padding: 0.15rem 0.4rem; cursor: pointer; }
.mst-asset:hover { border-color: var(--gold-border); color: var(--txt-primary); }
.mst-asset-vfx { border-color: rgba(255,215,94,0.25); }
.mst-empty-inline { font-size: 0.72rem; color: var(--txt-muted); }

.mst-right { min-height: 0; overflow-y: auto; background: var(--bg-sidebar); border: 1px solid var(--border-structural); border-radius: 0.6rem; padding: 0.6rem; }
.mst-insp-head { font-size: 0.85rem; font-weight: 700; color: var(--gold-rich); display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.mst-insp-sec { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--txt-muted); margin: 0.6rem 0 0.3rem; display: flex; align-items: center; justify-content: space-between; }
.mst-add-menu { display: flex; gap: 0.15rem; }
.mst-chip-btn { background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 0.35rem; cursor: pointer; font-size: 0.75rem; padding: 0.1rem 0.3rem; }
.mst-chip-btn:hover { border-color: var(--gold-border); }
.mst-field { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.3rem; }
.mst-field.two { flex-direction: row; align-items: center; justify-content: space-between; }
.mst-field label { font-size: 0.72rem; color: var(--txt-secondary); }
.mst-field input, .mst-field select { background: var(--bg-input); color: var(--txt-primary); border: 1px solid var(--border-input); border-radius: 0.4rem; padding: 0.25rem 0.4rem; font-size: 0.78rem; font-family: inherit; }
.mst-field.two input, .mst-field.two select { width: 55%; }
.mst-field input[type="checkbox"] { width: auto; }
.mst-field input[type="color"] { padding: 0; height: 1.5rem; }
.mst-layer { border: 1px solid var(--border-structural); border-radius: 0.45rem; margin-bottom: 0.35rem; overflow: hidden; }
.mst-layer.sel { border-color: var(--purple-border); }
.mst-layer-head { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.45rem; cursor: pointer; background: var(--bg-input); }
.mst-layer-name { flex: 1 1 auto; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mst-layer-time { font-size: 0.66rem; color: var(--txt-muted); font-family: var(--font-mono); }
.mst-layer-body { padding: 0.45rem; }
.mst-ic { background: transparent; border: none; cursor: pointer; opacity: 0.7; font-size: 0.8rem; color: var(--txt-secondary); }
.mst-ic:hover { opacity: 1; }
.mst-empty { padding: 0.8rem; text-align: center; color: var(--txt-muted); font-size: 0.8rem; }
.mst-hint-sm { font-size: 0.72rem; color: var(--txt-muted); padding: 0.2rem 0.1rem 0.3rem; line-height: 1.35; }
.mst-deps { display: flex; flex-direction: column; gap: 0.2rem; }
.mst-dep { font-size: 0.72rem; color: var(--txt-secondary); }
.mst-dep.ok b { color: var(--accent-emerald); }
.mst-dep.miss b { color: #fbbf24; }

.mst-bottom { display: flex; gap: 0.5rem; padding: 0.55rem; background: var(--bg-sidebar); border: 1px solid var(--border-structural); border-radius: 0.6rem; }
.mst-stat { flex: 0 0 auto; min-width: 70px; padding: 0.15rem 0.5rem; border-right: 1px solid var(--border-structural); }
.mst-stat-k { font-size: 0.66rem; color: var(--txt-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.mst-stat-v { font-size: 1rem; font-weight: 700; }
.mst-stat-v.good { color: var(--accent-emerald); }
.mst-stat-v.warn { color: #fbbf24; }
.mst-stat-v.bad { color: #f87171; }
.mst-est-note { font-size: 0.6rem; text-transform: none; letter-spacing: 0; color: var(--txt-muted); font-weight: 400; margin-left: 0.2rem; }
.mst-stat-issues { flex: 1 1 auto; border-right: none; }
.mst-issues { max-height: 60px; overflow-y: auto; margin-top: 0.2rem; }
.mst-issue { font-size: 0.72rem; padding: 0.05rem 0; }
.mst-issue.warn { color: #fbbf24; }
.mst-issue.info { color: var(--txt-secondary); }

@media (max-width: 1100px) {
  .mst-body { grid-template-columns: 130px 1fr 210px; }
  .mst-text { width: 11rem; }
  .mst-assets-row { grid-template-columns: 1fr; }
}
/* ── Studio Shell (shared) ── */
.ss-root { display:flex; flex-direction:column; gap:0.55rem; height:calc(100vh - 210px); min-height:560px; font-family:var(--font-sans); color:var(--txt-primary); }
.ss-toolbar { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; padding:0.5rem 0.6rem; background:var(--bg-sidebar); border:1px solid var(--border-structural); border-radius:0.6rem; }
.ss-tb-group { display:flex; align-items:center; gap:0.35rem; flex-wrap:wrap; }
.ss-tb-group.ss-grow { flex:1 1 auto; }
.ss-btn { background:var(--bg-input); color:var(--txt-primary); border:1px solid var(--border-input); border-radius:0.45rem; padding:0.35rem 0.65rem; font-size:0.8rem; cursor:pointer; white-space:nowrap; }
.ss-btn:hover { border-color:var(--gold-border); background:var(--bg-card-hover); }
.ss-btn.primary { border-color:var(--purple-border); color:var(--purple-bright); }
.ss-btn.good { border-color:rgba(16,185,129,0.4); color:var(--accent-emerald); }
.ss-btn.danger { border-color:rgba(244,63,94,0.4); color:var(--accent-rose); }
.ss-btn.on { background:rgba(147,51,234,0.18); border-color:var(--purple-border); }
.ss-body { display:grid; grid-template-columns:240px 1fr 280px; gap:0.55rem; flex:1 1 auto; min-height:0; }
.ss-pane { display:flex; flex-direction:column; min-height:0; background:var(--bg-sidebar); border:1px solid var(--border-structural); border-radius:0.6rem; overflow:hidden; }

/* ── Photoshop-style split gutters (StudioShell.attachSplit) ── */
.ss-split { gap: 0 !important; }
.ss-split-h { display: flex !important; flex-direction: row !important; align-items: stretch; min-width: 0; }
.ss-split-v { display: flex !important; flex-direction: column !important; align-items: stretch; min-height: 0; }
.ss-split-pane { min-width: 0; min-height: 0; overflow: hidden; }
.ss-split-gutter {
  flex: 0 0 6px;
  position: relative;
  z-index: 5;
  background: transparent;
  transition: background 0.12s ease;
}
.ss-split-h > .ss-split-gutter { cursor: col-resize; margin: 0 -1px; }
.ss-split-v > .ss-split-gutter { cursor: row-resize; margin: -1px 0; flex-basis: 6px; }
.ss-split-gutter::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  transition: background 0.12s ease, opacity 0.12s ease;
  opacity: 0.55;
}
.ss-split-h > .ss-split-gutter::after {
  top: 12%; bottom: 12%; left: 2px; width: 2px;
}
.ss-split-v > .ss-split-gutter::after {
  left: 12%; right: 12%; top: 2px; height: 2px;
}
.ss-split-gutter:hover::after,
.ss-split-dragging > .ss-split-gutter::after {
  background: rgba(167, 139, 250, 0.85);
  opacity: 1;
}
.ss-split-gutter:hover,
.ss-split-dragging > .ss-split-gutter { background: rgba(147, 51, 234, 0.06); }
body.ss-split-dragging-cursor { user-select: none !important; }
body.ss-split-dragging-cursor[data-ss-split-dir="h"] { cursor: col-resize !important; }
body.ss-split-dragging-cursor[data-ss-split-dir="v"] { cursor: row-resize !important; }
.ss-split-stacked { display: grid !important; grid-template-columns: 1fr !important; gap: 0.55rem !important; flex-direction: unset !important; }
.ss-split-stacked > .ss-split-gutter { display: none !important; }
.ss-split-stacked > .ss-split-pane { width: auto !important; height: auto !important; flex: none !important; max-width: none !important; max-height: none !important; }
@media (max-width: 1100px) {
  .ss-split-h:not(.ss-split-stacked) { /* JS toggles stacked */ }
}
.ss-pane-head { padding:0.45rem 0.6rem; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.5px; color:var(--txt-muted); border-bottom:1px solid var(--border-structural); display:flex; align-items:center; justify-content:space-between; gap:0.4rem; }
.ss-pane-body { flex:1 1 auto; overflow:auto; padding:0.45rem; min-height:0; }
.ss-bottom { padding:0.5rem; background:var(--bg-sidebar); border:1px solid var(--border-structural); border-radius:0.6rem; }
.ss-json-debug { margin:0; max-height:220px; overflow:auto; padding:0.6rem; background:#0a0c14; border:1px solid var(--border-structural); border-radius:0.5rem; font-size:0.7rem; color:#a5b4fc; font-family:var(--font-mono); white-space:pre-wrap; }
.ss-search { width:100%; background:var(--bg-input); color:var(--txt-primary); border:1px solid var(--border-input); border-radius:0.4rem; padding:0.35rem 0.5rem; font-size:0.8rem; margin-bottom:0.4rem; }
.ss-list-item { display:flex; align-items:center; gap:0.4rem; padding:0.4rem 0.45rem; border-radius:0.45rem; cursor:pointer; border:1px solid transparent; font-size:0.82rem; }
.ss-list-item:hover { background:var(--bg-card-hover); }
.ss-list-item.sel { background:rgba(147,51,234,0.16); border-color:var(--purple-border); }
.ss-list-item.off { opacity:0.45; }
.ss-list-item .fav { opacity:0.5; border:none; background:transparent; cursor:pointer; }
.ss-list-item .fav.on { opacity:1; color:#fbbf24; }
.ss-list-title { font-weight:650; color:var(--txt-primary); }
.ss-list-sub { margin-left:auto; font-size:0.68rem; color:var(--txt-muted); }

/* Audio Studio */
.aud-body { grid-template-columns:220px 1fr 300px; }
.aud-status { width:8px; height:8px; border-radius:50%; background:#475569; flex:0 0 auto; }
.aud-status.on { background:#34d399; box-shadow:0 0 6px rgba(52,211,153,0.55); }
.aud-preview-stage { padding:0.5rem; }
.aud-preview-title { font-size:1.1rem; font-weight:800; letter-spacing:0.04em; }
.ss-list { display:flex; flex-direction:column; gap:0.2rem; }
.aud-history { margin-top:0.55rem; }
.aud-history-strip { display:flex; flex-wrap:wrap; gap:0.35rem; }
.aud-history-thumb {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:0.45rem; cursor:pointer;
  border:1px solid rgba(148,163,184,0.28); background:rgba(15,23,42,0.85);
  color:#e2e8f0; padding:0;
}
.aud-history-thumb:hover { border-color:rgba(251,191,36,0.55); }
.aud-history-thumb.is-active {
  border-color:rgba(52,211,153,0.7); box-shadow:0 0 0 1px rgba(52,211,153,0.35);
}
.aud-hist-icon { font-size:1.1rem; line-height:1; color:#fda4af; }
.aud-hist-label { font-size:0.58rem; color:var(--txt-muted); margin-top:0.15rem; letter-spacing:0.04em; text-transform:uppercase; }
@media (max-width: 1100px) {
  .aud-body { grid-template-columns:160px 1fr 240px; }
}
.ss-chip { display:inline-block; font-size:0.65rem; padding:0.1rem 0.35rem; border-radius:0.3rem; background:rgba(255,255,255,0.06); color:var(--txt-muted); }
.ss-action-row { display:flex; align-items:center; gap:0.4rem; padding:0.4rem 0.5rem; margin-bottom:0.3rem; border:1px solid var(--border-structural); border-radius:0.45rem; background:var(--bg-input); cursor:grab; }
.ss-action-row.sel { border-color:var(--purple-border); background:rgba(147,51,234,0.12); }
.ss-action-row.off { opacity:0.45; }
.ss-action-row .type { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.4px; color:var(--purple-bright); min-width:4.5rem; }
.ss-action-row .name { flex:1; font-size:0.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ss-field { display:flex; flex-direction:column; gap:0.2rem; margin-bottom:0.5rem; }
.ss-field label { font-size:0.68rem; color:var(--txt-muted); text-transform:uppercase; letter-spacing:0.4px; }
.ss-field input, .ss-field select, .ss-field textarea { background:var(--bg-input); color:var(--txt-primary); border:1px solid var(--border-input); border-radius:0.4rem; padding:0.35rem 0.45rem; font-size:0.8rem; font-family:inherit; }
.ss-field textarea { min-height:60px; resize:vertical; }
.ss-preset-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:0.4rem; }
.ss-preset { padding:0.45rem; text-align:center; border:1px solid var(--border-structural); border-radius:0.45rem; cursor:pointer; font-size:0.72rem; background:var(--bg-input); }
.ss-preset:hover { border-color:var(--gold-border); }
.ss-muted { font-size:0.75rem; color:var(--txt-muted); }
.ss-section-title { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.5px; color:var(--txt-muted); margin:0.6rem 0 0.35rem; }
.ss-transport { display:flex; align-items:center; gap:0.35rem; margin-top:0.4rem; }
.ss-preview-board { aspect-ratio:16/9; min-height:200px; max-height:280px; background:radial-gradient(ellipse at 40% 40%,#1a2240,#0b0e1a); border:1px solid var(--border-structural); border-radius:0.5rem; display:flex; align-items:center; justify-content:center; color:var(--txt-muted); font-size:0.8rem; position:relative; overflow:hidden; flex:0 0 auto; }
.ss-trigger { border:1px solid var(--border-structural); border-radius:0.45rem; padding:0.4rem; margin-bottom:0.35rem; background:var(--bg-input); font-size:0.75rem; }
.ss-trigger.sel { border-color:var(--purple-border); }
@media (max-width:1100px) {
  .ss-body { grid-template-columns:180px 1fr 220px; }
}

/* ── Presentation hub (Win Looks | Sequences) ── */
/* Fill the workspace so Sequences / Packs don't leave a dead band at the bottom */
.tab-content-container:has(#tab-content-presentation.active) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 1rem;
  padding-bottom: 0.65rem;
}
#tab-content-presentation.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
#presentation-container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pres-hub {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}
.pres-hub-tabs { display:flex; gap:0.35rem; padding:0.2rem; background:var(--bg-sidebar); border:1px solid var(--border-structural); border-radius:0.55rem; width:fit-content; flex-shrink:0; }
.pres-hub-tab { border:1px solid transparent; background:transparent; color:var(--txt-muted); font-weight:700; font-size:0.8rem; padding:0.4rem 0.85rem; border-radius:0.4rem; cursor:pointer; }
.pres-hub-tab:hover { color:#fff; }
.pres-hub-tab.on { background:rgba(147,51,234,0.2); border-color:var(--purple-border); color:#e9d5ff; }
.pres-hub-tab[class*="ss-cat--"].on {
  color: var(--ss-cat) !important;
  border-color: color-mix(in srgb, var(--ss-cat) 55%, transparent);
  background: color-mix(in srgb, var(--ss-cat) 16%, transparent);
}
.pres-hub-panel { flex:1; min-height:0; display:flex; flex-direction:column; }
.pres-hub-panel[hidden] { display:none !important; }
.pres-hub-panel .pres-root,
.pres-hub-panel .sym-studio-root,
.pres-hub-panel .pls-root,
.pres-hub-panel .ssp-root { height:100%; min-height:0; }
.pres-hub-panel .ssp-root.ssp-hub {
  height:100%;
  min-height:0;
  border:none;
  border-radius:0;
  background:transparent;
}
/* Nested studios must stretch with the hub, not use their standalone vh heights */
.pres-hub-panel .pres-root,
.pres-hub-panel .pls-root,
.pres-hub-panel .sym-studio-root {
  height: 100% !important;
  min-height: 0 !important;
}

/* Standalone Advanced Editor studios (HUD / Symbol Styles / Paylines) */
.tab-content-container:has(#tab-content-hud-styles.active),
.tab-content-container:has(#tab-content-symbol-styles.active),
.tab-content-container:has(#tab-content-paylines.active) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 1rem;
  padding-bottom: 0.65rem;
}
#tab-content-hud-styles.active,
#tab-content-symbol-styles.active,
#tab-content-paylines.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
#hud-styles-container,
#symbol-styles-container,
#paylines-container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#hud-styles-container .hud-root,
#hud-styles-container .ss-root,
#symbol-styles-container .sym-studio-root,
#paylines-container .pls-root {
  height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto;
}

/* 2D Animator (submodule iframe) */
.tab-content-container:has(#tab-content-animator.active) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
#tab-content-animator.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
#animator-container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #0e1116;
}
.animator-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0e1116;
}
.animator-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: var(--txt-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.animator-placeholder.animator-error { color: #f0a0a0; }
.animator-placeholder span { display: block; margin-top: 0.5rem; font-size: 0.78rem; opacity: 0.85; }

/* ── Symbol Styles (lifecycle + match behaviors) ── */
.sym-studio-root { display:flex; flex-direction:column; gap:0.55rem; height:100%; min-height:520px; color:var(--txt-primary); }
.sym-studio-toolbar { display:flex; align-items:center; gap:0.45rem; padding:0.55rem 0.75rem; background:var(--bg-sidebar); border:1px solid var(--border-structural); border-radius:0.6rem; flex-wrap:wrap; }
.sym-studio-body { display:grid; grid-template-columns:180px 200px minmax(0,1fr); gap:0.55rem; flex:1; min-height:0; }
.sym-studio-body.has-preview { grid-template-columns:160px 180px minmax(0,1.4fr) 280px; }
.sym-list-item { display:flex; flex-direction:column; align-items:flex-start; width:100%; gap:0.1rem; padding:0.45rem 0.5rem; margin-bottom:0.2rem; border-radius:0.45rem; border:1px solid transparent; background:transparent; color:var(--txt-secondary); cursor:pointer; text-align:left; }
.sym-list-item:hover { background:rgba(255,255,255,0.04); color:#fff; }
.sym-list-item.sel { background:rgba(147,51,234,0.18); border-color:var(--purple-border); color:#e9d5ff; }
.sym-list-name { font-size:0.82rem; font-weight:700; }
.sym-list-id { font-size:0.65rem; color:var(--txt-muted); }
.sym-tree-title { font-weight:800; font-size:0.95rem; margin-bottom:0.55rem; color:var(--gold); }
.sym-tree { display:flex; flex-direction:column; gap:0.15rem; }
.sym-tree-item { display:flex; justify-content:space-between; align-items:center; width:100%; text-align:left; padding:0.4rem 0.5rem; border-radius:0.4rem; border:1px solid transparent; background:transparent; color:var(--txt-secondary); cursor:pointer; font-size:0.8rem; font-weight:600; }
.sym-tree-item:hover { background:rgba(255,255,255,0.04); color:#fff; }
.sym-tree-item.sel { background:rgba(147,51,234,0.18); border-color:var(--purple-border); color:#e9d5ff; }
.sym-tree-item.child { padding-left:1.25rem; font-weight:500; font-size:0.76rem; }
.sym-tree-item.add { color:#86efac; border:1px dashed rgba(134,239,172,0.35); margin-top:0.25rem; }
.sym-tree-item.parent .caret { opacity:0.7; font-size:0.7rem; }
.sym-insp-head { margin-bottom:0.65rem; }
.sym-crumb { font-size:0.72rem; color:var(--txt-muted); margin-bottom:0.2rem; }
.sym-insp-title { font-size:1.15rem; font-weight:800; color:#fff; }
.sym-pack-preview { margin:0.5rem 0; padding:0.55rem; border-radius:0.45rem; border:1px solid rgba(147,51,234,0.3); background:rgba(147,51,234,0.08); }
.sym-pack-preview-title { font-weight:700; font-size:0.8rem; margin-bottom:0.3rem; color:#e9d5ff; }
.sym-pack-preview ul { margin:0; padding-left:1rem; font-size:0.72rem; color:var(--txt-secondary); line-height:1.5; }
.sym-apply-to { display:flex; flex-direction:column; gap:0.35rem; padding:0.45rem 0.55rem; border:1px solid var(--border-structural); border-radius:0.45rem; background:var(--bg-input); }
.sym-check { display:flex; align-items:center; gap:0.45rem; font-size:0.78rem; color:var(--txt-primary); cursor:pointer; text-transform:none; letter-spacing:0; }
.sym-check input { accent-color:var(--gold, #ffd75e); }
.sym-check strong { font-weight:700; }
.sym-spine-status { padding:0.5rem 0.55rem; border-radius:0.45rem; border:1px solid rgba(52,211,153,0.35); background:rgba(16,185,129,0.1); margin-bottom:0.5rem; }
.sym-spine-status.ok strong { color:#6ee7b7; }
.sym-spine-files { margin:0.35rem 0 0; padding-left:1rem; font-size:0.72rem; color:var(--txt-secondary); }
.pres-sym.spine-host {
  position: relative;
  overflow: hidden;
  width: 110px;
  height: 110px;
  flex: 0 0 auto;
}
.pres-sym.spine-host .sym-cell-spine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.pres-sym.spine-host.spine-live,
.pres-sym.spine-host.motion-live {
  background-image: none !important;
  background-color: rgba(0,0,0,0.35);
  /* Win pulse scale breaks Pixi canvas fit — keep 1:1 while Spine/motion plays. */
  transform: none !important;
  animation: none !important;
}
.pres-sym.spine-host.win {
  transform: none;
}
.sym-pv-spine-status {
  position: absolute;
  left: 0.5rem;
  bottom: 0.45rem;
  z-index: 7;
  max-width: 55%;
  font-size: 0.62rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.3rem;
  color: #c4b5fd;
  background: rgba(0,0,0,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.sym-pv-spine-status:empty { display: none; }
.sym-ws-list { list-style:none; padding:0; margin:0 0 0.75rem; display:flex; flex-direction:column; gap:0.35rem; }
.sym-studio-art { max-width:420px; }
.sym-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:80; display:flex; align-items:center; justify-content:center; padding:1rem; }
.sym-modal { width:min(440px,100%); background:var(--bg-sidebar); border:1px solid var(--border-structural); border-radius:0.65rem; padding:1rem 1.1rem; }
.sym-modal h3 { margin:0 0 0.35rem; font-size:1rem; }
.sym-modal-actions { display:flex; justify-content:flex-end; gap:0.35rem; margin-top:0.75rem; }
.sym-seed-row { margin-top:0.65rem; padding-top:0.55rem; border-top:1px solid var(--border-structural); }
.sym-preview-pane .ss-pane-body { display:flex; flex-direction:column; gap:0.45rem; min-height:0; flex:1; }
.sym-preview-pane #sym-preview-host { flex:1; min-height:220px; display:flex; flex-direction:column; }
.sym-preview-pane #sym-preview-host .sym-stage { flex:1; min-height:240px; height:100%; }
@media (max-width:1200px) {
  .sym-studio-body,
  .sym-studio-body.has-preview { grid-template-columns:1fr; }
}

/* ── Presentation Studio (visual event styling) ── */
.pres-root { display:flex; flex-direction:column; gap:0.55rem; height:calc(100vh - 210px); min-height:620px; color:var(--txt-primary); font-family:var(--font-sans); }
.pres-toolbar { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding:0.55rem 0.75rem; background:var(--bg-sidebar); border:1px solid var(--border-structural); border-radius:0.6rem; flex-wrap:wrap; }
.pres-tb-left, .pres-tb-right { display:flex; align-items:center; gap:0.45rem; flex-wrap:wrap; }
.pres-brand { font-weight:800; font-size:0.95rem; color:var(--gold); }
.pres-crumb { font-size:0.75rem; color:var(--txt-muted); }
.pres-stack { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; gap:0.55rem; }
.pres-body { display:grid; grid-template-columns:200px minmax(0,1.6fr) 300px; gap:0.55rem; flex:1 1 auto; min-height:0; }
.pres-bottom { display:grid; grid-template-columns:minmax(0,1.7fr) 300px; gap:0.55rem; flex:0 0 auto; min-height:120px; }
.pres-ai.collapsed { display:none; }
.pres-left .ss-pane-body, .pres-right .ss-pane-body, .pres-packs .ss-pane-body, .pres-ai .ss-pane-body { min-height:0; }
.pres-event-list { display:flex; flex-direction:column; gap:0.2rem; }
.pres-event { display:flex; align-items:center; gap:0.45rem; width:100%; text-align:left; padding:0.45rem 0.5rem; border-radius:0.45rem; border:1px solid transparent; background:transparent; color:var(--txt-secondary); cursor:pointer; font-size:0.8rem; font-weight:600; }
.pres-event:hover { background:rgba(255,255,255,0.04); color:#fff; }
.pres-event.sel { background:rgba(147,51,234,0.18); border-color:var(--purple-border); color:#e9d5ff; }
.pres-event.add { color:#86efac; margin-top:0.35rem; border:1px dashed rgba(134,239,172,0.35); }
.pres-event-ico { width:1.1rem; text-align:center; opacity:0.85; }
.pres-center-body { display:flex; flex-direction:column; gap:0.45rem; }
.pres-stage { position:relative; flex:1 1 auto; min-height:240px; border-radius:0.55rem; overflow:hidden; background:radial-gradient(ellipse at 50% 40%, #1e293b, #0b0e1a 70%); border:1px solid var(--border-structural); transform-origin:center; }
.pres-stage.playing { animation:presCam 0.45s ease; }
@keyframes presCam { 0%{transform:scale(1)} 40%{transform:scale(1.04)} 100%{transform:scale(1)} }
.sym-stage-scene {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: saturate(1.05) brightness(0.78);
}
.sym-stage-scene::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(10,12,24,0.15), rgba(8,10,20,0.72) 70%);
}
.pres-sym.has-art {
  background-color: rgba(12, 10, 24, 0.55);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-color: rgba(255,255,255,0.14);
}
.pres-sym.dim { opacity: 0.55; filter: saturate(0.7); }
.pres-sym.has-art.win { opacity: 1; filter: none; }
.pres-stage-bg { position:absolute; inset:0; opacity:0.35; pointer-events:none; transition:opacity 0.25s ease; z-index:1; }
.sym-stage .pres-stage-shader { z-index: 1; }
.sym-stage .pres-reels { z-index: 2; }
.pres-stage-bg.flash, .pres-stage-bg.reactWin { background:radial-gradient(circle at 50% 40%, rgba(255,215,94,0.35), transparent 55%); opacity:0.7; }
.pres-stage-bg.dim, .pres-stage-bg.darken { background:rgba(0,0,0,0.45); opacity:1; }
.pres-stage-bg.glow { background:radial-gradient(circle, rgba(167,139,250,0.3), transparent 60%); }
.pres-stage-bg.pulse { animation:presPulse 1.2s ease-in-out infinite; }
@keyframes presPulse { 50%{opacity:0.85} }
.pres-stage-shader { position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:0.25; }
.pres-stage-shader.gold, .pres-stage-shader.glow { background:radial-gradient(circle at 50% 50%, rgba(255,215,0,0.25), transparent 55%); }
.pres-stage-shader.fire { background:radial-gradient(circle at 50% 80%, rgba(255,80,0,0.3), transparent 50%); }
.pres-stage-shader.ice, .pres-stage-shader.neon { background:radial-gradient(circle at 30% 30%, rgba(56,189,248,0.25), transparent 50%); }
.pres-reels { position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); display:flex; gap:8px; z-index:2; }
.pres-reel { display:flex; flex-direction:column; gap:6px; }
.pres-sym { width:52px; height:52px; border-radius:0.35rem; background:linear-gradient(180deg,#2a2148,#16122a); border:1px solid rgba(255,255,255,0.08); }
.pres-sym.win { border-color:var(--pres-accent,#ffd75e); box-shadow:0 0 calc(18px * var(--pres-glow,0.8)) var(--pres-accent,#ffd75e); transform:scale(var(--pres-scale,1.08)); }
.pres-sym.pulse { animation:presSymPulse calc(0.9s / var(--pres-speed,1)) ease-in-out infinite; }
@keyframes presSymPulse { 50%{ filter:brightness(1.25); } }
.pres-payline { position:absolute; left:18%; right:18%; top:48%; height:var(--pres-pay-thick,3px); border-radius:2px; background:var(--pres-accent,#ffd75e); opacity:var(--pres-pay-op,1); z-index:3; box-shadow:0 0 calc(12px * var(--pres-glow,0.7)) var(--pres-accent,#ffd75e); transform:scaleX(1); }
.pres-payline.style-fire_trail { background:linear-gradient(90deg,#ff6a00,#ffd75e); }
.pres-payline.style-lightning, .pres-payline.style-laser { background:linear-gradient(90deg,#7DF9FF,#a78bfa); }
.pres-payline.style-gold_ribbon { background:linear-gradient(90deg,#b8860b,#ffd700,#fff1a8); }
.pres-payline.style-magic_beam {
  height:4px;
  background:linear-gradient(90deg,#f0abfc,#c084fc 40%,#e879f9 70%,#a78bfa);
  box-shadow:0 0 14px rgba(232,121,249,0.75), 0 0 28px rgba(192,132,252,0.45);
}
.pres-payline.style-water_wave { background:linear-gradient(90deg,#38bdf8,#67e8f9,#0ea5e9); }
.pres-vfx { position:absolute; left:12px; bottom:36px; transform:none; font-size:0.62rem; font-weight:700; letter-spacing:0.06em; color:rgba(255,255,255,0.45); z-index:7; pointer-events:none; text-shadow:0 1px 2px rgba(0,0,0,0.6); }
.pres-vfx.miss { color:rgba(251,113,133,0.85); }
.sym-pv-vfx-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; }
.sym-stage .pres-reels { z-index: 2; }
.sym-stage .pres-payline { z-index: 3; }
.sym-pv-hud { z-index: 6; top: 8%; }
.sym-pv-hud .pres-hud-title { font-size:1.15rem; opacity:0.92; }
.sym-pv-hud .pres-hud-amt { font-size:0.95rem; opacity:0.85; }
.sym-stage.sym-vfx-fallback::before {
  content:''; position:absolute; left:50%; top:48%; width:120px; height:120px; margin:-60px 0 0 -60px;
  border-radius:50%; pointer-events:none; z-index:5;
  background:radial-gradient(circle, var(--sym-vfx-color,#ffd75e) 0%, transparent 70%);
  animation:symVfxBurst 0.85s ease-out forwards;
}
@keyframes symVfxBurst {
  0% { transform:scale(0.3); opacity:0.95; }
  100% { transform:scale(2.2); opacity:0; }
}
.sym-stage.sym-cam-shake { animation: symCamShake 0.55s ease-in-out; }
.sym-stage.sym-cam-punch { animation: symCamPunch 0.4s ease-out; }
.sym-stage.sym-cam-zoom { animation: symCamZoom 0.55s ease-out; }
@keyframes symCamShake {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, -1px); }
  80% { transform: translate(2px, 1px); }
}
@keyframes symCamPunch {
  0% { transform: scale(1); }
  35% { transform: scale(1.045); }
  100% { transform: scale(1); }
}
@keyframes symCamZoom {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.pres-sym.win {
  position: relative;
  z-index: 1;
}
.pres-hud { position:absolute; left:50%; top:12%; transform:translateX(-50%); z-index:5; text-align:center; }
.pres-hud-title { font-size:1.6rem; font-weight:900; letter-spacing:0.12em; color:var(--pres-accent,#ffd75e); text-shadow:0 0 24px rgba(255,215,94,0.45); }
.pres-hud-amt { font-size:1.1rem; font-weight:800; color:#fff; margin-top:0.2rem; }
.pres-npc { position:absolute; left:12px; bottom:14px; padding:0.25rem 0.45rem; border-radius:0.35rem; background:rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.12); font-size:0.68rem; color:#fda4af; z-index:5; }
.pres-cam-tag { position:absolute; right:10px; top:10px; font-size:0.65rem; color:var(--txt-muted); z-index:5; }
.pres-transport { display:flex; flex-wrap:wrap; align-items:center; gap:0.35rem; }

/* ── NPC Studio ── */
.npc-body { grid-template-columns:200px 220px 1fr 280px; }
.npc-preview-pane .ss-pane-body { display:flex; flex-direction:column; gap:0.45rem; min-height:0; flex:1; }
.npc-stage { position:relative; flex:1 1 auto; min-height:280px; aspect-ratio:16 / 9; max-height:min(62vh, 560px); border-radius:0.55rem; overflow:hidden; background:#0b0e1a; border:1px solid var(--border-structural);
  --npc-ox: 0%; --npc-oy: 0%; --npc-scale: 1; }
.npc-stage-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; z-index:0; }
.npc-layout-frame { position:absolute; z-index:2; pointer-events:none; }
.npc-layout-grid { position:absolute; z-index:1; pointer-events:none; }
.npc-layout-grid .layout-reel-grid { inset:0; width:100%; height:100%; }
.npc-stage-reels { position:absolute; left:18%; right:18%; top:22%; bottom:18%; z-index:1; pointer-events:none; }
.npc-stage-reels .layout-reel-grid { inset:0; }
.npc-reel-fallback { display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(3,1fr); gap:2.5%; height:100%;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 18%, transparent 18% 20%); }
.npc-stage-border { position:absolute; inset:0; background-size:100% 100%; background-position:center; background-repeat:no-repeat;
  pointer-events:none; }
.npc-stage-dim { position:absolute; inset:0; background:rgba(0,0,0,0.18); pointer-events:none; z-index:3; }
.npc-stage-scene { position:absolute; inset:0; background:radial-gradient(circle at 70% 40%, color-mix(in srgb, var(--npc-tint,#FFD700) 18%, transparent), transparent 55%); pointer-events:none; }
.npc-art-thumb { position:absolute; left:10px; bottom:10px; width:40px; height:40px; object-fit:contain; z-index:6; opacity:0.85; background:transparent; border:none; border-radius:0; }
.npc-insp-thumb { display:block; max-width:100%; max-height:120px; object-fit:contain; margin:0.35rem 0; border-radius:0.4rem; border:1px solid var(--border-structural); background:#0b0e1a; }
.npc-pv-status { position:absolute; left:10px; bottom:10px; font-size:0.65rem; color:var(--txt-muted); z-index:5; }
.npc-transport { margin-top:0.25rem; }
@media (max-width: 1100px) {
  .npc-body { grid-template-columns:160px 1fr 220px; }
  .npc-body .ss-mid { display:none; }
}

.pres-speed { display:inline-flex; gap:0.2rem; margin-left:0.35rem; }
.pres-event-carousel { display:flex; gap:0.35rem; overflow-x:auto; padding-bottom:0.15rem; }
.pres-carousel-item { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:0.2rem; width:72px; padding:0.3rem; border-radius:0.4rem; border:1px solid var(--border-structural); background:var(--bg-input); color:var(--txt-muted); font-size:0.62rem; cursor:pointer; }
.pres-carousel-item .thumb { width:100%; height:36px; border-radius:0.3rem; background:linear-gradient(135deg,rgba(147,51,234,0.25),rgba(255,215,0,0.15)); }
.pres-carousel-item.sel { border-color:var(--purple-border); color:#e9d5ff; }
/* Shared studio category colors (Presentation + all studios) */
:root {
  --ss-cat-event: #fbbf24;
  --ss-cat-pack: #c4b5fd;
  --ss-cat-highlight: #fcd34d;
  --ss-cat-payline: #67e8f9;
  --ss-cat-vfx: #fb923c;
  --ss-cat-shader: #e879f9;
  --ss-cat-camera: #7dd3fc;
  --ss-cat-hud: #86efac;
  --ss-cat-background: #a5b4fc;
  --ss-cat-audio: #fda4af;
  --ss-cat-npc: #fdba74;
  --ss-cat-queue: #94a3b8;
  --ss-cat-motion: #a78bfa;
  --ss-cat-sequence: #38bdf8;
  --ss-cat-symbol: #f9a8d4;
  --ss-cat-layout: #34d399;
  --ss-cat-math: #fbbf24;
  --ss-cat-bonus: #fb7185;
  --ss-cat-reels: #60a5fa;
  --ss-cat-list: #c4b5fd;
  --ss-cat-preview: #67e8f9;
  --ss-cat-inspector: #fcd34d;
  --ss-cat-presets: #86efac;
  --ss-cat-settings: #94a3b8;
  --ss-cat-style: #c4b5fd;
  --ss-cat-trigger: #fdba74;
  --ss-cat-overrides: #fb923c;
  --ss-cat-particle: #fbbf24;
  --ss-cat-border: #fb923c;
  --ss-cat-glow: #fcd34d;
  --ss-cat-light: #7dd3fc;
  --ss-cat-gradient: #e879f9;
  --ss-cat-energy: #f472b6;
  --ss-cat-distortion: #a78bfa;
  --ss-cat-sparkle: #fde047;
  --ss-cat-overlay: #67e8f9;
  --ss-cat-mask: #94a3b8;
  --ss-cat-trail: #34d399;
  --ss-cat-screenFx: #fb7185;
  --ss-cat-cameraFx: #7dd3fc;
  --ss-cat-general: #c4b5fd;
  --ss-cat-timing: #67e8f9;
  --ss-cat-visual: #fb923c;
  --ss-cat-advanced: #94a3b8;
  --ss-cat-items: #c4b5fd;
  --ss-cat-deps: #fdba74;
  --ss-cat-straight: #67e8f9;
  --ss-cat-v: #fb923c;
  --ss-cat-zigzag: #e879f9;
  --ss-cat-w: #86efac;
  --ss-cat-diagonal: #7dd3fc;
  --ss-cat-custom: #94a3b8;
  --ss-cat-landing: #86efac;
  --ss-cat-win: #fcd34d;
  --ss-cat-bigWin: #fb923c;
  --ss-cat-jackpot: #fbbf24;
  --ss-cat-bonusIntro: #f472b6;
  --ss-cat-freeSpins: #a78bfa;
  --ss-cat-reelStop: #60a5fa;
  --ss-cat-reel: #60a5fa;
  --ss-cat-tophud: #22d3ee;
  --ss-cat-bottomhud: #34d399;
  --ss-cat-decorations: #fdba74;
  --ss-cat-overlays: #c084fc;
  --ss-cat-floating: #f472b6;
  --ss-cat-adjustor: #94a3b8;
}
.ss-cat--event,.pres-sec--event { --ss-cat: var(--ss-cat-event); --pres-cat: var(--ss-cat); }
.ss-cat--pack,.pres-sec--pack { --ss-cat: var(--ss-cat-pack); --pres-cat: var(--ss-cat); }
.ss-cat--highlight,.pres-sec--highlight { --ss-cat: var(--ss-cat-highlight); --pres-cat: var(--ss-cat); }
.ss-cat--payline,.pres-sec--payline { --ss-cat: var(--ss-cat-payline); --pres-cat: var(--ss-cat); }
.ss-cat--vfx,.pres-sec--vfx { --ss-cat: var(--ss-cat-vfx); --pres-cat: var(--ss-cat); }
.ss-cat--shader,.pres-sec--shader { --ss-cat: var(--ss-cat-shader); --pres-cat: var(--ss-cat); }
.ss-cat--camera,.pres-sec--camera { --ss-cat: var(--ss-cat-camera); --pres-cat: var(--ss-cat); }
.ss-cat--hud,.pres-sec--hud { --ss-cat: var(--ss-cat-hud); --pres-cat: var(--ss-cat); }
.ss-cat--background,.pres-sec--background { --ss-cat: var(--ss-cat-background); --pres-cat: var(--ss-cat); }
.ss-cat--audio,.pres-sec--audio { --ss-cat: var(--ss-cat-audio); --pres-cat: var(--ss-cat); }
.ss-cat--npc,.pres-sec--npc { --ss-cat: var(--ss-cat-npc); --pres-cat: var(--ss-cat); }
.ss-cat--queue,.pres-sec--queue { --ss-cat: var(--ss-cat-queue); --pres-cat: var(--ss-cat); }
.ss-cat--motion { --ss-cat: var(--ss-cat-motion); --pres-cat: var(--ss-cat); }
.ss-cat--sequence { --ss-cat: var(--ss-cat-sequence); --pres-cat: var(--ss-cat); }
.ss-cat--symbol { --ss-cat: var(--ss-cat-symbol); --pres-cat: var(--ss-cat); }
.ss-cat--layout { --ss-cat: var(--ss-cat-layout); --pres-cat: var(--ss-cat); }
.ss-cat--math { --ss-cat: var(--ss-cat-math); --pres-cat: var(--ss-cat); }
.ss-cat--bonus { --ss-cat: var(--ss-cat-bonus); --pres-cat: var(--ss-cat); }
.ss-cat--reels { --ss-cat: var(--ss-cat-reels); --pres-cat: var(--ss-cat); }
.ss-cat--list { --ss-cat: var(--ss-cat-list); --pres-cat: var(--ss-cat); }
.ss-cat--preview { --ss-cat: var(--ss-cat-preview); --pres-cat: var(--ss-cat); }
.ss-cat--inspector { --ss-cat: var(--ss-cat-inspector); --pres-cat: var(--ss-cat); }
.ss-cat--presets { --ss-cat: var(--ss-cat-presets); --pres-cat: var(--ss-cat); }
.ss-cat--settings { --ss-cat: var(--ss-cat-settings); --pres-cat: var(--ss-cat); }
.ss-cat--style { --ss-cat: var(--ss-cat-style); --pres-cat: var(--ss-cat); }
.ss-cat--trigger { --ss-cat: var(--ss-cat-trigger); --pres-cat: var(--ss-cat); }
.ss-cat--overrides,.pres-sec--overrides { --ss-cat: var(--ss-cat-overrides); --pres-cat: var(--ss-cat); }
.ss-cat--particle { --ss-cat: var(--ss-cat-particle); --pres-cat: var(--ss-cat); }
.ss-cat--border { --ss-cat: var(--ss-cat-border); --pres-cat: var(--ss-cat); }
.ss-cat--glow { --ss-cat: var(--ss-cat-glow); --pres-cat: var(--ss-cat); }
.ss-cat--light { --ss-cat: var(--ss-cat-light); --pres-cat: var(--ss-cat); }
.ss-cat--gradient { --ss-cat: var(--ss-cat-gradient); --pres-cat: var(--ss-cat); }
.ss-cat--energy { --ss-cat: var(--ss-cat-energy); --pres-cat: var(--ss-cat); }
.ss-cat--distortion { --ss-cat: var(--ss-cat-distortion); --pres-cat: var(--ss-cat); }
.ss-cat--sparkle { --ss-cat: var(--ss-cat-sparkle); --pres-cat: var(--ss-cat); }
.ss-cat--overlay { --ss-cat: var(--ss-cat-overlay); --pres-cat: var(--ss-cat); }
.ss-cat--mask { --ss-cat: var(--ss-cat-mask); --pres-cat: var(--ss-cat); }
.ss-cat--trail { --ss-cat: var(--ss-cat-trail); --pres-cat: var(--ss-cat); }
.ss-cat--screenFx { --ss-cat: var(--ss-cat-screenFx); --pres-cat: var(--ss-cat); }
.ss-cat--cameraFx { --ss-cat: var(--ss-cat-cameraFx); --pres-cat: var(--ss-cat); }
.ss-cat--general { --ss-cat: var(--ss-cat-general); --pres-cat: var(--ss-cat); }
.ss-cat--timing { --ss-cat: var(--ss-cat-timing); --pres-cat: var(--ss-cat); }
.ss-cat--visual { --ss-cat: var(--ss-cat-visual); --pres-cat: var(--ss-cat); }
.ss-cat--advanced { --ss-cat: var(--ss-cat-advanced); --pres-cat: var(--ss-cat); }
.ss-cat--items { --ss-cat: var(--ss-cat-items); --pres-cat: var(--ss-cat); }
.ss-cat--deps { --ss-cat: var(--ss-cat-deps); --pres-cat: var(--ss-cat); }
.ss-cat--straight { --ss-cat: var(--ss-cat-straight); --pres-cat: var(--ss-cat); }
.ss-cat--v { --ss-cat: var(--ss-cat-v); --pres-cat: var(--ss-cat); }
.ss-cat--zigzag { --ss-cat: var(--ss-cat-zigzag); --pres-cat: var(--ss-cat); }
.ss-cat--w { --ss-cat: var(--ss-cat-w); --pres-cat: var(--ss-cat); }
.ss-cat--diagonal { --ss-cat: var(--ss-cat-diagonal); --pres-cat: var(--ss-cat); }
.ss-cat--custom { --ss-cat: var(--ss-cat-custom); --pres-cat: var(--ss-cat); }
.ss-cat--landing { --ss-cat: var(--ss-cat-landing); --pres-cat: var(--ss-cat); }
.ss-cat--win { --ss-cat: var(--ss-cat-win); --pres-cat: var(--ss-cat); }
.ss-cat--bigWin { --ss-cat: var(--ss-cat-bigWin); --pres-cat: var(--ss-cat); }
.ss-cat--jackpot { --ss-cat: var(--ss-cat-jackpot); --pres-cat: var(--ss-cat); }
.ss-cat--bonusIntro { --ss-cat: var(--ss-cat-bonusIntro); --pres-cat: var(--ss-cat); }
.ss-cat--freeSpins { --ss-cat: var(--ss-cat-freeSpins); --pres-cat: var(--ss-cat); }
.ss-cat--reelStop { --ss-cat: var(--ss-cat-reelStop); --pres-cat: var(--ss-cat); }
.ss-cat--reel { --ss-cat: var(--ss-cat-reel); --pres-cat: var(--ss-cat); }
.ss-cat--tophud { --ss-cat: var(--ss-cat-tophud); --pres-cat: var(--ss-cat); }
.ss-cat--bottomhud { --ss-cat: var(--ss-cat-bottomhud); --pres-cat: var(--ss-cat); }
.ss-cat--decorations { --ss-cat: var(--ss-cat-decorations); --pres-cat: var(--ss-cat); }
.ss-cat--overlays { --ss-cat: var(--ss-cat-overlays); --pres-cat: var(--ss-cat); }
.ss-cat--floating { --ss-cat: var(--ss-cat-floating); --pres-cat: var(--ss-cat); }
.ss-cat--adjustor { --ss-cat: var(--ss-cat-adjustor); --pres-cat: var(--ss-cat); }

.pres-sec, .ss-sec {
  --pres-cat: var(--ss-cat, #c4b5fd);
  --ss-cat: var(--pres-cat);
  border:1px solid color-mix(in srgb, var(--ss-cat) 28%, rgba(255,255,255,0.06));
  border-left:3px solid var(--ss-cat);
  border-radius:0.45rem;
  margin-bottom:0.45rem;
  overflow:hidden;
  background:color-mix(in srgb, var(--ss-cat) 7%, rgba(0,0,0,0.18));
}
.pres-sec-head, .ss-sec-head {
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:0.5rem 0.55rem; background:transparent; border:none;
  color:var(--ss-cat); font-size:0.78rem; font-weight:800; letter-spacing:0.02em;
  cursor:pointer; text-align:left;
}
.pres-sec.open .pres-sec-head, .ss-sec.open .ss-sec-head { color:var(--ss-cat); }
.pres-sec-title, .ss-sec-title { display:inline-flex; align-items:center; gap:0.4rem; }
.pres-sec-dot, .ss-sec-dot {
  width:0.45rem; height:0.45rem; border-radius:50%; flex:0 0 auto;
  background:var(--ss-cat); box-shadow:0 0 8px color-mix(in srgb, var(--ss-cat) 70%, transparent);
}
.pres-sec-caret, .ss-sec-caret { color:color-mix(in srgb, var(--ss-cat) 75%, #fff); opacity:0.85; font-size:0.7rem; }
.pres-sec-body, .ss-sec-body { padding:0.45rem 0.55rem 0.55rem; border-top:1px solid color-mix(in srgb, var(--ss-cat) 18%, transparent); }
.pres-sec-body[hidden], .ss-sec-body[hidden] { display:none !important; }
.pres-sec .ss-field > label, .ss-sec .ss-field > label, .ss-sec .pls-field > label, .ss-sec .ssp-field > label {
  color:color-mix(in srgb, var(--ss-cat) 72%, #cbd5e1);
  font-weight:700;
}
.pres-cat-label, .ss-cat-label {
  color:var(--ss-cat, var(--pres-cat)) !important;
  font-weight:800 !important;
  letter-spacing:0.05em;
}
.pres-insp-top.pres-sec--event {
  --pres-cat: var(--ss-cat-event); --ss-cat: var(--ss-cat-event);
  padding:0.45rem 0.5rem;
  margin-bottom:0.55rem;
  border-radius:0.45rem;
  border:1px solid color-mix(in srgb, var(--ss-cat) 30%, transparent);
  border-left:3px solid var(--ss-cat);
  background:color-mix(in srgb, var(--ss-cat) 8%, rgba(0,0,0,0.18));
}

/* Colored group headers across studios */
.ss-pane-head[class*="ss-cat--"],
.ss-section-title[class*="ss-cat--"],
.section-title[class*="ss-cat--"],
.pls-pane-head[class*="ss-cat--"],
.pls-insp-sub[class*="ss-cat--"],
.vfx-insp-sec[class*="ss-cat--"],
.vfx-insp-subsec[class*="ss-cat--"],
.mst-insp-sec[class*="ss-cat--"],
.ssp-panel-head[class*="ss-cat--"],
.sym-insp-title[class*="ss-cat--"] {
  color: var(--ss-cat) !important;
  border-left: 3px solid var(--ss-cat);
  padding-left: 0.55rem;
  background: color-mix(in srgb, var(--ss-cat) 8%, transparent);
}
.ss-pane-head[class*="ss-cat--"] {
  border-bottom-color: color-mix(in srgb, var(--ss-cat) 25%, var(--border-structural));
}
.vfx-cat[class*="ss-cat--"] {
  border-left: 3px solid var(--ss-cat);
  color: color-mix(in srgb, var(--ss-cat) 85%, #fff);
}
.vfx-cat[class*="ss-cat--"].on {
  background: color-mix(in srgb, var(--ss-cat) 16%, transparent);
  border-color: color-mix(in srgb, var(--ss-cat) 45%, transparent);
  color: var(--ss-cat);
}
.ssp-tab[class*="ss-cat--"] {
  border-bottom: 2px solid transparent;
}
.ssp-tab[class*="ss-cat--"].on {
  color: var(--ss-cat) !important;
  border-bottom-color: var(--ss-cat);
}
.ssp-tree-item[class*="ss-cat--"],
.ssp-chip-btn[class*="ss-cat--"] {
  border-left: 3px solid var(--ss-cat);
}
.ssp-tree-item[class*="ss-cat--"].sel,
.ssp-tree-item[class*="ss-cat--"].on,
.ssp-chip-btn[class*="ss-cat--"].on {
  color: var(--ss-cat);
  background: color-mix(in srgb, var(--ss-cat) 14%, transparent);
  border-color: color-mix(in srgb, var(--ss-cat) 40%, transparent);
}
.pls-chip[class*="ss-cat--"] {
  border-color: color-mix(in srgb, var(--ss-cat) 35%, transparent);
  color: color-mix(in srgb, var(--ss-cat) 80%, #fff);
}
.pls-chip[class*="ss-cat--"].on {
  background: color-mix(in srgb, var(--ss-cat) 18%, transparent);
  border-color: var(--ss-cat);
  color: var(--ss-cat);
}
.layout-hier-sec[class*="ss-cat--"] > .layout-hier-sec-row .layout-hier-sec-btn {
  color: color-mix(in srgb, var(--ss-cat) 88%, #fff);
  border-left: 3px solid var(--ss-cat);
  padding-left: 0.4rem;
}
.layout-hier-sec[class*="ss-cat--"].active-sec > .layout-hier-sec-row .layout-hier-sec-btn,
.layout-hier-sec[class*="ss-cat--"] .layout-hier-sec-btn.active {
  color: var(--ss-cat);
  background: color-mix(in srgb, var(--ss-cat) 12%, transparent);
}
.mst-state[class*="ss-cat--"] { border-left: 3px solid var(--ss-cat); }
.mst-state[class*="ss-cat--"].on,
.mst-state[class*="ss-cat--"].sel { color: var(--ss-cat); background: color-mix(in srgb, var(--ss-cat) 14%, transparent); }
.layout-hier-head[class*="ss-cat--"] {
  color: var(--ss-cat) !important;
  border-left: 3px solid var(--ss-cat);
  padding-left: 0.55rem;
  background: color-mix(in srgb, var(--ss-cat) 8%, transparent);
}
.mst-chip[class*="ss-cat--"] {
  border-left: 2px solid var(--ss-cat);
}
.mst-chip[class*="ss-cat--"].filled {
  color: var(--ss-cat);
  border-color: color-mix(in srgb, var(--ss-cat) 50%, transparent);
  background: color-mix(in srgb, var(--ss-cat) 12%, transparent);
}
.vfx-insp-head {
  color: var(--ss-cat-inspector);
  border-left: 3px solid var(--ss-cat-inspector);
  padding-left: 0.45rem;
  margin-bottom: 0.4rem;
  font-weight: 800;
}

.sym-tree-item[class*="ss-cat--"] { border-left: 3px solid transparent; }
.sym-tree-item[class*="ss-cat--"].sel {
  border-left-color: var(--ss-cat);
  color: var(--ss-cat);
  background: color-mix(in srgb, var(--ss-cat) 14%, transparent);
}
.pls-field > label.ss-cat-label,
.ssp-field > label.ss-cat-label,
.vfx-field > label.ss-cat-label { color: var(--ss-cat) !important; font-weight: 800; }
.pres-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:0.4rem; }
.pres-check { display:flex; align-items:center; gap:0.35rem; font-size:0.75rem; color:var(--txt-secondary); margin:0.25rem 0; cursor:pointer; }
.pres-inline-actions { display:flex; flex-wrap:wrap; gap:0.3rem; margin-top:0.4rem; }
.pres-insp-top { margin-bottom:0.5rem; }
.pres-insp-foot { display:flex; flex-wrap:wrap; gap:0.35rem; margin-top:0.65rem; padding-top:0.55rem; border-top:1px solid var(--border-structural); }
.pres-packs-bar { display:flex; flex-wrap:wrap; gap:0.35rem; align-items:center; margin-bottom:0.45rem; }
.pres-pack-filters { display:flex; flex-wrap:wrap; gap:0.25rem; flex:1; }
.pres-chip { font-size:0.65rem; font-weight:700; padding:0.22rem 0.45rem; border-radius:999px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03); color:var(--txt-muted); cursor:pointer; }
.pres-chip.on { border-color:var(--purple-border); color:#e9d5ff; background:rgba(147,51,234,0.16); }
.pres-pack-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:0.45rem; max-height:180px; overflow:auto; }
.pres-pack-card { position:relative; border:1px solid var(--border-structural); border-radius:0.5rem; background:var(--bg-input); padding:0.4rem; cursor:pointer; }
.pres-pack-card:hover { border-color:var(--gold-border); }
.pres-pack-card.sel { border-color:var(--purple-border); box-shadow:0 0 0 1px rgba(147,51,234,0.35); }
.pres-pack-thumb { height:54px; border-radius:0.35rem; margin-bottom:0.35rem; background:linear-gradient(145deg, var(--pack-color, #a78bfa), rgba(15,12,31,0.85)); }
.pres-pack-name { font-size:0.78rem; font-weight:700; }
.pres-pack-cat { font-size:0.62rem; color:var(--txt-muted); margin-bottom:0.3rem; }
.pres-pack-actions { display:flex; gap:0.2rem; flex-wrap:wrap; }
.pres-pack-actions .ss-btn { font-size:0.65rem; padding:0.2rem 0.4rem; }
.pres-pack-fav { position:absolute; top:4px; right:4px; border:none; background:rgba(0,0,0,0.35); border-radius:999px; width:22px; height:22px; opacity:0.5; cursor:pointer; color:#fff; }
.pres-pack-fav.on { opacity:1; color:#fbbf24; }
.pres-pack-check { position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:999px; background:var(--purple-rich); color:#fff; font-size:0.7rem; display:flex; align-items:center; justify-content:center; font-weight:800; }
.pres-ai-log { flex:1; overflow:auto; display:flex; flex-direction:column; gap:0.4rem; min-height:100px; max-height:160px; margin-bottom:0.4rem; }
.pres-ai-msg { padding:0.45rem 0.55rem; border-radius:0.45rem; font-size:0.75rem; line-height:1.35; }
.pres-ai-msg.bot { background:rgba(147,51,234,0.12); border:1px solid rgba(147,51,234,0.25); }
.pres-ai-msg.user { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); align-self:flex-end; }
.pres-ai-msg p { margin:0 0 0.3rem; }
.pres-ai-msg ul { margin:0.2rem 0 0.4rem; padding-left:1rem; color:var(--txt-secondary); }
.pres-ai-input { display:flex; gap:0.3rem; }
.pres-ai-input input { flex:1; background:var(--bg-input); border:1px solid var(--border-input); border-radius:0.4rem; color:#fff; padding:0.4rem 0.5rem; font-size:0.8rem; }
@media (max-width:1200px) {
  .pres-body { grid-template-columns:1fr; }
  .pres-bottom { grid-template-columns:1fr; }
}

/* ── Preset Library ── */
.plib-root { display:flex; flex-direction:column; gap:0.45rem; min-height:0; }
.plib-toolbar { display:flex; flex-wrap:wrap; gap:0.35rem; align-items:center; }
.plib-search { flex:1 1 140px; margin:0 !important; max-width:none; }
.plib-body { display:grid; grid-template-columns:1.4fr 1fr; gap:0.5rem; min-height:220px; }
.plib-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:0.4rem; max-height:280px; overflow:auto; padding:0.15rem; }
.plib-card { position:relative; padding:0.5rem 0.45rem 0.4rem; border:1px solid var(--border-structural); border-radius:0.45rem; background:var(--bg-input); cursor:pointer; min-height:72px; }
.plib-card:hover { border-color:var(--gold-border); }
.plib-card.sel { border-color:var(--purple-border); background:rgba(147,51,234,0.14); }
.plib-card.shared { box-shadow: inset 0 0 0 1px rgba(16,185,129,0.25); }
.plib-card .fav { position:absolute; top:2px; right:2px; border:none; background:transparent; opacity:0.45; cursor:pointer; font-size:0.85rem; }
.plib-card .fav.on { opacity:1; color:#fbbf24; }
.plib-name { font-size:0.78rem; font-weight:600; margin-bottom:0.25rem; padding-right:1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plib-meta, .plib-tags { display:flex; flex-wrap:wrap; gap:0.2rem; }
.plib-detail { border:1px solid var(--border-structural); border-radius:0.5rem; padding:0.45rem; background:var(--bg-sidebar); display:flex; flex-direction:column; gap:0.35rem; min-height:0; }
.plib-preview { background:#0a0c14; border-radius:0.4rem; padding:0.5rem; font-size:0.75rem; color:var(--txt-secondary); max-height:140px; overflow:auto; }
.plib-preview ul { margin:0.35rem 0 0; padding-left:1.1rem; }
.plib-preview li { margin:0.1rem 0; }
.plib-actions, .plib-ai { display:flex; flex-wrap:wrap; gap:0.3rem; }
.plib-ai .ss-btn { font-size:0.72rem; }
@media (max-width:1100px) {
  .plib-body { grid-template-columns:1fr; }
}

/* ── Sequence Studio live preview stage ── */
.ss-preview-board.seq-preview-live { padding:0; align-items:stretch; justify-content:stretch; }
.seq-pv-stage { position:relative; width:100%; height:100%; min-height:200px; overflow:hidden; border-radius:0.5rem;
  background:radial-gradient(ellipse at 50% 40%, #1e293b 0%, #0b0e1a 70%); transform-origin:center center; }
.seq-pv-bg { position:absolute; inset:0; opacity:0; transition:opacity 0.25s ease; pointer-events:none; }
.seq-pv-bg.on { opacity:1; }
.seq-pv-bg.fire { background:radial-gradient(ellipse at 50% 80%, rgba(255,80,0,0.45), transparent 60%); }
.seq-pv-bg.bonus { background:radial-gradient(ellipse at 50% 50%, rgba(168,85,247,0.35), transparent 65%); }
.seq-pv-bg.glow { background:radial-gradient(ellipse at 50% 50%, rgba(255,215,94,0.25), transparent 60%); }
.seq-pv-flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; transition:opacity 0.08s linear; }
.seq-pv-flash.on { opacity:0.45; animation:seqPvFlash 0.35s ease-out forwards; }
.seq-pv-flash.tint.on { opacity:0.22; animation:none; transition:opacity 0.3s ease; }
.seq-pv-vignette { position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.75) 100%); transition:opacity 0.3s ease; }
.seq-pv-vignette.on { opacity:1; }
.seq-pv-npc { position:absolute; border-radius:0; background:transparent;
  border:none; color:#fbbf24; font-size:0.58rem; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; letter-spacing:0.4px; overflow:visible; z-index:6; flex-direction:column; gap:0;
  /* Default = stageLeft focal (NPC Studio) until a slot class applies */
  top:14%; right:48%; bottom:18%; left:4%; width:auto; height:auto;
  --npc-ox: 0px; --npc-oy: 0px; --npc-scale: 1; --npc-enter-ms: 320ms; --npc-exit-ms: 280ms;
  transform: translate(var(--npc-ox), var(--npc-oy)) scale(var(--npc-scale));
  transform-origin: center center;
  transition: opacity 0.2s ease, transform 0.25s ease, inset 0.25s ease; }
/* Match NPC Studio .npc-focal.slot-* insets so Sequence preview ≈ GameTest */
.seq-pv-npc.slot-stageRight { top:14%; right:4%; bottom:18%; left:48%; }
.seq-pv-npc.slot-stageLeft { top:14%; right:48%; bottom:18%; left:4%; }
.seq-pv-npc.slot-aboveBoard { top:4%; right:24%; bottom:46%; left:24%; }
.seq-pv-npc.slot-belowTitle { top:10%; right:28%; bottom:50%; left:28%; }
.seq-pv-npc.slot-fullscreen { top:8%; right:18%; bottom:12%; left:18%; }
.seq-pv-npc.on { opacity:1; pointer-events:none; }
.seq-pv-npc.on.slot-stageRight,
.seq-pv-npc.on.slot-stageLeft,
.seq-pv-npc.on.slot-aboveBoard,
.seq-pv-npc.on.slot-belowTitle,
.seq-pv-npc.on.slot-fullscreen { transform: translate(var(--npc-ox), calc(var(--npc-oy) - 4px)) scale(var(--npc-scale)); }
.seq-pv-npc.hot,
.seq-pv-npc.cool,
.seq-pv-npc.has-media,
.seq-pv-npc.spine-live { background:transparent; border:none; box-shadow:none; }
.seq-pv-npc-spine { position:absolute; inset:0; width:100%; height:100%; display:block; background:transparent; }
.seq-pv-npc-img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:transparent; }
.seq-pv-npc-fallback { display:none; }
.seq-pv-npc-label { display:none; }

/* NPC enter / exit (Sequence preview) */
.seq-pv-npc.enter-fade { opacity:0; }
.seq-pv-npc.enter-fade.enter-play { animation: seqNpcFadeIn var(--npc-enter-ms) ease-out forwards; }
.seq-pv-npc.enter-slideIn:not(.enter-play) { opacity:0; }
.seq-pv-npc.slot-stageRight.enter-slideIn:not(.enter-play) { transform: translate(calc(var(--npc-ox) + 48px), var(--npc-oy)) scale(var(--npc-scale)); }
.seq-pv-npc.slot-stageLeft.enter-slideIn:not(.enter-play) { transform: translate(calc(var(--npc-ox) - 48px), var(--npc-oy)) scale(var(--npc-scale)); }
.seq-pv-npc.enter-slideIn.enter-play { animation: seqNpcSlideIn var(--npc-enter-ms) ease-out forwards; }
.seq-pv-npc.enter-pop:not(.enter-play) { opacity:0; transform: translate(var(--npc-ox), var(--npc-oy)) scale(0.55); }
.seq-pv-npc.enter-pop.enter-play { animation: seqNpcPopIn var(--npc-enter-ms) ease-out forwards; }
.seq-pv-npc.enter-drop:not(.enter-play) { opacity:0; transform: translate(var(--npc-ox), calc(var(--npc-oy) - 40px)) scale(var(--npc-scale)); }
.seq-pv-npc.enter-drop.enter-play { animation: seqNpcDropIn var(--npc-enter-ms) ease-out forwards; }
.seq-pv-npc.exit-play.exit-fade { animation: seqNpcFadeOut var(--npc-exit-ms) ease-in forwards; }
.seq-pv-npc.exit-play.exit-slideIn { animation: seqNpcSlideOut var(--npc-exit-ms) ease-in forwards; }
.seq-pv-npc.exit-play.exit-pop { animation: seqNpcPopOut var(--npc-exit-ms) ease-in forwards; }
.seq-pv-npc.exit-play.exit-drop { animation: seqNpcDropOut var(--npc-exit-ms) ease-in forwards; }
@keyframes seqNpcFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes seqNpcFadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes seqNpcSlideIn { from { opacity:0; } to { opacity:1; } }
@keyframes seqNpcSlideOut { to { opacity:0; } }
@keyframes seqNpcPopIn { from { opacity:0; transform: translate(var(--npc-ox), var(--npc-oy)) scale(0.55); }
  to { opacity:1; transform: translate(var(--npc-ox), calc(var(--npc-oy) - 4px)) scale(var(--npc-scale)); } }
@keyframes seqNpcPopOut { to { opacity:0; transform: translate(var(--npc-ox), var(--npc-oy)) scale(0.55); } }
@keyframes seqNpcDropIn { from { opacity:0; transform: translate(var(--npc-ox), calc(var(--npc-oy) - 40px)) scale(var(--npc-scale)); }
  to { opacity:1; transform: translate(var(--npc-ox), calc(var(--npc-oy) - 4px)) scale(var(--npc-scale)); } }
@keyframes seqNpcDropOut { to { opacity:0; transform: translate(var(--npc-ox), calc(var(--npc-oy) + 36px)) scale(var(--npc-scale)); } }

/* NPC Studio live preview — absolute UV box on 16:9 stage (matches GameTest) */
.npc-focal { position:absolute; display:flex; align-items:center; justify-content:center; z-index:5;
  background:transparent; border:none; box-shadow:none;
  transform: none; transform-origin: center center; }
.npc-stage.playing.enter-slideIn .npc-focal { animation: npcStudioIn 0.35s ease-out; }
.npc-stage.playing.enter-fade .npc-focal { animation: npcStudioFadeIn 0.35s ease-out; }
.npc-stage.playing.enter-pop .npc-focal { animation: npcStudioPopIn 0.35s ease-out; }
.npc-stage.playing.enter-drop .npc-focal { animation: npcStudioDropIn 0.35s ease-out; }
.npc-stage.playing.enter-none .npc-focal { opacity:1; }
@keyframes npcStudioIn { from { opacity:0; transform: translateX(8%); } to { opacity:1; transform:none; } }
@keyframes npcStudioFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes npcStudioPopIn { from { opacity:0; transform: scale(0.55); } to { opacity:1; transform:none; } }
@keyframes npcStudioDropIn { from { opacity:0; transform: translateY(-8%); } to { opacity:1; transform:none; } }
.npc-spine-host { width:100%; height:100%; display:block; background:transparent; }
.npc-art-img { max-width:100%; max-height:100%; object-fit:contain; background:transparent; }
.npc-art-placeholder { width:120px; height:160px; border:none; background:transparent; display:flex; align-items:center; justify-content:center; color:var(--txt-muted); font-weight:700; letter-spacing:0.08em; opacity:0.45; }
.seq-pv-reels { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); display:flex; gap:8px; z-index:2; }
.seq-pv-cell { width:72px; height:72px; border-radius:0.4rem; background:rgba(15,23,42,0.85);
  border:1px solid rgba(148,163,184,0.25); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.seq-pv-sym { width:58px; height:58px; border-radius:0.3rem; background:#334155; color:#e2e8f0;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem; transform-origin:center center; }
.seq-pv-sym.fallback-pulse { animation:seqPvPulse 0.9s ease-in-out infinite; }
.seq-pv-payline { position:absolute; left:18%; right:18%; top:46%; height:3px; border-radius:2px; background:#ffd75e;
  opacity:0; transform:scaleX(0.2); transform-origin:left center; transition:opacity 0.15s ease, transform 0.45s ease; z-index:3;
  box-shadow:0 0 10px rgba(255,215,94,0.7); }
.seq-pv-payline.on { opacity:1; transform:scaleX(1); }
.seq-pv-payline.fire { background:linear-gradient(90deg,#ff6a00,#ffd75e); box-shadow:0 0 12px rgba(255,100,0,0.8); }
.seq-pv-payline.gold { background:linear-gradient(90deg,#b8860b,#ffd700,#fff1a8); }
.seq-pv-particles { position:absolute; left:50%; top:46%; width:0; height:0; z-index:4; pointer-events:none; opacity:0; }
.seq-pv-particles.on { opacity:1; }
.seq-pv-vfx-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; }
.seq-pv-dot { position:absolute; width:7px; height:7px; border-radius:50%; left:0; top:0;
  animation:seqPvBurst 0.75s ease-out forwards; box-shadow:0 0 6px currentColor; }
.seq-pv-hud { position:absolute; left:50%; top:14%; z-index:6; padding:0.35rem 0.8rem;
  border-radius:0.4rem; background:rgba(15,23,42,0.92); border:1px solid rgba(255,215,94,0.5); color:#ffd75e;
  font-weight:700; font-size:0.85rem; letter-spacing:0.6px; opacity:0; z-index:5;
  --hud-scale: 1; --hud-enter-ms: 320ms; --hud-exit-ms: 280ms; --hud-slide: 40px;
  transform: translate(-50%, -50%) scale(var(--hud-scale));
  transition: none; }
.seq-pv-hud.on { opacity:1; }
.seq-pv-hud.enter-fade { opacity:0; }
.seq-pv-hud.enter-fade.enter-play { animation: seqHudFadeIn var(--hud-enter-ms) ease-out forwards; }
.seq-pv-hud.enter-slideIn:not(.enter-play) { opacity:0; transform: translate(-50%, calc(-50% + var(--hud-slide))) scale(var(--hud-scale)); }
.seq-pv-hud.enter-slideIn.enter-play { animation: seqHudSlideIn var(--hud-enter-ms) ease-out forwards; }
.seq-pv-hud.enter-pop:not(.enter-play) { opacity:0; transform: translate(-50%, -50%) scale(0.55); }
.seq-pv-hud.enter-pop.enter-play { animation: seqHudPopIn var(--hud-enter-ms) ease-out forwards; }
.seq-pv-hud.enter-drop:not(.enter-play) { opacity:0; transform: translate(-50%, calc(-50% - 44px)) scale(var(--hud-scale)); }
.seq-pv-hud.enter-drop.enter-play { animation: seqHudDropIn var(--hud-enter-ms) ease-out forwards; }
.seq-pv-hud.enter-none { opacity:0; }
.seq-pv-hud.enter-none.enter-play { opacity:1; }
.seq-pv-hud.exit-play.exit-fade { animation: seqHudFadeOut var(--hud-exit-ms) ease-in forwards; }
.seq-pv-hud.exit-play.exit-slideIn { animation: seqHudSlideOut var(--hud-exit-ms) ease-in forwards; }
.seq-pv-hud.exit-play.exit-pop { animation: seqHudPopOut var(--hud-exit-ms) ease-in forwards; }
.seq-pv-hud.exit-play.exit-drop { animation: seqHudDropOut var(--hud-exit-ms) ease-in forwards; }
.seq-pv-hud.exit-play.exit-none { opacity:0; }
@keyframes seqHudFadeIn { from { opacity:0; } to { opacity:1; transform: translate(-50%, -50%) scale(var(--hud-scale)); } }
@keyframes seqHudFadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes seqHudSlideIn { from { opacity:0; transform: translate(-50%, calc(-50% + var(--hud-slide))) scale(var(--hud-scale)); }
  to { opacity:1; transform: translate(-50%, -50%) scale(var(--hud-scale)); } }
@keyframes seqHudSlideOut { to { opacity:0; transform: translate(-50%, calc(-50% + var(--hud-slide))) scale(var(--hud-scale)); } }
@keyframes seqHudPopIn { from { opacity:0; transform: translate(-50%, -50%) scale(0.55); }
  to { opacity:1; transform: translate(-50%, -50%) scale(var(--hud-scale)); } }
@keyframes seqHudPopOut { to { opacity:0; transform: translate(-50%, -50%) scale(0.55); } }
@keyframes seqHudDropIn { from { opacity:0; transform: translate(-50%, calc(-50% - 44px)) scale(var(--hud-scale)); }
  to { opacity:1; transform: translate(-50%, -50%) scale(var(--hud-scale)); } }
@keyframes seqHudDropOut { to { opacity:0; transform: translate(-50%, calc(-50% + 36px)) scale(var(--hud-scale)); } }
.seq-pv-audio { position:absolute; right:10px; top:10px; padding:0.2rem 0.45rem; border-radius:0.3rem;
  background:rgba(16,185,129,0.15); border:1px solid rgba(16,185,129,0.4); color:#6ee7b7; font-size:0.68rem;
  opacity:0; transition:opacity 0.15s ease; z-index:5; }
.seq-pv-audio.on { opacity:1; }
.seq-pv-title { position:absolute; left:10px; top:8px; font-size:0.7rem; color:rgba(226,232,240,0.75); z-index:5; }
.seq-pv-beats { position:absolute; left:8px; right:8px; bottom:22px; display:flex; flex-wrap:wrap; gap:0.25rem; z-index:5; }
.seq-pv-chip { font-size:0.6rem; padding:0.1rem 0.35rem; border-radius:0.25rem; background:rgba(255,255,255,0.06);
  color:rgba(203,213,225,0.8); border:1px solid transparent; }
.seq-pv-chip.on { border-color:var(--purple-border); color:#c4b5fd; background:rgba(147,51,234,0.2); }
.seq-pv-foot { position:absolute; left:0; right:0; bottom:4px; text-align:center; font-size:0.6rem; color:rgba(148,163,184,0.7); z-index:5; }
.seq-pv-stage.cam-shake { animation:seqPvShake 0.35s linear; }
.seq-pv-stage.cam-punch { animation:seqPvPunch 0.3s ease-out; }
.seq-pv-stage.cam-zoom { animation:seqPvZoom 0.55s ease-out; }
@keyframes seqPvFlash { 0% { opacity:0.55; } 100% { opacity:0; } }
@keyframes seqPvPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.12); } }
@keyframes seqPvBurst { 0% { transform:translate(0,0) scale(1); opacity:1; } 100% { transform:translate(var(--dx),var(--dy)) scale(0.2); opacity:0; } }
@keyframes seqPvShake {
  0%,100% { transform:translate(0,0); }
  20% { transform:translate(-3px,2px); }
  40% { transform:translate(3px,-2px); }
  60% { transform:translate(-2px,-1px); }
  80% { transform:translate(2px,1px); }
}
@keyframes seqPvPunch {
  0% { transform:scale(1); }
  40% { transform:scale(1.06); }
  100% { transform:scale(1); }
}
@keyframes seqPvZoom {
  0% { transform:scale(1); }
  50% { transform:scale(1.08); }
  100% { transform:scale(1.02); }
}


/* ── Sequence Studio PRO ── */
.ssp-root {
  --ssp-bg: #0b0d14;
  --ssp-panel: #12151f;
  --ssp-panel-2: #171b28;
  --ssp-border: rgba(148,163,184,0.16);
  --ssp-purple: #8b5cf6;
  --ssp-purple-2: #a78bfa;
  --ssp-gold: #fbbf24;
  display:flex; flex-direction:column; gap:0; height:calc(100vh - 168px); min-height:680px;
  background:radial-gradient(1200px 600px at 50% -10%, rgba(88,40,160,0.22), transparent 55%), var(--ssp-bg);
  color:#e5e7eb; border:1px solid var(--ssp-border); border-radius:0.7rem; overflow:hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
}
.ssp-topbar {
  display:flex; align-items:center; gap:0.65rem; flex-wrap:wrap; padding:0.45rem 0.75rem;
  background:linear-gradient(180deg,#161a27,#10131c); border-bottom:1px solid var(--ssp-border);
}
.ssp-brand { display:flex; align-items:center; gap:0.5rem; min-width:210px; }
.ssp-brand .logo { width:28px; height:28px; display:grid; place-items:center; border-radius:0.45rem;
  background:linear-gradient(135deg,#7c3aed,#db2777); font-size:0.95rem; }
.ssp-brand .title { font-size:0.82rem; font-weight:700; letter-spacing:0.2px; }
.ssp-brand .title em { font-style:normal; color:var(--ssp-purple-2); }
.ssp-brand .title .dim { color:#64748b; font-weight:500; }
.ssp-brand .proj { font-size:0.68rem; color:#94a3b8; margin-top:1px; }
.ssp-top-group { display:flex; align-items:center; gap:0.3rem; }
.ssp-top-group.end { margin-left:auto; }
.ssp-subbar {
  display:flex; align-items:center; gap:0.55rem; padding:0.3rem 0.75rem;
  background:#0e1119; border-bottom:1px solid var(--ssp-border); font-size:0.75rem;
}
.ssp-subbar .crumb strong { color:#fff; }
.ssp-subbar .spacer, .ssp-actions-bar .spacer { flex:1; }

.ssp-btn, .ssp-mini, .ssp-icon-btn, .ssp-play {
  background:rgba(255,255,255,0.04); color:#e2e8f0; border:1px solid var(--ssp-border);
  border-radius:0.4rem; cursor:pointer; font-size:0.75rem; white-space:nowrap;
}
.ssp-btn { padding:0.32rem 0.6rem; }
.ssp-btn:hover, .ssp-mini:hover, .ssp-icon-btn:hover { border-color:rgba(167,139,250,0.45); background:rgba(139,92,246,0.12); }
.ssp-btn.primary, .ssp-mini.primary { background:linear-gradient(180deg,#7c3aed,#6d28d9); border-color:#8b5cf6; color:#fff; }
.ssp-btn.primary:hover, .ssp-mini.primary:hover { filter:brightness(1.08); }
.ssp-btn.good { border-color:rgba(16,185,129,0.45); color:var(--accent-emerald, #34d399); }
.ssp-btn.good:hover { background:rgba(16,185,129,0.12); }
.ssp-btn.danger { color:#fb7185; border-color:rgba(244,63,94,0.35); }
.ssp-btn.on, .ssp-play.on { background:rgba(139,92,246,0.22); border-color:rgba(167,139,250,0.55); color:#ddd6fe; }
.ssp-btn.block { width:100%; margin-top:0.4rem; }
.ssp-mini { padding:0.2rem 0.45rem; font-size:0.68rem; }
.ssp-icon-btn { width:30px; height:30px; display:inline-grid; place-items:center; padding:0; }
.ssp-icon-btn.danger { color:#fb7185; }
.ssp-play { width:34px; height:34px; border-radius:999px; display:inline-grid; place-items:center;
  background:linear-gradient(180deg,#8b5cf6,#6d28d9); border-color:#a78bfa; color:#fff; font-size:0.8rem; }
.ssp-play.slim { width:28px; height:28px; font-size:0.7rem; }
.ssp-select { background:#0f1320; color:#e2e8f0; border:1px solid var(--ssp-border); border-radius:0.4rem; padding:0.3rem 0.45rem; font-size:0.72rem; }
.ssp-select.slim { padding:0.25rem 0.35rem; }
.ssp-search { width:100%; background:#0f1320; color:#e2e8f0; border:1px solid var(--ssp-border); border-radius:0.4rem; padding:0.35rem 0.5rem; font-size:0.75rem; margin-bottom:0.4rem; }
.ssp-muted { color:#94a3b8; font-size:0.72rem; }
.ssp-empty { color:#64748b; font-size:0.75rem; padding:0.6rem 0.2rem; text-align:center; }
.ssp-badge { font-size:0.62rem; padding:0.12rem 0.4rem; border-radius:999px; letter-spacing:0.4px; font-weight:700; }
.ssp-badge.live { background:rgba(239,68,68,0.15); color:#f87171; border:1px solid rgba(239,68,68,0.35); }
.ssp-badge.smart { background:rgba(139,92,246,0.18); color:#c4b5fd; border:1px solid rgba(139,92,246,0.4); }

.ssp-transport { display:flex; align-items:center; gap:0.3rem; padding:0.15rem 0.4rem; border:1px solid var(--ssp-border); border-radius:999px; background:rgba(0,0,0,0.25); }

.ssp-body { display:grid; grid-template-columns:240px minmax(0,1fr) 300px; gap:0; flex:1 1 auto; min-height:0; }
.ssp-root.ai-collapsed .ssp-body { grid-template-columns:240px minmax(0,1fr) 260px; }
.ssp-root.ai-collapsed .ssp-ai { display:none; }
.ssp-root.expanded .ssp-preview-panel { flex: 1.4 1 auto; }

.ssp-left, .ssp-right { display:flex; flex-direction:column; min-height:0; overflow:hidden; background:var(--ssp-panel); border-right:1px solid var(--ssp-border); }
.ssp-right { border-right:none; border-left:1px solid var(--ssp-border); }
.ssp-lib { flex:1.05 1 0; min-height:0; overflow:hidden; display:flex; flex-direction:column; border-bottom:1px solid var(--ssp-border); }
.ssp-presets { flex:1 1 0; min-height:200px; overflow:hidden; display:flex; flex-direction:column; position:relative; z-index:2; }
.ssp-panel-head { display:flex; align-items:center; justify-content:space-between; gap:0.4rem; padding:0.45rem 0.6rem; border-bottom:1px solid var(--ssp-border); font-size:0.74rem; background:rgba(0,0,0,0.18); flex-shrink:0; }
.ssp-panel-head strong { font-size:0.74rem; letter-spacing:0.2px; }
.ssp-panel-body { flex:1 1 auto; overflow:auto; padding:0.45rem; min-height:0; }

.ssp-tree { display:flex; flex-direction:column; gap:0.15rem; margin-bottom:0.45rem; }
.ssp-tree-nested { gap:0.1rem; }
.ssp-folder { display:flex; flex-direction:column; min-width:0; }
.ssp-folder.open > .ssp-tree-item { margin-bottom:0; }
.ssp-tree-item { display:flex; align-items:center; gap:0.35rem; width:100%; text-align:left; padding:0.3rem 0.4rem; border-radius:0.35rem; border:1px solid transparent; background:transparent; color:#cbd5e1; cursor:pointer; font-size:0.72rem; }
.ssp-tree-item:hover { background:rgba(255,255,255,0.04); }
.ssp-tree-item.on { background:rgba(139,92,246,0.16); border-color:rgba(139,92,246,0.35); color:#fff; }
.ssp-tree-item .chev { width:0.7rem; flex:0 0 auto; font-size:0.62rem; color:#64748b; line-height:1; }
.ssp-tree-item.on .chev { color:inherit; }
.ssp-tree-item .cnt { margin-left:auto; color:#64748b; font-size:0.65rem; }
.ssp-tree-item.on .cnt { color:#c4b5fd; }
.ssp-seq-nested {
  display:flex; flex-direction:column; gap:0.12rem;
  margin:0.12rem 0 0.4rem 0.55rem;
  padding:0.15rem 0 0.1rem 0.5rem;
  border-left:1px solid rgba(148,163,184,0.2);
}
.ssp-seq-empty { font-size:0.65rem; color:#64748b; padding:0.25rem 0.35rem 0.35rem; }
.ssp-seq-list { display:flex; flex-direction:column; gap:0.2rem; }
.ssp-seq { display:flex; gap:0.3rem; padding:0.4rem; border-radius:0.4rem; border:1px solid transparent; cursor:pointer; }
.ssp-seq-nested .ssp-seq { padding:0.3rem 0.35rem; }
.ssp-seq:hover { background:rgba(255,255,255,0.03); }
.ssp-seq.sel { background:rgba(139,92,246,0.16); border-color:rgba(139,92,246,0.4); }
.ssp-seq.off { opacity:0.45; }
.ssp-seq .fav { border:none; background:transparent; color:#475569; cursor:pointer; }
.ssp-seq .fav.on { color:#fbbf24; }
.ssp-seq .name { font-size:0.78rem; font-weight:600; }
.ssp-seq .meta { display:flex; gap:0.35rem; align-items:center; margin-top:0.12rem; font-size:0.65rem; color:#94a3b8; }
.ssp-seq .chip, .ssp-trig .chip { display:inline-block; padding:0.08rem 0.3rem; border-radius:0.25rem; background:rgba(255,255,255,0.06); }

.ssp-seg { display:flex; gap:0.15rem; background:rgba(0,0,0,0.25); padding:0.12rem; border-radius:0.4rem; }
.ssp-seg button { border:none; background:transparent; color:#94a3b8; font-size:0.65rem; padding:0.18rem 0.4rem; border-radius:0.3rem; cursor:pointer; }
.ssp-seg button.on { background:rgba(139,92,246,0.3); color:#fff; }
.ssp-preset-body { display:flex; flex-direction:column; gap:0.35rem; min-height:0; overflow:hidden; }
.ssp-preset-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.4rem; flex:1 1 auto; min-height:0; overflow:auto; align-content:start; padding-bottom:0.15rem; }
.ssp-preset-card { border:1px solid var(--ssp-border); border-radius:0.5rem; overflow:hidden; background:var(--ssp-panel-2); display:flex; flex-direction:column; cursor:pointer; transition:border-color 0.12s ease, transform 0.12s ease; }
.ssp-preset-card:hover { border-color:rgba(167,139,250,0.55); transform:translateY(-1px); }
.ssp-preset-card .art { height:56px; background:var(--pg); display:flex; align-items:flex-end; justify-content:space-between; padding:0.35rem; position:relative; pointer-events:none; }
.ssp-preset-card .art::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 30%, rgba(0,0,0,0.55)); pointer-events:none; }
.ssp-preset-card .ico { font-size:1.2rem; position:relative; z-index:1; }
.ssp-preset-card .tag { position:relative; z-index:1; font-size:0.58rem; text-transform:uppercase; letter-spacing:0.4px; background:rgba(0,0,0,0.45); padding:0.1rem 0.3rem; border-radius:0.25rem; }
.ssp-preset-card .info { padding:0.35rem 0.4rem 0.15rem; pointer-events:none; }
.ssp-preset-card .name { font-size:0.7rem; font-weight:700; line-height:1.2; }
.ssp-preset-card .sub { font-size:0.62rem; color:#94a3b8; }
.ssp-preset-card .row { display:flex; gap:0.25rem; padding:0.3rem 0.35rem 0.4rem; position:relative; z-index:2; }
.ssp-preset-card .row .ssp-mini { pointer-events:auto; cursor:pointer; }

.ssp-center { display:flex; flex-direction:column; min-height:0; min-width:0; background:#0c0f18; }
.ssp-preview-panel { flex:1.15 1 0; min-height:220px; display:flex; flex-direction:column; border-bottom:1px solid var(--ssp-border); }
.ssp-stage.ss-preview-board, .ssp-stage {
  flex:1 1 auto; min-height:200px; max-height:none; aspect-ratio:auto; margin:0.45rem 0.6rem 0.25rem;
  border-radius:0.55rem; border:1px solid rgba(139,92,246,0.25);
  box-shadow: inset 0 0 40px rgba(88,28,135,0.18), 0 8px 28px rgba(0,0,0,0.35);
  background:radial-gradient(ellipse at 50% 40%, #1e293b 0%, #0b0e1a 70%);
}
.ssp-stage.drop-hover { outline:2px dashed var(--ssp-purple-2); outline-offset:-4px; }
.ssp-stage-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.4rem; }
.ssp-stage-placeholder .mega {
  font-size:clamp(1.6rem, 4vw, 2.6rem); font-weight:900; letter-spacing:2px;
  background:linear-gradient(180deg,#fde68a,#f59e0b 40%,#b45309); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 40px rgba(251,191,36,0.25); filter:drop-shadow(0 2px 8px rgba(251,191,36,0.35));
}
.ssp-stage-placeholder .hint { font-size:0.72rem; color:#64748b; }
.seq-pv-hud.mega { font-size:1.15rem; letter-spacing:1.5px; padding:0.45rem 1rem; border-color:rgba(251,191,36,0.7); box-shadow:0 0 24px rgba(251,191,36,0.35); }
.seq-pv-hud-title { font-weight:900; letter-spacing:1px; }
.seq-pv-hud-title-img {
  display:block; margin:0 auto; max-width:min(92%, 560px); width:auto; height:auto;
  object-fit:contain; pointer-events:none;
  filter:drop-shadow(0 0 16px rgba(251,191,36,0.45));
}
.seq-pv-hud-amt { font-size:0.95rem; font-weight:800; color:#ffe08a; margin-top:0.15rem; text-shadow:0 0 12px rgba(255,215,94,0.45); }

.ssp-timeline { display:flex; align-items:center; gap:0.35rem; padding:0.35rem 0.65rem 0.5rem; }
.ssp-scrub { position:relative; flex:1 1 auto; height:8px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:visible; cursor:pointer; }
.ssp-scrub-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,#7c3aed,#a78bfa 60%,#fbbf24); width:0; }
.ssp-scrub-knob { position:absolute; top:50%; width:12px; height:12px; margin-top:-6px; margin-left:-6px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(139,92,246,0.45); left:0; }
.ssp-time { font-size:0.68rem; color:#94a3b8; font-variant-numeric:tabular-nums; min-width:110px; text-align:right; }

.ssp-flow-panel { flex:0 0 auto; border-bottom:1px solid var(--ssp-border); background:rgba(0,0,0,0.15); }
.ssp-flow-scroll { overflow-x:auto; padding:0.55rem 0.65rem 0.65rem; }
.ssp-flow { display:flex; align-items:stretch; gap:0.35rem; min-width:max-content; }
.ssp-flow.empty { min-width:0; }
.ssp-flow-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:0.15rem; min-width:112px; max-width:132px;
  padding:0.45rem 0.5rem; border-radius:0.5rem; border:1px solid var(--ssp-border); background:var(--ssp-panel-2);
  color:#e2e8f0; cursor:pointer; text-align:left; position:relative;
}
.ssp-flow-card:hover { border-color:rgba(167,139,250,0.45); transform:translateY(-1px); }
.ssp-flow-card.sel { border-color:#a78bfa; background:linear-gradient(180deg,rgba(124,58,237,0.35),rgba(124,58,237,0.12)); box-shadow:0 0 0 1px rgba(167,139,250,0.35); }
.ssp-flow-card.off { opacity:0.45; }
.ssp-flow-card.finish { border-style:dashed; opacity:0.85; cursor:default; }
.ssp-flow-card .num { position:absolute; top:0.3rem; right:0.35rem; font-size:0.62rem; color:#94a3b8; }
.ssp-flow-card .ico { font-size:1rem; }
.ssp-flow-card .lbl { font-size:0.72rem; font-weight:700; line-height:1.2; }
.ssp-flow-card .dur { font-size:0.62rem; color:#94a3b8; }
.ssp-flow-arrow { display:flex; align-items:center; color:#64748b; font-size:0.85rem; padding:0 0.05rem; }
.ssp-flow-card.tint-orange { border-top:2px solid #fb923c; }
.ssp-flow-card.tint-amber { border-top:2px solid #fbbf24; }
.ssp-flow-card.tint-purple { border-top:2px solid #a78bfa; }
.ssp-flow-card.tint-violet { border-top:2px solid #c084fc; }
.ssp-flow-card.tint-blue { border-top:2px solid #60a5fa; }
.ssp-flow-card.tint-teal { border-top:2px solid #2dd4bf; }
.ssp-flow-card.tint-gold { border-top:2px solid #f59e0b; }
.ssp-flow-card.tint-green { border-top:2px solid #34d399; }
.ssp-flow-card.tint-slate { border-top:2px solid #94a3b8; }

.ssp-actions-panel { flex:1 1 0; min-height:160px; display:flex; flex-direction:column; overflow:hidden; }
.ssp-actions-bar { display:flex; align-items:center; gap:0.35rem; flex-wrap:wrap; padding:0.4rem 0.6rem; }
.ssp-actions-bar .ssp-search { width:180px; margin:0; }
.ssp-table-wrap { flex:1 1 auto; overflow:auto; min-height:0; padding:0 0.45rem; }
.ssp-table { width:100%; border-collapse:separate; border-spacing:0 0.25rem; font-size:0.74rem; }
.ssp-table thead th { position:sticky; top:0; background:#10131c; color:#94a3b8; font-weight:600; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.4px; text-align:left; padding:0.35rem 0.45rem; border-bottom:1px solid var(--ssp-border); z-index:1; }
.ssp-row td { padding:0.4rem 0.45rem; background:var(--ssp-panel-2); border-top:1px solid transparent; border-bottom:1px solid transparent; }
.ssp-row td:first-child { border-left:1px solid transparent; border-radius:0.4rem 0 0 0.4rem; }
.ssp-row td:last-child { border-right:1px solid transparent; border-radius:0 0.4rem 0.4rem 0; }
.ssp-row { cursor:pointer; }
.ssp-row:hover td { background:#1a2030; }
.ssp-row.sel td { background:rgba(124,58,237,0.18); border-color:rgba(167,139,250,0.45); }
.ssp-row.off { opacity:0.5; }
.ssp-row.drag-over td { outline:1px dashed #a78bfa; }
.ssp-row.dragging { opacity:0.55; }
.ssp-row .drag { color:#64748b; cursor:grab; width:24px; }
.ssp-row .idx { color:#94a3b8; width:28px; }
.ssp-row .act { display:flex; align-items:center; gap:0.4rem; min-width:160px; }
.ssp-row .act .ico { width:26px; height:26px; display:grid; place-items:center; border-radius:0.35rem; background:rgba(255,255,255,0.05); }
.ssp-row .act .ico.tint-orange { background:rgba(251,146,60,0.15); }
.ssp-row .act .ico.tint-purple { background:rgba(167,139,250,0.18); }
.ssp-row .act .ico.tint-blue { background:rgba(96,165,250,0.18); }
.ssp-row .act .ico.tint-gold { background:rgba(251,191,36,0.15); }
.ssp-row .act .title { font-weight:600; }
.ssp-row .tgt { color:#94a3b8; }
.ssp-row .ease { color:#a5b4fc; font-size:0.68rem; }
.ssp-row .ops { white-space:nowrap; }
.ssp-actions-panel > .ssp-btn.block { width:auto; margin:0.4rem 0.6rem 0.55rem; align-self:flex-start; }

.ssp-switch { position:relative; display:inline-block; width:34px; height:18px; }
.ssp-switch input { opacity:0; width:0; height:0; }
.ssp-switch span { position:absolute; inset:0; background:#334155; border-radius:999px; cursor:pointer; transition:0.15s; }
.ssp-switch span::before { content:""; position:absolute; width:14px; height:14px; left:2px; top:2px; background:#fff; border-radius:50%; transition:0.15s; }
.ssp-switch input:checked + span { background:#7c3aed; }
.ssp-switch input:checked + span::before { transform:translateX(16px); }

.ssp-ai, .ssp-insp, .ssp-trig-panel { display:flex; flex-direction:column; min-height:0; border-bottom:1px solid var(--ssp-border); }
.ssp-ai { flex:0 0 auto; max-height:32%; }
.ssp-insp { flex:1.2 1 0; }
.ssp-trig-panel { flex:0.9 1 0; border-bottom:none; }

/* Compact layout when Sequences lives under Presentation hub */
.ssp-hub .ssp-topbar { padding:0.35rem 0.55rem; gap:0.45rem; }
.ssp-hub .ssp-brand { min-width:140px; }
.ssp-hub .ssp-brand .title em:empty { display:none; }
.ssp-hub .ssp-subbar { padding:0.2rem 0.55rem; }
.ssp-hub .ssp-body { grid-template-columns:200px minmax(0,1fr) 280px; }
.ssp-hub .ssp-presets.is-collapsed { flex:0 0 auto; min-height:0; max-height:72px; }
.ssp-hub .ssp-presets.is-collapsed .ssp-presets-hint { padding:0.25rem 0.5rem 0.45rem; font-size:0.68rem; }
.ssp-hub .ssp-lib { flex:1 1 auto; border-bottom:1px solid var(--ssp-border); }
.ssp-hub .ssp-actions-panel.hub-hidden { display:none !important; }
.ssp-hub .ssp-preview-panel { flex:1.6 1 0; min-height:280px; }
.ssp-hub.ssp-mock .ssp-preview-panel { min-height:0; }
.ssp-hub.ssp-mock .ssp-stage { min-height:140px; }
.ssp-hub .ssp-flow-panel { flex:0 0 auto; max-height:160px; }
.ssp-hub .ssp-flow-scroll { padding:0.4rem 0.55rem 0.5rem; }
.ssp-hub .ssp-right { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.ssp-right-tabs {
  display:flex; gap:0.15rem; padding:0.35rem 0.4rem; flex-shrink:0;
  border-bottom:1px solid var(--ssp-border); background:rgba(0,0,0,0.18);
}
.ssp-right-tabs .ssp-tab { flex:1; text-align:center; }
.ssp-right-body { flex:1 1 auto; min-height:0; overflow:auto; display:flex; flex-direction:column; }
.ssp-right-body > .ssp-ai,
.ssp-right-body > .ssp-insp,
.ssp-right-body > .ssp-trig-panel,
.ssp-right-body > .ssp-panel-head { border-bottom:none; max-height:none; flex:1 1 auto; }
.ssp-hub .ssp-stage {
  min-height:260px;
  margin:0.4rem 0.5rem 0.2rem;
  background:radial-gradient(ellipse at 50% 40%, #1a2240, #0b0e1a 70%);
}
.seq-pv-scene {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center;
  opacity:0.9; filter:saturate(0.95) brightness(0.85);
}
.seq-pv-scene::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(5,8,16,0.72) 80%);
}
.seq-pv-reels-grid {
  position:absolute; left:50%; top:48%; transform:translate(-50%,-50%);
  display:flex; gap:6px; z-index:2;
}
.seq-pv-reel { display:flex; flex-direction:column; gap:5px; }
.seq-pv-reels-grid .seq-pv-cell {
  width:54px; height:54px; display:grid; place-items:center;
  background:rgba(8,12,24,0.55); border:1px solid rgba(255,255,255,0.08);
}
.seq-pv-reels-grid .seq-pv-cell.win {
  border-color:rgba(255,215,94,0.65); box-shadow:0 0 12px rgba(255,215,94,0.35);
}
.seq-pv-reels-grid .seq-pv-sym {
  width:44px; height:44px; background-size:contain; background-repeat:no-repeat;
  background-position:center; background-color:transparent;
}
.seq-pv-stage.idle .seq-pv-hud.on { opacity:0.92; }

/* ── Sequences mockup (Presentation hub) ── */
.ssp-root.ssp-mock {
  height:100%; min-height:0; border:none; border-radius:0.55rem;
  background:radial-gradient(1000px 480px at 50% -8%, rgba(88,40,160,0.2), transparent 55%), #0b0d14;
}
.ssp-mock-top {
  display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap;
  padding:0.45rem 0.75rem; border-bottom:1px solid var(--ssp-border);
  background:linear-gradient(180deg,#161a27,#10131c);
  flex-shrink:0;
}
.ssp-mock-meta { min-width:200px; flex:1; }
.ssp-mock-meta .name { font-size:0.95rem; font-weight:800; color:#fff; letter-spacing:0.2px; }
.ssp-mock-meta .ssp-seq-jump label { font-size:0.62rem; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em; }
.ssp-mock-meta .ssp-seq-jump .ssp-select { min-width:180px; max-width:280px; font-size:0.85rem; font-weight:700; color:#fff; }
.ssp-name-custom { margin-top:0.35rem; width:100%; }
.ssp-mock-meta .stats { display:flex; flex-wrap:wrap; gap:0.65rem; margin-top:0.2rem; font-size:0.68rem; color:#94a3b8; }
.ssp-mock-meta .stats b { color:#cbd5e1; font-weight:700; margin-right:0.2rem; }
.ssp-mock-actions { display:flex; gap:0.3rem; margin-left:auto; }
.ssp-mock-body {
  grid-template-columns:220px minmax(0,1fr) 300px !important;
  flex: 1 1 auto;
  min-height: 0;
}
.ssp-mock-left { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.ssp-mock-left .ssp-lib { flex:1.2 1 0; min-height:0; }
.ssp-mock-templates { flex:0.85 1 0; min-height:100px; border-top:1px solid var(--ssp-border); display:flex; flex-direction:column; overflow:hidden; }
.ssp-mock-aibuilder { flex:0 0 auto; border-top:1px solid var(--ssp-border); }
.ssp-tpl-list { display:flex; flex-direction:column; gap:0.35rem; }
.ssp-tpl-card {
  display:flex; align-items:center; gap:0.4rem; padding:0.4rem 0.45rem;
  border:1px solid var(--ssp-border); border-radius:0.45rem; background:rgba(255,255,255,0.02);
  cursor:pointer; transition:border-color .12s ease, background .12s ease;
}
.ssp-tpl-card:hover { border-color:rgba(167,139,250,0.45); background:rgba(167,139,250,0.06); }
.ssp-tpl-card .tpl-main { flex:1; min-width:0; }
.ssp-tpl-card .tpl-name { font-size:0.76rem; font-weight:700; }
.ssp-tpl-card .tpl-sub { font-size:0.62rem; color:#94a3b8; margin-top:0.1rem; }
.ssp-ai-textarea {
  width:100%; resize:vertical; min-height:52px; margin-bottom:0.4rem;
  background:#0f1320; color:#e2e8f0; border:1px solid var(--ssp-border);
  border-radius:0.45rem; padding:0.45rem 0.55rem; font-size:0.75rem; font-family:inherit;
}
.ssp-mock-center { display:flex; flex-direction:column; min-height:0; min-width:0; height:100%; }
.ssp-mock-center .ssp-preview-panel {
  flex:1 1 0; min-height:0; border-bottom:none;
}
.ssp-mock-center .ssp-stage {
  flex:1 1 auto; min-height:140px; max-height:none;
  margin:0.4rem 0.55rem 0.25rem;
}
.ssp-layer-bar {
  display:flex; flex-wrap:wrap; gap:0.3rem; padding:0.2rem 0.55rem 0.4rem;
  flex-shrink:0;
}
.ssp-layer-chip {
  border:1px solid color-mix(in srgb, var(--chip, #a78bfa) 40%, transparent);
  background:rgba(255,255,255,0.03); color:#94a3b8; font-size:0.65rem; font-weight:700;
  padding:0.22rem 0.5rem; border-radius:999px; cursor:pointer;
}
.ssp-layer-chip.on {
  color:var(--chip, #a78bfa); background:color-mix(in srgb, var(--chip, #a78bfa) 16%, transparent);
  border-color:color-mix(in srgb, var(--chip, #a78bfa) 55%, transparent);
}
.ssp-mock-tl {
  flex:0 1 36%; min-height:220px; max-height:none; display:flex; flex-direction:column;
  border-top:1px solid var(--ssp-border); background:rgba(0,0,0,0.22);
}
.ssp-mock-tl-head {
  display:flex; align-items:center; gap:0.35rem; padding:0.35rem 0.55rem;
  border-bottom:1px solid var(--ssp-border); flex-shrink:0;
}
.ssp-mock-tl-head .ssp-muted { margin-left:auto; }
.ssp-tl-ruler {
  position:relative; height:18px; margin:0 0.55rem 0 5.5rem; border-bottom:1px solid rgba(148,163,184,0.15);
}
.ssp-tl-ruler span {
  position:absolute; top:2px; transform:translateX(-50%); font-size:0.58rem; color:#64748b;
}
.ssp-tl-rows { position:relative; overflow:auto; flex:1 1 auto; min-height:0; padding:0.2rem 0.55rem 0.45rem 0; }
.ssp-tl-playhead {
  position:absolute; top:0; bottom:0; width:2px; background:#f472b6; z-index:5; pointer-events:none;
  box-shadow:0 0 8px rgba(244,114,182,0.55);
  will-change: left;
}
.ssp-tl-playhead.playing {
  background:#fb7185;
  box-shadow:0 0 10px rgba(251,113,133,0.75);
}
.ssp-tl-playhead::before {
  content:""; position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:7px solid #f472b6;
}
.ssp-tl-row { display:grid; grid-template-columns:5.2rem 1fr; gap:0.35rem; align-items:center; margin-bottom:0.28rem; }
.ssp-tl-row.dim { opacity:0.35; }
.ssp-tl-label {
  display:flex; align-items:center; gap:0.25rem;
  font-size:0.68rem; font-weight:700; color:color-mix(in srgb, var(--chip,#94a3b8) 85%, #fff);
  padding:0.2rem 0.2rem 0.2rem 0.25rem; border-left:3px solid var(--chip,#94a3b8);
}
.ssp-tl-labtxt { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ssp-tl-eye, .ssp-tl-mute {
  flex:0 0 auto; border:none; background:transparent; color:inherit;
  cursor:pointer; padding:0; line-height:1; font-size:0.72rem; opacity:0.85;
}
.ssp-tl-eye:hover, .ssp-tl-mute:hover { opacity:1; filter:brightness(1.2); }
.ssp-tl-eye.off, .ssp-tl-mute.off { opacity:0.4; color:#94a3b8; }
.ssp-tl-mute {
  position:relative; z-index:2; margin-right:0.15rem;
  width:14px; height:14px; display:inline-grid; place-items:center;
  font-size:0.55rem; color:#fff;
}
.ssp-tl-lane {
  position:relative; height:28px; border-radius:0.35rem;
  background:rgba(255,255,255,0.025); border:1px solid rgba(148,163,184,0.1);
}
.ssp-tl-empty { position:absolute; left:0.4rem; top:50%; transform:translateY(-50%); color:#475569; font-size:0.65rem; }
.ssp-tl-block {
  position:absolute; top:3px; bottom:3px; border:none; border-radius:0.3rem; cursor:grab;
  display:flex; align-items:center; gap:0; user-select:none; touch-action:none;
  background:color-mix(in srgb, var(--blk,#a78bfa) 55%, #111827); color:#fff;
  font-size:0.62rem; font-weight:700; padding:0 0.45rem; overflow:hidden; white-space:nowrap;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--blk,#a78bfa) 70%, transparent);
}
.ssp-tl-block:active { cursor:grabbing; }
.ssp-tl-block .ssp-tl-txt {
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; pointer-events:none;
}
.ssp-tl-handle {
  position:absolute; top:0; width:7px; height:100%; z-index:3;
  background:rgba(255,255,255,0.28); cursor:ew-resize;
}
.ssp-tl-handle.left { left:0; border-radius:0.3rem 0 0 0.3rem; }
.ssp-tl-handle.right { right:0; border-radius:0 0.3rem 0.3rem 0; }
.ssp-tl-block:hover { filter:brightness(1.08); }
.ssp-tl-block.sel { outline:2px solid #fff; outline-offset:0; z-index:2; }
.ssp-tl-block.off { opacity:0.4; }
.ssp-mock-right { display:flex; flex-direction:column; min-height:0; height:100%; overflow:hidden; }
.ssp-mock-right .ssp-insp { flex:1.2 1 0; min-height:0; overflow:hidden; display:flex; flex-direction:column; border-bottom:1px solid var(--ssp-border); }
.ssp-mock-assets { flex:0.7 1 0; min-height:0; overflow:auto; border-bottom:1px solid var(--ssp-border); }
.ssp-mock-ai { flex:0.85 1 0; min-height:0; overflow:auto; }
.ssp-asset-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:0.35rem; padding:0.45rem;
}
.ssp-asset-chip {
  display:flex; align-items:center; gap:0.35rem; padding:0.35rem;
  border:1px solid var(--ssp-border); border-radius:0.4rem; background:rgba(255,255,255,0.02);
  color:#e2e8f0; cursor:pointer; text-align:left; min-width:0;
}
.ssp-asset-chip:hover { border-color:rgba(167,139,250,0.45); }
.ssp-asset-chip .ico { flex:0 0 auto; }
.ssp-asset-chip .lbl { font-size:0.68rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ssp-ai-suggest-row { display:flex; flex-wrap:wrap; gap:0.3rem; padding:0.4rem 0.45rem 0.2rem; }
.ssp-ai-suggest-row .ssp-btn { font-size:0.65rem; padding:0.25rem 0.45rem; }
.ssp-ai-list.compact { max-height:140px; }
.ssp-linked.mock-linked { margin-bottom:0.55rem; }

.ssp-ai-list { overflow:auto; padding:0.4rem; display:flex; flex-direction:column; gap:0.3rem; max-height:180px; }
.ssp-ai-card { display:flex; align-items:center; gap:0.4rem; padding:0.4rem 0.45rem; border:1px solid var(--ssp-border); border-radius:0.45rem; background:var(--ssp-panel-2); }
.ssp-ai-card.dim { opacity:0.55; }
.ssp-ai-card .name { font-size:0.74rem; font-weight:700; }
.ssp-ai-card .desc { font-size:0.64rem; color:#94a3b8; margin-top:0.1rem; }
.ssp-ai-card .txt { flex:1; min-width:0; }
.ssp-ai-prompt { display:flex; gap:0.3rem; padding:0.35rem 0.45rem 0.5rem; }
.ssp-ai-prompt .ssp-search { margin:0; flex:1; }

.ssp-tabs { display:flex; gap:0.15rem; padding:0.35rem 0.4rem; border-bottom:1px solid var(--ssp-border); overflow-x:auto; }
.ssp-tab { border:none; background:transparent; color:#94a3b8; font-size:0.68rem; padding:0.3rem 0.45rem; border-radius:0.35rem; cursor:pointer; text-transform:capitalize; }
.ssp-tab.on { background:rgba(139,92,246,0.22); color:#fff; }
.ssp-insp-body { flex:1 1 auto; overflow:auto; padding:0.5rem; min-height:0; }
.ssp-field { display:flex; flex-direction:column; gap:0.2rem; margin-bottom:0.5rem; }
.ssp-field label { font-size:0.65rem; color:#94a3b8; text-transform:uppercase; letter-spacing:0.4px; }
.ssp-field-hint { font-size:0.6rem; color:#64748b; margin-top:0.05rem; }
.ssp-field select[data-insp-asset] { cursor:pointer; }
.ssp-field input, .ssp-field select, .ssp-trig select, .ssp-trig input[type="number"] {
  background:#0f1320; color:#e2e8f0; border:1px solid var(--ssp-border); border-radius:0.4rem; padding:0.35rem 0.45rem; font-size:0.78rem;
}
.ssp-field input[type="range"] { padding:0; accent-color:#8b5cf6; }
.ssp-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0.4rem; }
.ssp-asset-pick { display:flex; align-items:center; gap:0.4rem; }
.ssp-asset-pick .thumb { width:36px; height:36px; border-radius:0.4rem; display:grid; place-items:center; background:rgba(167,139,250,0.18); flex:0 0 auto; }
.ssp-asset-pick select { flex:1; }

.ssp-trig { padding:0.45rem; overflow:auto; }
.ssp-rule { border:1px solid var(--ssp-border); border-radius:0.5rem; padding:0.5rem; background:var(--ssp-panel-2); }
.ssp-rule .when-label, .ssp-rule .and-label, .ssp-rule .then-label {
  font-size:0.62rem; font-weight:800; letter-spacing:0.6px; color:#a78bfa; margin:0.25rem 0;
}
.ssp-rule .and-label { color:#fbbf24; }
.ssp-rule .then-label { color:#34d399; }
.ssp-rule-row { display:flex; flex-wrap:wrap; gap:0.3rem; align-items:center; margin-bottom:0.3rem; }
.ssp-rule-foot { display:flex; align-items:center; gap:0.55rem; margin-top:0.35rem; font-size:0.72rem; color:#94a3b8; }
.ssp-check { display:inline-flex; align-items:center; gap:0.25rem; cursor:pointer; }
.ssp-sym-pick { display:inline-flex; align-items:center; gap:0.35rem; padding:0.28rem 0.45rem; border:1px solid var(--ssp-border); border-radius:0.4rem; background:#0f1320; cursor:pointer; font-size:0.75rem; }
.ssp-sym-pick:hover { border-color:rgba(167,139,250,0.5); }
.ssp-sym-pick img { width:22px; height:22px; object-fit:contain; border-radius:0.25rem; background:#111827; }
.ssp-sym-menu { display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:0.3rem; margin-top:0.4rem; max-height:140px; overflow:auto; padding:0.35rem; border:1px solid var(--ssp-border); border-radius:0.4rem; background:#0f1320; }
.ssp-sym-menu[hidden] { display:none !important; }
.ssp-sym-menu button { display:flex; flex-direction:column; align-items:center; gap:0.15rem; padding:0.3rem; border:1px solid transparent; border-radius:0.35rem; background:transparent; color:#e2e8f0; cursor:pointer; font-size:0.62rem; }
.ssp-sym-menu button:hover { border-color:rgba(139,92,246,0.5); background:rgba(139,92,246,0.12); }
.ssp-sym-menu img { width:28px; height:28px; object-fit:contain; }

.ssp-preset-preview { width:100%; height:100%; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:1.2rem; background:var(--pg, linear-gradient(135deg,#4c1d95,#a855f7)); color:#fff; }
.ssp-preset-preview .title { font-size:1.2rem; font-weight:800; margin-bottom:0.5rem; }
.ssp-preset-preview ul { margin:0; padding-left:1.1rem; font-size:0.8rem; opacity:0.9; }
.ssp-preset-preview .hint { margin-top:0.7rem; font-size:0.7rem; opacity:0.75; }

@media (max-width:1280px) {
  .ssp-body { grid-template-columns:210px minmax(0,1fr) 260px; }
  .ssp-preset-grid { grid-template-columns:1fr; }
}
@media (max-width:1100px) {
  .ssp-body { grid-template-columns:1fr; overflow:auto; }
  .ssp-left, .ssp-right { max-height:320px; border:none; border-bottom:1px solid var(--ssp-border); }
  .ssp-root { height:auto; min-height:0; }
}

/* ── Action Source picker + modal ── */
.ssp-source-seg { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.3rem; }
.ssp-source-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.15rem;
  padding:0.45rem 0.25rem; border-radius:0.45rem; border:1px solid var(--ssp-border);
  background:rgba(255,255,255,0.03); color:#e2e8f0; font-size:0.68rem; font-weight:700; cursor:pointer; line-height:1.2;
}
.ssp-source-btn:hover { border-color:rgba(167,139,250,0.45); background:rgba(139,92,246,0.12); }
.ssp-source-btn.on { border-color:rgba(167,139,250,0.65); background:rgba(124,58,237,0.22); color:#fff; box-shadow:0 0 0 1px rgba(167,139,250,0.25); }
.ssp-linked {
  display:flex; align-items:center; gap:0.45rem; padding:0.45rem; margin:0.35rem 0 0.55rem;
  border:1px solid var(--ssp-border); border-radius:0.5rem; background:rgba(0,0,0,0.2);
}
.ssp-linked .thumb { width:36px; height:36px; border-radius:0.4rem; display:grid; place-items:center; background:rgba(167,139,250,0.18); flex:0 0 auto; }
.ssp-linked .meta { flex:1; min-width:0; }
.ssp-linked .name { font-size:0.78rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ssp-linked .sub { font-size:0.65rem; color:#94a3b8; }

.ssp-modal-backdrop {
  position:fixed; inset:0; z-index:2000; background:rgba(5,8,16,0.72); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:1.25rem;
}
.ssp-modal {
  width:min(920px, 96vw); max-height:min(820px, 90vh); display:flex; flex-direction:column;
  background:linear-gradient(180deg,#171b28,#10131c); border:1px solid rgba(167,139,250,0.35);
  border-radius:0.75rem; box-shadow:0 24px 80px rgba(0,0,0,0.55); overflow:hidden;
}
.ssp-modal-head {
  display:flex; align-items:center; gap:0.6rem; padding:0.7rem 0.9rem; border-bottom:1px solid var(--ssp-border);
  background:rgba(0,0,0,0.25);
}
.ssp-modal-head strong { font-size:0.95rem; }
.ssp-modal-head .ssp-muted { margin-right:auto; }
.ssp-modal-body { flex:1 1 auto; min-height:0; overflow:auto; padding:0.75rem 0.9rem 1rem; display:flex; flex-direction:column; gap:0.55rem; }
.ssp-picker-tools { display:flex; gap:0.4rem; align-items:center; flex-wrap:wrap; }
.ssp-picker-cats { display:flex; flex-wrap:wrap; gap:0.3rem; }
.ssp-chip-btn {
  border:1px solid var(--ssp-border); background:rgba(255,255,255,0.03); color:#cbd5e1;
  border-radius:999px; padding:0.22rem 0.55rem; font-size:0.68rem; cursor:pointer;
}
.ssp-chip-btn.on, .ssp-chip-btn:hover { border-color:rgba(167,139,250,0.55); background:rgba(139,92,246,0.18); color:#fff; }
.ssp-picker-split { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(220px,0.8fr); gap:0.7rem; min-height:320px; }
.ssp-picker-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:0.45rem; align-content:start; overflow:auto; max-height:460px; padding-right:0.15rem; }
.ssp-pick-card {
  text-align:left; border:1px solid var(--ssp-border); border-radius:0.5rem; background:var(--ssp-panel-2);
  color:#e2e8f0; cursor:pointer; padding:0; overflow:hidden; display:flex; flex-direction:column;
}
.ssp-pick-card:hover { border-color:rgba(167,139,250,0.45); transform:translateY(-1px); }
.ssp-pick-card.sel { border-color:#a78bfa; box-shadow:0 0 0 1px rgba(167,139,250,0.4); }
.ssp-pick-card .art {
  height:64px; background:var(--pg); display:flex; align-items:flex-end; justify-content:space-between;
  padding:0.35rem; font-size:1.25rem; position:relative;
}
.ssp-pick-card .art .fav {
  border:none; background:rgba(0,0,0,0.35); color:#64748b; border-radius:999px; width:22px; height:22px; cursor:pointer; font-size:0.7rem;
}
.ssp-pick-card .art .fav.on { color:#fbbf24; }
.ssp-pick-card .art .tag { font-size:0.58rem; background:rgba(0,0,0,0.45); padding:0.1rem 0.3rem; border-radius:0.25rem; }
.ssp-pick-card .name { font-size:0.74rem; font-weight:700; padding:0.35rem 0.4rem 0.1rem; }
.ssp-pick-card .sub { font-size:0.62rem; color:#94a3b8; padding:0 0.4rem 0.4rem; }
.ssp-picker-detail {
  border:1px solid var(--ssp-border); border-radius:0.55rem; background:rgba(0,0,0,0.22);
  padding:0.7rem; display:flex; flex-direction:column; gap:0.45rem; min-height:0;
}
.ssp-picker-detail .hero {
  display:flex; align-items:center; gap:0.5rem; padding:0.7rem; border-radius:0.45rem;
  background:var(--pg); font-size:1.3rem; color:#fff;
}
.ssp-picker-detail .hero strong { font-size:0.95rem; }
.ssp-picker-detail ul.props { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.25rem; font-size:0.75rem; color:#94a3b8; }
.ssp-picker-detail ul.props b { color:#e2e8f0; float:right; font-weight:700; }
.ssp-ai-gen-list { display:flex; flex-direction:column; gap:0.35rem; }
.ssp-ai-gen-item {
  display:flex; align-items:center; gap:0.55rem; width:100%; text-align:left; padding:0.55rem 0.65rem;
  border:1px solid var(--ssp-border); border-radius:0.5rem; background:rgba(255,255,255,0.03); color:#e2e8f0; cursor:pointer;
}
.ssp-ai-gen-item:hover { border-color:rgba(167,139,250,0.5); background:rgba(139,92,246,0.12); }
.ssp-ai-gen-item .ico { font-size:1.2rem; }
.ssp-ai-gen-item .txt { flex:1; display:flex; flex-direction:column; gap:0.1rem; }
.ssp-ai-gen-item strong { font-size:0.82rem; }

@media (max-width:900px) {
  .ssp-picker-split { grid-template-columns:1fr; }
  .ssp-source-seg { grid-template-columns:1fr; }
}

/* ── HUD Styles Studio ── */
.hud-root { height:100%; min-height:0; }
.hud-toolbar .hud-brand { font-size:0.9rem; font-weight:800; color:#86efac; margin-right:0.35rem; }
.hud-toolbar .spacer { flex:1; }
.hud-body { grid-template-columns:220px minmax(0,1fr) 300px; }
.hud-lib { display:flex; flex-direction:column; gap:0.25rem; }
.hud-lib-item {
  display:flex; flex-direction:column; align-items:flex-start; gap:0.1rem;
  width:100%; text-align:left; padding:0.45rem 0.5rem; border-radius:0.45rem;
  border:1px solid transparent; background:transparent; color:#e2e8f0; cursor:pointer;
}
.hud-lib-item:hover { background:rgba(255,255,255,0.04); }
.hud-lib-item.sel { background:rgba(134,239,172,0.12); border-color:rgba(134,239,172,0.4); }
.hud-lib-item .name { font-size:0.78rem; font-weight:700; text-transform:capitalize; }
.hud-lib-item .meta { font-size:0.62rem; color:#94a3b8; }
.hud-lib-item.builtin .meta { color:#86efac; }
.hud-center { display:flex; flex-direction:column; min-height:0; }
.hud-preview-wrap { flex:1; min-height:280px; padding:0.55rem; display:flex; flex-direction:column; min-height:0; }
.hud-pv-stage.seq-pv-stage {
  position:relative; width:100%; flex:1; min-height:340px; border-radius:0.55rem; overflow:hidden;
  border:1px solid rgba(148,163,184,0.16); cursor:crosshair;
}
.hud-pv-stage .seq-pv-scene { opacity:0.95; }
.hud-pv-stage .seq-pv-reels-grid { z-index:2; }
.hud-pv-stage .seq-pv-payline { z-index:3; }
.hud-pv-crosshair {
  position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; z-index:9;
  border:2px solid #86efac; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,0.5), 0 0 12px rgba(134,239,172,0.45);
  cursor:grab; pointer-events:auto;
}
.hud-pv-crosshair:active { cursor:grabbing; }
.hud-pv-crosshair::after {
  content:""; position:absolute; left:50%; top:50%; width:22px; height:1px; background:#86efac;
  transform:translate(-50%,-50%); box-shadow:0 0 0 1px rgba(0,0,0,0.35);
}
.hud-pv-crosshair::before {
  content:""; position:absolute; left:50%; top:50%; width:1px; height:22px; background:#86efac;
  transform:translate(-50%,-50%);
}
.hud-pv-hud.seq-pv-hud {
  /* position driven by inline style from HudStudio */
  opacity:1; z-index:7;
}
.hud-pv-hint {
  position:absolute; left:0.6rem; right:0.6rem; bottom:0.45rem; z-index:4;
  font-size:0.65rem; color:#cbd5e1; text-align:center; pointer-events:none;
  text-shadow:0 1px 4px rgba(0,0,0,0.8);
}
.hud-pv-stage .seq-pv-title { z-index:4; }
.hud-insp .hud-check { text-transform:none; letter-spacing:0; display:flex; align-items:center; gap:0.35rem; cursor:pointer; color:#cbd5e1; }
.hud-insp .ss-btn.block { width:100%; margin-top:0.5rem; }
.hud-title-mode { display:flex; gap:0.35rem; }
.hud-title-mode button {
  flex:1; height:32px; border-radius:0.4rem; cursor:pointer; font-size:0.75rem; font-weight:700;
  border:1px solid var(--border-input); background:var(--bg-input); color:var(--txt-secondary);
}
.hud-title-mode button.sel { border-color:var(--gold-border-hi, #fbbf24); color:var(--gold, #fbbf24); background:rgba(251,191,36,0.12); }
.hud-insp .hud-title-art { min-height:140px; margin-bottom:0.55rem; border-radius:0.5rem; overflow:hidden; }
.hud-insp .hud-title-art .symbol-generated-img { max-height:110px; object-fit:contain; background:transparent; }
.pres-hub-panel .hud-root { height:100%; border:none; }
.seq-pv-hud.hud-styled { padding:0.4rem 0.85rem; border-radius:0.45rem; border:1px solid transparent; }