/* ============================================================
   START — autopilot wizard styles
   Cinematic glass · the calm, friendly, big-target front door.
   Scoped under .st so nothing leaks into the rest of the app.
   ============================================================ */

.st{ position:relative; flex:1 1 auto; min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; }

/* soft ambient glow that re-tints to the active intent's hue */
.st-amb{ position:absolute; inset:0; z-index:0; pointer-events:none; transition:background .6s var(--out);
  background:
    radial-gradient(620px 440px at 50% -8%, hsl(var(--st-h,198) 80% 60% / .10), transparent 60%),
    radial-gradient(520px 420px at 100% 110%, hsl(var(--st-h,198) 80% 60% / .07), transparent 60%); }
.st > *{ position:relative; z-index:1; }

/* ---------------- top: step rail + escape hatch ---------------- */
.st-top{ display:flex; align-items:center; gap:14px; height:60px; flex:0 0 60px; padding:0 22px; border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent); }
.st-back{ display:flex; align-items:center; gap:7px; height:34px; padding:0 12px 0 9px; border-radius:10px; color:var(--ink-2);
  font-size:var(--fs-base); font-weight:var(--fw-bold); transition:.16s var(--out); }
.st-back:hover{ background:var(--hover); color:var(--ink); transform:translateX(-2px); }
.st-back[disabled]{ opacity:0; pointer-events:none; }

.st-steps{ display:flex; align-items:center; gap:7px; margin:0 auto; }
.st-step{ display:flex; align-items:center; gap:8px; }
.st-step .dot{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:0 0 26px;
  background:var(--panel-2); border:1px solid var(--line); color:var(--ink-3); font-size:var(--fs-label); font-weight:var(--fw-black);
  transition:.28s var(--spring); }
.st-step .nm{ font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink-3); white-space:nowrap; transition:.2s var(--out); }
.st-step.done .dot{ background:var(--acc-soft); border-color:var(--acc-line); color:var(--acc-2); }
.st-step.on .dot{ background:var(--ai-grad); border-color:transparent; color:#fff; box-shadow:0 4px 16px -4px var(--acc-glow); transform:scale(1.08); }
.st-step.on .nm{ color:var(--ink); }
.st-step .bar{ width:26px; height:2px; border-radius:2px; background:var(--line); }
.st-step.done .bar{ background:var(--acc-line); }

.st-adv{ display:flex; align-items:center; gap:7px; height:34px; padding:0 13px; border-radius:10px; color:var(--ink-3);
  font-size:var(--fs-sub); font-weight:var(--fw-bold); border:1px solid var(--line); transition:.18s var(--out); }
.st-adv:hover{ color:var(--ink); border-color:var(--line-strong); background:var(--hover); }

/* ---------------- the centered stage ---------------- */
.st-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; }
.st-stage{ flex:1 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  padding:clamp(26px,4vh,56px) 24px; width:100%; }
.st-head{ text-align:center; max-width:680px; display:flex; flex-direction:column; align-items:center; gap:11px; animation:stRise .5s var(--out) both; }
.st-eyebrow{ font-size:var(--fs-eyebrow); font-weight:var(--fw-black); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--ink-3);
  display:inline-flex; align-items:center; gap:7px; }
.st-eyebrow .spark{ color:var(--ai-b); filter:drop-shadow(0 0 6px var(--ai-b)); }
.st-title{ font-size:clamp(26px,3.4vw,38px); font-weight:var(--fw-black); letter-spacing:-.03em; line-height:1.05; margin:0;
  background:var(--grad-head); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 38px var(--grad-head-glow); }
.st-sub{ font-size:var(--fs-lg); font-weight:var(--fw-reg); color:var(--ink-2); line-height:1.5; max-width:560px; text-wrap:pretty; }

@keyframes stRise{ from{ transform:translateY(14px);} to{ transform:none;} }
@keyframes stPop{ from{ transform:scale(.95);} to{ transform:none;} }

/* ---------------- STEP 1 — intent grid ---------------- */
.st-intents{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; width:100%; max-width:920px; }
@media (max-width:1180px){ .st-intents{ grid-template-columns:repeat(3,1fr); max-width:720px; } }
@media (max-width:760px){ .st-intents{ grid-template-columns:repeat(2,1fr); max-width:460px; } }
.st-intent{ --h:198; display:flex; flex-direction:column; align-items:flex-start; gap:13px; text-align:left;
  padding:20px 18px; border-radius:var(--r-lg); background:var(--glass-3); border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04); cursor:pointer; position:relative; overflow:hidden;
  transition:transform .26s var(--spring), box-shadow .26s var(--out), border-color .2s var(--out);
  animation:stRise .5s var(--out) both; }
