/* ============================================================
   WIZARD ADS · GENERATE — the synthesis studio
   Three panes: Brief composer · Output stage · Context.
   Arctic liquid-glass system, single cyan accent + AI gradient.
   ============================================================ */

.gen{ flex:1 1 auto; min-width:0; display:flex; height:100vh; min-height:0; position:relative; isolation:isolate; overflow:hidden; }
.gen-amb{ position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 50% at 50% -6%, var(--acc-soft), transparent 64%),
    radial-gradient(44% 44% at 92% 108%, rgba(46,199,194,.10), transparent 66%); }

/* ============================================================ shared pane chrome */
.gen-pane{ display:flex; flex-direction:column; min-height:0; position:relative; z-index:1;
  background:var(--glass-rail); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); }
.gen-composer{ border-right:1px solid var(--line); box-shadow:22px 0 60px -44px rgba(28,116,142,.6); }
.gen-ctx{ border-left:1px solid var(--line); box-shadow:-22px 0 60px -44px rgba(28,116,142,.6); }

.gen-head{ padding:16px 17px 13px; border-bottom:1px solid var(--line-soft); flex:0 0 auto; }
.gen-eyebrow{ font-size:var(--fs-eyebrow); font-weight:var(--fw-black); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); display:flex; align-items:center; gap:7px; }
.gen-eyebrow .spark{ color:var(--ai-b); filter:drop-shadow(0 0 6px var(--ai-glow)); }
.gen-head h2{ margin:8px 0 0; font-size:var(--fs-xl); font-weight:var(--fw-black); letter-spacing:-.02em; color:var(--ink); }
.gen-head .cap{ margin-top:3px; font-size:var(--fs-label); font-weight:var(--fw-med); color:var(--ink-3); }
.gen-scroll{ flex:1 1 auto; overflow-y:auto; min-height:0; padding:14px 15px 18px; display:flex; flex-direction:column; gap:16px; }

.gen-sec{ display:flex; flex-direction:column; gap:9px; }
.gen-sec-lbl{ font-size:var(--fs-label); font-weight:var(--fw-black); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:7px; }
.gen-sec-lbl .ct{ margin-left:auto; font-size:var(--fs-micro); font-weight:var(--fw-black); color:var(--ink-3);
  background:var(--well-2); border-radius:20px; padding:2px 7px; }

/* ============================================================ ENGINE PICKER (multi-service) */
.gen-engines{ display:flex; flex-direction:column; gap:7px; }
.gen-eng{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:13px; cursor:pointer; text-align:left;
  background:var(--panel-2); border:1px solid var(--line); position:relative; overflow:hidden;
  transition:transform .2s var(--spring), box-shadow .2s var(--out), border-color .18s var(--out); }
.gen-eng::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ai-grad); opacity:0; transition:opacity .2s var(--out); }
.gen-eng:hover{ transform:translateY(-1px); border-color:var(--line-strong); box-shadow:var(--shadow-soft); }
.gen-eng.on{ border-color:var(--acc-line); background:linear-gradient(120deg,var(--acc-soft),rgba(46,199,194,.06));
  box-shadow:0 0 0 1px var(--acc-line), 0 14px 30px -18px var(--acc-glow); }
.gen-eng.on::before{ opacity:1; }
.gen-eng-ic{ width:36px; height:36px; flex:0 0 36px; border-radius:11px; display:grid; place-items:center; color:#fff;
  background:var(--ai-grad); box-shadow:0 6px 16px -7px var(--ai-glow), inset 0 1px 0 rgba(255,255,255,.3); }
