/* Visual alignment for the homepage AI wrap studio. Functionality is unchanged. */
#ai.ap-playground{
  --ai-red:var(--ap-red,#ee0216);
  --ai-red-2:var(--ap-red-2,#ff2436);
  --ai-bg:#050a0e;
  --ai-panel:#0a1116;
  --ai-panel-2:#0d151b;
  --ai-line:rgba(255,255,255,.13);
  --ai-muted:#9ba6ae;
  position:relative;
  max-width:var(--ap-max,1760px);
  padding:54px var(--ap-side,clamp(20px,4vw,76px)) 70px;
  font-family:Montserrat,Arial,sans-serif;
}
#ai.ap-playground::before{
  content:"";
  position:absolute;
  display:block;
  inset:0 0 auto;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--ai-line) 12%,var(--ai-line) 88%,transparent);
}
#ai .ap-playground__heading{align-items:end;margin-bottom:24px}
#ai .ap-eyebrow{
  gap:10px;
  margin:0 0 12px;
  font:700 10px/1.4 Montserrat,Arial,sans-serif;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#bec6cc;
}
#ai .ap-eyebrow i{width:26px;height:2px;border-radius:0;background:var(--ai-red);box-shadow:0 0 10px rgba(238,2,22,.55)}
#ai .ap-eyebrow>span{color:#606b73}
#ai .ap-playground__heading h2{
  max-width:760px;
  font:900 clamp(28px,2.55vw,44px)/1.02 Montserrat,Arial,sans-serif;
  letter-spacing:-.045em;
  text-transform:uppercase;
}
#ai .ap-playground__heading h2 em{color:var(--ai-red)}
#ai .ap-playground__heading>p{max-width:360px;margin:0 0 4px;color:var(--ai-muted);font-size:11px;line-height:1.55;text-align:right}
#ai .ap-playground__shell{
  border:1px solid var(--ai-line);
  border-radius:5px;
  background:var(--ai-bg);
  box-shadow:0 22px 60px rgba(0,0,0,.22);
}
#ai .ap-playground__steps{
  min-height:64px;
  padding:0 26px;
  gap:clamp(24px,4vw,66px);
  border-bottom:1px solid var(--ai-line);
  background:#080d11;
}
#ai .ap-playground__steps li{gap:9px;font-family:Montserrat,Arial,sans-serif;font-size:10px;font-weight:700;color:#7f8a92}
#ai .ap-playground__steps b{
  width:24px;
  height:24px;
  border:1px solid #46515a;
  border-radius:3px;
  background:#0a1116;
  color:#89949c;
  font-size:9px;
  font-weight:700;
}
#ai .ap-playground__steps li.is-active{color:#fff}
#ai .ap-playground__steps li.is-active b{border-color:var(--ai-red);background:var(--ai-red);box-shadow:0 6px 18px rgba(238,2,22,.22)}
#ai .ap-playground__steps li.is-done b{border-color:var(--ai-red);color:#fff}
#ai .ap-playground__grid{grid-template-columns:minmax(0,1fr) minmax(350px,390px);min-height:610px}
#ai .ap-playground__canvas{background:#060b0f}
#ai .ap-playground__canvas-top{height:58px;padding:0 24px;border-bottom:1px solid rgba(255,255,255,.06);font-size:8px;color:#8f9aa2}
#ai .ai-preview-frame{background:#060b0f}
#ai .ai-preview-frame>img,#ai .ap-ai-result-compare>img,#ai .ap-ai-result-after,#ai .ap-ai-result-after>img{background:#060b0f}
#ai .ap-ai-demo__label{border:1px solid rgba(255,255,255,.18);border-radius:3px;background:rgba(5,10,14,.78);font-family:Montserrat,Arial,sans-serif}
#ai .ap-playground__canvas-bottom{min-height:68px;padding:14px 24px;border-top:1px solid var(--ai-line);background:#080d11}
#ai .ap-ai-help{font-family:Montserrat,Arial,sans-serif;font-size:10px;font-weight:700;color:#d8dde1}
#ai .ap-ai-help>span{color:var(--ai-red)}
#ai .ap-ai-model-credit{color:#748089}
#ai .ap-playground__controls{
  padding:24px 22px 20px;
  border-left:1px solid var(--ai-line);
  background:linear-gradient(180deg,#0d1419,#080d11);
}
#ai .ap-playground__controls::before{background:linear-gradient(180deg,rgba(238,2,22,.06),transparent 150px)}
#ai .ap-ai-panel-head{margin:-2px 0 22px;padding-bottom:14px;border-bottom:1px solid var(--ai-line)}
#ai .ap-ai-panel-head>span{font-family:Montserrat,Arial,sans-serif;font-size:9px;letter-spacing:.17em}
#ai .ap-ai-panel-head i{width:5px;height:5px;background:var(--ai-red);box-shadow:0 0 0 4px rgba(238,2,22,.09),0 0 13px rgba(238,2,22,.65)}
#ai .ap-ai-panel-head small{color:#7f8a92;font-size:7px}
#ai .ap-ai-control-title{margin-bottom:11px;font-family:Montserrat,Arial,sans-serif;font-size:11px;font-weight:800}
#ai .ap-ai-control-title b{
  width:25px;
  height:25px;
  border:1px solid rgba(238,2,22,.42);
  border-radius:3px;
  background:rgba(238,2,22,.08);
  color:#ff5361;
  font-size:8px;
}
#ai .ai-upload-zone{
  min-height:138px;
  margin-bottom:22px;
  padding:16px;
  border:1px solid #334049;
  border-radius:4px;
  background:#0b141a;
  box-shadow:none;
}
#ai .ai-upload-zone::before{background:linear-gradient(90deg,transparent,rgba(238,2,22,.62),transparent);box-shadow:0 0 16px rgba(238,2,22,.15)}
#ai .ai-upload-zone::after{background:linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);background-size:22px 22px}
#ai .ai-upload-zone:hover,#ai .ai-upload-zone.is-dragover{transform:none;border-color:var(--ai-red);background:#10161b;box-shadow:0 0 0 3px rgba(238,2,22,.08)}
#ai .ai-upload-placeholder>b{width:42px;height:42px;border:1px solid rgba(238,2,22,.6);border-radius:3px;background:rgba(238,2,22,.11);box-shadow:none;color:#fff}
#ai .ai-upload-placeholder em{color:#ff5b68}
#ai .ai-upload-placeholder strong,#ai .ai-upload-preview span strong{font-family:Montserrat,Arial,sans-serif}
#ai .ai-upload-preview img{border-radius:3px}
#ai .ap-ai-style-library{padding:0 1px 3px}
#ai .ai-quick-colors{gap:7px}
#ai .ai-quick-color{
  min-height:76px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:3px;
  background:#0d151b;
  box-shadow:none;
  font-family:Montserrat,Arial,sans-serif;
  color:#aeb8bf;
}
#ai .ai-quick-color::before{border-radius:3px;box-shadow:inset 0 1px rgba(255,255,255,.38)}
#ai .ai-quick-color:hover{transform:none;border-color:rgba(238,2,22,.65);background:#111a20;box-shadow:none;color:#fff}
#ai .ai-quick-color.is-active{border-color:var(--ai-red);background:rgba(238,2,22,.11);box-shadow:inset 3px 0 var(--ai-red);color:#fff}
#ai .ai-quick-color.is-active::after{right:5px;top:5px;width:14px;height:14px;border-radius:2px;background:var(--ai-red);box-shadow:none}
#ai .ai-quick-toggle{font-family:Montserrat,Arial,sans-serif;color:#d0d6da}
#ai .ap-ai-custom{border-color:var(--ai-line)}
#ai .ap-ai-custom summary{font-family:Montserrat,Arial,sans-serif;color:#e6eaed}
#ai #aiWrapColor{border-radius:3px;background:#071015;font-family:Montserrat,Arial,sans-serif}
#ai #aiWrapCustomColor{border-radius:3px}
#ai .ap-ai-selected{min-height:42px;border:1px solid var(--ai-line);border-radius:3px;background:#071015}
#ai #aiWrapSubmit{
  min-height:58px;
  padding:11px 13px 11px 16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:3px;
  background:linear-gradient(180deg,#ff1b30 0%,#e60015 56%,#c90013 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.32),0 10px 25px rgba(238,2,22,.22);
  font-family:Montserrat,Arial,sans-serif;
}
#ai #aiWrapSubmit::after{display:none}
#ai #aiWrapSubmit b{width:34px;height:34px;border-radius:3px;background:rgba(0,0,0,.12)}
#ai #aiWrapSubmit:hover{transform:translateY(-2px);background:linear-gradient(180deg,#ff273a,#ed0016 56%,#d50014);box-shadow:inset 0 1px rgba(255,255,255,.34),0 14px 28px rgba(238,2,22,.3)}
#ai #aiWrapStatus{font-family:Montserrat,Arial,sans-serif}
#ai .ap-playground__foot{border-color:var(--ai-line);font-family:Montserrat,Arial,sans-serif}
#ai .ap-ai-compare{border-radius:3px}
#ai .ap-ai-compare button{border-radius:2px;font-family:Montserrat,Arial,sans-serif}
#ai .ap-ai-result-actions a,#ai #aiDesignPrice,#ai .ap-ai-video-ready,#ai .ap-ai-video-cta,#ai .ap-ai-video-launch{border-radius:3px;font-family:Montserrat,Arial,sans-serif}
#ai .ap-ai-result-actions #aiChooseDesignBtn{background:var(--ai-red);border-color:var(--ai-red)}
#ai .ai-preview-progress,#ai .ap-ai-processing-steps li,#ai .ap-ai-video-steps li{border-radius:3px}

