:root{
  --ams-primary:#F58220;
  --ams-secondary:#111827;
  --ams-accent:#FFB067;
  --ams-bg:#F8FAFC;
  --ams-surface:#FFFFFF;
  --ams-text:#0F172A;
  --ams-muted:#64748B;
  --ams-border:#E2E8F0;
  --ams-font:Inter,Arial,sans-serif;
  --ams-radius:18px;
  --ams-button-radius:14px;
  --ams-container:1320px;
}

.ams-app{font-family:var(--ams-font);color:var(--ams-text)}
.ams-app *{box-sizing:border-box}

.ams-shell{
  max-width:var(--ams-container);
  margin:0 auto;
  padding:24px;
}

.ams-hero{
  background:linear-gradient(135deg,rgba(245,130,32,.10),#fff);
  border:1px solid var(--ams-border);
  border-radius:calc(var(--ams-radius) + 8px);
  padding:32px;
  box-shadow:0 20px 50px rgba(15,23,42,.08);
  margin-bottom:24px;
}

.ams-badge{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(245,130,32,.12);
  color:var(--ams-primary);
  font-size:13px;
  font-weight:800;
  margin-bottom:14px;
}

.ams-hero h2{
  margin:0 0 10px;
  font-size:clamp(30px,4vw,50px);
  line-height:1.06;
}

.ams-hero p{
  margin:0;
  color:var(--ams-muted);
  font-size:18px;
  max-width:920px;
}

.ams-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:24px;
}

.ams-step-pill{
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid var(--ams-border);
  border-radius:18px;
  padding:14px 16px;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}

.ams-step-pill span{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#eef2f7;
  font-weight:800;
}

.ams-step-pill strong{
  font-size:14px;
  line-height:1.3;
}

.ams-step-pill.is-active{
  border-color:var(--ams-primary);
  transform:translateY(-1px);
}

.ams-step-pill.is-active span{
  background:var(--ams-primary);
  color:#fff;
}

.ams-step-pill.is-done span{
  background:#10b981;
  color:#fff;
}

.ams-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:24px;
}

.ams-panel{
  display:none;
  background:#fff;
  border:1px solid var(--ams-border);
  border-radius:calc(var(--ams-radius) + 4px);
  box-shadow:0 20px 50px rgba(15,23,42,.06);
  padding:24px;
}

.ams-panel.is-active{display:block}

.ams-panel-head{
  margin-bottom:20px;
}

.ams-panel-head h3{
  margin:0 0 8px;
  font-size:28px;
}

.ams-panel-head p{
  margin:0;
  color:var(--ams-muted);
}

