*{box-sizing:border-box}html,body{margin:0;background:#f4f1e9;color:#151512;font-family:Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}
header{height:78px;border-bottom:1px solid #d8d2c7;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 3.8vw}.logo{position:relative;width:130px;font-weight:900;font-size:20px;line-height:.77;letter-spacing:-1.2px}.logo span{display:block}.logo i{position:absolute;left:82px;bottom:0;color:#1ca2ef;font-size:10px;font-style:normal}nav{display:flex;gap:42px;font-size:12px}.headright{justify-self:end;display:flex;align-items:center;gap:22px;font-size:11px}.account{width:38px;height:38px;border-radius:50%;border:1px solid #aaa;background:transparent}
main{padding:0 4.5vw}.studio-head{display:flex;justify-content:space-between;align-items:end;padding:54px 0 31px}.studio-head small,.group-title b,.prompt-label,.preview-top,.manifest,.flow,.credit span{font-size:8px;font-weight:800;letter-spacing:.22em}.studio-head h1{font:400 50px/1 Georgia,serif;margin:12px 0 10px}.studio-head p{font:15px Georgia,serif;color:#6b5b4e;margin:0}.credit{width:190px}.credit span{display:block}.credit b{font:400 28px Georgia,serif;display:block;margin:7px 0}.credit>i{height:2px;background:#d0cbc0;display:block}.credit em{display:block;width:100%;height:100%;background:linear-gradient(90deg,#1da6ef,#a55cf2)}
.workspace{display:grid;grid-template-columns:minmax(380px,.82fr) minmax(520px,1.18fr);min-height:630px;border:1px solid #d6d0c5}.controls{padding:31px 35px 26px;background:#f8f5ee}.promptbox{position:relative;margin-top:10px}.promptbox textarea{resize:none;width:100%;height:145px;border:1px solid #c9c3b8;background:#fffdf8;padding:19px;font:17px/1.45 Georgia,serif;outline:none}.promptbox textarea:focus{border-color:#219fe9;box-shadow:0 0 0 2px rgba(33,159,233,.08)}.promptbox span{position:absolute;right:12px;bottom:10px;font-size:8px;color:#8c867d}.group{margin-top:27px}.group-title{display:flex;justify-content:space-between}.group-title span{font-size:8px;color:#8b857d}.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.chips button{border:1px solid #c9c3b8;background:transparent;padding:9px 12px;font-size:10px}.chips button.active,.chips button:hover{background:#161714;color:white;border-color:#161714}.ratios{display:flex;gap:8px;margin-top:12px}.ratios button{width:82px;height:78px;border:1px solid #c9c3b8;background:transparent;display:grid;grid-template-columns:30px 1fr;grid-template-rows:1fr 1fr;align-items:center;text-align:left;padding:10px}.ratios button.active{border-color:#1b9fe8;box-shadow:inset 0 0 0 1px #1b9fe8}.ratios i{grid-row:1/3;border:1px solid #777;justify-self:center}.r23{width:15px;height:23px}.r45{width:17px;height:22px}.r11{width:19px;height:19px}.r32{width:24px;height:16px}.ratios strong{font:12px Georgia,serif}.ratios small{font-size:7px;color:#777}.note{display:flex;gap:12px;border-top:1px solid #ddd6ca;border-bottom:1px solid #ddd6ca;margin-top:25px;padding:15px 0}.note i{font-style:normal;color:#20a1ea}.note p{margin:0;font:11px/1.5 Georgia,serif}.create{margin-top:22px;width:100%;height:52px;background:#151613;color:white;border:0;font-size:10px;font-weight:bold;letter-spacing:.05em;display:flex;justify-content:space-between;align-items:center;padding:0 18px}.create span{color:#4db8f2;font-size:17px}.fine{text-align:center!important;font:8px Arial!important;color:#777!important;margin-top:9px!important}
.preview{background:#121615;color:white;padding:18px;display:grid;grid-template-rows:32px 1fr 30px}.preview-top{display:flex;justify-content:space-between;border-bottom:1px solid #303534}.preview-top b{font-size:7px}.preview-top i{display:inline-block;width:5px;height:5px;background:#28a9ef;border-radius:50%;box-shadow:0 0 8px #28a9ef;margin-right:7px}.stage{position:relative;margin-top:12px;overflow:hidden;background:#1a1f1e}.grid{position:absolute;inset:0;background-image:linear-gradient(rgba(67,156,205,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(67,156,205,.05) 1px,transparent 1px);background-size:34px 34px}.stage:after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,#1ca6ee,#b258e9);opacity:.55}.corners{position:absolute;inset:25px;border:1px solid transparent;background:linear-gradient(#6ab9e4,#6ab9e4) left top/18px 1px no-repeat,linear-gradient(#6ab9e4,#6ab9e4) left top/1px 18px no-repeat,linear-gradient(#6ab9e4,#6ab9e4) right top/18px 1px no-repeat,linear-gradient(#6ab9e4,#6ab9e4) right top/1px 18px no-repeat,linear-gradient(#6ab9e4,#6ab9e4) left bottom/18px 1px no-repeat,linear-gradient(#6ab9e4,#6ab9e4) left bottom/1px 18px no-repeat,linear-gradient(#6ab9e4,#6ab9e4) right bottom/18px 1px no-repeat,linear-gradient(#6ab9e4,#6ab9e4) right bottom/1px 18px no-repeat}.blank{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.bp{font:bold 38px Arial;color:#222c2c;border:1px solid #354343;padding:23px 20px;margin-bottom:25px}.blank h2{font:400 26px/1.15 Georgia,serif;margin:0}.blank p{font:10px Georgia,serif;color:#98a09d}.loading{display:none;position:absolute;inset:0;background:rgba(15,20,19,.88);align-items:center;justify-content:center;flex-direction:column;gap:12px}.loading>.generation-spinner{width:48px;height:48px;border:1px solid #394849;border-top-color:#2caaf0;border-right-color:#a65af1;border-radius:50%;animation:spin 1s linear infinite}.loading b{font-size:9px;letter-spacing:.2em}.loading small{font:11px Georgia;color:#aeb5b2}@keyframes spin{to{transform:rotate(360deg)}}.manifest{display:flex;justify-content:space-between;align-items:end;color:#7baec7;font-size:6px}
.flow{display:flex;align-items:center;justify-content:center;gap:20px;padding:28px;color:#9d978e;font-size:7px}.flow span{display:flex;gap:7px}.flow .on{color:#151512}.flow .on b{color:#1aa3ed}.flow i{width:60px;height:1px;background:#d0cbc1}
@media(max-width:850px){header{grid-template-columns:1fr auto}nav{display:none}.studio-head{align-items:start}.studio-head h1{font-size:40px}.workspace{grid-template-columns:1fr}.preview{min-height:550px}.credit{width:130px}.flow{gap:8px}.flow i{width:18px}}
/* V12 — Atlas Create seçim mantığı, BP görsel dili */
.filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:25px}
.select-group{display:grid;gap:7px}.select-group label{font-size:7px;font-weight:800;letter-spacing:.18em}
.select-group select{height:39px;border:1px solid #c9c3b8;background:#fffdf8;padding:0 11px;font-size:10px;color:#222;outline:none}
.select-group select:focus{border-color:#209fe9}
.format-group{margin-top:24px}.orientation{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:11px}
.orientation button{height:66px;border:1px solid #c9c3b8;background:transparent;display:flex;align-items:center;justify-content:center;gap:10px}
.orientation button.active{border-color:#1ca3ed;box-shadow:inset 0 0 0 1px #1ca3ed;background:#fffdf8}
.orientation i{display:block;border:1px solid #555}.portrait{width:15px;height:23px}.square{width:20px;height:20px}.landscape{width:25px;height:16px}
.orientation span{display:grid;text-align:left;gap:3px}.orientation strong{font:12px Georgia,serif}.orientation small{font-size:6px;color:#777}
.interpret{width:100%;height:44px;margin-top:24px;border:1px solid #1b9fe8;background:#eef8fd;color:#123747;font-size:9px;font-weight:800;letter-spacing:.08em}
.interpret:disabled{opacity:.55}
.interpretation{display:none;margin-top:12px;border:1px solid #b8d9e9;background:#f8fcfd;padding:15px}.interpretation.show{display:block}
.interpret-head{display:flex;justify-content:space-between;font-size:7px;font-weight:800;letter-spacing:.18em;color:#1c8fcf}
.interpretation p{font:12px/1.5 Georgia,serif;margin:12px 0;color:#384247}
.interpretation textarea{width:100%;height:62px;resize:none;border:1px solid #d3e0e5;background:white;padding:9px;font:10px/1.4 Georgia,serif}
.create:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:520px){.filter-grid{grid-template-columns:1fr}.orientation{grid-template-columns:1fr}}

/* V13 extended creative direction */
.advanced-toggle{width:100%;margin-top:14px;height:40px;border:1px solid #c9c3b8;background:transparent;display:flex;align-items:center;justify-content:space-between;padding:0 13px;font-size:7px;font-weight:800;letter-spacing:.17em}
.advanced-toggle b{font-size:17px;font-weight:400;color:#1b9fe8}.advanced{display:none;padding-top:2px}.advanced.show{display:block}
.revision-label{display:block;margin:14px 0 7px;font-size:6.5px;font-weight:800;letter-spacing:.12em;color:#55717e}
.controls{overflow:visible}.filter-grid{align-items:end}

.revision-update{width:100%;margin-top:9px;height:38px;border:1px solid #169ee6;background:#f3fbff;color:#111;font-size:7px;font-weight:800;letter-spacing:.13em;cursor:pointer}
.revision-update:hover:not(:disabled){background:#e8f7ff}
.revision-update:disabled{opacity:.42;cursor:not-allowed}

/* V17 — wordmark + build */
.logo{width:132px;font-size:20px;line-height:.82;letter-spacing:-1.35px}
.logo i{left:79px;top:19px;bottom:auto;font-size:9px}
.bp-build-create{padding:18px 3.8vw 24px;text-align:right;font-size:7px;letter-spacing:.18em;color:#9a9388}
@media(max-width:800px){.logo i{left:79px;top:19px}.bp-build-create{text-align:center}}


/* BP BUILD V17.6 — global brand lockup correction */
.logo .com, .logo-com, .brand .com, .brand-com, .brand__com,
.site-logo .com, .site-logo-com, .footer-logo .com, .gate-logo .com,
.bp-logo .com, .bp-logo-com {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin-left: 3px !important;
  display: inline !important;
  vertical-align: baseline !important;
  white-space: nowrap !important;
}


/* BP BUILD V17.6 — official logo asset, preserve original artwork */
.bp-official-logo {
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  object-fit:contain;
}
header .bp-official-logo,
.site-header .bp-official-logo,
.create-header .bp-official-logo { max-height:54px; }
.gate .bp-official-logo,
.lock-screen .bp-official-logo,
.password-gate .bp-official-logo { max-height:82px; margin:0 auto; }
footer .bp-official-logo,
.site-footer .bp-official-logo { max-height:72px; }
@media (max-width:720px) {
  header .bp-official-logo,
  .site-header .bp-official-logo,
  .create-header .bp-official-logo { max-height:44px; }
  .gate .bp-official-logo,
  .lock-screen .bp-official-logo,
  .password-gate .bp-official-logo { max-height:68px; }
  footer .bp-official-logo,
  .site-footer .bp-official-logo { max-height:58px; }
}


/* BP BUILD V17.6 — clean textual brand lockup */
.bp-text-brand {
  display:inline-flex !important;
  align-items:baseline !important;
  white-space:nowrap !important;
  line-height:1 !important;
  font-family:Arial, Helvetica, sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-0.035em !important;
}
.bp-text-main {
  color:inherit !important;
}
.bp-text-com {
  color:#008DFF !important;
  font-size:.46em !important;
  font-weight:800 !important;
  letter-spacing:-0.02em !important;
  margin-left:2px !important;
}
footer .bp-text-brand,
.site-footer .bp-text-brand {
  color:#fff !important;
}


/* BP BUILD V17.6 — authoritative CREATE wordmark cleanup */
header .logo.bp-wordmark{
  position:static !important;
  width:auto !important;
  height:auto !important;
  display:inline-flex !important;
  align-items:baseline !important;
  white-space:nowrap !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:20px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.055em !important;
  text-transform:lowercase !important;
}
header .logo.bp-wordmark span{display:inline !important}
header .logo.bp-wordmark i{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  display:inline !important;
  color:#179ff1 !important;
  font-size:9px !important;
  line-height:1 !important;
  font-style:normal !important;
  letter-spacing:-.02em !important;
  margin-left:2px !important;
}


/* BP BUILD V17.6 — four-design result surface */
.result-grid{
  position:absolute;inset:24px;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;gap:12px;opacity:0;pointer-events:none;
  transform:translateY(6px);transition:opacity .35s ease,transform .35s ease;
}
.result-grid.show{opacity:1;transform:none}
.result-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.035)}
.result-image{position:absolute;inset:0;background:
  linear-gradient(135deg,rgba(255,255,255,.055),transparent 52%),
  repeating-linear-gradient(90deg,transparent 0 31px,rgba(255,255,255,.025) 32px)}
.result-card small{position:absolute;left:10px;bottom:8px;font-size:9px;letter-spacing:.16em;color:rgba(255,255,255,.48)}
.result-grid.locked::after{
  content:"ÜRETİM MOTORU HAZIR · MÜŞTERİ GİRİŞİ BAĞLANTISI BEKLENİYOR";
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max-content;max-width:82%;padding:11px 14px;background:rgba(8,23,35,.88);
  border:1px solid rgba(255,255,255,.16);font-size:9px;letter-spacing:.13em;
  color:rgba(255,255,255,.82);text-align:center;backdrop-filter:blur(8px)
}
@media(max-width:720px){.result-grid{inset:16px;gap:8px}}


/* BP BUILD V17.7 — single-image CREATE + BP AI motion language */
.result-grid{display:none!important}
.result-single{position:absolute;inset:24px;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.result-single.show{opacity:1;transform:none;pointer-events:auto}
.result-single .result-card{min-height:0}
.result-single .result-actions{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:8px}
.result-single .result-actions button{height:38px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;font-size:7px;font-weight:800;letter-spacing:.11em;cursor:pointer}
.result-single .result-actions .result-primary{background:#fff;color:#111;border-color:#fff}
.result-single.locked .result-actions{opacity:.28;pointer-events:none}
.result-single.locked::after{content:"ÜRETİM MOTORU HAZIR · MÜŞTERİ GİRİŞİ BAĞLANTISI BEKLENİYOR";position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:max-content;max-width:82%;padding:11px 14px;background:rgba(8,23,35,.88);border:1px solid rgba(255,255,255,.16);font-size:9px;letter-spacing:.13em;color:rgba(255,255,255,.82);text-align:center;backdrop-filter:blur(8px)}

/* Normal state = 03 Nefes. Hover = 01 Isik Imzasi. */
.interpret,.revision-update,.create{position:relative;overflow:hidden}
.interpret::before,.revision-update::before,.create::before{content:"";position:absolute;inset:-45%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.20),transparent 27%);transform:translateX(-58%);animation:bpBreathGlow 2.6s ease-in-out infinite alternate}
.interpret .bp-ai-star,.revision-update .bp-ai-star,.create .bp-ai-star{display:inline-block;animation:bpBreathStar 2.6s ease-in-out infinite}
.create .bp-ai-label,.create .create-arrow{position:relative;z-index:2}.create .bp-ai-star{margin-right:8px;font-style:normal}
.interpret:hover:not(:disabled)::after,.revision-update:hover:not(:disabled)::after,.create:hover:not(:disabled)::after{content:"";position:absolute;z-index:1;top:-50%;left:-42%;width:24%;height:200%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);animation:bpSweep .9s ease}
.create:hover:not(:disabled) .bp-ai-star{animation:bpTwinkle .9s ease}
@keyframes bpBreathGlow{to{transform:translateX(58%)}}
@keyframes bpBreathStar{50%{opacity:.5;transform:scale(.82)}}
@keyframes bpSweep{to{left:120%}}
@keyframes bpTwinkle{50%{transform:rotate(80deg) scale(1.35);opacity:.76}}
@media(prefers-reduced-motion:reduce){.interpret::before,.revision-update::before,.create::before,.create .bp-ai-star{animation:none!important}.interpret:hover::after,.revision-update:hover::after,.create:hover::after{animation:none!important}}
@media(max-width:720px){.result-single{inset:16px}.result-single .result-actions{grid-template-columns:1fr}.result-single .result-actions button{height:34px}}

/* BP BUILD V17.8 — FINAL PREMIUM BUTTON SYSTEM
   Locked behavior: normal = 03 Nefes, hover = 01 Isik Imzasi */
:root{
  --bp-ink:#242a29;
  --bp-ink-2:#303635;
  --bp-paper:#fffdf8;
  --bp-cream:#f8f5ee;
  --bp-line:#d7c9b5;
  --bp-gold:#d7a85b;
  --bp-gold-soft:rgba(215,168,91,.26);
  --bp-muted:#9b978f;
  --bp-disabled:#dedbd5;
}

/* Shared AI buttons */
.interpret,.revision-update,.create,
.result-single .result-actions button{
  border-radius:9px;
  letter-spacing:.095em;
  transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease,opacity .22s ease;
}
.interpret,.revision-update,.create{position:relative;overflow:hidden;isolation:isolate}
.interpret .bp-ai-label,.revision-update .bp-ai-label,.create .bp-ai-label,.create .create-arrow{position:relative;z-index:3}
.interpret .bp-ai-star,.revision-update .bp-ai-star,.create .bp-ai-star{display:inline-block;margin-right:8px;font-style:normal;color:#f3d39b;animation:bpPremiumBreath 2.6s ease-in-out infinite}

/* 03 NEFES — default */
.interpret::before,.revision-update::before,.create::before{
  content:"";position:absolute;z-index:1;inset:-65%;pointer-events:none;
  background:radial-gradient(circle at 24% 50%,rgba(231,190,119,.18),transparent 25%);
  transform:translateX(-38%);animation:bpPremiumGlow 3.1s ease-in-out infinite alternate;
}

/* 01 ISIK IMZASI — hover */
.interpret:hover:not(:disabled)::after,.revision-update:hover:not(:disabled)::after,.create:hover:not(:disabled)::after,
.result-single .result-actions button:hover::after{
  content:"";position:absolute;z-index:2;top:-55%;left:-42%;width:25%;height:210%;pointer-events:none;
  transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,239,205,.08),rgba(255,239,205,.55),rgba(255,239,205,.08),transparent);
  animation:bpPremiumSweep .92s ease-out 1;
}
.interpret:hover:not(:disabled) .bp-ai-star,.revision-update:hover:not(:disabled) .bp-ai-star,.create:hover:not(:disabled) .bp-ai-star{animation:bpPremiumTwinkle .92s ease 1}

/* Secondary AI — Hayalimi Yorumla + Yorumu Guncelle */
.interpret,.revision-update{
  width:100%;background:rgba(255,253,248,.92);color:#24231f;border:1px solid #cbb99f;
  box-shadow:0 5px 14px rgba(57,45,28,.06);font-weight:800;
}
.interpret{height:46px;margin-top:24px;font-size:9px}
.revision-update{height:40px;margin-top:9px;font-size:7.5px}
.interpret:hover:not(:disabled),.revision-update:hover:not(:disabled){
  background:#fffaf1;border-color:#d8b778;box-shadow:0 8px 22px var(--bp-gold-soft),inset 0 0 0 1px rgba(215,168,91,.10);transform:translateY(-1px)
}
.interpret .bp-ai-star,.revision-update .bp-ai-star{color:#9b6b28}

/* Primary AI — Tasarim Olustur */
.create{
  margin-top:22px;width:100%;height:54px;padding:0 19px;border:1px solid #242a29;
  background:linear-gradient(135deg,#252b2a,#303635);color:#fff;
  box-shadow:0 8px 20px rgba(24,29,28,.12);font-size:10px;font-weight:800;
}
.create .create-arrow{color:#f3d39b;font-size:16px}
.create:hover:not(:disabled){background:linear-gradient(135deg,#202625,#343a39);border-color:#8d754e;box-shadow:0 10px 28px rgba(39,34,25,.18),0 0 22px rgba(215,168,91,.14);transform:translateY(-1px)}

/* Disabled — intentionally premium, no blue/grey clash */
.interpret:disabled,.revision-update:disabled,.create:disabled{
  background:#d9d7d1!important;border-color:#d9d7d1!important;color:#8d8b86!important;
  box-shadow:none!important;transform:none!important;opacity:1;cursor:not-allowed
}
.interpret:disabled .bp-ai-star,.revision-update:disabled .bp-ai-star,.create:disabled .bp-ai-star,.create:disabled .create-arrow{color:#aaa7a1!important;animation:none!important}
.interpret:disabled::before,.revision-update:disabled::before,.create:disabled::before{display:none}

/* Result buttons */
.result-single .result-actions button{position:relative;overflow:hidden;height:42px;background:rgba(255,253,248,.96);border:1px solid #cbb99f;color:#222;font-size:7.5px;font-weight:800;cursor:pointer;box-shadow:0 5px 14px rgba(0,0,0,.08)}
.result-single .result-actions button:hover{background:#fffaf1;border-color:#d8b778;box-shadow:0 8px 22px rgba(215,168,91,.20);transform:translateY(-1px)}
.result-single .result-actions .result-primary{background:linear-gradient(135deg,#252b2a,#303635);border-color:#252b2a;color:#fff}
.result-single .result-actions .result-primary:hover{background:linear-gradient(135deg,#202625,#343a39);border-color:#8d754e;box-shadow:0 10px 26px rgba(0,0,0,.18),0 0 20px rgba(215,168,91,.14)}
.result-single .result-actions .result-primary::before{content:"✦";display:inline-block;margin-right:8px;color:#f3d39b;animation:bpPremiumBreath 2.6s ease-in-out infinite}

@keyframes bpPremiumGlow{to{transform:translateX(38%)}}
@keyframes bpPremiumBreath{0%,100%{opacity:.72;transform:scale(.94)}50%{opacity:1;transform:scale(1.08)}}
@keyframes bpPremiumSweep{to{left:122%}}
@keyframes bpPremiumTwinkle{50%{transform:rotate(78deg) scale(1.34);filter:drop-shadow(0 0 5px rgba(243,211,155,.55))}}

@media(prefers-reduced-motion:reduce){
 .interpret::before,.revision-update::before,.create::before,.interpret .bp-ai-star,.revision-update .bp-ai-star,.create .bp-ai-star,.result-single .result-actions .result-primary::before{animation:none!important}
 .interpret:hover::after,.revision-update:hover::after,.create:hover::after,.result-single .result-actions button:hover::after{animation:none!important}
}

/* =========================================================
   BP CREATE V17.9 — APPROVED PREMIUM THREE-COLUMN UI
   Visual-only layer. Existing IDs, API flow and JS are preserved.
   ========================================================= */
:root{
  --bp-paper:#faf9f6; --bp-warm:#f7f4ee; --bp-card:#fffefa;
  --bp-ink:#1d1d1b; --bp-muted:#6f6c66; --bp-line:#e6e1d8;
  --bp-gold:#9b7a4d; --bp-dark:#292d2c; --bp-soft:#fffaf2;
}
body{background:var(--bp-paper)!important;color:var(--bp-ink)!important}
header{background:rgba(252,251,248,.96)!important;border-bottom:1px solid var(--bp-line)!important;box-shadow:none!important}
body:not(.bp-page-layout) main{max-width:1560px!important;margin:0 auto!important;padding-left:32px!important;padding-right:32px!important}
.studio-head{padding:28px 0 22px!important;border:0!important}
.studio-head small{color:var(--bp-gold)!important;letter-spacing:1.8px!important}
.studio-head h1{font-size:34px!important;letter-spacing:-.7px!important;margin:6px 0!important}
.studio-head p{color:var(--bp-muted)!important}
.credit{background:#fff!important;border:1px solid var(--bp-line)!important;border-radius:14px!important;padding:12px 16px!important}

.workspace.create-premium{display:grid!important;grid-template-columns:minmax(350px,31%) minmax(470px,40%)!important;gap:24px!important;align-items:start!important}
.controls{background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important}
.controls>*{max-width:none}
.step-intro,.section-caption{background:rgba(255,255,255,.58);border:1px solid #eeeae3;border-bottom:0;border-radius:15px 15px 0 0;padding:18px 18px 5px;margin:0}
.step-intro h2,.section-caption h2{font-size:19px!important;font-weight:500!important;margin:0 0 5px!important;color:var(--bp-ink)!important;text-transform:none!important;letter-spacing:0!important}
.step-intro p,.section-caption p{font-size:12px!important;line-height:1.5!important;color:var(--bp-muted)!important;margin:0 0 8px!important}
.prompt-label{display:none!important}
.promptbox{background:rgba(255,255,255,.58)!important;border-left:1px solid #eeeae3!important;border-right:1px solid #eeeae3!important;padding:8px 18px 18px!important;margin:0!important}
.promptbox textarea{min-height:126px!important;background:#fffefa!important;border:1px solid #ddd8cf!important;border-radius:10px!important;padding:14px!important;font-size:13px!important;line-height:1.55!important;box-shadow:none!important}
.promptbox textarea:focus{border-color:#b9a17d!important;box-shadow:0 0 0 3px rgba(155,122,77,.07)!important}
.promptbox span{color:#999!important;right:30px!important;bottom:27px!important}
.section-caption{margin-top:15px!important}
.section-caption+.filter-grid{border-radius:0 0 15px 15px!important}
.filter-grid{background:rgba(255,255,255,.58)!important;border:1px solid #eeeae3!important;border-top:0!important;padding:10px 18px 18px!important;gap:10px!important}
.select-group label{font-size:10px!important;color:#716d66!important;letter-spacing:.65px!important}
.select-group select{height:42px!important;background:#fffefa!important;border:1px solid #ddd8cf!important;border-radius:10px!important;color:#494640!important;padding:0 11px!important}
.advanced-toggle{margin-top:12px!important;background:#fffefa!important;border:1px solid var(--bp-line)!important;border-radius:10px!important;color:#5f5b54!important;height:43px!important;padding:0 14px!important}
.advanced{background:rgba(255,255,255,.5)!important;border:1px solid var(--bp-line)!important;border-radius:12px!important;margin-top:8px!important}
.advanced .filter-grid{border:0!important;background:transparent!important;border-radius:12px!important}
.section-caption.compact{margin-top:15px!important;border-bottom:0!important}
.format-group{background:rgba(255,255,255,.58)!important;border:1px solid #eeeae3!important;border-top:0!important;border-radius:0 0 15px 15px!important;padding:10px 18px 18px!important;margin:0!important}
.group-title{display:none!important}
.orientation{gap:9px!important}.orientation button{background:#fffefa!important;border:1px solid #ded9d0!important;border-radius:10px!important;min-height:58px!important;color:#45423d!important}.orientation button.active{border-color:#b69b74!important;background:#fffaf1!important;box-shadow:0 0 0 2px rgba(155,122,77,.06)!important}

/* AI buttons: locked behavior — resting Breath, hover Light Signature */
.interpret,.revision-update,.create{position:relative!important;overflow:hidden!important;border-radius:10px!important;background:var(--bp-dark)!important;color:#fff!important;border:0!important;box-shadow:0 8px 20px rgba(35,35,31,.08)!important}
.interpret{margin-top:15px!important;height:52px!important}.revision-update{height:45px!important}.create{height:56px!important;margin-top:12px!important}
.bp-ai-star{display:inline-block!important;color:#f4dfb7!important;animation:bpBreath 1.8s ease-in-out infinite!important}
.interpret:after,.revision-update:after,.create:after,.result-primary:after{content:"";position:absolute;z-index:1;top:-55%;left:-48%;width:24%;height:210%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,242,211,.06),rgba(255,242,211,.42),rgba(255,242,211,.06),transparent)}
.interpret:hover:after,.revision-update:hover:after,.create:hover:after,.result-primary:hover:after{animation:bpSweep .95s ease forwards}
.interpret:hover .bp-ai-star,.revision-update:hover .bp-ai-star,.create:hover .bp-ai-star{animation:bpTwinkle .8s ease!important}
.interpret:disabled,.revision-update:disabled,.create:disabled{background:#d5d2cb!important;color:#8d8982!important;box-shadow:none!important;opacity:1!important}.interpret:disabled .bp-ai-star,.revision-update:disabled .bp-ai-star,.create:disabled .bp-ai-star{color:#aaa!important;animation:none!important}
@keyframes bpBreath{50%{opacity:.45;transform:scale(.82)}}@keyframes bpSweep{to{left:125%}}@keyframes bpTwinkle{50%{transform:rotate(75deg) scale(1.3)}}
.fine{color:#837d73!important;text-align:center!important;font-size:10px!important}

.interpretation{background:#fffefa!important;border:1px solid var(--bp-line)!important;border-radius:14px!important;margin-top:12px!important;box-shadow:none!important}.interpret-head{border-bottom:1px solid var(--bp-line)!important;color:var(--bp-ink)!important}.interpret-head b{color:var(--bp-gold)!important}.interpretation p{color:#5f5b55!important}.revision-label{color:#777168!important}.interpretation textarea{background:#fff!important;border:1px solid #ddd8cf!important;border-radius:9px!important}

.preview{background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important;position:sticky!important;top:18px!important}
.preview-top{background:transparent!important;border:0!important;padding:0 3px 10px!important;color:#777!important}.preview-top b{color:#68746c!important}.stage{background:#fff!important;border:1px solid #e2ddd4!important;border-radius:15px!important;min-height:720px!important;box-shadow:0 14px 34px rgba(42,38,31,.07)!important;overflow:hidden!important;padding:7px!important}.stage .grid,.stage .corners{opacity:.15!important}.blank{border-radius:10px!important;background:linear-gradient(155deg,#f5f0e6,#e6ddd0)!important;color:#5f594f!important}.blank .bp{color:var(--bp-gold)!important}.blank h2{font-family:Georgia,serif!important;font-weight:500!important;color:#2d2b27!important}.manifest{color:#8a857d!important;border:0!important;padding-top:10px!important}
.result-single{padding:8px!important}.result-card{background:#fff!important;border:0!important}.result-image{border-radius:10px!important}.result-actions{background:#fff!important;border-top:1px solid var(--bp-line)!important;padding:14px!important;gap:10px!important}.result-actions button{border-radius:10px!important;border:1px solid #d8c7aa!important;background:#fffaf3!important;color:#252525!important}.result-actions .result-primary{position:relative!important;overflow:hidden!important;background:var(--bp-dark)!important;color:#fff!important;border:0!important}.result-actions .result-primary:before{content:"✦";color:#f4dfb7;margin-right:8px;animation:bpBreath 1.8s ease-in-out infinite}

.flow{margin-top:28px!important;border-top:1px solid var(--bp-line)!important;background:transparent!important;color:#8a857d!important}.flow .on{color:var(--bp-ink)!important}.flow .on b{color:var(--bp-gold)!important}.bp-build-create{color:#9a958c!important}

@media(min-width:1280px){.workspace.create-premium{grid-template-columns:minmax(350px,31%) minmax(520px,41%)!important}.preview{min-width:0!important}}
@media(max-width:980px){body:not(.bp-page-layout) main{padding-left:18px!important;padding-right:18px!important}.workspace.create-premium{grid-template-columns:1fr!important}.preview{position:static!important}.stage{min-height:620px!important}.studio-head{gap:14px!important}}
@media(max-width:620px){.filter-grid{grid-template-columns:1fr!important}.orientation{grid-template-columns:1fr!important}.stage{min-height:500px!important}}

/* =========================================================
   BP CREATE V17.10 — FORMAT FIRST + READABILITY PASS
   Approved change only: order, compact format, readable type.
   ========================================================= */
/* 1. Format is intentionally compact */
.controls > .section-caption.compact:first-child{
  margin-top:0!important;
  padding:14px 18px 3px!important;
}
.controls > .section-caption.compact:first-child h2{font-size:19px!important;margin-bottom:3px!important}
.controls > .section-caption.compact:first-child p{font-size:14px!important;line-height:1.4!important;margin-bottom:6px!important}
.controls > .section-caption.compact:first-child + .format-group{
  padding:5px 18px 14px!important;
  margin-bottom:14px!important;
}
.orientation{gap:8px!important;margin-top:3px!important}
.orientation button{min-height:48px!important;padding:7px 8px!important}
.orientation button i{transform:scale(.82)}
.orientation button strong{font-size:14px!important;line-height:1.15!important}
.orientation button small{font-size:10px!important;line-height:1.15!important;margin-top:2px!important;color:#817b72!important}

/* Readability — no tiny UI copy */
.step-intro h2,.section-caption h2{font-size:20px!important}
.step-intro p,.section-caption p{font-size:14px!important;line-height:1.5!important}
.promptbox textarea{font-size:15px!important;line-height:1.55!important}
.promptbox span{font-size:11px!important}
.select-group label{font-size:12px!important;line-height:1.2!important;font-weight:700!important;letter-spacing:.55px!important}
.select-group select{font-size:14px!important}
.advanced-toggle{font-size:12px!important;font-weight:700!important}
.interpret,.revision-update,.create{font-size:13px!important}
.fine{font-size:11px!important;line-height:1.45!important}
.preview-top{font-size:11px!important;letter-spacing:1.2px!important}
.interpret-head{font-size:12px!important}
.interpretation p{font-size:14px!important;line-height:1.55!important}
.revision-label{font-size:11px!important;line-height:1.35!important}
.interpretation textarea{font-size:14px!important}
.manifest{font-size:10px!important}

/* tighter but still breathable left-column rhythm */
.step-intro{padding-top:15px!important}
.section-caption{margin-top:13px!important;padding-top:15px!important}
.filter-grid{padding-bottom:15px!important}


/* =========================================================
   BP CREATE V17.11 — STATE-AWARE PREVIEW + SPACING PASS
   ========================================================= */
.workspace.create-premium{grid-template-columns:minmax(390px,38%) minmax(520px,62%)!important;gap:22px!important}
.preview{width:100%!important}
.stage{min-height:650px!important}
.blank{transition:opacity .25s ease,background .25s ease!important}
.workspace[data-state="interpreted"] .blank{background:linear-gradient(155deg,#f8f4ec,#eee7dc)!important}
.workspace[data-state="interpreted"] .blank .bp{border-color:#cdbb9f!important;color:#9b7a4d!important}
.workspace[data-state="generating"] .blank,.workspace[data-state="result"] .blank{opacity:0!important;pointer-events:none!important}
.workspace[data-state="result"] .stage{background:#fff!important}
.preview-top b{font-size:12px!important;letter-spacing:.06em!important}
.preview-top b i{background:#9b7a4d!important;box-shadow:0 0 7px rgba(155,122,77,.35)!important}
.controls > .section-caption.compact:first-child + .format-group{margin-bottom:12px!important}
.step-intro{margin-top:0!important}
.interpretation{padding-bottom:4px!important}
.flow{padding-top:20px!important;padding-bottom:20px!important}
@media(min-width:1280px){.workspace.create-premium{grid-template-columns:minmax(400px,37%) minmax(560px,63%)!important}.stage{min-height:660px!important}}
@media(max-width:980px){.workspace.create-premium{grid-template-columns:1fr!important}.stage{min-height:560px!important}}


/* =========================================================
   BP CREATE V17.13 — THREE-COLUMN STATE PANEL
   No backend/auth/generation changes.
   ========================================================= */
.workspace.create-premium{
  grid-template-columns:minmax(360px,34%) minmax(470px,43%) minmax(245px,23%)!important;
  gap:20px!important;
}
.create-side{position:sticky;top:18px;min-width:0;background:#fffefa;border:1px solid var(--bp-line);border-radius:15px;padding:22px;box-shadow:0 12px 30px rgba(42,38,31,.055)}
.side-state{display:none}.workspace[data-state="start"] .side-start,.workspace[data-state="interpreted"] .side-interpreted,.workspace[data-state="generating"] .side-generating,.workspace[data-state="result"] .side-result{display:block}
.side-kicker{display:block;color:var(--bp-gold);font-size:11px;font-weight:800;letter-spacing:.11em;margin-bottom:14px}
.create-side h2{font-family:Georgia,serif;font-size:24px;line-height:1.12;font-weight:500;letter-spacing:-.02em;margin:0 0 12px;color:#292722}
.create-side p{font-size:14px;line-height:1.6;color:#68635b;margin:0}
.side-steps{display:grid;grid-template-columns:28px 1fr;gap:10px 9px;align-items:center;margin-top:24px;padding-top:18px;border-top:1px solid var(--bp-line)}
.side-steps span{width:28px;height:28px;border:1px solid #d8d1c5;border-radius:50%;display:grid;place-items:center;font-size:10px;color:#8a8379}.side-steps span.active{background:#292d2c;color:#fff;border-color:#292d2c}.side-steps b{font-size:12px;font-weight:650;color:#5e5952}
.side-analysis{max-height:245px;overflow:auto;padding-right:4px}.side-note{margin-top:20px;padding:14px;background:#faf6ee;border:1px solid #e7dfd2;border-radius:11px}.side-note b,.side-note span{display:block}.side-note b{font-size:11px;letter-spacing:.08em;color:#8b6e45;margin-bottom:6px}.side-note span{font-size:13px;line-height:1.45;color:#5e5952}
.side-result-actions{display:grid;gap:9px;margin-top:20px}.side-result-actions button{height:44px;border:1px solid #d8c7aa;border-radius:10px;background:#fffaf3;color:#252525;font-size:12px;font-weight:800;letter-spacing:.055em}.side-result-actions .side-primary{background:#292d2c;color:#fff;border-color:#292d2c}
/* Keep result actions hidden until an actual result state exists. */
.workspace:not([data-state="result"]) .result-single{pointer-events:none!important}
@media(min-width:1440px){.workspace.create-premium{grid-template-columns:minmax(380px,33%) minmax(520px,44%) minmax(255px,23%)!important}}
@media(max-width:1180px){.workspace.create-premium{grid-template-columns:minmax(390px,40%) minmax(520px,60%)!important}.create-side{grid-column:1/-1;position:static;display:block}.side-steps{grid-template-columns:28px 1fr 28px 1fr 28px 1fr}.side-steps span,.side-steps b{margin:0}}
@media(max-width:980px){.workspace.create-premium{grid-template-columns:1fr!important}.create-side{grid-column:auto}.side-steps{grid-template-columns:28px 1fr}}

/* =========================================================
   BP CREATE V17.14 — RIGHT PANEL VISIBILITY FIX
   Fix: V17.13 percentage columns + gaps could push the third column
   outside the visible viewport. Keep the right panel visible on desktop.
   ========================================================= */
.workspace.create-premium{
  width:100%!important;
  grid-template-columns:minmax(330px,360px) minmax(0,1fr) minmax(250px,285px)!important;
  gap:18px!important;
  overflow:visible!important;
}
.controls,.preview,.create-side{min-width:0!important}
.create-side{display:block!important;visibility:visible!important;opacity:1!important}
@media(max-width:1220px) and (min-width:981px){
  body:not(.bp-page-layout) main{max-width:none!important;padding-left:20px!important;padding-right:20px!important}
  .workspace.create-premium{grid-template-columns:minmax(310px,335px) minmax(0,1fr) minmax(225px,250px)!important;gap:14px!important}
  .create-side{grid-column:auto!important;position:sticky!important;top:18px!important;padding:18px!important}
  .create-side h2{font-size:21px!important}
  .create-side p{font-size:13px!important}
  .side-steps{grid-template-columns:26px 1fr!important}
}
@media(max-width:980px){
  .workspace.create-premium{grid-template-columns:1fr!important}
  .create-side{grid-column:auto!important;position:static!important}
}

/* V17.15 — invalid idea guidance */
.bp-example{display:inline-block;margin-top:10px;color:#766b5d;font-size:14px;line-height:1.55;}
.workspace[data-state="needs-input"] #create{opacity:.45;pointer-events:none;}

/* =========================================================
   BP CREATE V17.17 — BP AI YORUMU MOVED TO RIGHT PANEL
   Left column ends with HAYALİMİ YORUMLA. Interpretation,
   revision and create actions live in the state-aware right panel.
   ========================================================= */
.workspace[data-state="needs-input"] .side-needs-input{display:block}
.create-side .interpretation{display:block!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.create-side .interpret-head{padding:0 0 12px!important;border-bottom:1px solid var(--bp-line)!important;margin-bottom:13px!important}
.create-side .interpretation p{margin:0 0 18px!important;font-size:14px!important;line-height:1.62!important;color:#4f4a43!important;max-height:260px;overflow:auto;padding-right:4px}
.create-side .revision-label{display:block;margin:0 0 8px!important;font-size:11px!important;line-height:1.35!important}
.create-side .interpretation textarea{width:100%;min-height:92px!important;box-sizing:border-box;margin:0 0 10px!important;border-radius:10px!important}
.create-side .revision-update{width:100%!important;margin:0!important}
.create-side .create{width:100%!important;margin:12px 0 0!important}
.create-side .side-fine{margin:9px 2px 0!important;font-size:11px!important;line-height:1.45!important;color:#8a857d!important}
.left-fine{margin:9px 2px 0!important}
.side-needs-input .side-note{margin-top:18px!important}
@media(max-width:1180px){.create-side .interpretation p{max-height:none}}

/* BP CREATE V17.18 — clear invalid-input message + revision guard */
.side-needs-input{background:#fffaf2!important;border:1px solid #dfcfb5!important;border-radius:12px!important;padding:16px!important}
.side-needs-input .side-kicker{margin-bottom:9px!important}.side-needs-input h2{font-size:21px!important;margin-bottom:8px!important}.side-needs-input p{font-size:14px!important;line-height:1.55!important}
.side-needs-input .side-note{background:#fff!important;border-color:#eadfce!important;margin-top:14px!important;padding:12px!important}
.bp-revision-warning{display:none;margin:0 0 10px;padding:11px 12px;border:1px solid #dfcfb5;border-radius:9px;background:#fff8ec;color:#5c5144}
.bp-revision-warning.show{display:block}.bp-revision-warning b,.bp-revision-warning span{display:block}.bp-revision-warning b{font-size:12px;line-height:1.35;margin-bottom:3px;color:#6f5635}.bp-revision-warning span{font-size:12px;line-height:1.45}
.create-side textarea[aria-invalid="true"]{border-color:#c9a977!important;box-shadow:0 0 0 3px rgba(155,122,77,.08)!important}

/* BP CREATE V17.19 — local message boxes */
.bp-field-warning{display:none;margin:9px 0 0;padding:12px 13px;border:1px solid #dcc7a7;border-radius:10px;background:#fff8ed;color:#554a3d;box-shadow:0 5px 16px rgba(62,48,30,.035)}
.bp-field-warning.show{display:block}
.bp-field-warning b,.bp-field-warning span,.bp-field-warning small{display:block}
.bp-field-warning b{font-size:13px;line-height:1.35;color:#6b5131;margin-bottom:4px;font-weight:650}
.bp-field-warning span{font-size:12.5px;line-height:1.5}
.bp-field-warning small{font-size:11.5px;line-height:1.45;color:#857666;margin-top:6px}
#prompt[aria-invalid="true"],#revision[aria-invalid="true"]{border-color:#c8a36e!important;box-shadow:0 0 0 3px rgba(160,124,73,.08)!important}
#revisionWarning{margin:9px 0 10px}

/* BP CREATE V17.20 — final pre-production states */
.bp-mini-spinner{display:inline-block;width:11px;height:11px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-1px;margin-right:5px;animation:bpSpin .75s linear infinite}
@keyframes bpSpin{to{transform:rotate(360deg)}}
#revisionUpdate.is-loading{opacity:.72;cursor:wait}
#interpretText.is-updating{opacity:.58;transition:opacity .18s ease}
.bp-production-pending{display:none;margin:10px 0 0;padding:12px 13px;border:1px solid #ded6ca;border-radius:10px;background:#fbfaf7;color:#5b554d}
.bp-production-pending.show{display:block}
.bp-production-pending b,.bp-production-pending span{display:block}
.bp-production-pending b{font-size:12.5px;line-height:1.4;margin-bottom:4px;color:#403b35}
.bp-production-pending span{font-size:11.5px;line-height:1.5;color:#777067}

/* =========================================================
   BP CREATE V17.21 — FORMAT CARD ALIGNMENT
   Keep Dikey / Kare / Yatay optically locked to one grid.
   ========================================================= */
#createPage .orientation,
.create-page .orientation,
.orientation{
  align-items:stretch!important;
}
#createPage .orient,
.create-page .orient,
.orient{
  min-height:66px!important;
  height:66px!important;
  display:grid!important;
  grid-template-columns:16px minmax(0,1fr)!important;
  grid-template-rows:22px 26px!important;
  column-gap:9px!important;
  row-gap:0!important;
  align-items:start!important;
  padding:10px 10px!important;
  box-sizing:border-box!important;
}
#createPage .orient .shape,
.create-page .orient .shape,
.orient .shape{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  align-self:center!important;
  justify-self:center!important;
  margin:0!important;
}
#createPage .orient > div,
.create-page .orient > div,
.orient > div{
  grid-column:2!important;
  grid-row:1 / span 2!important;
  display:grid!important;
  grid-template-rows:22px 26px!important;
  align-items:start!important;
  min-width:0!important;
}
#createPage .orient b,
.create-page .orient b,
.orient b{
  display:block!important;
  margin:0!important;
  line-height:18px!important;
  white-space:nowrap!important;
}
#createPage .orient small,
.create-page .orient small,
.orient small{
  display:block!important;
  margin:0!important;
  line-height:12px!important;
  min-height:24px!important;
}
@media (max-width:560px){
  #createPage .orient,.create-page .orient,.orient{
    min-height:64px!important;
    height:64px!important;
    padding:9px 8px!important;
    column-gap:7px!important;
  }
}

/* =========================================================
   BP CREATE V17.22 — PREVIEW AS FINAL RIGHT COLUMN
   Desktop flow: controls -> BP collaboration -> live artwork.
   ========================================================= */
@media(min-width:981px){
  .workspace.create-premium{
    grid-template-columns:minmax(330px,360px) minmax(250px,285px) minmax(0,1fr)!important;
  }
  .controls{grid-column:1!important;grid-row:1!important}
  .create-side{grid-column:2!important;grid-row:1!important}
  .preview{grid-column:3!important;grid-row:1!important}
}
@media(min-width:1440px){
  .workspace.create-premium{
    grid-template-columns:minmax(360px,390px) minmax(270px,300px) minmax(560px,1fr)!important;
  }
}
@media(max-width:1220px) and (min-width:981px){
  .workspace.create-premium{
    grid-template-columns:minmax(310px,335px) minmax(225px,250px) minmax(0,1fr)!important;
  }
  .create-side{grid-column:2!important;grid-row:1!important}
  .preview{grid-column:3!important;grid-row:1!important}
}


/* =========================================================
   BP CREATE V17.23 — DESKTOP VISUAL BALANCE TEST
   More room for BP interpretation; preview remains the largest area.
   ========================================================= */
@media(min-width:981px){
  .workspace.create-premium{
    grid-template-columns:minmax(330px,31%) minmax(310px,26%) minmax(0,43%)!important;
    gap:18px!important;
  }
  .create-side{padding:22px 20px!important}
  .create-side .interpretation p{
    max-height:300px!important;
    overflow:auto!important;
  }
  .create-side .create{
    white-space:nowrap!important;
    font-size:12px!important;
  }
  .stage{min-height:620px!important}
}
@media(min-width:1440px){
  .workspace.create-premium{
    grid-template-columns:minmax(360px,31%) minmax(320px,26%) minmax(560px,43%)!important;
  }
}


/* =========================================================
   BP CREATE V17.24 — MIDDLE PANEL HEIGHT ALIGNMENT
   Keep content at top; visually align collaboration card with preview.
   ========================================================= */
@media(min-width:981px){
  .create-side{
    align-self:stretch!important;
    min-height:620px!important;
  }
}


/* =========================================================
   BP CREATE V17.25 — LEFT COLUMN VERTICAL RHYTHM
   Tight, consistent row spacing after simplified controls.
   ========================================================= */
.controls .step-intro{padding-top:12px!important;margin-bottom:10px!important}
.controls .prompt-label{display:block;margin:0 0 7px!important}
.controls .promptbox{margin-top:0!important;margin-bottom:14px!important}
.controls .section-caption:not(.compact){margin-top:8px!important;padding-top:12px!important;margin-bottom:8px!important}
.controls .filter-grid{margin-top:8px!important;padding-bottom:10px!important;gap:10px 12px!important}
.controls .advanced-toggle{margin-top:2px!important;margin-bottom:0!important}
.controls .advanced.show{padding-top:8px!important}
.controls .advanced .filter-grid{margin-top:0!important;padding-bottom:8px!important}
.controls .interpret{margin-top:12px!important}
.controls .left-fine{margin-top:7px!important}


/* =========================================================
   BP CREATE V17.26 — COMPACT RHYTHM + EQUAL COLUMN HEIGHTS
   Requested visual cleanup.
   ========================================================= */
@media(min-width:981px){
  .workspace.create-premium{align-items:stretch!important}
  .controls,.create-side,.preview{height:100%!important;align-self:stretch!important}
  .preview{display:grid!important;grid-template-rows:32px minmax(0,1fr) 30px!important}
  .stage{min-height:0!important;height:auto!important}

  /* tighten the marked vertical gaps */
  .controls .step-intro{padding-top:9px!important;margin-bottom:5px!important}
  .controls .prompt-label{margin-bottom:4px!important}
  .controls .promptbox{margin-top:0!important;margin-bottom:6px!important}
  .controls .section-caption:not(.compact){margin-top:3px!important;padding-top:7px!important;margin-bottom:3px!important}
  .controls .filter-grid{margin-top:4px!important;padding-bottom:6px!important}
}

/* Orientation cards: labels only; dimensions intentionally hidden/removed. */
.orientation button{min-height:54px!important}
.orientation button span{display:block!important;text-align:center!important}
.orientation button strong{display:block!important}


/* =========================================================
   BP CREATE V17.27 — SCREENSHOT SPACING + FOOTER SCALE
   Tighten marked gaps; enlarge bottom flow and build mark.
   ========================================================= */
@media(min-width:981px){
  /* Red marks: compress space around prompt and shaping rows. */
  .controls .step-intro{padding-bottom:2px!important;margin-bottom:2px!important}
  .controls .promptbox{margin-bottom:2px!important}
  .controls .section-caption:not(.compact){margin-top:0!important;padding-top:5px!important;margin-bottom:0!important}
  .controls .filter-grid{margin-top:2px!important;padding-top:2px!important;padding-bottom:3px!important}
  .controls .advanced-toggle{margin-top:1px!important}

  /* Red mark under preview: let the preview fill more of its column. */
  .preview{grid-template-rows:32px minmax(0,1fr) 22px!important}
  .manifest{padding-top:4px!important;align-items:center!important}

  /* Yellow mark: larger bottom journey labels. */
  .flow{font-size:10px!important;letter-spacing:.14em!important;gap:22px!important;padding:18px 0!important}
  .flow span{gap:9px!important;align-items:center!important}
  .flow span b{font-size:10px!important}
  .flow i{width:70px!important}

  /* Pink mark: enlarge the build/version signature at lower left. */
  .bp-build-create{
    font-size:10px!important;
    font-weight:700!important;
    letter-spacing:.16em!important;
    padding-top:14px!important;
    padding-bottom:18px!important;
    text-align:left!important;
  }
}


/* BP CREATE V17.28 — interpretation helper copy */
.left-fine{
  font-size:13px!important;
  line-height:1.5!important;
  color:#70695f!important;
  margin-top:9px!important;
  padding:0 8px!important;
}


/* =========================================================
   BP CREATE V17.29 — INTRO READABILITY + SUBTLE TECH PREVIEW
   ========================================================= */
.create-side .side-start > p{
  font-size:15px!important;
  line-height:1.62!important;
}

/* Subtle premium technology motion: restrained, artwork-safe. */
.preview .stage:before{
  content:"";
  position:absolute;
  z-index:2;
  left:7px;
  right:7px;
  top:7px;
  height:1px;
  pointer-events:none;
  opacity:.34;
  background:linear-gradient(90deg,transparent 0%,rgba(155,122,77,.18) 24%,rgba(55,169,222,.55) 50%,rgba(155,122,77,.18) 76%,transparent 100%);
  box-shadow:0 0 10px rgba(55,169,222,.12);
  animation:bpPreviewScan 6.8s ease-in-out infinite;
}
.preview .grid{
  animation:bpPreviewGrid 5.5s ease-in-out infinite!important;
}
.preview-top b i{
  animation:bpPreviewReady 2.6s ease-in-out infinite!important;
}
@keyframes bpPreviewScan{
  0%,100%{transform:translateY(0);opacity:.16}
  50%{transform:translateY(590px);opacity:.38}
}
@keyframes bpPreviewGrid{
  0%,100%{opacity:.10}
  50%{opacity:.22}
}
@keyframes bpPreviewReady{
  0%,100%{opacity:.55;box-shadow:0 0 4px rgba(55,169,222,.18)}
  50%{opacity:1;box-shadow:0 0 10px rgba(55,169,222,.45)}
}
@media(max-width:980px){
  .preview .stage:before{animation-duration:7.5s}
  @keyframes bpPreviewScan{
    0%,100%{transform:translateY(0);opacity:.14}
    50%{transform:translateY(500px);opacity:.32}
  }
}
@media(prefers-reduced-motion:reduce){
  .preview .stage:before,.preview .grid,.preview-top b i{animation:none!important}
}


/* =========================================================
   BP CREATE V17.30 — STRONGER TECHNOLOGY PREVIEW MOTION
   More visible scan, grid energy and corner telemetry.
   ========================================================= */
.preview .stage:before{
  height:2px!important;
  opacity:.62!important;
  background:linear-gradient(90deg,transparent 0%,rgba(55,169,222,.16) 12%,rgba(55,169,222,.88) 48%,rgba(178,94,226,.62) 58%,rgba(155,122,77,.18) 82%,transparent 100%)!important;
  box-shadow:0 0 8px rgba(55,169,222,.35),0 0 22px rgba(55,169,222,.18)!important;
  animation:bpPreviewScanStrong 4.2s cubic-bezier(.45,0,.55,1) infinite!important;
}
.preview .grid{
  opacity:.24!important;
  background-size:30px 30px!important;
  animation:bpPreviewGridStrong 3.2s ease-in-out infinite!important;
}
.preview .corners{
  opacity:.55!important;
  animation:bpPreviewCorners 2.8s ease-in-out infinite!important;
}
.preview-top b i{
  animation:bpPreviewReadyStrong 1.65s ease-in-out infinite!important;
}
.blank .bp{
  animation:bpCorePulse 3.4s ease-in-out infinite!important;
}
@keyframes bpPreviewScanStrong{
  0%{transform:translateY(0);opacity:.25}
  45%,55%{opacity:.78}
  100%{transform:translateY(590px);opacity:.20}
}
@keyframes bpPreviewGridStrong{
  0%,100%{opacity:.15;filter:brightness(.95)}
  50%{opacity:.32;filter:brightness(1.2)}
}
@keyframes bpPreviewCorners{
  0%,100%{opacity:.34}
  50%{opacity:.72}
}
@keyframes bpPreviewReadyStrong{
  0%,100%{opacity:.5;transform:scale(.86);box-shadow:0 0 4px rgba(55,169,222,.22)}
  50%{opacity:1;transform:scale(1.18);box-shadow:0 0 13px rgba(55,169,222,.62)}
}
@keyframes bpCorePulse{
  0%,100%{box-shadow:0 0 0 rgba(55,169,222,0)}
  50%{box-shadow:0 0 0 5px rgba(55,169,222,.045),0 0 22px rgba(55,169,222,.10)}
}
@media(prefers-reduced-motion:reduce){
  .preview .stage:before,.preview .grid,.preview .corners,.preview-top b i,.blank .bp{animation:none!important}
}


/* BP CREATE V18.1 — real generated artwork inside the locked preview composition */
.result-single .result-image{position:relative;width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f3efe8}
.result-single .result-image img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:10px}
.workspace[data-state="result"] .preview .stage:before{display:none!important}


/* BP CREATE V18.2 — HOME STUDIO LANGUAGE MOVED INTO RIGHT PREVIEW COLUMN */
.preview-create-studio{background:linear-gradient(180deg,#141716,#0f1314)!important;color:#eee!important;padding:14px!important;border:1px solid #21384b!important;box-shadow:0 24px 60px rgba(15,25,31,.18)!important;grid-template-rows:34px minmax(0,1fr) 108px!important}
.preview-create-studio .preview-top{color:#eef3f2!important;border-bottom:1px solid #2b302f!important;padding:0 2px 9px!important}
.preview-create-studio .preview-top span{font-size:8px!important;letter-spacing:.18em!important;font-weight:800!important}
.preview-create-studio .preview-top b{color:#eef3f2!important;font-size:8px!important;letter-spacing:.16em!important}
.preview-create-studio .stage{margin-top:10px!important;background-color:#1d2222!important;background-image:linear-gradient(rgba(49,163,231,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(49,163,231,.045) 1px,transparent 1px)!important;background-size:30px 30px!important;border:1px solid #2b3433!important;border-radius:0!important;box-shadow:none!important;padding:0!important}
.preview-create-studio .blank{background:transparent!important;border-radius:0!important}
.preview-create-studio .preview-demo-frame{height:82%;aspect-ratio:4/5;background:#111;padding:9px;box-shadow:0 16px 35px rgba(0,0,0,.55);position:relative;z-index:1}
.preview-create-studio .preview-demo-frame img{display:block;width:100%;height:100%;object-fit:cover}
.preview-create-studio .corners{inset:18px!important;opacity:.9!important}
.preview-create-studio .stage:after{background:linear-gradient(90deg,#249ff0,#b26cff)!important;box-shadow:0 0 14px rgba(65,171,255,.55)!important;opacity:.7!important}
.preview-create-studio .preview-demo-prompt{padding:15px 10px 6px;background:linear-gradient(180deg,#171714,#151817);min-height:0}
.preview-create-studio .preview-demo-prompt>span{font-size:7px;letter-spacing:.24em;color:#8ab6c8}
.preview-create-studio .preview-demo-prompt p{font-family:Georgia,serif;font-size:13px;line-height:1.4;margin:9px 0 12px;color:#f2eee7}
.preview-create-studio .preview-demo-prompt>i{display:block;height:1px;background:#444;position:relative;overflow:hidden}
.preview-create-studio .preview-demo-prompt>i em{display:block;width:68%;height:1px;background:linear-gradient(90deg,#249ff0,#b26cff);animation:bpCreatePreviewProgress 5.4s ease-in-out infinite}
.preview-create-studio .preview-demo-prompt>div{display:flex;justify-content:space-between;margin-top:8px;color:#8ab6c8;align-items:center}
.preview-create-studio .preview-demo-prompt small,.preview-create-studio .preview-demo-prompt b{font-size:7px;letter-spacing:.18em;font-weight:700}
@keyframes bpCreatePreviewProgress{0%,100%{width:28%}50%{width:92%}}
.workspace[data-state="result"] .preview-create-studio .preview-demo-prompt>i em{animation:none;width:100%}
@media(prefers-reduced-motion:reduce){.preview-create-studio .preview-demo-prompt>i em{animation:none!important;width:68%}}


/* Introductory offer until account-specific balance is available */
.studio-head .credit b{font-size:17px;letter-spacing:.01em;white-space:nowrap}
.studio-head .credit span{line-height:1.4}

/* Small, account-specific rights summary and the payment handoff. */
.studio-head .studio-head-actions .credit.generation-credit{width:230px!important;min-width:200px;gap:4px;padding:12px 15px!important;text-align:left!important}
.generation-credit small{font:11px/1.45 Arial,sans-serif;color:#655e52}
.generation-credit a{font:700 12px/1.4 Arial,sans-serif;color:#255c54;margin-top:4px;text-underline-offset:3px}
.generation-payment-notice{display:grid;gap:6px;margin-top:12px;padding:13px 15px;border:1px solid #c8b995;border-radius:10px;background:#fff9ec;color:#544932;font:12px/1.5 Arial,sans-serif}
.generation-payment-notice[hidden]{display:none!important}
.generation-payment-notice strong{font-size:14px}
.generation-payment-notice a{justify-self:start;background:#314f43;color:white;text-decoration:none;border-radius:7px;padding:9px 13px;margin-top:3px;font-weight:700}
.generation-payment-notice [hidden]{display:none!important}.generation-payment-notice button{justify-self:start;border:1px solid #c1c9b7;border-radius:7px;background:transparent;color:#314f43;padding:9px 12px;font:700 12px Arial,sans-serif;cursor:pointer}

/* BP CREATE V18.3 — selected result bridge */
.bp-selection-notice{display:none;margin-top:16px;padding:18px;border:1px solid #c9b990;background:#f8f4eb;color:#24231f;line-height:1.5}
.bp-selection-notice.show{display:grid;gap:7px}
.bp-selection-notice b{font-family:Georgia,serif;font-size:19px;font-weight:400}
.bp-selection-notice span{font-size:13px}
.bp-selection-notice a{font-size:11px;font-weight:800;letter-spacing:.09em;color:inherit;text-decoration:underline;text-underline-offset:3px;margin-top:6px}

/* Official transparent brand artwork */
header .logo.bp-logo-image{display:block;position:relative;overflow:hidden;width:145px;height:69px;line-height:normal;letter-spacing:normal}
header .logo.bp-logo-image img{display:block;position:absolute;left:0;top:-6px;width:145px;height:auto;max-width:none}

/* Painter robot: brush stroke redraws while an AI request is pending. */
.bp-painter{width:70px;height:82px;position:relative;flex:none;animation:bp-paint-hand 2.6s ease-in-out infinite;transform-origin:70% 67%;filter:drop-shadow(0 5px 10px rgba(33,149,225,.24))}
.bp-painter--large{width:106px;height:124px}
.bp-robot{display:block;width:100%;height:100%;object-fit:contain}
.bp-robot--large{width:100%;height:100%}
.bp-paint-stroke{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 2px #61dafa)}
.bp-paint-stroke path{stroke-dasharray:50;stroke-dashoffset:50;animation:bp-draw-stroke 2.6s ease-in-out infinite}
.bp-robot-wait{display:flex;align-items:center;gap:12px;margin:10px 0;color:#2877a9;font-size:13px}
.bp-robot-wait[hidden]{display:none}
@keyframes bp-paint-hand{0%,100%{transform:rotate(-3deg)}45%{transform:rotate(3deg)}}
@keyframes bp-draw-stroke{0%,12%{stroke-dashoffset:50;opacity:0}35%,70%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@media(prefers-reduced-motion:reduce){.bp-painter,.bp-paint-stroke path{animation:none}.bp-paint-stroke path{stroke-dashoffset:0;opacity:1}}

/* Pixi states: brush while waiting, one cheerful bounce on success, gentle pause on error. */
.piksi-feedback{display:flex;align-items:center;gap:12px;margin:10px 0 12px;padding:9px 12px;border:1px solid #c9dfd6;border-radius:11px;background:#f3faf6;color:#264d3f}
.piksi-feedback[hidden]{display:none}
.piksi-feedback--error{background:#fff8ef;border-color:#e4d2b6;color:#695036}
.piksi-feedback-figure{width:55px;height:65px;animation:none;filter:drop-shadow(0 5px 9px rgba(33,149,225,.2))}
.piksi-feedback-copy{display:grid;gap:3px;min-width:0}
.piksi-feedback-copy b{font-size:13px;line-height:1.25}
.piksi-feedback-copy small{font-size:12px;line-height:1.35;color:inherit}
.piksi-feedback-mark{position:absolute;right:-2px;top:1px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#2f8466;color:white;font:700 14px Arial,sans-serif}
.piksi-feedback--success .piksi-feedback-mark:after{content:"✓"}
.piksi-feedback--error .piksi-feedback-mark{background:#bb8153}
.piksi-feedback--error .piksi-feedback-mark:after{content:"!"}
.piksi-feedback--success .piksi-feedback-figure{animation:piksi-cheer .8s ease-out 1 both}
.piksi-feedback--success .piksi-feedback-mark{animation:piksi-pop .7s .25s ease-out both}
.piksi-feedback--error .piksi-feedback-figure{animation:piksi-pause .7s ease-out 1 both}
@keyframes piksi-cheer{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-12px) rotate(-8deg)}65%{transform:translateY(-4px) rotate(7deg)}}
@keyframes piksi-pop{0%{transform:scale(.2);opacity:0}65%{transform:scale(1.25);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes piksi-pause{0%{transform:rotate(0)}45%{transform:rotate(-12deg)}100%{transform:rotate(-7deg)}}
@media(prefers-reduced-motion:reduce){.piksi-feedback--success .piksi-feedback-figure,.piksi-feedback--success .piksi-feedback-mark,.piksi-feedback--error .piksi-feedback-figure{animation:none}}

/* Keep the interpretation panel visible while Pixi is still working. */
.workspace[data-state="interpreting"] .side-interpreted{display:block}
.workspace[data-state="interpreting"] .blank{background:linear-gradient(155deg,#f2f8fa,#e9f1f3)!important}

/* Pixi presents the sample flow beside the free-design message. */
.studio-head-actions{display:flex;align-items:stretch;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.studio-head-actions .credit{width:182px!important;min-width:182px;display:flex;flex-direction:column;justify-content:center}
.piksi-tour-trigger{display:flex;align-items:center;gap:10px;min-height:78px;width:min(330px,100%);padding:7px 12px;border:1px solid #bed4de;border-radius:12px;background:#f2f9fb;color:#20343c;text-align:left;cursor:pointer}
.piksi-tour-trigger:hover,.piksi-tour-trigger:focus-visible{border-color:#4fa8cd;background:#e5f4f9}
.piksi-tour-trigger img{display:block;width:54px;height:64px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 7px #378cc240)}
.piksi-tour-trigger span{min-width:0;display:grid;gap:4px}
.piksi-tour-trigger b{font-size:11px;line-height:1.25;letter-spacing:.05em}
.piksi-tour-trigger small{font-size:11px;line-height:1.3;color:#536b76;font-weight:400;letter-spacing:0}
.piksi-tour-trigger i{font-style:normal;font-size:17px;flex:none;margin-left:auto}
.piksi-tour{border:0;border-radius:18px;width:min(740px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;background:#fcfaf6;color:#24231f;box-shadow:0 28px 85px #101b24a0;overflow:auto}
.piksi-tour::backdrop{background:rgba(13,26,34,.7)}
.piksi-tour-inner{position:relative;display:grid;grid-template-columns:minmax(180px,.75fr) minmax(0,1.25fr);gap:24px;align-items:center;padding:34px}
.piksi-tour-close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:#5c6466}
.piksi-tour-character{min-height:270px;display:grid;place-items:center;border-radius:12px;background:radial-gradient(circle,#33627a,#112e41)}
.piksi-tour-character img{display:block;max-width:90%;max-height:250px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 0 16px #50ceff8c);animation:piksi-tour-glow 3s ease-in-out infinite}
.piksi-tour-copy>small{font-size:10px;letter-spacing:.12em;color:#24799a;font-weight:800}
.piksi-tour-copy h2{font:normal clamp(27px,3vw,37px)/1.1 Georgia,serif;margin:15px 0}
.piksi-tour-copy p{font-size:15px;line-height:1.55;color:#4c4b46;min-height:95px}
.piksi-tour-progress{height:4px;border-radius:5px;background:#dfe8e7;margin:24px 0}
.piksi-tour-progress span{display:block;height:100%;border-radius:5px;background:#318cb1;transition:width .25s}
.piksi-tour-actions{display:flex;justify-content:space-between;gap:12px}
.piksi-tour-actions button{min-height:43px;padding:10px 16px;border:1px solid #bdc7c8;background:#fff;color:#253e4b;font-weight:800;font-size:11px;cursor:pointer}
.piksi-tour-actions button:last-child{background:#1b303b;border-color:#1b303b;color:#fff}
.piksi-tour-actions button:disabled{opacity:.38;cursor:default}
@keyframes piksi-tour-glow{0%,100%{filter:drop-shadow(0 0 8px #50ceff70)}50%{filter:drop-shadow(0 0 23px #50ceffdb)}}
@media(max-width:1080px){.studio-head{align-items:flex-start;flex-direction:column}.studio-head-actions{justify-content:flex-start;width:100%}}
@media(max-width:550px){.studio-head-actions{display:grid;grid-template-columns:1fr;gap:9px}.studio-head-actions .credit,.piksi-tour-trigger{width:100%!important}.piksi-tour-inner{grid-template-columns:1fr;padding:24px 20px}.piksi-tour-character{min-height:140px}.piksi-tour-character img{max-height:135px}.piksi-tour-copy p{min-height:0}}
@media(prefers-reduced-motion:reduce){.piksi-tour-character img{animation:none}.piksi-tour-progress span{transition:none}}

/* Artwork name and clear, friendly content guidance. */
.content-care{margin:10px 2px 0;padding:11px 13px;border-left:3px solid #a65c43;background:#f8f2e9;color:#514a42;font-size:11px;line-height:1.55}.content-care strong{color:#293c3a}.interpret-art-title{margin:12px 0 8px;font:normal 23px/1.2 Georgia,serif;color:#233b3c}.side-art-title{margin:2px 0 16px!important;font:normal 20px/1.25 Georgia,serif;color:#9a4c37}.result-art-title{position:absolute;left:14px;top:14px;max-width:calc(100% - 28px);padding:7px 10px;border-radius:7px;background:rgba(6,24,34,.84);color:#fff;font:normal 17px/1.2 Georgia,serif;overflow-wrap:anywhere}


/* Keep the preview in normal document flow and let it fill the interpretation column. */
@media (min-width:981px){
  .workspace.create-premium{grid-template-columns:minmax(330px,32%) minmax(0,1fr)!important;align-items:start!important}
  .workspace.create-premium>.controls{grid-column:1!important;grid-row:1!important;height:auto!important;align-self:start!important}
  .workspace.create-premium>.create-right-stack{grid-column:2!important;grid-row:1!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:22px;width:100%;min-width:0}
  .workspace.create-premium>.create-right-stack>.create-side,
  .workspace.create-premium>.create-right-stack>.preview{position:static!important;top:auto!important;grid-column:auto!important;grid-row:auto!important;flex:none!important;align-self:stretch!important;width:100%!important;max-width:none!important;height:auto!important;min-height:0!important}
  .workspace.create-premium>.create-right-stack>.preview-create-studio{grid-template-rows:34px minmax(720px,auto) 108px!important}
  .workspace.create-premium>.create-right-stack>.preview-create-studio .stage{height:auto!important;min-height:720px!important}
}
@media (max-width:980px){
  .workspace.create-premium>.create-right-stack{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:18px;min-width:0}
  .workspace.create-premium>.create-right-stack>.preview{position:static!important;grid-column:auto!important;grid-row:auto!important;width:100%!important;height:auto!important}
}


/* v2026.10.02-profile-create-ux.1 */
.wait-hint{display:block;margin-top:7px;font-size:12px;line-height:1.5;color:#536b76}.preview #loading{scroll-margin-top:100px;padding:24px 18px;text-align:center;gap:14px}.preview #loading small{max-width:320px;font:13px/1.55 Arial,sans-serif}.preview #loading .bp-painter{flex-shrink:0}
@media(max-width:850px){.workspace.create-premium>.create-right-stack>.preview-create-studio{grid-template-rows:34px minmax(360px,auto) auto!important;min-height:0!important}.workspace.create-premium>.create-right-stack>.preview-create-studio .stage{height:auto!important;min-height:360px!important}.workspace[data-state="generating"] .preview-create-studio .stage{min-height:400px!important}.preview-create-studio .preview-demo-frame{height:auto;max-height:300px;width:min(75%,240px);aspect-ratio:4/5}.preview-create-studio .preview-demo-prompt{min-height:110px}.preview #loading{scroll-margin-top:86px}.piksi-tour{max-height:calc(100dvh - 24px);width:calc(100vw - 24px);overscroll-behavior:contain}.piksi-tour-inner{min-width:0}.piksi-tour-actions{position:sticky;bottom:0;background:#fcfaf6;padding:8px 0}}
@media(max-width:850px){.flow{flex-wrap:wrap;justify-content:center;row-gap:12px}.flow span{white-space:normal}}
.workspace[data-state="generating"] .preview .blank{display:none!important}.preview #loading{z-index:3}

/* A completed artwork must never overlap interpretation or retry guidance. */
.workspace:not([data-state="result"]) #resultGrid{display:none!important}

/* On mobile, show the finished artwork before its completion/actions panel. */
@media(max-width:980px){
  .workspace.create-premium[data-state="result"]>.create-right-stack>.preview{order:0!important}
  .workspace.create-premium[data-state="result"]>.create-right-stack>.create-side{order:1!important}
}

/* Reveal the artwork preview only once generation starts. */
.workspace.create-premium .preview-create-studio[hidden]{display:none!important}
.workspace:not([data-state="generating"]):not([data-state="result"]) .preview-create-studio{display:none!important}
.workspace[data-state="interpreting"] .interpretation,.workspace[data-state="interpreted"] .interpretation{border:2px solid #3f5649!important;background:#fffdf9!important;box-shadow:0 8px 24px #243d3512}
#interpretText{font-size:16px;line-height:1.75;color:#243d35}


/* Supplied Pixi artwork includes its brush; avoid an old overlay on the new character. */
.bp-paint-stroke{display:none}
.piksi-feedback-figure{filter:drop-shadow(0 5px 9px #9a603b20)}
.piksi-tour-character{background:radial-gradient(circle,#fff7eb,#ecdfcf)}
.piksi-tour-character img{animation:none;filter:drop-shadow(0 6px 12px #9a603b25)}

/* Real server phase and elapsed time; no simulated percentage or finish estimate. */
.preview #loading #generationStageTitle{font:600 21px/1.3 Georgia,serif;letter-spacing:0;text-transform:none;max-width:100%;overflow-wrap:anywhere}
.preview #generationElapsed,.preview #previewElapsed{font:12px/1.5 Arial,sans-serif;font-variant-numeric:tabular-nums;color:#b8c4c0}
.preview #generationElapsed{padding:7px 12px;border:1px solid #ffffff24;border-radius:20px}
.preview #previewElapsed{font-size:11px;letter-spacing:0}
.preview .preview-demo-prompt>div{gap:12px;flex-wrap:wrap}
.preview #previewDemoText{font-size:13px;line-height:1.5}
.preview #loading [hidden],.preview #previewElapsed[hidden]{display:none!important}

/* A quiet status stack. Speech words are text, never loading indicators. */
.preview #loading{background:linear-gradient(145deg,rgba(35,54,46,.97),rgba(19,30,26,.98));gap:12px;padding:28px 22px;color:#f7f4e9}
.preview #loading>.generation-spinner{width:32px;height:32px;border:2px solid #ffffff16;border-top-color:#d3ba85;border-right-color:#82a78e;animation:spin 1.6s linear infinite;margin:2px 0 6px}
.preview #loading #generationStageTitle{font:500 clamp(21px,3vw,26px)/1.3 Georgia,serif;color:#faf6eb;margin:0;letter-spacing:.01em}
body .preview #loading #generationStageDetail{display:block;width:auto;max-width:32ch;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;font:400 14px/1.65 Arial,sans-serif;color:#c3d1c7;text-align:center;text-wrap:balance;overflow-wrap:anywhere}
body .preview #loading #generationStageDetail:after{display:none;content:none}
.preview #loading #generationElapsed{font:400 12px/1.5 Arial,sans-serif;font-variant-numeric:tabular-nums;color:#b4c7b9;background:#ffffff05;border:1px solid #ffffff12;border-radius:10px;padding:7px 12px;margin:6px 0 0;letter-spacing:.02em}
@media(prefers-reduced-motion:reduce){.preview #loading>.generation-spinner{animation:none}}