.gen-eng-ic svg{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.gen-eng-m{ flex:1; min-width:0; }
.gen-eng-m .nm{ font-size:var(--fs-base); font-weight:var(--fw-black); letter-spacing:-.01em; color:var(--ink); display:flex; align-items:center; gap:7px; }
.gen-eng-m .bd{ display:block; margin-top:2px; font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-3); line-height:1.32;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gen-eng-cred{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.gen-eng-cred .cr{ font-size:var(--fs-base); font-weight:var(--fw-black); color:var(--acc-ink); font-family:var(--font-mono); }
.gen-eng-cred .cl{ font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-4); text-transform:uppercase; letter-spacing:.08em; }
.gen-modchip{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.04em; padding:1px 6px; border-radius:5px;
  background:var(--well-2); color:var(--ink-3); text-transform:uppercase; }

/* ============================================================ PROMPT */
.gen-spark-row{ display:flex; flex-wrap:wrap; gap:6px; }
.gen-spark{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:8px; cursor:pointer;
  background:var(--well); border:1px solid var(--line); color:var(--ink-2); font-size:var(--fs-sub); font-weight:var(--fw-bold);
  transition:.16s var(--out); }
.gen-spark:hover{ border-color:var(--acc-line); color:var(--acc-ink); background:var(--acc-soft); transform:translateY(-1px); }
.gen-spark svg{ color:var(--ai-b); }
.gen-promptbox{ position:relative; }
.gen-prompt{ width:100%; min-height:104px; resize:vertical; padding:12px 13px; border-radius:13px; box-sizing:border-box;
  background:var(--well); border:1px solid var(--line); color:var(--ink); outline:none;
  font-size:var(--fs-body); font-weight:var(--fw-reg); line-height:1.5; transition:.18s var(--out); }
.gen-prompt::placeholder{ color:var(--ink-4); }
.gen-prompt:focus{ border-color:var(--acc-line); box-shadow:0 0 0 3px var(--acc-soft); }
.gen-prompt-foot{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.gen-prompt-foot .ct{ font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-4); font-family:var(--font-mono); margin-left:auto; }
.gen-needasset{ display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:12px; cursor:pointer;
  background:var(--well); border:1px dashed var(--line-strong); color:var(--ink-2); transition:.16s var(--out); }
.gen-needasset:hover{ border-color:var(--acc-line); color:var(--acc-ink); }
.gen-needasset .ring{ width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:grid; place-items:center;
  background:var(--well-2); color:var(--ink-3); }
.gen-needasset.has .ring{ background:var(--acc-grad,var(--ai-grad)); color:#fff; }
.gen-needasset .t{ font-size:var(--fs-base); font-weight:var(--fw-bold); }
.gen-needasset .s{ font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-3); }

/* ============================================================ PROCEDURAL CONTROLS */
.gen-ctrl{ display:flex; flex-direction:column; gap:6px; }
.gen-ctrl-top{ display:flex; align-items:center; gap:8px; }
.gen-ctrl-top .l{ font-size:var(--fs-base); font-weight:var(--fw-bold); color:var(--ink-2); display:flex; align-items:center; gap:6px; }
.gen-ctrl-top .v{ margin-left:auto; font-size:var(--fs-sub); font-weight:var(--fw-black); color:var(--acc-ink); font-family:var(--font-mono); }
.gen-range{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; outline:none; cursor:pointer;
  background:linear-gradient(90deg,var(--acc) var(--pct,50%), var(--well-2) var(--pct,50%)); }
.gen-range::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#fff;
  border:none; box-shadow:0 2px 8px -2px rgba(28,116,142,.7), 0 0 0 1px var(--acc-line); cursor:grab; }
.gen-range::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#fff; border:none;
  box-shadow:0 2px 8px -2px rgba(28,116,142,.7), 0 0 0 1px var(--acc-line); }
.gen-seg{ display:flex; gap:4px; padding:3px; border-radius:10px; background:var(--well); border:1px solid var(--line); }
.gen-seg button{ flex:1; height:30px; border-radius:7px; font-size:var(--fs-base); font-weight:var(--fw-bold); color:var(--ink-3);
  transition:.16s var(--out); }
.gen-seg button:hover{ color:var(--ink); }
.gen-seg button.on{ background:var(--elev); color:var(--acc-ink); box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.8); }
.gen-select-wrap{ position:relative; }
.gen-select{ display:flex; align-items:center; justify-content:space-between; width:100%; height:36px; padding:0 12px; border-radius:10px;
  background:var(--well); border:1px solid var(--line); color:var(--ink); font-size:var(--fs-base); font-weight:var(--fw-bold);
  cursor:pointer; transition:.16s var(--out); }
.gen-select:hover{ border-color:var(--acc-line); }
.gen-select .chev{ color:var(--ink-3); }
.gen-dd{ position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:30; padding:5px; border-radius:12px;
  background:var(--pop-bg); border:1px solid var(--line-strong); box-shadow:var(--shadow-float);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); max-height:248px; overflow-y:auto; }
.gen-dd button{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:8px 10px; border-radius:8px;
  font-size:var(--fs-base); font-weight:var(--fw-med); color:var(--ink-2); text-align:left; transition:.13s var(--out); }
