:root{--bg:#0a0d12;--panel:#121720;--panel2:#171e29;--line:#283142;--text:#eef2f7;--muted:#9aa8ba;--pink:#ff4f93;--violet:#7c5cff;--green:#2ed38b;--gold:#d7b36a}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 70% 0,#1b1836 0,#0a0d12 38%);color:var(--text);font:14px Inter,Segoe UI,Arial,sans-serif}button,input,textarea,select{font:inherit} input::placeholder,textarea::placeholder{color:#7f8da1!important;opacity:1!important} input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#7f8da1!important;opacity:1!important}.app{min-height:100vh;display:grid;grid-template-columns:235px 1fr}.side{position:sticky;top:0;height:100vh;background:#090c11e8;border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column}.brand{padding:10px 8px 16px}.brand img{display:block;max-width:100%;height:auto}.brand .brandTag{font-size:10px;color:var(--muted);letter-spacing:1.8px;margin-top:10px;padding-left:4px}.topBrand{display:flex;align-items:center;gap:12px}.topBrand img{height:27px;width:auto;max-width:220px}.topBrand .titleBlock{display:flex;flex-direction:column;gap:2px}.topBrand .titleBlock small{color:var(--muted);font-size:10px;letter-spacing:1.2px}.multixMark{width:38px;height:38px;object-fit:contain}.nav{margin-top:18px}.nav button{display:block;width:100%;padding:12px;border:0;border-radius:10px;text-align:left;background:transparent;color:#b8c2d1;cursor:pointer;margin:3px 0}.nav button.active,.nav button:hover{background:#1b2330;color:#fff}.api{margin-top:auto;padding:12px;border:1px solid var(--line);border-radius:12px;background:#11161f}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#f0a83e;margin-right:6px}.dot.on{background:var(--green)}main{min-width:0}.top{height:68px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 24px;background:#0d1118cc;backdrop-filter:blur(14px);position:sticky;top:0;z-index:5}.top h1{font-size:17px}.topActions{display:flex;gap:8px}.btn{border:1px solid var(--line);background:#202a39;color:#fff;border-radius:10px;padding:10px 14px;cursor:pointer}.btn:hover{filter:brightness(1.12)}.btn.primary{border:0;background:linear-gradient(135deg,var(--pink),var(--violet))}.btn.approve{border:0;background:linear-gradient(135deg,#18a768,var(--green));color:#04150d;font-weight:800}.btn.danger{background:#3a1f28;color:#ffb4c8}.btn:disabled{opacity:.5;cursor:not-allowed}.content{padding:22px}.page{display:none}.page.active{display:block}.grid{display:grid;gap:16px}.kpis{grid-template-columns:repeat(4,1fr)}.card{background:linear-gradient(180deg,#151b25,#11161e);border:1px solid var(--line);border-radius:16px;padding:16px}.kpi b{font-size:29px;display:block;margin-top:8px}.muted{color:var(--muted)}.hero{display:grid;grid-template-columns:1.4fr .8fr;gap:16px;margin-bottom:16px}.heroMain{padding:26px;background:linear-gradient(135deg,#171d28,#2b1d4e);border:1px solid #463a72;border-radius:20px}.heroMain h2{font-size:31px;max-width:650px;margin:0 0 12px}.pipeline{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.step{padding:8px 10px;border-radius:999px;background:#ffffff0e;border:1px solid #ffffff18}.projects{grid-template-columns:repeat(3,1fr)}.project{cursor:pointer;position:relative}.project:hover{transform:translateY(-2px)}.status{font-size:11px;padding:5px 8px;border-radius:999px;background:#262f3d}.status.approved{background:#143c2d;color:#6bedad}.thumb{height:170px;border-radius:12px;background:#f6f4ef;display:grid;place-items:center;margin-bottom:12px;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:contain}.studio{display:grid;grid-template-columns:360px minmax(420px,1fr) 340px;gap:16px;align-items:start}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}.panelHead{padding:15px 16px;border-bottom:1px solid var(--line);font-weight:750}.panelBody{padding:14px}.field{margin-bottom:12px}.field label{display:block;font-size:12px;color:#b7c1cf;margin-bottom:6px}.field input,.field textarea,.field select{width:100%;padding:10px 11px;border-radius:9px;border:1px solid #303b4c;background:#0d1219;color:#fff}.field textarea{min-height:70px;resize:vertical}.fieldHelp{display:block;color:#7f8da1;font-size:10px;line-height:1.35;margin-top:5px}.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.drop{border:1px dashed #4b5870;border-radius:13px;padding:18px;text-align:center;background:#0d1219;cursor:pointer}.drop.drag{border-color:var(--pink);background:#231425}.fontGallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}.fontOption{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px;cursor:pointer;color:#222;transition:.2s}.fontOption:hover{transform:translateY(-1px);border-color:var(--violet)}.fontOption.selected{outline:3px solid var(--pink);border-color:transparent}.fontOption img{width:100%;height:42px;object-fit:contain;display:block}.fontOption small{display:block;text-align:center;font-size:10px;margin-top:4px;color:#555}.fontRefBox{border:1px solid var(--line);border-radius:12px;padding:12px;background:#0d1219;margin-top:10px}.fontRefBox .drop{margin-top:8px}.fontRefLabel{display:flex;align-items:center;justify-content:space-between;gap:10px}.fontBadge{font-size:10px;color:#fff;background:#7c5cff;padding:3px 7px;border-radius:999px}.refs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.ref{background:#1a2230;border:1px solid var(--line);border-radius:10px;overflow:hidden;position:relative}.ref img{width:100%;height:80px;object-fit:cover;background:#fff}.ref .file{height:80px;display:grid;place-items:center;font-size:24px}.ref small{display:block;padding:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ref button{position:absolute;right:5px;top:5px;border:0;border-radius:99px;background:#000b;color:#fff;cursor:pointer}.preview{min-height:650px;display:flex;flex-direction:column}.artboard{flex:1;min-height:480px;display:grid;place-items:center;padding:24px;background:radial-gradient(circle,#263143,#0c1118);position:relative}.artboard img{max-width:100%;max-height:570px;object-fit:contain;background:#fff;border-radius:12px;box-shadow:0 30px 90px #0009}.placeholder{text-align:center;color:#9aa8ba;max-width:420px}.placeholder .icon{font-size:64px}.resultActions{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);flex-wrap:wrap}.chat{height:650px;display:flex;flex-direction:column}.messages{flex:1;overflow:auto;padding:13px}.msg{padding:10px 12px;border-radius:13px;margin:7px 0;white-space:pre-wrap;line-height:1.42}.msg.user{margin-left:35px;background:#6d43df}.msg.assistant{margin-right:24px;background:#202938;border:1px solid #303b4c}.composer{padding:10px;border-top:1px solid var(--line)}.composer textarea{width:100%;height:72px;background:#0d1219;border:1px solid var(--line);color:#fff;border-radius:10px;padding:10px;resize:none}.composerBtns{display:flex;justify-content:flex-end;gap:7px;margin-top:7px}.analysis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.analysis .box{background:#0e141c;border:1px solid var(--line);border-radius:10px;padding:11px}.history{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.history img{width:100%;aspect-ratio:3/2;object-fit:contain;background:white;border-radius:10px}.approvedBanner{padding:13px;border-radius:12px;background:#143c2d;color:#78efb7;border:1px solid #245b44;margin-bottom:12px}.hidden{display:none!important}.toast{position:fixed;right:22px;bottom:22px;background:#202937;border:1px solid #3a4659;border-radius:12px;padding:12px 15px;z-index:30;box-shadow:0 15px 50px #0008}.modal{position:fixed;inset:0;background:#000b;display:grid;place-items:center;z-index:20;padding:20px}.modalBox{max-width:520px;width:100%;background:#151b25;border:1px solid var(--line);border-radius:18px;padding:20px}@media(max-width:1200px){.studio{grid-template-columns:330px 1fr}.studio>.panel:last-child{grid-column:1/-1}.chat{height:460px}}@media(max-width:850px){.app{grid-template-columns:1fr}.side{display:none}.studio,.hero{grid-template-columns:1fr}.kpis,.projects,.history{grid-template-columns:1fr 1fr}.content{padding:12px}}@media(max-width:520px){.kpis,.projects,.history,.analysis,.row{grid-template-columns:1fr}.top{padding:0 12px}.topActions .btn:not(.primary){display:none}}

.loginScreen{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 70% 0,#2a2150,#090c11 48%);display:grid;place-items:center;padding:20px}.loginCard{width:min(430px,100%);background:#121720;border:1px solid #313b50;border-radius:22px;padding:28px;box-shadow:0 30px 100px #000b}.loginCard img{max-width:210px;display:block;margin:0 auto 22px}.loginCard h2{text-align:center;margin:0 0 7px}.loginCard p{text-align:center;color:var(--muted);margin:0 0 22px}.loginCard input{width:100%;padding:13px;margin:6px 0 12px;border-radius:10px;border:1px solid #303b4c;background:#0d1219;color:white}.loginCard .btn{width:100%;margin-top:5px}.loginError{color:#ff94b6;min-height:20px;text-align:center;margin-top:10px}.userChip{display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:#151c27}.userChip small{display:block;color:var(--muted)}.adminUsers{display:grid;gap:10px}.userRow{display:grid;grid-template-columns:1fr 1fr 100px 110px auto;gap:9px;align-items:center;background:#111722;border:1px solid var(--line);padding:12px;border-radius:12px}.userRow input,.userRow select{width:100%;padding:9px;border-radius:8px;border:1px solid #303b4c;background:#0d1219;color:white}.adminOnly{display:none}.adminOnly.show{display:block}@media(max-width:850px){.userRow{grid-template-columns:1fr}}

/* MIA 4.0 - experiencia premium de geracao */
.generationOverlay{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:24px;background:linear-gradient(160deg,rgba(10,15,24,.94),rgba(18,15,38,.94));backdrop-filter:blur(8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease}.generationOverlay.show{opacity:1;visibility:visible;pointer-events:none}.generationCard{width:min(470px,92%);padding:32px 30px;border-radius:24px;background:linear-gradient(160deg,rgba(28,35,50,.98),rgba(20,17,41,.98));border:1px solid rgba(151,126,255,.35);box-shadow:0 28px 90px #000c;text-align:center;position:relative;overflow:hidden}.generationCard:before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,#ff4f9330,transparent,#7c5cff35,transparent);animation:miaRotate 6s linear infinite}.generationInner{position:relative;z-index:2}.generationLogo{width:220px;max-width:70%;height:auto;filter:drop-shadow(0 12px 35px #7c5cff50);animation:miaPulse 2.2s ease-in-out infinite}.miaOrb{width:76px;height:76px;margin:26px auto 18px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff,#ff79ab 20%,#7c5cff 58%,#201747 100%);box-shadow:0 0 0 10px #7c5cff12,0 0 55px #7c5cff70;animation:miaFloat 2.4s ease-in-out infinite}.miaOrb span{font-size:28px}.generationTitle{font-size:25px;margin:0 0 7px}.generationStage{min-height:24px;color:#c6cfdd;font-size:15px;margin-bottom:22px;transition:opacity .2s}.progressTrack{height:9px;background:#090d14;border-radius:999px;overflow:hidden;border:1px solid #303a4d}.progressBar{height:100%;width:8%;border-radius:999px;background:linear-gradient(90deg,#ff4f93,#9b70ff,#5ae0c0);box-shadow:0 0 20px #7c5cff;transition:width .7s cubic-bezier(.2,.8,.2,1);position:relative}.progressBar:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff8,transparent);transform:translateX(-100%);animation:miaShimmer 1.4s infinite}.generationHint{margin-top:14px;color:#758398;font-size:11px}.imageError{max-width:460px;text-align:center;color:#ffb2c8}.imageError .retry{margin-top:12px}.revealImage{animation:imageReveal .65s cubic-bezier(.2,.8,.2,1)}.generationBadge{display:none;align-items:center;gap:7px;font-size:11px;padding:6px 9px;border-radius:999px;background:#2a2147;color:#d9ceff;border:1px solid #5e4a91}.generationBadge.show{display:inline-flex}.generationBadge i{width:8px;height:8px;border-radius:50%;background:#a98cff;box-shadow:0 0 12px #8f6fff;animation:miaPulse 1.2s infinite}
@keyframes miaRotate{to{transform:rotate(360deg)}}@keyframes miaPulse{50%{transform:scale(1.035);filter:drop-shadow(0 16px 45px #ff4f9360)}}@keyframes miaFloat{50%{transform:translateY(-7px) scale(1.03)}}@keyframes miaShimmer{to{transform:translateX(100%)}}@keyframes imageReveal{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:scale(1)}}

.printHero{display:grid;grid-template-columns:minmax(280px,.75fr) 1.25fr;gap:18px;margin-bottom:18px}.approvedLogoCard{background:#fff;border-radius:18px;min-height:290px;display:grid;place-items:center;padding:28px;overflow:hidden}.approvedLogoCard img{max-width:100%;max-height:250px;object-fit:contain}.printIntro{padding:26px;background:linear-gradient(135deg,#171d28,#301b43);border:1px solid #513567;border-radius:18px}.printIntro h2{font-size:30px;margin:7px 0 10px}.productGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.productCard{position:relative;background:linear-gradient(180deg,#171e29,#111720);border:1px solid var(--line);border-radius:16px;padding:16px;cursor:pointer;transition:.2s}.productCard:hover{transform:translateY(-2px);border-color:#665083}.productCard.selected{border-color:var(--pink);box-shadow:0 0 0 2px #ff4f9333}.productIcon{height:92px;border-radius:12px;background:linear-gradient(145deg,#f8f8fa,#dedee7);display:grid;place-items:center;font-size:43px;margin-bottom:13px}.productCard h3{margin:0 0 5px}.productCard p{min-height:38px}.productControls{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}.productControls input{width:82px;padding:8px;border-radius:8px;border:1px solid #3a4558;background:#0b1017;color:#fff}.printCheckout{position:sticky;bottom:12px;margin-top:18px;padding:16px;border:1px solid #4a365d;background:#161421ee;backdrop-filter:blur(16px);border-radius:16px;display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:0 18px 60px #0008}.printCheckoutActions{display:flex;gap:8px;flex-wrap:wrap}.orderSuccess{padding:18px;border:1px solid #245b44;background:#143c2d;border-radius:14px;color:#8cf2c1;margin-top:16px}.brand img,.generationLogo{filter:none!important;background:transparent!important}.side .brand img{max-height:72px;object-fit:contain;object-position:left center}.topBrand .multixMark{width:34px;height:34px}.loginBrandFix{max-width:300px!important;max-height:90px;object-fit:contain}.printEmpty{padding:50px;text-align:center}.printEmpty .productIcon{width:110px;margin:0 auto 18px}.printTag{display:inline-flex;padding:6px 10px;border-radius:999px;background:#ff3c75;color:white;font-size:11px;font-weight:800;letter-spacing:.6px}@media(max-width:1200px){.productGrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:850px){.printHero{grid-template-columns:1fr}.productGrid{grid-template-columns:1fr 1fr}.printCheckout{position:static;align-items:flex-start;flex-direction:column}}@media(max-width:520px){.productGrid{grid-template-columns:1fr}}

.aiIntegration{margin-top:12px;padding:10px;border-radius:11px;background:linear-gradient(135deg,#ffffff0b,#7c5cff18);border:1px solid #ffffff16;display:flex;gap:9px;align-items:center}.openAiMark{width:31px;height:31px;border-radius:10px;background:#fff;color:#111;display:grid;place-items:center;font-size:22px;font-weight:900}.aiIntegration b{display:block;font-size:11px}.aiIntegration small{display:block;color:var(--muted);font-size:9px;margin-top:2px;line-height:1.25}.adminAction{display:none}.adminAction.show{display:inline-flex}.clientFinish{min-height:calc(100vh - 130px);display:grid;place-items:center;padding:28px}.finishCard{width:min(850px,100%);text-align:center;padding:46px 34px;background:radial-gradient(circle at 50% 0,#4b245b,#171d28 55%);border:1px solid #704a82;border-radius:28px;box-shadow:0 30px 100px #0008}.finishIcon{width:92px;height:92px;margin:0 auto 20px;border-radius:28px;display:grid;place-items:center;background:linear-gradient(135deg,var(--pink),var(--violet));font-size:42px;box-shadow:0 0 0 10px #ff4f9315}.finishCard h2{font-size:36px;margin:0 0 12px}.finishCard p{font-size:16px;line-height:1.6;max-width:660px;margin:0 auto 22px}.siteCta{display:inline-flex;align-items:center;gap:12px;padding:16px 24px;border-radius:15px;background:linear-gradient(135deg,#ff376d,#ff4f93,#7c5cff);background-size:200% 200%;color:#fff;text-decoration:none;font-weight:900;font-size:17px;box-shadow:0 16px 50px #ff3c7550;animation:ctaPulse 1.8s ease-in-out infinite,ctaFlow 4s linear infinite}.siteCta:hover{transform:translateY(-2px) scale(1.02)}@keyframes ctaPulse{0%,100%{box-shadow:0 16px 50px #ff3c7545}50%{box-shadow:0 18px 70px #ff3c7590}}@keyframes ctaFlow{0%{background-position:0 50%}100%{background-position:200% 50%}}
.history{display:grid;gap:8px}.historyItem{width:100%;display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:#0d1219;color:#fff;border-radius:10px;padding:7px;cursor:pointer}.historyItem:hover,.historyItem.active{border-color:var(--violet);background:#171d2a}.historyItem img{width:64px;height:45px;object-fit:contain;background:#fff;border-radius:7px}.historyItem span{min-width:0}.historyItem b,.historyItem small{display:block}.historyItem small{font-size:10px;color:var(--muted);margin-top:4px}.historyItem.active{box-shadow:0 0 0 1px #7c5cff55}
/* MIA Logo Studio 5.2 - responsive architecture */
html{overflow-x:hidden}body{min-width:320px;overflow-x:hidden}.app{width:100%;max-width:100vw}.side{z-index:40}.content,.page,.panel,.panelBody,.studio>*{min-width:0}.top{gap:12px}.top>h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topActions{min-width:0;flex-wrap:wrap;justify-content:flex-end}.mobileMenuBtn,.sideBackdrop{display:none}.resultActions .btn{flex:1 1 180px}.historyItem{min-width:0}.historyItem span{min-width:0}.historyItem small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.artboard{overflow:hidden}.artboard img{width:auto;height:auto}.messages,.panelBody{overflow-wrap:anywhere}.userChip{min-width:0}.userChip>div{min-width:0}.userChip b,.userChip small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.printHero,.productGrid,.printCheckout{min-width:0}

@media (max-width:1450px){
  .studio{grid-template-columns:minmax(300px,340px) minmax(0,1fr)}
  .studio>.panel:last-child{grid-column:1/-1}
  .chat{height:440px}
}

/* V8.6 — jornada, kit em imagem única e fluxo comercial */
.projectTimeline{
  margin-bottom:18px;
  padding:17px 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.085);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(22,27,40,.97),rgba(13,17,26,.97));
  box-shadow:0 16px 45px rgba(0,0,0,.16);
}
.timelineHeading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.timelineHeading>div span,.timelineHeading>div b{display:block}
.timelineHeading>div span{margin-bottom:4px;color:#a899ff;font-size:9px;font-weight:900;letter-spacing:.12em}
.timelineHeading>div b{font-size:16px}
.timelineHeading>small{color:var(--muted)}
.projectTimeline ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.projectTimeline li{position:relative;min-width:0;display:flex;align-items:center;gap:9px;padding:11px;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:rgba(255,255,255,.025)}
.projectTimeline li::after{content:"";position:absolute;left:100%;top:50%;width:9px;height:1px;background:rgba(255,255,255,.12)}
.projectTimeline li:last-child::after{display:none}
.projectTimeline li>span{width:25px;height:25px;flex:0 0 25px;display:grid;place-items:center;border-radius:50%;background:#252c3a;color:#8d98aa;font-weight:900}
.projectTimeline li b,.projectTimeline li small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.projectTimeline li b{font-size:11px}
.projectTimeline li small{margin-top:3px;color:#778396;font-size:9px}
.projectTimeline li.done{border-color:rgba(66,220,161,.18);background:rgba(66,220,161,.055)}
.projectTimeline li.done>span{background:#35ce92;color:#07150f}
.projectTimeline li.current{border-color:rgba(169,153,255,.36);background:rgba(123,97,255,.11);box-shadow:0 0 0 2px rgba(123,97,255,.07)}
.projectTimeline li.current>span{background:linear-gradient(135deg,#ff4f91,#7b61ff);color:#fff;animation:timelinePulse 1.8s ease-in-out infinite}
.projectTimeline li.optional{opacity:.58}
@keyframes timelinePulse{50%{box-shadow:0 0 0 7px rgba(123,97,255,0)}0%,100%{box-shadow:0 0 0 0 rgba(123,97,255,.25)}}

.mockupKitBtn{
  min-height:54px;
  border-color:rgba(226,187,114,.38);
  background:linear-gradient(135deg,#35284c,#7452a0);
  color:#fff0d2;
  font-size:15px;
  font-weight:900;
  letter-spacing:.035em;
  box-shadow:0 15px 36px rgba(86,61,121,.23);
}
.mockupKitInfo{grid-column:2;display:flex;flex-direction:column;gap:4px;padding:13px 15px;border:1px solid rgba(226,187,114,.22);border-radius:14px;background:rgba(226,187,114,.07)}
.mockupKitInfo b{color:#f1d59f;font-size:13px}
.mockupKitInfo span{color:var(--muted);font-size:12px;line-height:1.4}
.mockupGeneratePanel .mockupEconomy{grid-column:1;grid-row:3}
.mockupGeneratePanel .mockupKitInfo{grid-row:3}
.mockupGeneratePanel .mockupGenerationStatus{grid-row:4}
.mockupQualityBadge{display:inline-flex;margin-left:7px;padding:6px 9px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.04em}
.mockupQualityBadge.verified{border:1px solid rgba(66,220,161,.26);background:rgba(66,220,161,.1);color:#83ecc2}

.quoteModalBox{position:relative;width:min(680px,100%);max-height:92vh;overflow:auto;padding:28px}
.quoteModalBox h2{margin:12px 0 7px;font-size:29px}
.quoteClose{position:absolute;right:15px;top:14px;width:37px;height:37px;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:#202735;color:#fff;font-size:23px;cursor:pointer}
.quotePreview{display:grid;grid-template-columns:150px minmax(0,1fr);gap:15px;align-items:center;margin:18px 0;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:#0d121a}
.quotePreview img{width:150px;height:112px;object-fit:cover;border-radius:11px}
.quotePreview b,.quotePreview small{display:block}
.quotePreview small{margin-top:5px;color:var(--muted)}
.quoteFields{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.quoteFields .field{margin:0}
.quoteFields textarea{min-height:82px}
.quoteNotes{grid-column:1/-1}
.quoteSubmit{width:100%;margin-top:15px;min-height:52px}
.quoteSuccess{display:grid;gap:8px;margin-top:16px;padding:17px;border:1px solid rgba(66,220,161,.25);border-radius:15px;background:rgba(66,220,161,.08);color:#8cf0c7}
.quoteSuccess b,.quoteSuccess span{display:block}
.quoteWhatsapp{margin-top:4px;justify-content:center;text-decoration:none;background:#176d4e}

.generationAdvancedFilters{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;margin-top:9px}
.generationAdvancedFilters select{min-width:0;width:100%;padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#0b1019;color:#fff}
.generationKpis{grid-template-columns:repeat(6,minmax(0,1fr))}
.generationHeaderActions{display:flex;align-items:center;gap:8px}
.generationFavorite{width:37px;height:37px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:#1a202c;color:#667184;font-size:20px;cursor:pointer}
.generationFavorite.active{border-color:rgba(226,187,114,.38);background:rgba(226,187,114,.12);color:#f1ca7f;box-shadow:0 0 0 3px rgba(226,187,114,.055)}
.generationMiniTimeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:11px 19px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.016)}
.generationMiniTimeline span{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;padding:7px;border-radius:9px;color:#707c8e;font-size:9px;font-weight:750}
.generationMiniTimeline i{width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#252c38;font-style:normal}
.generationMiniTimeline span.done{color:#76dcb3}.generationMiniTimeline span.done i{background:#214d3d}
.generationMiniTimeline span.current{background:rgba(123,97,255,.12);color:#d1caff}.generationMiniTimeline span.current i{background:#725cf1;color:#fff}
.generationQuoteSection{background:linear-gradient(110deg,rgba(255,79,145,.025),transparent)}
.generationQuotes{display:grid;gap:8px}
.generationQuote{display:grid;grid-template-columns:minmax(0,1fr) 185px;gap:12px;align-items:center;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#111721}
.generationQuote b,.generationQuote span,.generationQuote small{display:block}
.generationQuote b{font-size:12px}.generationQuote span{margin-top:4px;color:#d2d8e3;font-size:11px}.generationQuote small{margin-top:4px;color:var(--muted);font-size:9px}
.generationQuote select{width:100%;padding:9px;border:1px solid rgba(255,255,255,.11);border-radius:9px;background:#0b1018;color:#fff}
.generationAdminNotes{padding:16px 19px;border-bottom:1px solid rgba(255,255,255,.065);background:rgba(123,97,255,.025)}
.generationAdminNotes>label{display:block;margin-bottom:8px;color:#b9b0ed;font-size:11px;font-weight:800}
.generationAdminNotes>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px}
.generationAdminNotes textarea{min-height:58px;padding:10px;border:1px solid rgba(255,255,255,.09);border-radius:10px;resize:vertical;background:#0b1018;color:#fff}
.generationClientToolbarActions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.generationWhatsapp{text-decoration:none;background:linear-gradient(180deg,#1d6c51,#15513e)}
.generationClientIdentity em{display:inline-flex;margin-left:7px;padding:3px 6px;border-radius:999px;background:rgba(226,187,114,.11);color:#e7c783;font-size:8px;font-style:normal;letter-spacing:.06em;vertical-align:middle}

@media(max-width:1350px){
  .generationKpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .projectTimeline ol{grid-template-columns:repeat(3,minmax(0,1fr))}
  .projectTimeline li::after{display:none}
}
@media(max-width:860px){
  .projectTimeline ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timelineHeading{align-items:flex-start;flex-direction:column}
  .generationAdvancedFilters{grid-template-columns:1fr}
  .mockupGeneratePanel .mockupEconomy,.mockupGeneratePanel .mockupKitInfo,.mockupGeneratePanel .mockupGenerationStatus{grid-column:auto;grid-row:auto}
}
@media(max-width:640px){
  .projectTimeline{padding:13px}.projectTimeline ol{grid-template-columns:1fr}
  .generationKpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quotePreview{grid-template-columns:90px minmax(0,1fr)}.quotePreview img{width:90px;height:80px}
  .quoteFields{grid-template-columns:1fr}.quoteNotes{grid-column:auto}
  .generationMiniTimeline{grid-template-columns:1fr 1fr;padding:10px}
  .generationQuote{grid-template-columns:1fr}
  .generationAdminNotes>div{grid-template-columns:1fr}
  .generationClientToolbarActions{width:100%;flex-direction:column}.generationClientToolbarActions>*{width:100%;justify-content:center}
  .mockupQualityBadge{display:flex;width:max-content;margin:7px 0 0}
}
@media (max-width:1100px){
  .app{grid-template-columns:210px minmax(0,1fr)}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .projects{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{grid-template-columns:1fr}
  .studio{grid-template-columns:1fr}
  .studio>.panel:last-child{grid-column:auto}
  .preview{min-height:560px}.artboard{min-height:400px}
  .top{height:auto;min-height:68px;padding-block:10px}
}
@media (max-width:860px){
  .app{display:block}.side{display:flex!important;position:fixed;left:0;top:0;width:min(82vw,300px);height:100dvh;transform:translateX(-105%);transition:transform .25s ease;box-shadow:20px 0 60px #000c}.app.menuOpen .side{transform:translateX(0)}
  .sideBackdrop{display:block;position:fixed;inset:0;z-index:35;border:0;background:#0009;opacity:0;pointer-events:none;transition:opacity .25s ease}.app.menuOpen .sideBackdrop{opacity:1;pointer-events:auto}
  .mobileMenuBtn{display:inline-grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#151c27;color:#fff;font-size:20px;cursor:pointer}
  main{width:100%;max-width:100vw}.top{padding-inline:12px}.topBrand img{max-width:150px}.topActions{gap:6px}.topActions .btn{padding:9px 10px}.content{padding:12px}.heroMain{padding:20px}.heroMain h2{font-size:26px}.fontGallery{grid-template-columns:repeat(4,minmax(0,1fr))}.printHero{grid-template-columns:1fr}.printCheckout{position:static;flex-direction:column;align-items:stretch}.printCheckoutActions{width:100%}.printCheckoutActions .btn{flex:1}
}
@media (max-width:640px){
  body{font-size:13px}.top{align-items:flex-start}.topBrand .titleBlock{display:none}.topActions{margin-left:auto}.topActions .btn{font-size:12px;padding:9px}.topActions #openFolderTop{display:none}.userChip{max-width:155px}.content{padding:10px}.kpis,.projects,.history,.analysis,.row,.productGrid{grid-template-columns:1fr}.heroMain h2{font-size:23px}.pipeline{gap:6px}.step{font-size:11px;padding:7px 8px}.panel{border-radius:13px}.panelHead{padding:13px}.panelBody{padding:12px}.fontGallery{grid-template-columns:repeat(3,minmax(0,1fr))}.refs{grid-template-columns:repeat(2,minmax(0,1fr))}.preview{min-height:0}.artboard{min-height:330px;padding:12px}.artboard img{max-height:430px}.resultActions{padding:10px}.resultActions .btn{flex:1 1 100%;width:100%}.chat{height:520px}.msg.user{margin-left:15px}.msg.assistant{margin-right:10px}.composerBtns .btn{flex:1}.toast{left:10px;right:10px;bottom:10px}.modal{padding:10px}.modalBox{padding:16px}.generationCard{width:calc(100% - 18px)}.generationInner{padding:20px 14px}.generationLogo{max-width:190px}.approvedLogoCard{min-height:190px;padding:16px}.siteCta{width:100%;justify-content:center;text-align:center}.userRow{grid-template-columns:1fr}.printEmpty{padding:30px 16px}
}
@media (max-width:420px){
  .topBrand img{max-width:115px}.topActions #newProjectTop{font-size:0}.topActions #newProjectTop::after{content:'+';font-size:20px}.fontGallery{grid-template-columns:repeat(2,minmax(0,1fr))}.refs{grid-template-columns:1fr}.loginCard{padding:20px}.heroMain h2{font-size:21px}.artboard{min-height:290px}.placeholder .icon{font-size:46px}
}
/* API state machine - v6.0 */
.api .dot.checking{background:#f5b84b;box-shadow:0 0 0 0 rgba(245,184,75,.55);animation:apiPulse 1.25s infinite}
.api .dot.error{background:#ef6464;box-shadow:0 0 0 3px rgba(239,100,100,.14)}
@keyframes apiPulse{0%{box-shadow:0 0 0 0 rgba(245,184,75,.55)}70%{box-shadow:0 0 0 8px rgba(245,184,75,0)}100%{box-shadow:0 0 0 0 rgba(245,184,75,0)}}

.adminOnly{display:none!important}.adminOnly.show{display:inline-flex!important}
.approvalOverlay{position:fixed;inset:0;z-index:120;background:rgba(6,8,14,.88);backdrop-filter:blur(16px);display:grid;place-items:center;padding:20px}.approvalLoader{width:min(520px,100%);text-align:center;padding:42px 28px;border:1px solid #744e8c;border-radius:26px;background:radial-gradient(circle at 50% 0,#4b245b,#151b27 58%);box-shadow:0 35px 120px #000c}.approvalOrb{width:104px;height:104px;border-radius:34px;margin:0 auto 22px;display:grid;place-items:center;background:linear-gradient(135deg,#ff376d,#7c5cff);box-shadow:0 0 0 12px #ff4f9315,0 20px 70px #ff4f9360;animation:approvalFloat 1.8s ease-in-out infinite}.approvalOrb span{font-size:48px;font-weight:900}.approvalLoader h2{font-size:30px;margin:0 0 10px}.approvalLoader p{color:#d8cdea}.approvalLoader small{display:block;color:var(--muted);margin-top:14px}.approvalBar{height:8px;overflow:hidden;border-radius:999px;background:#ffffff12;margin-top:20px}.approvalBar i{display:block;width:45%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff376d,#7c5cff,#ff376d);animation:approvalProgress 1.5s ease-in-out infinite}.approvalSuccess{z-index:130}.approvalSuccessCard{position:relative;width:min(720px,100%);text-align:center;padding:48px 34px;border:1px solid #79518f;border-radius:28px;background:radial-gradient(circle at 50% 0,#5c2a69,#171d28 58%);box-shadow:0 35px 120px #000d;overflow:hidden}.successSeal{width:96px;height:96px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;font-size:48px;background:linear-gradient(135deg,#24c982,#7c5cff);box-shadow:0 0 0 12px #24c98218;animation:successPop .65s cubic-bezier(.2,.9,.3,1.3)}.approvalSuccessCard h2{font-size:38px;margin:12px 0}.approvalSuccessCard p{font-size:16px;line-height:1.6;max-width:580px;margin:0 auto 24px}.successActions{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}.confetti i{position:absolute;width:10px;height:22px;border-radius:3px;background:#ff4f93;animation:confettiFall 2.8s linear infinite}.confetti i:nth-child(1){left:10%;top:-30px}.confetti i:nth-child(2){left:25%;top:-50px;background:#7c5cff;animation-delay:.4s}.confetti i:nth-child(3){left:42%;top:-20px;background:#ffd166;animation-delay:.8s}.confetti i:nth-child(4){left:60%;top:-45px;background:#24c982;animation-delay:.2s}.confetti i:nth-child(5){left:78%;top:-25px;background:#5cc8ff;animation-delay:1s}.confetti i:nth-child(6){left:90%;top:-55px;background:#ff7a59;animation-delay:.6s}@keyframes approvalFloat{50%{transform:translateY(-8px) scale(1.03)}}@keyframes approvalProgress{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}@keyframes successPop{from{transform:scale(.4) rotate(-12deg);opacity:0}to{transform:scale(1);opacity:1}}@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translateY(760px) rotate(540deg);opacity:0}}@media(max-width:640px){.approvalLoader{padding:34px 18px}.approvalSuccessCard{padding:38px 18px}.approvalSuccessCard h2{font-size:30px}.successActions{flex-direction:column}.successActions>*{width:100%;justify-content:center}}

/* V8.3 UX, ChatGPT branding and mobile fixes */
.nav button{display:flex;align-items:center;gap:10px}.navAi{width:20px;height:20px;flex:0 0 20px;opacity:.88}.nav button.active .navAi{opacity:1}.openAiMark img{width:21px;height:21px}.generationChatGpt{width:92px;height:92px;margin:0 auto 20px;border-radius:28px;background:#fff;color:#111;display:grid;place-items:center;box-shadow:0 0 0 10px #ffffff10,0 18px 55px #0007;animation:chatGptFloat 1.8s ease-in-out infinite}.generationChatGpt img{width:64px;height:64px}.tutorialHero{display:flex;align-items:center;gap:22px;padding:30px;border:1px solid var(--line);border-radius:22px;background:radial-gradient(circle at 0 0,#4b245b,#171d28 54%);margin-bottom:20px}.tutorialIcon{width:78px;height:78px;flex:0 0 78px;border-radius:24px;background:#fff;color:#111;display:grid;place-items:center}.tutorialIcon img{width:54px}.tutorialHero h2{font-size:32px;margin:8px 0}.tutorialGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.tutorialCard{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;line-height:1.55}.tutorialCard b{font-size:18px}.tutorialExample{margin-top:14px;padding:13px;border-radius:12px;background:#ffffff09;border:1px solid #ffffff12;color:#dfe4ef}.clientMode .artboard img,.clientMode .thumb img,.clientMode .approvedLogoCard img,.clientMode .ref img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}.clientMode .artboard,.clientMode .thumb,.clientMode .approvedLogoCard{position:relative}.clientMode .artboard::after,.clientMode .approvedLogoCard::after{content:'Somente visualização';position:absolute;right:10px;bottom:8px;padding:5px 8px;border-radius:8px;background:#0008;color:#fff9;font-size:10px;pointer-events:none}.userRow{grid-template-columns:1.2fr 1.4fr 1fr .8fr .8fr auto!important}@keyframes chatGptFloat{50%{transform:translateY(-7px) scale(1.03)}}
@media(max-width:860px){.side{z-index:100!important}.sideBackdrop{z-index:90!important}.mobileMenuBtn{position:relative;z-index:110;touch-action:manipulation}.app.menuOpen .side{transform:translate3d(0,0,0)!important;visibility:visible}.side{transform:translate3d(-105%,0,0);will-change:transform}.top{position:sticky;top:0;z-index:70}.tutorialGrid{grid-template-columns:1fr}}
@media(max-width:640px){.tutorialHero{padding:20px;align-items:flex-start}.tutorialIcon{width:58px;height:58px;flex-basis:58px}.tutorialIcon img{width:40px}.tutorialHero h2{font-size:24px}.userRow{grid-template-columns:1fr!important}}

/* V8.4 - aviso de compra apos aprovacao */
.approvalPurchaseNotice{font-size:15px;line-height:1.65;max-width:650px;margin:14px auto}.approvalPurchaseNotice strong{color:#fff}.approvalReminder{display:flex;flex-direction:column;gap:7px;margin:18px auto 22px;padding:16px 18px;max-width:620px;border-radius:14px;background:#ffffff0d;border:1px solid #ffffff20}.approvalReminder b{color:#fff}.approvalReminder span{font-size:16px;color:#9ff0c9}.navAi,.openAiMark img,.tutorialIcon img,.generationChatGpt img{object-fit:contain}

/* MIA Logo Studio V8.5 — interface premium */
:root{
  --bg:#070910;
  --bg-soft:#0b0e16;
  --panel:#111520;
  --panel2:#171c29;
  --panel3:#1d2332;
  --line:#2a3142;
  --line-soft:rgba(255,255,255,.075);
  --text:#f5f7fb;
  --muted:#98a3b5;
  --pink:#ff4f91;
  --violet:#7b61ff;
  --violet-soft:#a999ff;
  --green:#42dca1;
  --gold:#e2bb72;
  --shadow:0 24px 70px rgba(0,0,0,.34);
}

html{color-scheme:dark}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 78% -12%,rgba(123,97,255,.24),transparent 34%),
    radial-gradient(circle at 24% 105%,rgba(255,79,145,.13),transparent 30%),
    linear-gradient(145deg,#070910 0%,#0a0d14 48%,#080b12 100%);
  font-family:Inter,"Segoe UI Variable","Segoe UI",Arial,sans-serif;
  letter-spacing:-.005em;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.13;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,black,transparent 72%);
}
::selection{background:rgba(123,97,255,.42);color:#fff}

.app{grid-template-columns:264px minmax(0,1fr)}
.side{
  padding:20px 14px 16px;
  background:linear-gradient(180deg,rgba(12,15,24,.97),rgba(8,10,16,.94));
  border-right:1px solid rgba(255,255,255,.085);
  box-shadow:18px 0 55px rgba(0,0,0,.16);
  backdrop-filter:blur(24px);
}
.brand{
  margin:0 2px 8px;
  padding:12px 12px 18px;
  border-bottom:1px solid var(--line-soft);
}
.side .brand img{max-height:58px}
.brand .brandTag{
  display:inline-flex;
  align-items:center;
  margin-top:14px;
  padding:6px 9px;
  border:1px solid rgba(169,153,255,.22);
  border-radius:999px;
  background:rgba(123,97,255,.09);
  color:#c9c0ff;
  font-size:9px;
  font-weight:800;
  letter-spacing:1.35px;
}
.nav{display:grid;gap:4px;margin-top:12px}
.nav button{
  position:relative;
  min-height:46px;
  margin:0;
  padding:11px 12px;
  border:1px solid transparent;
  border-radius:13px;
  color:#aeb8c8;
  font-weight:650;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.nav button:hover{
  transform:translateX(2px);
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.06);
}
.nav button.active{
  color:#fff;
  background:linear-gradient(135deg,rgba(123,97,255,.22),rgba(255,79,145,.11));
  border-color:rgba(160,143,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 28px rgba(0,0,0,.15);
}
.nav button.active::before{
  content:"";
  position:absolute;
  left:-3px;
  top:12px;
  bottom:12px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(var(--pink),var(--violet));
  box-shadow:0 0 14px rgba(123,97,255,.75);
}
.navAi{width:19px;height:19px;flex-basis:19px}
.api{
  padding:14px;
  border-color:rgba(255,255,255,.09);
  border-radius:16px;
  background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(123,97,255,.045));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.aiIntegration{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}
.openAiMark{border-radius:9px;box-shadow:0 8px 20px rgba(0,0,0,.24)}

.top{
  min-height:76px;
  height:auto;
  padding:12px 26px;
  border-color:rgba(255,255,255,.075);
  background:rgba(8,11,18,.74);
  box-shadow:0 12px 35px rgba(0,0,0,.12);
  backdrop-filter:blur(24px) saturate(135%);
}
.topBrand .multixMark{
  width:39px;
  height:39px;
  padding:6px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:rgba(255,255,255,.045);
}
.top h1{font-size:18px;letter-spacing:-.02em}
.topBrand .titleBlock small{color:#7f8a9d;letter-spacing:1.45px}
.topActions{align-items:center}
.userChip{
  min-height:44px;
  padding:7px 8px 7px 12px;
  border-color:rgba(255,255,255,.085);
  border-radius:13px;
  background:rgba(255,255,255,.038);
}
.btn{
  min-height:42px;
  padding:10px 15px;
  border-color:rgba(255,255,255,.10);
  border-radius:12px;
  background:linear-gradient(180deg,#222a39,#1a202c);
  font-weight:720;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
  transition:transform .18s ease,filter .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.btn:hover:not(:disabled){
  transform:translateY(-1px);
  filter:brightness(1.08);
  border-color:rgba(169,153,255,.34);
}
.btn:active:not(:disabled){transform:translateY(0)}
.btn.primary{
  background:linear-gradient(135deg,#ff4f91 0%,#a05bff 48%,#705cff 100%);
  box-shadow:0 12px 30px rgba(123,97,255,.24),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn.approve{
  color:#07150f;
  background:linear-gradient(135deg,#35ce92,#6ee8ba);
  box-shadow:0 12px 28px rgba(46,211,139,.16);
}

.content{width:100%;max-width:1920px;margin:0 auto;padding:26px}
.card,.panel{
  border-color:rgba(255,255,255,.08);
  background:linear-gradient(155deg,rgba(24,29,42,.96),rgba(15,19,29,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 16px 44px rgba(0,0,0,.14);
}
.card{border-radius:19px;padding:18px}
.hero{gap:18px;margin-bottom:18px}
.heroMain{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:34px;
  border-color:rgba(151,130,255,.26);
  border-radius:24px;
  background:linear-gradient(135deg,#171d2b 0%,#211c3d 58%,#171927 100%);
  box-shadow:var(--shadow);
}
.heroMain::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:280px;
  height:280px;
  right:-90px;
  top:-120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,79,145,.32),transparent 68%);
}
.heroMain h2{font-size:clamp(29px,3vw,43px);line-height:1.06;letter-spacing:-.042em}
.pipeline{gap:7px}
.step{
  padding:8px 11px;
  border-color:rgba(255,255,255,.095);
  background:rgba(255,255,255,.05);
  color:#c7cfdb;
  font-size:12px;
}
.kpis{gap:14px}
.kpi{position:relative;overflow:hidden;padding:20px}
.kpi::after{
  content:"";
  position:absolute;
  width:70px;
  height:70px;
  right:-22px;
  top:-24px;
  border-radius:50%;
  background:rgba(123,97,255,.13);
  filter:blur(1px);
}
.kpi b{font-size:34px;letter-spacing:-.045em}

.projects{gap:15px}
.project{
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.project:hover{
  transform:translateY(-4px);
  border-color:rgba(155,132,255,.32);
  box-shadow:0 22px 55px rgba(0,0,0,.26);
}
.thumb{
  height:185px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:15px;
  background:linear-gradient(145deg,#fff,#f4f3f7);
}
.status{
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.06);
  color:#bfc7d4;
  font-weight:750;
}
.status.approved{border-color:rgba(66,220,161,.20);background:rgba(66,220,161,.10);color:#7de9bc}

.studio{grid-template-columns:380px minmax(460px,1fr) 360px;gap:18px}
.panel{border-radius:21px}
.panelHead{
  min-height:54px;
  padding:16px 18px;
  border-color:rgba(255,255,255,.075);
  background:rgba(255,255,255,.018);
  letter-spacing:-.01em;
}
.panelBody{padding:17px}
.field{margin-bottom:14px}
.field label{margin-bottom:7px;color:#c1c9d5;font-weight:700}
.field input,.field textarea,.field select,.composer textarea{
  border-color:rgba(255,255,255,.105);
  border-radius:11px;
  background:#0b0f17;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.field input,.field select{min-height:43px}
.field input:focus,.field textarea:focus,.field select:focus,.composer textarea:focus{
  outline:none;
  border-color:rgba(139,114,255,.72);
  background:#0d111a;
  box-shadow:0 0 0 3px rgba(123,97,255,.13),0 10px 26px rgba(0,0,0,.15);
}
.fieldHelp{color:#778397}
.drop{
  border-color:#47526a;
  border-radius:15px;
  background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(123,97,255,.035));
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.drop:hover,.drop.drag{
  transform:translateY(-1px);
  border-color:#8e77ff;
  background:rgba(123,97,255,.09);
}
.fontRefBox{border-color:rgba(255,255,255,.08);border-radius:15px;background:rgba(5,8,13,.38)}
.fontOption{border-radius:11px;box-shadow:0 7px 18px rgba(0,0,0,.13)}
.fontOption.selected{outline:3px solid rgba(255,79,145,.74)}
.ref{border-radius:12px}

.preview{min-height:700px}
.artboard{
  min-height:520px;
  padding:30px;
  background:
    radial-gradient(circle at 50% 42%,rgba(58,70,93,.82),rgba(12,16,24,.96) 67%),
    linear-gradient(135deg,#121722,#0c1018);
}
.artboard::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(255,255,255,.045);
  border-radius:18px;
  pointer-events:none;
}
.artboard img{
  position:relative;
  z-index:1;
  border-radius:16px;
  box-shadow:0 34px 100px rgba(0,0,0,.50),0 0 0 1px rgba(255,255,255,.1);
}
.placeholder{position:relative;z-index:1}
.placeholder h2{margin-bottom:7px;color:#dce2ec;letter-spacing:-.025em}
.placeholder p{line-height:1.55}
.proposalLoading{display:grid;justify-items:center}
.proposalSpinner{
  width:44px;
  height:44px;
  margin-bottom:16px;
  border:3px solid rgba(255,255,255,.10);
  border-top-color:#a999ff;
  border-right-color:#ff6aa3;
  border-radius:50%;
  animation:proposalSpin .85s linear infinite;
  box-shadow:0 0 22px rgba(123,97,255,.18);
}
@keyframes proposalSpin{to{transform:rotate(360deg)}}
.resultActions{padding:14px;border-color:rgba(255,255,255,.075);background:rgba(7,10,16,.26)}
.historyItem{border-radius:12px;background:#0b0f17}
.historyItem:hover,.historyItem.active{border-color:#7f69f5;background:#151a28}

.chat{height:700px}
.messages{padding:16px}
.msg{padding:11px 13px;border-radius:15px;line-height:1.5}
.msg.user{background:linear-gradient(135deg,#6f4ee8,#855cff);box-shadow:0 9px 22px rgba(90,63,203,.18)}
.msg.assistant{background:#1b2230;border-color:rgba(255,255,255,.075)}
.composer{padding:13px;border-color:rgba(255,255,255,.075);background:rgba(7,10,16,.18)}
.toast{
  border-color:rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(26,32,45,.94);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  backdrop-filter:blur(18px);
}
.modal{backdrop-filter:blur(10px)}
.modalBox{border-color:rgba(255,255,255,.1);border-radius:22px;box-shadow:var(--shadow)}
.tutorialHero{border-radius:25px;background:linear-gradient(135deg,#1b2231,#2a1d45 58%,#171b29)}
.tutorialCard{border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.approvedBanner{border-color:rgba(66,220,161,.22);background:rgba(36,131,95,.18);color:#7fe8bb}
.btn.finalize{
  border-color:rgba(92,200,255,.38);
  background:linear-gradient(135deg,rgba(35,119,172,.38),rgba(96,72,194,.38));
  color:#e7f7ff;
}
.btn.finalize:not(:disabled):hover{border-color:#71d1ff;box-shadow:0 10px 30px rgba(66,160,230,.2)}
#finalizationOverlay .approvalOrb span{font-size:18px;letter-spacing:.08em}
.approvedLogoReveal{
  width:min(390px,100%);
  min-height:150px;
  margin:20px auto;
  padding:16px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  background:linear-gradient(145deg,#fff,#f3f1f7);
  box-shadow:0 24px 60px rgba(0,0,0,.3);
}
.approvedLogoReveal img{
  display:block;
  width:100%;
  max-height:210px;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
}
.approvedLogoReveal.play{animation:approvedLogoReveal .72s cubic-bezier(.18,.9,.25,1.25)}
@keyframes approvedLogoReveal{
  0%{opacity:0;transform:scale(.72) rotate(-2deg);filter:blur(9px)}
  70%{opacity:1;transform:scale(1.035);filter:blur(0)}
  100%{transform:scale(1)}
}
.mockupHero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,.75fr);
  gap:28px;
  align-items:center;
  margin-bottom:22px;
  padding:34px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:28px;
  background:
    radial-gradient(circle at 82% 15%,rgba(255,79,147,.22),transparent 30%),
    radial-gradient(circle at 10% 100%,rgba(91,92,255,.25),transparent 38%),
    linear-gradient(145deg,#181e2b,#221a34 62%,#171d29);
  box-shadow:var(--shadow);
}
.mockupHero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.025) 45%,transparent 65%);
}
.mockupHero h2{font-size:clamp(30px,4vw,48px);line-height:1.04;letter-spacing:-.04em;margin:14px 0 12px;max-width:780px}
.mockupHero p{max-width:760px;color:#b9c0ce;font-size:16px;line-height:1.65;margin:0}
.mockupHeroAi{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding:18px;border:1px solid rgba(255,255,255,.11);border-radius:20px;background:rgba(7,9,16,.38);backdrop-filter:blur(14px)}
.mockupHeroAi>span{width:58px;height:58px;flex:0 0 auto;display:grid;place-items:center;border-radius:18px;background:#fff;box-shadow:0 14px 35px rgba(0,0,0,.26)}
.mockupHeroAi img{width:34px;height:34px}
.mockupHeroAi b,.mockupHeroAi small{display:block}
.mockupHeroAi small{margin-top:5px;color:var(--muted);line-height:1.45}
.mockupWorkspace{display:grid;gap:22px}
.mockupEmpty{text-align:center;padding:62px 24px;border:1px dashed rgba(255,255,255,.15);border-radius:25px;background:rgba(255,255,255,.025)}
.mockupControls,.mockupGeneratePanel{padding:24px}
.mockupSectionTitle{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.mockupSectionTitle>span{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;border:1px solid rgba(154,132,255,.45);border-radius:13px;background:linear-gradient(135deg,rgba(124,92,255,.28),rgba(255,79,147,.22));color:#fff;font-weight:850}
.mockupSectionTitle h3{margin:0 0 4px;font-size:19px}
.mockupSectionTitle p{margin:0;font-size:13px}
.mockupFields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mockupCatalog{padding:4px 0}
.mockupProfessionArea{
  margin:18px 0 20px;
  padding:18px;
  border:1px solid rgba(151,130,255,.2);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(23,29,43,.96),rgba(13,18,28,.98));
  box-shadow:0 18px 45px rgba(0,0,0,.18);
}
.mockupProfessionHeading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.mockupProfessionHeading>div{display:grid;gap:3px}
.mockupProfessionHeading span{font-size:10px;font-weight:900;letter-spacing:.14em;color:#a897ff}
.mockupProfessionHeading b{font-size:18px}
.mockupProfessionHeading small{color:var(--muted);font-size:12px}
.mockupProfessionSelector{display:flex;flex-wrap:wrap;gap:8px}
.mockupProfessionChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:7px 9px 7px 13px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:11px;
  background:#0e141f;
  color:#d9deea;
  font:inherit;
  font-size:12px;
  font-weight:750;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease;
}
.mockupProfessionChip:hover{transform:translateY(-1px);border-color:rgba(160,139,255,.5);color:#fff}
.mockupProfessionChip small{
  min-width:22px;
  height:22px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border-radius:7px;
  background:rgba(255,255,255,.07);
  color:#9ba4b5;
  font-size:10px;
}
.mockupProfessionChip.selected{
  border-color:rgba(172,153,255,.8);
  background:linear-gradient(135deg,rgba(124,92,255,.34),rgba(255,79,147,.2));
  color:#fff;
  box-shadow:0 8px 24px rgba(87,62,187,.22);
}
.mockupProfessionChip.selected small{background:#fff;color:#4d3db1}
.mockupProfessionChip.comingSoon:not(.selected){color:#778091}
.mockupProfessionSummary{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:14px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  background:rgba(7,10,16,.45);
}
.mockupProfessionSummary>div{display:flex;align-items:center;gap:11px}
.mockupProfessionSummary p{display:grid;gap:3px;margin:0}
.mockupProfessionSummary p b{font-size:14px}
.mockupProfessionSummary p small{color:var(--muted);font-size:11px}
.mockupProfessionIcon{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,#7c5cff,#ff4f93);color:#fff}
.mockupProfessionKitBadge,.mockupProfessionSoon{
  padding:6px 9px;
  border:1px solid rgba(36,201,130,.24);
  border-radius:999px;
  background:rgba(36,201,130,.09);
  color:#80e9bc;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  white-space:nowrap;
}
.mockupProfessionSoon{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#8f98a8}
.mockupTemplateGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.mockupTemplateEmpty{
  grid-column:1/-1;
  min-height:230px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  padding:30px;
  border:1px dashed rgba(157,139,255,.3);
  border-radius:20px;
  background:rgba(124,92,255,.04);
  text-align:center;
}
.mockupTemplateEmpty>span{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:rgba(124,92,255,.13);color:#ae9dff;font-size:25px}
.mockupTemplateEmpty h3,.mockupTemplateEmpty p{margin:0}
.mockupTemplateEmpty p{max-width:520px;color:var(--muted);font-size:13px;line-height:1.55}
.mockupTemplate{
  position:relative;
  overflow:hidden;
  padding:0;
  text-align:left;
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  background:#111722;
  color:#fff;
  cursor:pointer;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.mockupTemplate:hover{transform:translateY(-3px);border-color:rgba(149,128,255,.55);box-shadow:0 18px 45px rgba(0,0,0,.28)}
.mockupTemplate.selected{border-color:#9c82ff;box-shadow:0 0 0 3px rgba(124,92,255,.16),0 20px 50px rgba(0,0,0,.32)}
.mockupTemplate figure{position:relative;aspect-ratio:1;margin:0;overflow:hidden;background:#ebe7e1}
.mockupTemplate figure::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent,rgba(5,7,11,.6));pointer-events:none}
.mockupTemplateProfession{position:absolute;left:10px;bottom:10px;z-index:2;padding:5px 8px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(7,10,16,.74);backdrop-filter:blur(8px);color:#fff;font-size:9px;font-weight:850;letter-spacing:.05em;text-transform:uppercase}
.mockupTemplate img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;user-select:none;-webkit-user-drag:none}
.mockupTemplate:hover img{transform:scale(1.025)}
.mockupTemplateText{display:block;padding:14px 15px 16px}
.mockupTemplateText b,.mockupTemplateText small{display:block}
.mockupTemplateText small{color:var(--muted);margin-top:5px;line-height:1.4}
.mockupTemplateCheck{position:absolute;top:12px;right:12px;z-index:2;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:rgba(8,11,18,.78);border:1px solid rgba(255,255,255,.25);opacity:0;transform:scale(.7);transition:.2s ease}
.mockupTemplate.selected .mockupTemplateCheck{opacity:1;transform:scale(1);background:linear-gradient(135deg,#24c982,#6e5bff)}
.mockupGeneratePanel{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.8fr);gap:18px;align-items:center}
.mockupGeneratePanel .mockupSectionTitle{grid-column:1/-1;margin-bottom:0}
.mockupGenerateBtn{min-height:54px;font-size:16px}
.mockupEconomy{display:flex;flex-direction:column;gap:4px;padding:13px 15px;border:1px solid rgba(36,201,130,.22);border-radius:14px;background:rgba(36,201,130,.08)}
.mockupEconomy b{color:#7fe8bb;font-size:13px}
.mockupEconomy span{color:var(--muted);font-size:12px;line-height:1.4}
.mockupGenerationStatus{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:16px;padding:18px;border:1px solid rgba(124,92,255,.3);border-radius:16px;background:rgba(124,92,255,.09)}
.mockupGenerationStatus .proposalSpinner{margin:0;width:36px;height:36px}
.mockupGenerationStatus b,.mockupGenerationStatus small{display:block}
.mockupGenerationStatus small{margin-top:4px;color:var(--muted)}
.mockupResultSection{padding-top:4px}
.mockupResult{
  min-height:420px;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:20px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  background:
    linear-gradient(45deg,rgba(255,255,255,.018) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.018) 75%),
    #0b1018;
  background-size:32px 32px;
}
.mockupResultEmpty{text-align:center;max-width:380px}
.mockupResultEmpty .icon{font-size:48px;color:#9c82ff}
.mockupResultCard{width:min(850px,100%);text-align:center}
.mockupResultCard>img{display:block;width:100%;max-height:720px;object-fit:contain;margin:auto;border-radius:18px;box-shadow:0 28px 80px rgba(0,0,0,.52);user-select:none;-webkit-user-drag:none}
.mockupResultMeta{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:17px;text-align:left}
.mockupResultMeta small{display:block;color:var(--muted);margin-top:4px}
.mockupResultActions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.mockupPreviewBadge{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(7,10,16,.7);font-size:11px;color:#c9d0dd;letter-spacing:.04em}
.mockupHistoryTitle{margin:24px 0 12px}
.mockupHistory{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.mockupHistoryItem{overflow:hidden;padding:0;text-align:left;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:#111722;color:#fff;cursor:pointer;transition:.2s ease}
.mockupHistoryItem:hover{transform:translateY(-2px);border-color:#7f69f5}
.mockupHistoryItem img{width:100%;aspect-ratio:1;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.mockupHistoryItem span{display:block;padding:12px}
.mockupHistoryItem b,.mockupHistoryItem small{display:block}
.mockupHistoryItem small{color:var(--muted);margin-top:4px}

@media(max-width:1450px){
  .studio{grid-template-columns:minmax(310px,360px) minmax(0,1fr)}
  .mockupFields{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1100px){
  .app{grid-template-columns:224px minmax(0,1fr)}
  .content{padding:20px}
}
@media(max-width:860px){
  .top{padding-inline:14px}
  .content{padding:14px}
  .side{width:min(86vw,310px)}
  .heroMain{padding:26px}
  .mockupHero{grid-template-columns:1fr;padding:26px}
  .mockupGeneratePanel{grid-template-columns:1fr}
  .mockupGeneratePanel .mockupSectionTitle{grid-column:auto}
  .mockupGenerationStatus{grid-column:auto}
}
@media(max-width:640px){
  body::before{background-size:38px 38px}
  .top{min-height:66px;padding-block:9px}
  .content{padding:11px}
  .heroMain{padding:23px;border-radius:20px}
  .heroMain h2{font-size:25px}
  .card,.panel{border-radius:16px}
  .artboard{min-height:330px;padding:15px}
  .artboard::before{inset:9px;border-radius:13px}
  .topActions .btn{min-height:39px}
  .mockupHero{padding:22px;border-radius:20px}
  .mockupHero h2{font-size:30px}
  .mockupFields{grid-template-columns:1fr}
  .mockupProfessionArea{margin-top:14px;padding:13px;border-radius:16px}
  .mockupProfessionHeading{align-items:flex-start;flex-direction:column;gap:5px}
  .mockupProfessionSelector{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px;scroll-snap-type:x proximity}
  .mockupProfessionChip{flex:0 0 auto;scroll-snap-align:start}
  .mockupProfessionSummary{align-items:flex-start;flex-direction:column}
  .mockupTemplateGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .mockupTemplateText{padding:10px}
  .mockupTemplateText small{display:none}
  .mockupResult{min-height:300px;padding:11px}
  .mockupResultMeta{align-items:flex-start;flex-direction:column}
  .mockupResultActions{width:100%;justify-content:stretch}
  .mockupResultActions>*{flex:1}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

.approvalMockupPrimary{
  order:-1;
  flex:1 1 100%;
  display:grid;
  justify-items:center;
  gap:9px;
  margin:3px 0 8px;
}
.approvalMockupMainBtn{
  position:relative;
  width:min(520px,100%);
  min-height:64px;
  justify-content:center;
  border-color:rgba(255,255,255,.38);
  border-radius:17px;
  background:linear-gradient(135deg,#25cb87 0%,#6d5cff 52%,#ff4f93 100%);
  color:#fff;
  font-size:17px;
  font-weight:900;
  letter-spacing:.075em;
  box-shadow:0 18px 48px rgba(82,74,230,.38),inset 0 1px 0 rgba(255,255,255,.35);
  animation:mockupCtaPulse 2.2s ease-in-out infinite;
}
.approvalMockupMainBtn:hover{
  transform:translateY(-2px) scale(1.01);
  border-color:#fff;
  box-shadow:0 24px 58px rgba(82,74,230,.48),inset 0 1px 0 rgba(255,255,255,.45);
}
.approvalMockupPrimary small{
  display:block;
  color:#e9e5f4;
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  line-height:1.45;
}
@keyframes mockupCtaPulse{
  0%,100%{box-shadow:0 18px 48px rgba(82,74,230,.34),0 0 0 0 rgba(125,102,255,.22)}
  50%{box-shadow:0 20px 55px rgba(82,74,230,.46),0 0 0 9px rgba(125,102,255,0)}
}
@media(max-width:640px){
  .approvalMockupMainBtn{min-height:60px;font-size:15px}
  .approvalMockupPrimary small{font-size:10px}
}

/* V8.5 — acervo administrativo de gerações */
.generationsHero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);
  gap:28px;
  align-items:end;
  margin-bottom:18px;
  padding:34px;
  border:1px solid rgba(151,130,255,.26);
  border-radius:26px;
  background:
    radial-gradient(circle at 88% 0,rgba(255,79,145,.24),transparent 31%),
    radial-gradient(circle at 4% 110%,rgba(66,220,161,.13),transparent 34%),
    linear-gradient(140deg,#171d2b,#241b3a 60%,#151a28);
  box-shadow:var(--shadow);
}
.generationsHero::after{
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  right:-130px;
  bottom:-170px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  box-shadow:0 0 0 36px rgba(255,255,255,.018),0 0 0 72px rgba(255,255,255,.012);
  pointer-events:none;
}
.generationsHero h2{
  margin:14px 0 10px;
  max-width:760px;
  font-size:clamp(32px,4vw,50px);
  line-height:1.02;
  letter-spacing:-.045em;
}
.generationsHero p{max-width:780px;margin:0;color:#b6bfce;font-size:16px;line-height:1.65}
.generationsHeroActions{position:relative;z-index:1;padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(7,10,17,.42);backdrop-filter:blur(14px)}
.generationsHeroActions>label{display:block;margin-bottom:8px;color:#d8deea;font-size:12px;font-weight:800;letter-spacing:.025em}
.generationsHeroActions>div{display:flex;gap:9px}
.generationsHeroActions input{
  min-width:0;
  flex:1;
  padding:12px 13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;
  outline:0;
  background:#0b1019;
  color:#fff;
}
.generationsHeroActions input:focus{border-color:#8f77ff;box-shadow:0 0 0 3px rgba(123,97,255,.14)}
.generationKpis{margin-bottom:18px}
.generationKpis .card{position:relative;overflow:hidden}
.generationKpis .card::after{content:"";position:absolute;right:-25px;bottom:-34px;width:85px;height:85px;border-radius:50%;background:rgba(123,97,255,.08)}
.generationStatus{display:flex;align-items:center;justify-content:center;gap:15px;margin:20px 0;padding:20px;border:1px solid rgba(123,97,255,.22);border-radius:17px;background:rgba(123,97,255,.07)}
.generationStatus .proposalSpinner{width:34px;height:34px;margin:0}
.generationStatus b,.generationStatus small{display:block}
.generationStatus small{margin-top:4px;color:var(--muted)}
.generationsLibrary{display:grid;gap:16px}
.generationClientFolder{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.085);
  border-radius:22px;
  background:linear-gradient(155deg,rgba(22,27,39,.98),rgba(12,16,24,.98));
  box-shadow:0 18px 48px rgba(0,0,0,.18);
}
.generationClientFolder>summary{
  display:grid;
  grid-template-columns:52px minmax(220px,1fr) auto 34px;
  gap:14px;
  align-items:center;
  min-height:82px;
  padding:15px 19px;
  list-style:none;
  cursor:pointer;
  user-select:none;
}
.generationClientFolder>summary::-webkit-details-marker{display:none}
.generationClientFolder[open]>summary{border-bottom:1px solid rgba(255,255,255,.075);background:linear-gradient(90deg,rgba(123,97,255,.09),transparent 55%)}
.generationFolderIcon{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(169,153,255,.25);border-radius:15px;background:linear-gradient(135deg,rgba(123,97,255,.22),rgba(255,79,145,.12));color:#cfc7ff;font-size:25px}
.generationClientIdentity{min-width:0}
.generationClientIdentity b,.generationClientIdentity span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.generationClientIdentity b{font-size:17px}
.generationClientIdentity span{margin-top:5px;color:var(--muted);font-size:12px}
.generationClientCounts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
.generationClientCounts span{padding:6px 9px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.035);color:#bfc8d7;font-size:11px}
.generationFolderChevron{font-size:23px;color:#909aab;transition:transform .2s ease}
.generationClientFolder[open] .generationFolderChevron{transform:rotate(180deg)}
.generationClientBody{padding:18px}
.generationClientToolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:15px;padding:12px 14px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.025)}
.generationClientToolbar span,.generationClientToolbar code{display:block}
.generationClientToolbar span{margin-bottom:5px;color:#9e91ed;font-size:10px;font-weight:900;letter-spacing:.1em}
.generationClientToolbar code,.generationApprovedBlock code{max-width:100%;overflow:hidden;text-overflow:ellipsis;color:#aab4c5;font:11px ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}
.generationProjectList{display:grid;gap:15px}
.generationProjectCard{overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:19px;background:#0d121b}
.generationProjectHeader{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 19px;border-bottom:1px solid rgba(255,255,255,.065);background:linear-gradient(100deg,rgba(255,255,255,.035),transparent)}
.generationProjectHeader h3{margin:5px 0 4px;font-size:20px}
.generationProjectHeader p{margin:0;color:var(--muted);font-size:12px}
.generationProjectEyebrow{color:#9f91f2;font-size:9px;font-weight:900;letter-spacing:.12em}
.generationFinalStatus{flex:0 0 auto;padding:7px 10px;border:1px solid rgba(255,190,86,.22);border-radius:999px;background:rgba(255,190,86,.08);color:#f0cd91;font-size:11px;font-weight:750}
.generationFinalStatus.ready{border-color:rgba(66,220,161,.25);background:rgba(66,220,161,.09);color:#83ecc2}
.generationApprovedBlock{display:grid;grid-template-columns:240px minmax(0,1fr);gap:18px;align-items:center;padding:18px 19px;border-bottom:1px solid rgba(255,255,255,.065)}
.generationApprovedBlock>div:last-child b{font-size:16px}
.generationApprovedBlock>div:last-child p{max-width:650px;margin:7px 0 12px;color:var(--muted);line-height:1.5}
.generationApprovedImage{position:relative;height:145px;overflow:hidden;display:grid;place-items:center;border:1px solid rgba(255,255,255,.10);border-radius:15px;background:#f8f7f3}
.generationApprovedImage img{width:100%;height:100%;object-fit:contain;display:block}
.generationApprovedImage>span{position:absolute;left:9px;bottom:8px;padding:6px 8px;border-radius:8px;background:rgba(8,15,13,.82);color:#77e7b7;font-size:9px;font-weight:900;letter-spacing:.06em;backdrop-filter:blur(9px)}
.generationApprovedImage.empty{background:linear-gradient(145deg,#151b26,#0c1119);color:#778398;font-size:42px}
.generationApprovedImage.empty span{left:50%;transform:translateX(-50%);width:max-content;color:#9aa5b6}
.generationAssetSection{padding:18px 19px;border-bottom:1px solid rgba(255,255,255,.065)}
.generationAssetTitle{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.generationAssetTitle b,.generationAssetTitle small{display:block}
.generationAssetTitle b{font-size:14px}
.generationAssetTitle small{margin-top:3px;color:var(--muted);font-size:11px}
.generationAssetStrip{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scrollbar-color:#4d426f #111722}
.generationAssetStrip figure{position:relative;flex:0 0 180px;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:#131a25}
.generationAssetStrip figure.approved{border-color:rgba(66,220,161,.42);box-shadow:0 0 0 2px rgba(66,220,161,.09)}
.generationAssetStrip img{width:100%;height:105px;object-fit:contain;display:block;background:#fff}
.generationAssetStrip figcaption{padding:8px 9px;color:#aeb8c8;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.generationMockupGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.generationMockupGrid figure{margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:#131a25}
.generationMockupGrid img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.generationMockupGrid figcaption{padding:9px 10px}
.generationMockupGrid b,.generationMockupGrid small{display:block}
.generationMockupGrid b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.generationMockupGrid small{margin-top:4px;color:var(--muted);font-size:9px}
.generationAssetEmpty{padding:22px;border:1px dashed rgba(255,255,255,.10);border-radius:13px;color:#7f8a9b;text-align:center;background:rgba(255,255,255,.015)}
.generationProjectActions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:14px 19px;background:rgba(255,255,255,.018)}
.generationProjectActions a{text-decoration:none;display:inline-flex;align-items:center}
.generationEmpty{padding:64px 22px;border:1px dashed rgba(255,255,255,.13);border-radius:22px;text-align:center;background:rgba(255,255,255,.02)}
.generationEmpty>div{width:70px;height:70px;display:grid;place-items:center;margin:0 auto 14px;border-radius:22px;background:rgba(123,97,255,.12);color:#a999ff;font-size:34px}
.generationEmpty h3{margin:0 0 8px;font-size:22px}
.generationEmpty p{margin:0;color:var(--muted)}
.generationEmpty.error>div{background:rgba(255,79,145,.11);color:#ff8bb7}
@media(max-width:1050px){
  .generationsHero{grid-template-columns:1fr;align-items:start}
  .generationClientFolder>summary{grid-template-columns:52px minmax(0,1fr) 34px}
  .generationClientCounts{grid-column:2/3;justify-content:flex-start}
  .generationFolderChevron{grid-column:3;grid-row:1/3}
}
@media(max-width:700px){
  .generationsHero{padding:23px;border-radius:20px}
  .generationsHero h2{font-size:31px}
  .generationsHeroActions>div{flex-direction:column}
  .generationClientFolder>summary{grid-template-columns:43px minmax(0,1fr) 25px;padding:13px}
  .generationFolderIcon{width:41px;height:41px;border-radius:12px}
  .generationClientCounts span{font-size:9px}
  .generationClientBody{padding:11px}
  .generationClientToolbar,.generationProjectHeader,.generationApprovedBlock{align-items:stretch;flex-direction:column}
  .generationClientToolbar{display:flex}
  .generationClientToolbar .btn{width:100%;justify-content:center}
  .generationApprovedBlock{grid-template-columns:1fr}
  .generationApprovedImage{height:190px}
  .generationProjectHeader{display:flex}
  .generationFinalStatus{align-self:flex-start}
  .generationProjectActions>*{width:100%;justify-content:center}
}

/* V8.6.3 — página comercial após a prévia */
.productionPage{width:min(1240px,100%);margin:0 auto;padding-bottom:40px}
.productionBack{margin-bottom:16px}
.productionHero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  overflow:hidden;
  margin-bottom:18px;
  padding:34px 36px;
  border:1px solid rgba(151,126,255,.28);
  border-radius:25px;
  background:
    radial-gradient(circle at 88% 12%,rgba(123,97,255,.31),transparent 32%),
    linear-gradient(135deg,#171d29,#241a3c 68%,#151a25);
  box-shadow:var(--shadow);
}
.productionHero::after{content:"";position:absolute;right:-75px;bottom:-100px;width:280px;height:280px;border:1px solid rgba(255,255,255,.06);border-radius:50%}
.productionHero>div:first-child{position:relative;z-index:1;max-width:760px}
.productionHero h2{margin:12px 0 9px;font-size:clamp(30px,4vw,48px);line-height:1.04;letter-spacing:-.035em}
.productionHero p{max-width:680px;margin:0;color:#c3cad6;font-size:16px;line-height:1.55}
.productionSeal{position:relative;z-index:1;flex:0 0 170px;display:grid;place-items:center;padding:21px 16px;border:1px solid rgba(66,220,161,.27);border-radius:21px;background:rgba(8,18,16,.46);text-align:center;backdrop-filter:blur(10px)}
.productionSeal span{width:48px;height:48px;display:grid;place-items:center;margin-bottom:10px;border-radius:50%;background:linear-gradient(135deg,#32d995,#6ce2bc);color:#071b13;font-size:25px;font-weight:900;box-shadow:0 0 0 8px rgba(66,220,161,.08)}
.productionSeal b,.productionSeal small{display:block}.productionSeal b{color:#8af0c8;font-size:11px;letter-spacing:.08em}.productionSeal small{margin-top:5px;color:#809487;font-size:10px}
.productionLayout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);gap:18px;align-items:stretch}
.productionPreview,.productionChoice{margin:0;border:1px solid var(--line-soft);border-radius:22px;background:linear-gradient(160deg,#141925,#0e121b);box-shadow:0 20px 65px rgba(0,0,0,.22)}
.productionPreview{overflow:hidden}
.productionPreviewImage{position:relative;display:grid;place-items:center;min-height:520px;padding:22px;background:radial-gradient(circle at 50% 45%,#273042,#0a0e15 70%)}
.productionPreviewImage img{display:block;width:100%;height:100%;max-height:610px;object-fit:contain;border-radius:15px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.46)}
.clientMode .productionPreviewImage::after{content:"Somente visualização";position:absolute;right:33px;bottom:31px;padding:6px 9px;border-radius:8px;background:#0009;color:#ffffffa8;font-size:10px;pointer-events:none}
.productionPreviewMeta{display:grid;gap:5px;padding:18px 20px;border-top:1px solid var(--line-soft)}
.productionPreviewMeta span{color:#a999ff;font-size:9px;font-weight:900;letter-spacing:.11em}
.productionPreviewMeta b{font-size:18px}.productionPreviewMeta small{color:var(--muted)}
.productionChoice{padding:30px}
.productionEyebrow{color:#ff7baa;font-size:10px;font-weight:900;letter-spacing:.12em}
.productionChoice h3{margin:8px 0 7px;font-size:30px;letter-spacing:-.025em}
.productionReminder{display:grid;grid-template-columns:46px minmax(0,1fr);gap:13px;align-items:center;margin:23px 0;padding:16px;border:1px solid rgba(226,187,114,.28);border-radius:16px;background:linear-gradient(110deg,rgba(226,187,114,.13),rgba(226,187,114,.035))}
.productionReminder>div{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#e2bb72;color:#241b0c;font-size:22px;font-weight:950}
.productionReminder p,.productionReminder b,.productionReminder span,.productionReminder strong{display:block;margin:0}
.productionReminder b{color:#f4dcae;font-size:13px}.productionReminder span{margin-top:3px;color:#b9b0a0;font-size:11px}.productionReminder strong{margin-top:8px;color:#fff;font-size:14px;line-height:1.4}
.productionActions{display:grid;gap:11px}
.productionAction{display:grid;grid-template-columns:48px minmax(0,1fr) 24px;gap:13px;align-items:center;min-height:86px;padding:15px 17px;border:1px solid rgba(255,255,255,.1);border-radius:16px;color:#fff;text-decoration:none;transition:transform .2s ease,filter .2s ease,border-color .2s ease}
.productionAction:hover{transform:translateY(-2px);filter:brightness(1.08)}
.productionAction.whatsapp{background:linear-gradient(135deg,#17684e,#168661);border-color:rgba(105,239,188,.25);box-shadow:0 16px 34px rgba(11,89,62,.18)}
.productionAction.store{background:linear-gradient(135deg,#ff4f91,#7b61ff);border-color:rgba(255,255,255,.14);box-shadow:0 16px 38px rgba(123,97,255,.22)}
.productionAction.disabled{opacity:.48;cursor:not-allowed;filter:saturate(.35)}
.productionAction.disabled:hover{transform:none;filter:saturate(.35)}
.productionActionIcon{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.13);font-size:24px}
.productionAction b,.productionAction small{display:block}.productionAction b{font-size:13px;letter-spacing:.035em}.productionAction small{margin-top:5px;color:#ffffffc4;font-size:11px}.productionAction i{font-size:21px;font-style:normal}
.productionQuoteShortcut{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}
.productionQuoteShortcut b,.productionQuoteShortcut small{display:block}.productionQuoteShortcut b{font-size:12px}.productionQuoteShortcut small{margin-top:4px;color:var(--muted);font-size:10px}
.productionQuoteShortcut .btn{flex:0 0 auto}
@media(max-width:980px){
  .productionLayout{grid-template-columns:1fr}
  .productionPreviewImage{min-height:420px}
}
@media(max-width:640px){
  .productionHero{align-items:flex-start;flex-direction:column;padding:25px 21px}.productionHero h2{font-size:31px}.productionHero p{font-size:14px}
  .productionSeal{width:100%;grid-template-columns:auto 1fr;column-gap:12px;justify-items:start;text-align:left}.productionSeal span{grid-row:1/3;margin:0}
  .productionPreviewImage{min-height:300px;padding:12px}
  .productionChoice{padding:21px 16px}.productionChoice h3{font-size:25px}
  .productionReminder{grid-template-columns:1fr}.productionReminder>div{width:36px;height:36px}
  .productionAction{grid-template-columns:42px minmax(0,1fr) 18px;padding:13px}.productionActionIcon{width:40px;height:40px}
  .productionQuoteShortcut{align-items:stretch;flex-direction:column}.productionQuoteShortcut .btn{width:100%}
}

/* V8.6.3 — aviso permanente em todos os fluxos de geração por IA */
.aiGenerationWarning{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:11px;
  align-items:center;
  margin:0 14px 14px;
  padding:12px 14px;
  border:1px solid rgba(226,187,114,.3);
  border-radius:14px;
  background:linear-gradient(110deg,rgba(226,187,114,.13),rgba(226,187,114,.035));
  color:#f8edd9;
  text-align:left;
}
.aiGenerationWarning>span{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#e2bb72;
  color:#241b0c;
  font-size:18px;
  font-weight:950;
  box-shadow:0 7px 22px rgba(226,187,114,.14);
}
.aiGenerationWarning b,.aiGenerationWarning p{display:block;margin:0}
.aiGenerationWarning b{color:#f4dcae;font-size:12px;letter-spacing:.015em}
.aiGenerationWarning p{margin-top:3px;color:#c8beaf;font-size:11px;line-height:1.45}
.mockupGeneratePanel .mockupAiWarning{grid-column:1/-1;margin:0}
.finalizationAiWarning{margin:18px 0 0;background:rgba(226,187,114,.09)}
.finalizationAiWarning p{color:#cfc3b3}
@media(max-width:860px){
  .mockupGeneratePanel .mockupAiWarning{grid-column:auto}
}
@media(max-width:520px){
  .aiGenerationWarning{grid-template-columns:30px minmax(0,1fr);gap:9px;margin-inline:10px;padding:11px}
  .aiGenerationWarning>span{width:29px;height:29px;border-radius:9px;font-size:16px}
  .mockupGeneratePanel .mockupAiWarning,.finalizationAiWarning{margin-inline:0}
}

/* V8.7.2 — navegação móvel e responsividade consolidada */
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{min-width:320px}
img,svg,video,canvas{max-width:100%}
main,.content,.page,.panel,.card,.hero,.studio,.mockupWorkspace,.mockupCatalog,.generationClient,.productionPage{min-width:0}
.mobileMenuClose{display:none}

@media(max-width:860px){
  body.mobileMenuLocked{overflow:hidden!important;touch-action:none}
  .app{display:block!important;width:100%;min-height:100dvh}
  .side{
    display:flex!important;
    position:fixed!important;
    inset:0 auto 0 0;
    z-index:120!important;
    width:min(86vw,320px)!important;
    height:100dvh!important;
    padding:max(16px,env(safe-area-inset-top)) 12px max(16px,env(safe-area-inset-bottom));
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    transform:translate3d(-105%,0,0)!important;
    visibility:visible!important;
    pointer-events:none;
    background:rgba(8,11,17,.985);
    box-shadow:24px 0 80px rgba(0,0,0,.72);
    transition:transform .25s cubic-bezier(.2,.8,.2,1);
  }
  .app.menuOpen .side{transform:translate3d(0,0,0)!important;pointer-events:auto}
  .side .brand{padding-right:50px}
  .side .nav{display:grid;gap:3px;margin-top:10px}
  .side .nav button{min-height:45px;margin:0;touch-action:manipulation}
  .side .api{margin-top:18px}
  .mobileMenuClose{
    position:absolute;
    top:max(14px,env(safe-area-inset-top));
    right:12px;
    z-index:2;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    background:#171d29;
    color:#fff;
    font-size:27px;
    line-height:1;
    cursor:pointer;
    touch-action:manipulation;
  }
  .sideBackdrop{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:110!important;
    width:100%!important;
    height:100%!important;
    border:0!important;
    background:rgba(0,0,0,.72)!important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease,visibility .22s ease;
  }
  .app.menuOpen .sideBackdrop{opacity:1;visibility:visible;pointer-events:auto}
  .mobileMenuBtn{
    display:inline-grid!important;
    place-items:center;
    flex:0 0 44px;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid rgba(255,255,255,.13);
    border-radius:12px;
    background:#171d29;
    color:#fff;
    font-size:22px;
    line-height:1;
    cursor:pointer;
    touch-action:manipulation;
  }
  main{width:100%;max-width:100vw;overflow:clip}
  .top{
    position:sticky;
    top:0;
    z-index:80;
    width:100%;
    min-height:68px;
    height:auto;
    padding:10px 12px;
    gap:10px;
  }
  .content{width:100%;padding:14px}
  .studio,.hero,.printHero,.productionLayout,.generationsHero{grid-template-columns:minmax(0,1fr)!important}
  .studio>.panel:last-child{grid-column:auto}
  .kpis,.projects,.history,.generationKpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mockupFields,.quoteFields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modal,.approvalOverlay{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
  .modalBox,.approvalLoader,.approvalSuccessCard{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto}
  .topActions,.resultActions,.mockupResultActions,.successActions,.printCheckoutActions{min-width:0;flex-wrap:wrap}
}

@media(max-width:640px){
  body{font-size:13px}
  .content{padding:10px}
  .top{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center}
  .topBrand{min-width:0;gap:8px}
  .topBrand .multixMark{display:none}
  .topBrand .titleBlock{display:block!important;min-width:0}
  .topBrand .titleBlock small{display:none}
  #pageTitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px!important}
  .topActions{margin:0;flex-wrap:nowrap;justify-content:flex-end}
  .topActions #openFolderTop{display:none!important}
  .topActions #newProjectTop{
    flex:0 0 42px;
    width:42px;
    min-height:42px;
    padding:0;
    overflow:hidden;
    font-size:0;
  }
  .topActions #newProjectTop::after{content:"+";font-size:22px;line-height:1}
  .userChip{max-width:126px;min-height:42px;padding:4px 5px 4px 8px;gap:5px}
  .userChip>div{min-width:0;overflow:hidden}
  .userChip b,.userChip small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .userChip .btn{padding:7px 8px;font-size:11px}
  .card,.panel{max-width:100%}
  .heroMain,.mockupHero,.generationsHero,.productionHero{padding:21px 17px}
  .heroMain h2,.mockupHero h2,.generationsHero h2,.productionHero h2{font-size:clamp(25px,8vw,31px)}
  .kpis,.projects,.history,.analysis,.row,.productGrid,.generationKpis,.mockupFields,.quoteFields{grid-template-columns:minmax(0,1fr)!important}
  .mockupTemplateGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mockupTemplate{min-width:0}
  .mockupProfessionSelector{width:100%;padding-bottom:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .mockupProfessionChip{min-height:42px}
  .mockupGeneratePanel{padding:17px}
  .mockupGenerateBtn,.mockupKitBtn{width:100%}
  .mockupResult{padding:10px}
  .mockupResultMeta{align-items:stretch;flex-direction:column}
  .mockupResultActions{display:grid;grid-template-columns:1fr;width:100%}
  .mockupResultActions .btn{width:100%}
  .generationAdvancedFilters,.generationAdminNotes>div{grid-template-columns:1fr!important}
  .generationClientToolbarActions,.productionQuoteShortcut{align-items:stretch;flex-direction:column}
  .generationClientToolbarActions>*{width:100%;justify-content:center}
  .productionPreviewImage{min-height:260px}
  .productionAction{grid-template-columns:40px minmax(0,1fr) 16px;gap:10px}
  .tutorialHero{align-items:flex-start;flex-direction:column}
  .tutorialGrid{grid-template-columns:1fr}
  .modal{place-items:start center;padding:12px}
  .modalBox{width:100%;margin:auto 0;padding:17px}
  .approvalSuccessCard{padding:32px 16px}
  .approvalSuccessCard h2{font-size:28px}
  .successActions{display:grid;grid-template-columns:1fr;width:100%}
  .successActions>*{width:100%;justify-content:center}
  input,select,textarea{max-width:100%;font-size:16px}
}

@media(max-width:480px){
  .content{padding:8px}
  .side{width:min(91vw,320px)!important}
  .top{padding-inline:8px;gap:7px}
  .userChip{max-width:none;border:0;background:transparent;padding:0}
  .userChip>div{display:none}
  .userChip .btn{min-height:42px}
  .mockupTemplateGrid,.mockupHistory{grid-template-columns:minmax(0,1fr)}
  .mockupTemplateText small{display:block}
  .mockupProfessionSummary{padding:10px}
  .mockupProfessionKitBadge,.mockupProfessionSoon{white-space:normal}
  .fontGallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .refs{grid-template-columns:1fr}
  .pipeline{display:grid;grid-template-columns:1fr 1fr}
  .step{text-align:center}
  .productionAction b{font-size:12px}
  .productionAction small{font-size:10px}
  .toast{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom))}
}

@media(max-width:360px){
  .content{padding:6px}
  .topBrand{display:none}
  .top{grid-template-columns:44px 1fr}
  .topActions{grid-column:2;justify-self:end}
  .card,.panelBody,.mockupGeneratePanel{padding:12px}
  .heroMain,.mockupHero,.generationsHero,.productionHero{padding:18px 14px}
  .pipeline{grid-template-columns:1fr}
}

/* V8.7.3 — MIA flutuante, espera visual e catálogo móvel */
.mobileMiaChat,.mobileMiaLauncher{display:none}

.mockupGenerationStatus{
  position:relative;
  overflow:hidden;
  min-height:96px;
}
.mockupGenerationStatus::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.055) 48%,transparent 76%);
  transform:translateX(-110%);
  animation:mockupStatusShimmer 2.4s linear infinite;
}
.mockupGenerationStatus>div{position:relative;z-index:1}
.mockupGenerationVisual{
  position:relative;
  width:92px;
  height:62px;
  flex:0 0 92px;
  perspective:500px;
}
.mockupPaper{
  position:absolute;
  width:57px;
  height:43px;
  border-radius:5px;
  background:#f8f7f3;
  box-shadow:0 10px 25px rgba(0,0,0,.32);
}
.mockupPaper.paperBack{
  left:7px;
  top:12px;
  transform:rotate(-10deg);
  border-bottom:5px solid #ff4f93;
  animation:mockupPaperBack 2.4s ease-in-out infinite;
}
.mockupPaper.paperFront{
  left:28px;
  top:6px;
  display:grid;
  align-content:center;
  gap:5px;
  padding:10px 8px;
  transform:rotate(6deg);
  border-bottom:5px solid #7c5cff;
  animation:mockupPaperFront 2.4s ease-in-out infinite;
}
.mockupPaper.paperFront i{
  display:block;
  height:3px;
  border-radius:99px;
  background:#c9c6d2;
}
.mockupPaper.paperFront i:nth-child(2){width:72%;background:#b89dff}
.mockupMagic{
  position:absolute;
  right:0;
  top:0;
  color:#ffd7eb;
  font-size:21px;
  text-shadow:0 0 14px #ff4f93,0 0 25px #7c5cff;
  animation:mockupMagic 1.25s ease-in-out infinite;
}
@keyframes mockupStatusShimmer{to{transform:translateX(110%)}}
@keyframes mockupPaperBack{50%{transform:translate(-3px,2px) rotate(-14deg)}}
@keyframes mockupPaperFront{50%{transform:translate(4px,-4px) rotate(9deg) scale(1.035)}}
@keyframes mockupMagic{50%{transform:translateY(-5px) rotate(18deg) scale(1.25);opacity:.65}}

@media(max-width:860px){
  body.miaChatReady .mobileMiaLauncher{
    position:fixed;
    right:max(14px,env(safe-area-inset-right));
    bottom:max(15px,env(safe-area-inset-bottom));
    z-index:105;
    display:flex;
    align-items:center;
    gap:8px;
    min-width:76px;
    height:58px;
    padding:6px 13px 6px 7px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:999px;
    background:linear-gradient(135deg,#ff4f91,#9b5dff 55%,#665cff);
    color:#fff;
    box-shadow:0 12px 35px rgba(0,0,0,.45),0 0 0 0 rgba(255,79,145,.45),0 0 30px rgba(124,92,255,.55);
    cursor:pointer;
    touch-action:manipulation;
    animation:miaLauncherGlow 2.1s ease-in-out infinite;
  }
  .mobileMiaLauncher>span{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(9,11,18,.5);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
  }
  .mobileMiaLauncher img{width:27px;height:27px}
  .mobileMiaLauncher b{font-size:12px;letter-spacing:.08em}
  .mobileMiaChat{
    display:flex;
    position:fixed;
    right:max(10px,env(safe-area-inset-right));
    bottom:max(82px,calc(env(safe-area-inset-bottom) + 72px));
    z-index:104;
    width:min(390px,calc(100vw - 20px));
    height:min(610px,calc(100dvh - 105px));
    min-height:380px;
    overflow:hidden;
    flex-direction:column;
    border:1px solid rgba(172,151,255,.38);
    border-radius:24px;
    background:linear-gradient(180deg,rgba(21,26,39,.99),rgba(10,14,22,.995));
    box-shadow:0 28px 90px rgba(0,0,0,.72),0 0 45px rgba(124,92,255,.18);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(18px) scale(.96);
    transform-origin:bottom right;
    transition:opacity .22s ease,visibility .22s ease,transform .22s ease;
  }
  .mobileMiaChat.open{
    display:flex;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
  }
  .mobileMiaHeader{
    display:grid;
    grid-template-columns:43px minmax(0,1fr) 40px;
    align-items:center;
    gap:10px;
    padding:12px;
    border-bottom:1px solid rgba(255,255,255,.09);
    background:linear-gradient(110deg,rgba(255,79,145,.16),rgba(124,92,255,.14));
  }
  .mobileMiaAvatar{
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:linear-gradient(135deg,#ff4f91,#755cff);
    box-shadow:0 0 24px rgba(124,92,255,.42);
  }
  .mobileMiaAvatar img{width:26px;height:26px}
  .mobileMiaHeader b,.mobileMiaHeader small{display:block}
  .mobileMiaHeader b{font-size:15px}
  .mobileMiaHeader small{margin-top:3px;overflow:hidden;color:#aeb7c8;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
  .mobileMiaHeader button{
    width:40px;
    height:40px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    background:#1b2230;
    color:#fff;
    font-size:24px;
    cursor:pointer;
  }
  .mobileMiaMessages{
    min-height:0;
    padding:12px;
    background:
      radial-gradient(circle at 100% 0,rgba(124,92,255,.09),transparent 38%),
      #0b1018;
  }
  .mobileMiaMessages .msg{font-size:13px}
  .mobileMiaEmpty{
    display:grid;
    gap:7px;
    margin:12px 0;
    padding:13px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;
    background:rgba(255,255,255,.04);
  }
  .mobileMiaEmpty span{color:var(--muted);font-size:11px;line-height:1.45}
  .mobileMiaEmpty .btn{margin-top:3px}
  .mobileMiaComposer{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    padding:10px;
    border-top:1px solid rgba(255,255,255,.09);
    background:#0c111a;
  }
  .mobileMiaComposer textarea{
    width:100%;
    min-height:48px;
    max-height:110px;
    padding:11px;
    border:1px solid var(--line);
    border-radius:13px;
    resize:none;
    background:#080c13;
    color:#fff;
    font-size:16px;
  }
  .mobileMiaComposer .btn{min-width:76px}
  .toast{z-index:180;bottom:max(84px,calc(env(safe-area-inset-bottom) + 74px))}
  body.mobileMiaOpen .toast{bottom:max(92px,calc(env(safe-area-inset-bottom) + 82px))}
  .modal,.approvalOverlay{z-index:150}
  .approvalSuccess{z-index:160}
  .mockupTemplateGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .mockupTemplate{border-radius:14px}
  .mockupTemplateText{padding:9px 8px 10px}
  .mockupTemplateText b{font-size:11px;line-height:1.25}
  .mockupTemplateText small{display:none!important}
  .mockupTemplateProfession{left:6px;bottom:6px;padding:3px 5px;font-size:7px}
  .mockupTemplateCheck{top:7px;right:7px;width:25px;height:25px}
}
@media(max-width:420px){
  .mobileMiaChat{
    left:8px;
    right:8px;
    width:auto;
    height:min(570px,calc(100dvh - 98px));
    border-radius:20px;
  }
  .mobileMiaComposer{grid-template-columns:1fr}
  .mobileMiaComposer .btn{width:100%;min-height:44px}
  .mockupGenerationStatus{align-items:flex-start;flex-direction:column;text-align:left}
  .mockupGenerationVisual{align-self:center}
}
@media(max-width:350px){
  .mockupTemplateText b{font-size:10px}
  .mockupTemplateProfession{display:none}
}
@keyframes miaLauncherGlow{
  50%{box-shadow:0 14px 38px rgba(0,0,0,.48),0 0 0 9px rgba(255,79,145,0),0 0 42px rgba(124,92,255,.72)}
}

/* V8.7.4 — seleção de materiais para individual ou kit */
.mockupSelectionStatus{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:14px;
  padding:13px 15px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:15px;
  background:rgba(255,255,255,.035);
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.mockupSelectionStatus>span{
  flex:0 0 38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#151b27;
  color:#fff;
  font-size:17px;
  font-weight:900;
}
.mockupSelectionStatus b,.mockupSelectionStatus small{display:block}
.mockupSelectionStatus small{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.4}
.mockupSelectionStatus.ready{
  border-color:rgba(65,214,151,.34);
  background:rgba(65,214,151,.07);
}
.mockupSelectionStatus.ready>span{background:linear-gradient(135deg,#20bd7c,#705cff)}
.mockupSelectionStatus.error{
  border-color:rgba(255,79,145,.62);
  background:rgba(255,79,145,.12);
  animation:mockupSelectionShake .28s ease 2;
}
.mockupSelectionStatus.error>span{background:linear-gradient(135deg,#ff4f91,#8c5cff)}
.mockupGenerateBtn[aria-disabled="true"],.mockupKitBtn[aria-disabled="true"]{
  filter:saturate(.55);
  opacity:.72;
}
.mockupTemplate{position:relative}
.mockupTemplate.selected{box-shadow:0 0 0 2px rgba(123,97,255,.32),0 16px 34px rgba(0,0,0,.24)}
@keyframes mockupSelectionShake{
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}
@media(max-width:620px){
  .mockupSelectionStatus{align-items:flex-start;padding:11px}
  .mockupSelectionStatus>span{flex-basis:34px;height:34px}
}

/* V8.7.5 — catálogo com largura constante */
@media(min-width:1201px){
  .mockupTemplateGrid{
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .mockupTemplate{min-width:0;border-radius:17px}
  .mockupTemplateText{padding:12px 13px 14px}
  .mockupTemplateText b{font-size:13px;line-height:1.3}
  .mockupTemplateText small{font-size:10px}
}
@media(min-width:861px) and (max-width:1200px){
  .mockupTemplateGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(min-width:641px) and (max-width:860px){
  .mockupTemplateGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}