.st-intent::after{ content:''; position:absolute; right:-40px; top:-40px; width:130px; height:130px; border-radius:50%;
  background:radial-gradient(circle, hsl(var(--h) 80% 60% / .18), transparent 70%); opacity:.7; transition:.3s var(--out); }
.st-intent:hover{ transform:translateY(-5px); border-color:hsl(var(--h) 70% 60% / .5);
  box-shadow:var(--shadow-soft), 0 0 30px -10px hsl(var(--h) 80% 60% / .6); }
.st-intent:hover::after{ opacity:1; transform:scale(1.15); }
.st-intent:active{ transform:translateY(-1px) scale(.99); }
.st-int-ic{ width:52px; height:52px; border-radius:15px; display:grid; place-items:center; color:#fff; flex:0 0 52px;
  background:linear-gradient(150deg, hsl(var(--h) 72% 56%), hsl(var(--h) 64% 42%));
  box-shadow:0 10px 26px -8px hsl(var(--h) 80% 50% / .6), inset 0 1px 0 rgba(255,255,255,.3); position:relative; z-index:1; }
.st-int-m{ position:relative; z-index:1; display:flex; flex-direction:column; gap:4px; }
.st-int-m .nm{ font-size:var(--fs-lg); font-weight:var(--fw-black); letter-spacing:-.01em; }
.st-int-m .sb{ font-size:var(--fs-sub); font-weight:var(--fw-reg); color:var(--ink-3); line-height:1.4; }
.st-int-go{ position:absolute; bottom:16px; right:16px; width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--hover); color:var(--ink-2); opacity:0; transform:translateX(-6px); transition:.22s var(--spring); z-index:1; }
.st-intent:hover .st-int-go{ opacity:1; transform:none; background:hsl(var(--h) 70% 55% / .2); color:#fff; }

/* ---------------- STEP 2 — brief ---------------- */
.st-brief{ width:100%; max-width:640px; display:flex; flex-direction:column; gap:18px; animation:stRise .45s var(--out) both; }
.st-fieldlbl{ font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--ink-2); text-transform:uppercase; letter-spacing:.06em;
  display:flex; align-items:center; gap:7px; }
.st-promptbox{ background:var(--glass-3); border:1.5px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; transition:.2s var(--out);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.st-promptbox:focus-within{ border-color:var(--acc-line); box-shadow:0 0 0 4px var(--acc-soft), 0 0 26px -8px var(--acc-glow); }
.st-prompt{ width:100%; background:none; border:none; outline:none; resize:none; color:var(--ink); font-size:var(--fs-xl); font-weight:var(--fw-med);
  line-height:1.45; min-height:64px; }
.st-prompt::placeholder{ color:var(--ink-4); font-weight:var(--fw-reg); }

.st-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.st-chip{ display:flex; align-items:center; gap:7px; padding:9px 13px; border-radius:11px; background:var(--panel-2); border:1px solid var(--line);
  font-size:var(--fs-base); font-weight:var(--fw-med); color:var(--ink-2); cursor:pointer; transition:.18s var(--out); text-align:left; }
.st-chip:hover{ border-color:var(--acc-line); color:var(--ink); background:var(--acc-soft); transform:translateY(-2px); }
.st-chip .ic{ color:var(--acc-2); flex:0 0 auto; }

.st-vibes{ display:grid; grid-template-columns:repeat(4,1fr); gap:11px; }
@media (max-width:620px){ .st-vibes{ grid-template-columns:repeat(2,1fr); } }
.st-vibe{ --h:200; display:flex; flex-direction:column; gap:0; border-radius:var(--r-md); overflow:hidden; cursor:pointer;
  border:1.5px solid var(--line); background:var(--panel-2); transition:.2s var(--spring); position:relative; }
.st-vibe:hover{ transform:translateY(-3px); border-color:var(--line-strong); }
.st-vibe.on{ border-color:hsl(var(--h) 75% 60% / .7); box-shadow:0 8px 26px -10px hsl(var(--h) 80% 55% / .6), inset 0 0 0 1px hsl(var(--h) 70% 60% / .4); }
.st-vibe .swatch{ height:54px; background:
  radial-gradient(120% 100% at 30% 0%, hsl(var(--h) 70% 60% / .8), transparent 70%),
  repeating-linear-gradient(135deg, hsl(var(--h) 45% 22%) 0 10px, hsl(var(--h) 42% 17%) 10px 20px); position:relative; }
.st-vibe.on .swatch::after{ content:''; position:absolute; top:7px; right:7px; width:18px; height:18px; border-radius:50%; background:#fff;
  display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.4); }