.gen-dd button:hover{ background:var(--hover); color:var(--ink); }
.gen-dd button.on{ color:var(--acc-ink); background:var(--acc-soft); }
.gen-toggle{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:12px; cursor:pointer;
  background:var(--well); border:1px solid var(--line); transition:.16s var(--out); }
.gen-toggle:hover{ border-color:var(--line-strong); }
.gen-toggle .tm{ flex:1; min-width:0; }
.gen-toggle .tn{ font-size:var(--fs-base); font-weight:var(--fw-bold); color:var(--ink); }
.gen-toggle .td{ font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-3); margin-top:1px; }
.gen-toggle .sw{ width:38px; height:22px; flex:0 0 38px; border-radius:20px; background:var(--well-2); border:1px solid var(--line); position:relative; transition:.2s var(--out); }
.gen-toggle .sw i{ position:absolute; top:1.5px; left:1.5px; width:17px; height:17px; border-radius:50%; background:#fff; box-shadow:0 2px 6px -1px rgba(28,116,142,.5); transition:.22s var(--spring); }
.gen-toggle.on .sw{ background:var(--acc); border-color:var(--acc); }
.gen-toggle.on .sw i{ transform:translateX(16px); }

.gen-ratios{ display:flex; gap:6px; }
.gen-ratio{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 4px; border-radius:11px; cursor:pointer;
  background:var(--well); border:1px solid var(--line); transition:.16s var(--out); }
.gen-ratio:hover{ border-color:var(--line-strong); }
.gen-ratio.on{ border-color:var(--acc-line); background:var(--acc-soft); }
.gen-ratio .box{ border-radius:3px; background:var(--well-2); border:1px solid var(--line-strong); }
.gen-ratio.on .box{ background:var(--acc); border-color:var(--acc); }
.gen-ratio .rl{ font-size:var(--fs-micro); font-weight:var(--fw-black); color:var(--ink-3); font-family:var(--font-mono); }
.gen-ratio.on .rl{ color:var(--acc-ink); }

/* ============================================================ COMPOSER FOOTER · the Generate button */
.gen-foot{ flex:0 0 auto; padding:13px 15px 15px; border-top:1px solid var(--line-soft); background:var(--glass-head);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); display:flex; flex-direction:column; gap:10px; }
.gen-foot-stats{ display:flex; gap:8px; }
.gen-fstat{ flex:1; display:flex; flex-direction:column; gap:1px; padding:7px 10px; border-radius:10px; background:var(--well); border:1px solid var(--line); }
.gen-fstat .v{ font-size:var(--fs-base); font-weight:var(--fw-black); color:var(--ink); font-family:var(--font-mono); }
.gen-fstat .l{ font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-4); text-transform:uppercase; letter-spacing:.07em; }
.gen-run{ position:relative; overflow:hidden; height:50px; border-radius:14px; width:100%; cursor:pointer;
  background:var(--ai-grad); color:#fff; font-size:var(--fs-lg); font-weight:var(--fw-black); letter-spacing:-.01em;
  display:flex; align-items:center; justify-content:center; gap:9px; transition:transform .18s var(--spring), box-shadow .2s var(--out);
  box-shadow:0 16px 34px -14px var(--ai-glow), inset 0 1px 0 rgba(255,255,255,.35); }
.gen-run:hover{ transform:translateY(-2px); box-shadow:0 22px 44px -14px var(--ai-glow), inset 0 1px 0 rgba(255,255,255,.4); }
.gen-run:active{ transform:translateY(0) scale(.99); }
.gen-run:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.gen-run .shine{ position:absolute; top:0; left:-60%; width:40%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent); animation:genShine 3.4s ease-in-out infinite; }
@keyframes genShine{ 0%,72%{ left:-60%; } 100%{ left:140%; } }
.gen-run.busy{ background:var(--well-2); color:var(--ink-2); box-shadow:none; }
.gen-run .spin{ animation:genSpin .9s linear infinite; }
@keyframes genSpin{ to{ transform:rotate(360deg); } }

/* ============================================================ OUTPUT STAGE (center) */
.gen-stage{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; min-height:0; position:relative; z-index:1; }
.gen-stage-bar{ display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--line-soft);
  flex:0 0 auto; background:var(--glass-head); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); }
.gen-stage-id{ min-width:0; }
.gen-stage-id .t{ font-size:var(--fs-masthead); font-weight:var(--fw-black); letter-spacing:-.02em; color:var(--ink); }
.gen-stage-id .s{ font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-3); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46ch; }
.gen-stage-status{ margin-left:auto; display:flex; align-items:center; gap:8px; height:32px; padding:0 13px; border-radius:20px;
  background:var(--well); border:1px solid var(--line); font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink-2); }
