.creator-panel { max-width:1120px; margin:28px auto; padding:28px; border:1px solid var(--line); border-radius:20px; background:var(--paper); color:var(--ink); }
.creator-panel h2 {font-size:20px;margin:0 0 10px;}.creator-panel p {font-size:12px;line-height:1.8;color:var(--muted);}
.preset-buttons,.creator-actions {display:flex;flex-wrap:wrap;gap:10px;margin:18px 0;}
.creator-panel button,.exit-customer-preview {min-height:44px;border:1px solid var(--line);border-radius:10px;padding:10px 16px;background:var(--control);color:var(--ink);font-size:12px;}
.effect-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 26px;}
.effect-grid label {display:grid;grid-template-columns:1fr auto;gap:12px;font-size:12px;}.effect-grid input,.effect-grid select{width:100%;grid-column:1/-1;}.effect-grid select{padding:8px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:8px;}
.effect-grid output {font-variant-numeric:tabular-nums;color:var(--accent);}
.exit-customer-preview {position:fixed;top:max(12px,env(safe-area-inset-top));right:16px;z-index:10;}.exit-customer-preview[hidden]{display:none;}
.mobile-view .creator-panel {display:none!important;}
@media(max-width:760px){.creator-panel{margin:24px;padding:20px;}.effect-grid{grid-template-columns:1fr 1fr;}.creator-actions{flex-direction:column;}}
@media(min-width:1101px){.mobile-view .stage{left:calc((100vw - min(80vw,780px))/2);right:calc((100vw - min(80vw,780px))/2);}}
@media(min-width:1101px){
  html[data-mode="creator"]:not(.mobile-view) main{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px 28px;padding:10px 38px 32px;align-items:start;}
  html[data-mode="creator"]:not(.mobile-view) .gallery{position:sticky;top:20px;grid-column:1;grid-row:1 / span 3;height:calc(100vh - 130px);min-height:440px;max-height:950px;}
  html[data-mode="creator"]:not(.mobile-view) .artwork-bar{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:stretch;gap:18px;margin:0;padding:20px;}
  html[data-mode="creator"]:not(.mobile-view) .finish-cluster{flex-direction:column;align-items:stretch;gap:18px;}
  html[data-mode="creator"]:not(.mobile-view) .finish-control{width:100%;}
  html[data-mode="creator"]:not(.mobile-view) .parameter-panel{position:static;grid-column:2;grid-row:2;width:100%;margin:0;padding:20px;}
  html[data-mode="creator"]:not(.mobile-view) .creator-panel{grid-column:2;grid-row:3;margin:0;padding:20px;}
  html[data-mode="creator"]:not(.mobile-view) .effect-grid{grid-template-columns:1fr;}
}