.st-vibe.on .swatch .ck{ position:absolute; top:7px; right:7px; width:18px; height:18px; display:grid; place-items:center; color:hsl(var(--h) 70% 35%); z-index:2; }
.st-vibe .vl{ padding:8px 10px; font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink-2); }
.st-vibe.on .vl{ color:var(--ink); }

.st-actions{ display:flex; align-items:center; gap:12px; margin-top:4px; }
.st-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; height:54px; padding:0 26px; border-radius:15px;
  font-size:var(--fs-lg); font-weight:var(--fw-black); letter-spacing:.01em; transition:transform .2s var(--spring), box-shadow .26s var(--out); position:relative; overflow:hidden; }
.st-btn.primary{ background:var(--ai-grad); color:#fff; flex:1;
  box-shadow:0 14px 34px -8px var(--ai-glow), 0 0 26px -6px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.25); }
.st-btn.primary:hover{ transform:translateY(-2px); box-shadow:0 20px 46px -8px var(--ai-glow), 0 0 44px -2px var(--ai-glow), inset 0 1px 0 rgba(255,255,255,.3); }
.st-btn.primary:active{ transform:translateY(0) scale(.99); }
.st-btn.primary[disabled]{ opacity:.5; pointer-events:none; box-shadow:none; }
.st-btn.primary .shine{ position:absolute; inset:0; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%); transform:translateX(-120%); }
.st-btn.primary:hover .shine{ animation:shine 1s ease; }
.st-btn.ghost{ background:var(--glass-3); border:1px solid var(--line-strong); color:var(--ink-2); }
.st-btn.ghost:hover{ color:var(--ink); border-color:var(--acc-line); background:var(--hover); transform:translateY(-2px); }

/* ---------------- COOKING — the magic moment ---------------- */
.st-cook{ display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center; animation:stPop .4s var(--out) both; }
.st-cook-ring{ width:120px; height:120px; position:relative; display:grid; place-items:center; }
.st-cook-ring .halo{ position:absolute; inset:0; border-radius:50%; border:3px solid transparent; border-top-color:var(--acc); border-right-color:var(--acc-2);
  animation:spin 1s linear infinite; box-shadow:0 0 30px -4px var(--acc-glow); }
.st-cook-ring .halo.slow{ inset:12px; border-top-color:var(--vio); border-right-color:transparent; animation:spin 1.6s linear infinite reverse; opacity:.6; }
.st-cook-ring .core{ width:64px; height:64px; border-radius:20px; display:grid; place-items:center; background:var(--ai-grad); color:#fff;
  box-shadow:0 12px 32px -6px var(--ai-glow), inset 0 1px 0 rgba(255,255,255,.35); animation:stBreathe 2.2s var(--out) infinite; }
@keyframes stBreathe{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.07);} }
.st-cook-status{ font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--ink); min-height:28px; }
.st-cook-status .k{ animation:stRise .35s var(--out); display:inline-block; }
.st-cook-bar{ width:300px; max-width:70vw; height:7px; border-radius:7px; background:var(--line-strong); overflow:hidden; }
.st-cook-bar i{ display:block; height:100%; border-radius:7px; background:linear-gradient(90deg,var(--acc),var(--acc-2)); box-shadow:0 0 14px var(--acc-glow); transition:width .2s linear; }
.st-cook-foot{ font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-3); }

/* ---------------- REVEAL — results + "что я сделал" ---------------- */
.st-reveal{ width:100%; max-width:1060px; display:grid; grid-template-columns:1fr 340px; gap:22px; align-items:start; animation:stRise .45s var(--out) both; }
@media (max-width:920px){ .st-reveal{ grid-template-columns:1fr; } }

.st-results{ display:flex; flex-direction:column; gap:14px; }
.st-results-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.st-results-grid.k-text{ grid-template-columns:1fr; }
.st-results-grid.k-music{ grid-template-columns:1fr; }
@media (max-width:620px){ .st-results-grid{ grid-template-columns:repeat(2,1fr); } }