.gen-stage-status .d{ width:7px; height:7px; border-radius:50%; background:var(--ink-4); }
.gen-stage-status.busy{ color:var(--acc-ink); border-color:var(--acc-line); background:var(--acc-soft); }
.gen-stage-status.busy .d{ background:var(--acc); box-shadow:0 0 9px var(--acc); animation:genBlink 1.1s ease-in-out infinite; }
.gen-stage-status.done .d{ background:var(--good); box-shadow:0 0 8px var(--good); }
@keyframes genBlink{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

.gen-stage-body{ flex:1 1 auto; overflow-y:auto; min-height:0; padding:20px 18px 26px; }
.gen-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); align-content:start; align-items:start; }
html[data-tier="wide"] .gen-grid{ grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }
html[data-tier="ultra"] .gen-grid{ grid-template-columns:repeat(auto-fill, minmax(236px, 1fr)); gap:20px; }

/* group label (recent runs) */
.gen-runblock{ margin-bottom:24px; }
.gen-runblock:last-child{ margin-bottom:0; }
.gen-runhdr{ display:flex; align-items:center; gap:9px; margin:2px 0 14px; }
.gen-runhdr .rl{ font-size:var(--fs-label); font-weight:var(--fw-black); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.gen-runhdr .line{ flex:1; height:1px; background:var(--line); }
.gen-runhdr .meta{ font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink-4); font-family:var(--font-mono); }

/* ---------- VARIANT CARD ---------- */
.gen-card{ position:relative; border-radius:16px; overflow:hidden; background:var(--elev); border:1px solid var(--line);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.6); transition:transform .22s var(--spring), box-shadow .22s var(--out), border-color .18s var(--out); }
.gen-card:hover{ transform:translateY(-3px); border-color:var(--acc-line);
  box-shadow:0 30px 60px -24px rgba(28,116,142,.45), 0 0 40px -14px var(--acc-glow); }
.gen-thumb{ position:relative; width:100%; aspect-ratio:var(--ar, 9/16); overflow:hidden;
  background:
    radial-gradient(135% 90% at 28% 16%, hsl(var(--ch) 72% 62% / .42), transparent 56%),
    radial-gradient(120% 70% at 82% 96%, hsl(calc(var(--ch) + 40) 70% 56% / .3), transparent 60%),
    repeating-linear-gradient(135deg,var(--media-a) 0 11px,var(--media-b) 11px 22px); }
.gen-thumb.audio{ aspect-ratio:9/16; background:linear-gradient(160deg,#0d2a36,#071a23); }
.gen-thumb::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,99,123,.16) 0%, transparent 30%, transparent 54%, rgba(13,99,123,.34) 100%); }
.gen-thumb .scan{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(17,182,207,.2),transparent 40%); opacity:.5; }

/* generating shimmer */
.gen-card.busy .gen-thumb{ filter:saturate(.6) brightness(.96); }
.gen-shimmer{ position:absolute; inset:0; overflow:hidden; }
.gen-shimmer::before{ content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(100deg,transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%); animation:genSweep 1.5s ease-in-out infinite; }
@keyframes genSweep{ to{ transform:translateX(100%); } }
.gen-prog-wrap{ position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; padding:0 0 16px; }
.gen-prog-pct{ font-size:var(--fs-stat-2); font-weight:var(--fw-black); color:#fff; font-family:var(--font-mono);
  text-shadow:0 2px 14px rgba(0,0,0,.5); }