@media(max-width:1000px){
  #ai.ap-playground{padding:44px 24px 58px}
  #ai .ap-playground__grid{grid-template-columns:minmax(0,1fr) 330px}
}
@media(max-width:720px){
  #ai.ap-playground{padding:38px 16px 48px}
  #ai .ap-playground__heading{margin-bottom:18px}
  #ai .ap-playground__heading h2{max-width:330px;font-size:clamp(27px,8.3vw,34px)}
  #ai .ap-playground__heading h2 em{display:inline}
  #ai .ap-playground__shell{border-radius:4px}
  #ai .ap-playground__steps{min-height:58px;padding:0 12px}
  #ai .ap-playground__steps li{font-size:8px;gap:5px}
  #ai .ap-playground__steps b{width:21px;height:21px}
  #ai .ap-playground__grid{grid-template-columns:1fr}
  #ai .ap-playground__canvas-top{height:46px;padding:0 14px}
  #ai .ai-preview-frame{height:clamp(245px,68vw,290px)}
  #ai .ap-playground__canvas-bottom{min-height:50px;padding:12px 14px}
  #ai .ap-playground__controls{padding:20px 14px 18px;border-left:0;border-top:1px solid var(--ai-line)}
  #ai .ai-upload-zone{min-height:134px;padding:14px}
  #ai .ai-quick-color{min-height:72px}
  #ai #aiWrapSubmit{min-height:58px}
}
@media(max-width:370px){
  #ai .ap-playground__steps li{font-size:7px}
  #ai .ap-playground__steps li{gap:4px}
  #ai .ap-playground__steps b{width:19px;height:19px;font-size:7px}
  #ai .ai-quick-colors{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){#ai #aiWrapSubmit:hover{transform:none}}