.st-result{ --h:200; border-radius:var(--r-md); background:var(--glass-3); border:1.5px solid var(--line); overflow:hidden; cursor:pointer;
  position:relative; transition:transform .24s var(--spring), box-shadow .24s var(--out), border-color .2s var(--out);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04); animation:stPop .45s var(--out) both; }
.st-result:hover{ transform:translateY(-4px); border-color:var(--line-strong); box-shadow:var(--shadow-soft); }
.st-result.on{ border-color:var(--acc-line); box-shadow:0 0 0 1px var(--acc-line), 0 14px 34px -12px var(--acc-glow), 0 0 30px -8px var(--acc-glow); }
.st-result .pickdot{ position:absolute; top:9px; left:9px; width:24px; height:24px; border-radius:50%; z-index:4;
  background:rgba(8,10,16,.6); backdrop-filter:blur(6px); border:1.5px solid rgba(255,255,255,.3); display:grid; place-items:center; color:#fff; opacity:0; transition:.18s var(--out); }
.st-result:hover .pickdot{ opacity:1; }
.st-result.on .pickdot{ opacity:1; background:var(--acc); border-color:#fff; box-shadow:0 0 16px var(--acc-glow); }
.st-best-badge{ position:absolute; top:9px; right:9px; z-index:4; display:flex; align-items:center; gap:4px; padding:4px 8px; border-radius:7px;
  background:var(--ai-grad); color:#fff; font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.04em; text-transform:uppercase;
  box-shadow:0 4px 14px -3px var(--ai-glow); }

/* preview surfaces */
.st-prev{ position:relative; overflow:hidden; }.st-prev.video{ aspect-ratio:var(--ar, 9/16); }
.st-prev.image{ aspect-ratio:4/5; }
.st-prev.logo{ aspect-ratio:1/1; }
/* brief: aspect-ratio chooser (video) */
.st-formats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.st-format{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 10px; border-radius:15px; cursor:pointer;
  background:var(--st-card, rgba(255,255,255,.03)); border:1px solid var(--line); transition:.16s var(--out); }
.st-format:hover{ border-color:var(--line-strong); }
.st-format.on{ border-color:var(--acc-line); background:var(--acc-soft); box-shadow:0 0 0 1px var(--acc-line) inset; }
.st-format .fb{ width:30px; border-radius:5px; background:var(--well-2, rgba(255,255,255,.06)); border:1.5px solid var(--line-strong); flex:0 0 auto; }
.st-format.on .fb{ background:var(--acc); border-color:var(--acc); }
.st-format .fl{ font-size:var(--fs-base); font-weight:var(--fw-black); font-family:var(--font-mono); color:var(--ink); }
.st-format .fs{ font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--ink-3); }
.st-format.on .fs{ color:var(--acc-ink); }
.st-prev .bg{ position:absolute; inset:0; background:
  radial-gradient(80% 60% at 50% 30%, hsl(var(--h) 70% 55% / .5), transparent 75%),
  repeating-linear-gradient(135deg, hsl(var(--h) 42% 20%) 0 13px, hsl(var(--h) 40% 15%) 13px 26px); }
.st-prev .bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 30%,rgba(0,0,0,.32)); }
.st-prev .play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.2); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.35); display:grid; place-items:center; color:#fff;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.6); z-index:2; }
.st-prev .cap-bars{ position:absolute; left:11%; right:22%; bottom:13%; z-index:2; display:flex; flex-direction:column; gap:5px; }
.st-prev .cap-bars i{ height:7px; border-radius:5px; background:rgba(255,255,255,.5); box-shadow:0 1px 3px rgba(0,0,0,.4); }
.st-prev .cap-bars i.s{ width:60%; background:rgba(255,255,255,.32); }
.st-prev .tag{ position:absolute; bottom:9px; right:9px; z-index:2; padding:2px 7px; border-radius:6px; background:rgba(0,0,0,.6); backdrop-filter:blur(6px);
  font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink); }
/* logo preview */
.st-prev.logo .lk{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; z-index:2; }
.st-prev.logo .mono{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center; background:rgba(255,255,255,.92); color:hsl(var(--h) 60% 35%);
  font-size:26px; font-weight:900; box-shadow:0 10px 26px -8px rgba(0,0,0,.5); }