.gen-prog-lbl{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.gen-prog-track{ width:74%; height:4px; border-radius:4px; background:rgba(255,255,255,.25); overflow:hidden; }
.gen-prog-fill{ height:100%; border-radius:4px; background:var(--ai-grad); box-shadow:0 0 10px var(--ai-glow); transition:width .25s linear; }

/* ready overlay chips */
.gen-badge{ position:absolute; z-index:4; display:inline-flex; align-items:center; gap:4px;
  font-size:var(--fs-micro); font-weight:var(--fw-black); padding:3px 7px; border-radius:7px; backdrop-filter:blur(8px);
  background:color-mix(in srgb, var(--acc-2) 46%, #08252f); border:1px solid color-mix(in srgb, var(--acc) 42%, transparent); color:#fff; }
.gen-badge.eng{ top:9px; left:9px; }
.gen-badge.score{ top:9px; right:9px; }
.gen-badge.dur{ bottom:9px; right:9px; font-family:var(--font-mono); }
.gen-badge.ar{ bottom:9px; left:9px; font-family:var(--font-mono); letter-spacing:.02em; }
.gen-badge svg{ filter:drop-shadow(0 0 4px rgba(255,255,255,.4)); }
.gen-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; color:#fff; opacity:0; transition:.2s var(--out);
  background:color-mix(in srgb, var(--acc-2) 60%, #06212b); border:1px solid color-mix(in srgb, var(--acc) 50%, rgba(255,255,255,.45));
  box-shadow:0 10px 24px -8px rgba(8,30,40,.6); }
.gen-card:hover .gen-play{ opacity:1; }

/* quick-actions slide up */
.gen-qa{ position:absolute; left:0; right:0; bottom:0; z-index:5; display:flex; gap:6px; padding:30px 9px 9px; transform:translateY(101%); transition:transform .24s var(--out);
  background:linear-gradient(180deg,transparent, color-mix(in srgb, var(--acc-2) 58%, #06202a) 44%); }
.gen-card:hover .gen-qa{ transform:translateY(0); }
.gen-qa button{ flex:1; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; gap:5px;
  font-size:var(--fs-sub); font-weight:var(--fw-bold); color:#fff; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); transition:.14s var(--out); }
.gen-qa button:hover{ background:rgba(255,255,255,.32); }
.gen-qa button.primary{ background:#fff; color:var(--acc-2); border-color:#fff; }

.gen-card-meta{ padding:9px 11px 11px; }
.gen-card-meta .nm{ font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--font-mono); }
.gen-card-meta .row{ display:flex; align-items:center; gap:6px; margin-top:5px; }
.gen-tag{ font-size:var(--fs-micro); font-weight:var(--fw-black); padding:2px 6px; border-radius:5px; background:var(--well-2); color:var(--ink-3); }
.gen-card-meta .res{ margin-left:auto; font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-4); font-family:var(--font-mono); }

/* ============================================================ EMPTY STATE */
.gen-empty{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 24px; gap:6px; }
.gen-empty .orb{ width:96px; height:96px; border-radius:50%; display:grid; place-items:center; margin-bottom:10px; color:#fff;
  background:var(--ai-grad); box-shadow:0 24px 60px -18px var(--ai-glow), inset 0 2px 0 rgba(255,255,255,.4); position:relative; }
.gen-empty .orb::after{ content:''; position:absolute; inset:-10px; border-radius:50%; border:1px solid var(--acc-line); opacity:.5; animation:genPulse 2.6s ease-in-out infinite; }
@keyframes genPulse{ 0%,100%{ transform:scale(1); opacity:.5; } 50%{ transform:scale(1.08); opacity:.15; } }
.gen-empty h3{ font-size:var(--fs-section); font-weight:var(--fw-black); letter-spacing:-.02em; color:var(--ink); margin:4px 0 0; }
.gen-empty p{ font-size:var(--fs-body); font-weight:var(--fw-med); color:var(--ink-3); max-width:42ch; line-height:1.5; }
.gen-empty .hint{ margin-top:12px; display:flex; align-items:center; gap:8px; font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink-4); }
.gen-empty .hint kbd{ font-family:var(--font-mono); font-size:var(--fs-micro); padding:2px 7px; border-radius:6px; background:var(--well-2); border:1px solid var(--line); color:var(--ink-3); }

/* ============================================================ CONTEXT PANE (right) */
.gen-ctxsec{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel-2); }
.gen-ctxsec-head{ display:flex; align-items:center; gap:10px; width:100%; padding:11px 12px; text-align:left; cursor:pointer; transition:.14s var(--out); }
.gen-ctxsec-head:hover{ background:var(--hover); }
.gen-ctxsec-ic{ width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:grid; place-items:center; color:var(--ink-2); background:var(--well-2); transition:.16s var(--out); }
.gen-ctxsec.on .gen-ctxsec-ic{ background:var(--ai-grad); color:#fff; box-shadow:0 5px 14px -6px var(--ai-glow); }
.gen-ctxsec-m{ flex:1; min-width:0; }
.gen-ctxsec-m .nm{ display:block; font-size:var(--fs-base); font-weight:var(--fw-black); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gen-ctxsec-m .st{ display:block; font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gen-ctxsec-sw{ width:38px; height:22px; flex:0 0 38px; border-radius:20px; background:var(--well-2); border:1px solid var(--line); position:relative; transition:.2s var(--out); }
.gen-ctxsec-sw i{ position:absolute; top:1.5px; left:1.5px; width:17px; height:17px; border-radius:50%; background:#fff; box-shadow:0 2px 6px -1px rgba(28,116,142,.5); transition:.22s var(--spring); }
.gen-ctxsec.on .gen-ctxsec-sw{ background:var(--acc); border-color:var(--acc); }
.gen-ctxsec.on .gen-ctxsec-sw i{ transform:translateX(16px); }
.gen-ctxsec-chev{ color:var(--ink-3); transition:transform .24s var(--spring); }
.gen-ctxsec.expanded .gen-ctxsec-chev{ transform:rotate(180deg); }
.gen-ctxsec-body{ padding:0 12px; max-height:0; overflow:hidden; transition:max-height .28s var(--out), padding .28s var(--out); }
.gen-ctxsec.expanded .gen-ctxsec-body{ max-height:460px; padding:2px 12px 13px; overflow-y:auto; }

.gen-swatches{ display:flex; gap:5px; margin-top:8px; }
.gen-swatches i{ width:24px; height:24px; border-radius:7px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.gen-vocab{ display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.gen-vocab span{ font-size:var(--fs-micro); font-weight:var(--fw-bold); padding:2px 7px; border-radius:6px; background:var(--acc-soft); color:var(--acc-ink); }
.gen-tone{ margin-top:9px; font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-2); line-height:1.5; }

/* pick rows (trend / beat / vault) */
.gen-pick{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 9px; border-radius:11px; cursor:pointer; text-align:left;
  background:var(--well); border:1px solid var(--line); margin-top:7px; transition:.15s var(--out); }
.gen-pick:hover{ border-color:var(--line-strong); transform:translateY(-1px); }
.gen-pick.on{ border-color:var(--acc-line); background:var(--acc-soft); }
.gen-pick-th{ width:34px; height:46px; flex:0 0 34px; border-radius:7px; overflow:hidden;
  background:radial-gradient(120% 80% at 30% 16%, hsl(var(--ch,200) 64% 60% / .42), transparent 60%), repeating-linear-gradient(135deg,var(--media-a) 0 6px,var(--media-b) 6px 12px); }
.gen-pick-ic{ width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:grid; place-items:center; color:#fff; background:var(--ai-grad); }
.gen-pick-m{ flex:1; min-width:0; }
.gen-pick-m .nm{ display:block; font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gen-pick-m .sb{ display:block; font-size:var(--fs-micro); font-weight:var(--fw-med); color:var(--ink-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gen-pick-fit{ flex:0 0 auto; font-size:var(--fs-micro); font-weight:var(--fw-black); padding:2px 6px; border-radius:6px; background:var(--well-2); color:var(--good); font-family:var(--font-mono); }
.gen-pick .ck{ flex:0 0 auto; color:var(--acc-ink); opacity:0; transition:.14s var(--out); }
.gen-pick.on .ck{ opacity:1; }
.gen-na{ font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-4); padding:10px 2px 4px; line-height:1.5; }

/* attached-context chips in the composer footer */
.gen-attached{ display:flex; flex-wrap:wrap; gap:6px; }
.gen-achip{ display:inline-flex; align-items:center; gap:5px; height:25px; padding:0 8px; border-radius:7px;
  background:var(--acc-soft); border:1px solid var(--acc-line); color:var(--acc-ink); font-size:var(--fs-micro); font-weight:var(--fw-black); }
.gen-achip svg{ color:var(--acc-2); }

/* ============================================================ Studio empty-canvas CTA */
.frame-gen{ margin-top:15px; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 17px; border-radius:11px; cursor:pointer;
  background:var(--ai-grad); color:#fff; font-size:var(--fs-base); font-weight:var(--fw-black); letter-spacing:-.01em;
  box-shadow:0 12px 28px -12px var(--ai-glow), inset 0 1px 0 rgba(255,255,255,.35); transition:transform .18s var(--spring), box-shadow .2s var(--out); position:relative; overflow:hidden; }
.frame-gen:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -12px var(--ai-glow), inset 0 1px 0 rgba(255,255,255,.4); }
.frame-gen .shine{ position:absolute; top:0; left:-60%; width:40%; height:100%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); animation:genShine 3.2s ease-in-out infinite; }
.frame-or{ margin-top:11px; font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-4); }