.ams-products,
.ams-mockups{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.ams-card{
  width:100%;
  text-align:left;
  border:1px solid var(--ams-border);
  border-radius:20px;
  background:#fff;
  box-shadow:0 12px 30px rgba(15,23,42,.06);
  overflow:hidden;
  cursor:pointer;
  transition:.25s ease;
}

.ams-card:hover{
  transform:translateY(-3px);
  border-color:rgba(245,130,32,.35);
}

.ams-thumb{
  aspect-ratio:16/10;
  background:#f1f5f9;
  overflow:hidden;
}

.ams-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ams-card-body{
  padding:18px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.ams-card-icon{
  width:52px;
  height:52px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(245,130,32,.10);
  flex:0 0 auto;
  font-size:24px;
}

.ams-card-body h4{
  margin:0 0 8px;
  font-size:20px;
}

.ams-card-body p{
  margin:0;
  color:var(--ams-muted);
  line-height:1.5;
}

.ams-editor{
  display:grid;
  grid-template-columns:380px minmax(0,1fr);
  gap:22px;
}

.ams-controls{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.ams-control-card,
.ams-summary-card,
.ams-form-card,
.ams-side-card{
  background:#fff;
  border:1px solid var(--ams-border);
  border-radius:18px;
  padding:18px;
  box-shadow:0 12px 28px rgba(15,23,42,.05);
}

.ams-control-card label,
.ams-field label{
  display:block;
  font-size:14px;
  font-weight:800;
  margin-bottom:10px;
}

.ams-control-card input[type="file"],
.ams-control-card input[type="text"],
.ams-field input,
.ams-field textarea{
  width:100%;
  border:1px solid var(--ams-border);
  background:#fff;
  color:var(--ams-text);
  border-radius:14px;
  padding:14px 16px;
  transition:.2s ease;
}

.ams-control-card input:focus,
.ams-field input:focus,
.ams-field textarea:focus{
  outline:none;
  border-color:var(--ams-primary);
  box-shadow:0 0 0 4px rgba(245,130,32,.12);
}

.ams-inline-row{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:10px;
  align-items:center;
}

.ams-inline-cta{
  display:grid;
  grid-template-columns:minmax(0,1fr) 90px;
  gap:10px;
  align-items:center;
}

.ams-inline-row input[type="color"]{
  width:100%;
  height:46px;
  border-radius:12px;
  padding:4px;
  border:1px solid var(--ams-border);
  background:#fff;
}

.ams-range{
  display:grid;
  grid-template-columns:50px 1fr;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}

.ams-range span{
  font-size:13px;
  font-weight:700;
  color:var(--ams-muted);
}

.ams-preview-card{
  background:#fff;
  border:1px solid var(--ams-border);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 14px 35px rgba(15,23,42,.06);
}

.ams-preview-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 18px;
  border-bottom:1px solid var(--ams-border);
}

.ams-preview-status{
  color:var(--ams-muted);
  font-size:13px;
}

.ams-stage-wrap{
  padding:18px;
  background:linear-gradient(180deg,#f8fafc,#eef2f7);
}

.ams-stage{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:18px;
  background:#d8e2eb;
  border:1px solid rgba(15,23,42,.08);
}

.ams-stage-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.ams-stage-clip,
.ams-stage-logo,
.ams-stage-text{
  position:absolute;
  inset:0;
}

.ams-stage-clip{
  overflow:hidden;
}

.ams-media-el,
.ams-logo-el{
  position:absolute;
  object-fit:cover;
  transform-origin:center center;
}

.ams-media-el{
  will-change:transform;
}

.ams-stage-text{
  pointer-events:none;
  line-height:1.1;
  text-shadow:0 2px 16px rgba(0,0,0,.24);
  padding-right:20px;
}

.ams-hint{
  padding:14px 18px 18px;
  color:#8a5a15;
  background:rgba(255,176,103,.18);
  border-top:1px solid rgba(255,176,103,.35);
}

.ams-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}

.ams-btn{
  appearance:none;
  border:none;
  border-radius:var(--ams-button-radius);
  padding:14px 18px;
  font-weight:800;
  cursor:pointer;
  transition:.2s ease;
  line-height:1;
  background:linear-gradient(135deg,var(--ams-primary),#ff9b48);
  color:#fff;
  box-shadow:0 12px 26px rgba(245,130,32,.22);
}

.ams-btn:hover{transform:translateY(-1px)}
.ams-btn:disabled{opacity:.6;cursor:not-allowed}

.ams-btn-secondary{
  background:#fff;
  color:var(--ams-text);
  border:1px solid var(--ams-border);
  box-shadow:none;
}

.ams-final{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:22px;
}

.ams-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.ams-field-full{grid-column:1/-1}

.ams-summary-list{
  margin:0;
  padding-left:18px;
}

.ams-summary-list li{
  margin-bottom:10px;
}

.ams-message{
  margin-top:16px;
}

.ams-success,
.ams-error,
.ams-empty{
  border-radius:14px;
  padding:14px 16px;
  font-weight:700;
}

.ams-success{
  background:rgba(16,185,129,.12);
  color:#047857;
}

.ams-error{
  background:rgba(239,68,68,.10);
  color:#b91c1c;
}

.ams-empty{
  border:1px dashed var(--ams-border);
  color:var(--ams-muted);
  text-align:center;
}

.ams-ai-results{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.ams-ai-option{
  width:100%;
  text-align:left;
  border:1px solid var(--ams-border);
  border-radius:12px;
  padding:10px 12px;
  background:#f8fafc;
  cursor:pointer;
}

.ams-side{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.ams-side-card h4{
  margin:0 0 12px;
  font-size:20px;
}

.ams-side-card ul{
  margin:0;
  padding-left:18px;
  color:var(--ams-muted);
}

@media (max-width:1100px){
  .ams-layout,
  .ams-editor,
  .ams-final{
    grid-template-columns:1fr;
  }
}

@media (max-width:767px){
  .ams-shell{padding:16px}
  .ams-steps{grid-template-columns:1fr}
  .ams-products,
  .ams-mockups,
  .ams-form-grid{
    grid-template-columns:1fr;
  }
  .ams-panel{padding:18px}
  .ams-hero{padding:24px}
  .ams-hero p{font-size:16px}
  .ams-inline-cta{grid-template-columns:1fr}
}
.ams-export-btn{
  margin-left:auto;
}

.ams-export-canvas{
  display:none;
}

.ams-draggable-media{
  cursor:grab;
  user-select:none;
}

.ams-draggable-media.is-dragging{
  cursor:grabbing;
  opacity:.95;
}

.ams-dropzone{
  position:relative;
  border:2px dashed var(--ams-border);
  border-radius:16px;
  padding:18px;
  background:#fbfdff;
  text-align:center;
  color:var(--ams-muted);
  cursor:pointer;
  transition:.2s ease;
}

.ams-dropzone:hover,
.ams-dropzone.is-dragover{
  border-color:var(--ams-primary);
  background:rgba(245,130,32,.05);
  color:var(--ams-primary);
}

.ams-dropzone input[type="file"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}