.st-prev.logo .word{ font-size:var(--fs-base); font-weight:var(--fw-black); color:#fff; letter-spacing:.02em; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.st-result .meta{ padding:9px 11px; display:flex; align-items:center; gap:8px; }
.st-result .meta .nm{ font-size:var(--fs-label); font-weight:var(--fw-bold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.st-result .meta .sc{ font-size:var(--fs-micro); font-weight:var(--fw-black); color:var(--acc-2); }

/* text result card */
.st-result.text{ cursor:pointer; }
.st-textcard{ padding:16px 17px; display:flex; flex-direction:column; gap:11px; }
.st-textcard .body{ font-size:var(--fs-body); font-weight:var(--fw-med); color:var(--ink); line-height:1.5; }
.st-textcard .tags{ display:flex; flex-wrap:wrap; gap:5px; }
.st-textcard .tags span{ font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--acc-2); }

/* music result row */
.st-result.music{ display:flex; align-items:center; gap:13px; padding:13px 15px; }
.st-snd-play{ width:42px; height:42px; border-radius:13px; flex:0 0 42px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg, hsl(var(--h) 70% 56%), hsl(var(--h) 60% 42%)); box-shadow:0 8px 20px -6px hsl(var(--h) 80% 50% / .6); }
.st-snd-m{ flex:1; min-width:0; }
.st-snd-m .t{ font-size:var(--fs-base); font-weight:var(--fw-bold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-snd-m .s{ font-size:var(--fs-label); color:var(--ink-3); font-weight:var(--fw-med); margin-top:2px; }
.st-snd-wave{ display:flex; align-items:center; gap:2px; height:26px; flex:0 0 auto; }
.st-snd-wave i{ width:2.5px; border-radius:2px; background:hsl(var(--h) 65% 60%); opacity:.75; }
.st-snd-fit{ font-size:var(--fs-sub); font-weight:var(--fw-black); color:var(--good); flex:0 0 auto; }

/* voice result */
.st-result.voice{ padding:15px; display:flex; flex-direction:column; gap:12px; }
.st-voice-wave{ display:flex; align-items:center; gap:3px; height:40px; }
.st-voice-wave i{ flex:1; border-radius:3px; background:linear-gradient(180deg,var(--acc-2),var(--acc)); opacity:.8; }

@keyframes stEq{ 0%,100%{ transform:scaleY(.4);} 50%{ transform:scaleY(1);} }

/* the "что я сделал за тебя" side panel */
.st-ctx{ position:sticky; top:0; border-radius:var(--r-lg); background:var(--glass-3); border:1px solid var(--line);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.04); overflow:hidden; }
.st-ctx-head{ padding:16px 18px 13px; border-bottom:1px solid var(--line-soft); }
.st-ctx-head .e{ font-size:var(--fs-eyebrow); font-weight:var(--fw-black); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:6px; }
.st-ctx-head .e .spark{ color:var(--ai-b); filter:drop-shadow(0 0 5px var(--ai-b)); }
.st-ctx-head .t{ font-size:var(--fs-lg); font-weight:var(--fw-black); letter-spacing:-.01em; margin-top:5px; }
.st-ctx-list{ padding:8px; display:flex; flex-direction:column; gap:2px; }
.st-ctx-row{ display:flex; align-items:center; gap:12px; padding:11px 11px; border-radius:12px; transition:.16s var(--out);
  animation:stRise .45s var(--out) both; }
.st-ctx-row:hover{ background:var(--hover); }
.st-ctx-ic{ width:36px; height:36px; border-radius:11px; flex:0 0 36px; display:grid; place-items:center; color:var(--good);
  background:rgba(47,211,154,.12); border:1px solid rgba(47,211,154,.3); position:relative; }
.st-ctx-ic .ck{ position:absolute; bottom:-3px; right:-3px; width:16px; height:16px; border-radius:50%; background:var(--good); color:#04140d;
  display:grid; place-items:center; border:2px solid var(--bg); }
.st-ctx-m{ flex:1; min-width:0; }
.st-ctx-m .l{ font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; }
.st-ctx-m .v{ font-size:var(--fs-base); font-weight:var(--fw-bold); color:var(--ink); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-ctx-m .v .sw{ display:inline-flex; gap:3px; vertical-align:middle; margin-left:6px; }
.st-ctx-m .v .sw i{ width:11px; height:11px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
.st-ctx-swap{ font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--ink-4); padding:5px 8px; border-radius:7px; opacity:0; transition:.16s var(--out); flex:0 0 auto; }
.st-ctx-row:hover .st-ctx-swap{ opacity:1; }
.st-ctx-swap:hover{ color:var(--acc-2); background:var(--acc-soft); }

/* auto caption card under results */
.st-cap{ border-radius:var(--r-md); background:var(--panel-2); border:1px solid var(--line); padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.st-cap .ch{ display:flex; align-items:center; gap:8px; font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--ink-2); text-transform:uppercase; letter-spacing:.05em; }
.st-cap .ch .spark{ color:var(--ai-b); }
.st-cap .ch .redo{ margin-left:auto; display:flex; align-items:center; gap:5px; color:var(--ink-3); font-size:var(--fs-label); padding:4px 8px; border-radius:7px; text-transform:none; letter-spacing:0; transition:.16s var(--out); }
.st-cap .ch .redo:hover{ color:var(--acc-2); background:var(--acc-soft); }
.st-cap .body{ font-size:var(--fs-body); font-weight:var(--fw-med); color:var(--ink); line-height:1.5; }
.st-cap .tags{ display:flex; flex-wrap:wrap; gap:6px; }
.st-cap .tags span{ font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--acc-2); }

.st-reveal-cta{ display:flex; align-items:center; gap:12px; margin-top:4px; }

/* ---------------- DONE — where to send it ---------------- */
.st-dests{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; width:100%; max-width:760px; }
@media (max-width:680px){ .st-dests{ grid-template-columns:1fr; max-width:420px; } }
.st-dest{ --h:198; display:flex; flex-direction:column; align-items:center; text-align:center; gap:11px; padding:24px 18px; border-radius:var(--r-lg);
  background:var(--glass-3); border:1.5px solid var(--line); cursor:pointer; position:relative; overflow:hidden;
  transition:transform .24s var(--spring), box-shadow .24s var(--out), border-color .2s var(--out); animation:stRise .45s var(--out) both; }
.st-dest:hover{ transform:translateY(-5px); border-color:hsl(var(--h) 70% 60% / .6); box-shadow:var(--shadow-soft), 0 0 30px -10px hsl(var(--h) 80% 55% / .6); }
.st-dest.primary{ background:linear-gradient(160deg, hsl(var(--h) 60% 22% / .5), var(--glass-3)); border-color:hsl(var(--h) 70% 55% / .45); }
.st-dest-ic{ width:56px; height:56px; border-radius:17px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg, hsl(var(--h) 72% 56%), hsl(var(--h) 62% 42%)); box-shadow:0 12px 28px -8px hsl(var(--h) 80% 50% / .6), inset 0 1px 0 rgba(255,255,255,.3); }
.st-dest .dt{ font-size:var(--fs-lg); font-weight:var(--fw-black); }
.st-dest .ds{ font-size:var(--fs-sub); font-weight:var(--fw-reg); color:var(--ink-3); line-height:1.4; }
.st-dest .rec{ position:absolute; top:10px; right:10px; padding:3px 8px; border-radius:6px; background:var(--ai-grad); color:#fff;
  font-size:var(--fs-micro); font-weight:var(--fw-black); text-transform:uppercase; letter-spacing:.04em; box-shadow:0 3px 12px -3px var(--ai-glow); }

/* success */
.st-success{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; animation:stPop .5s var(--spring) both; }
.st-success-ring{ width:104px; height:104px; border-radius:50%; display:grid; place-items:center; color:#04140d; background:var(--good);
  box-shadow:0 18px 46px -10px rgba(47,211,154,.6), 0 0 40px -6px rgba(47,211,154,.5); animation:stPop .55s var(--spring) both; }
.st-success-ring::after{ content:''; position:absolute; width:104px; height:104px; border-radius:50%; box-shadow:0 0 0 0 rgba(47,211,154,.5); animation:vpulse 2.4s ease-out infinite; }
.st-success .recap{ display:flex; flex-direction:column; gap:7px; background:var(--glass-3); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 18px; min-width:280px; }
.st-success .recap .r{ display:flex; align-items:center; gap:9px; font-size:var(--fs-base); font-weight:var(--fw-med); color:var(--ink-2); }
.st-success .recap .r .ic{ color:var(--good); flex:0 0 auto; }
.st-success .recap .r b{ color:var(--ink); font-weight:var(--fw-bold); }