.stage-frame{
  /* Keep 3:4; width drives size; height is NOT fixed */
  aspect-ratio: 3 / 4;
  width: min(100%, 900px);
  height: auto;
  /* Exact maximum height is set from JS via a CSS var */
  max-height: var(--stage-max-h, 90vh);

  background:#fff;
  border-radius:12px;
  border:1px solid #dde3f5;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#stage{ width:100%; height:auto; display:block; }

:root{
  --bg:#0e1116; --ink:#ecf2ff; --muted:#a9b3cc; --card:#171b23;
  --accent:#7bdff6; --accent2:#f6ae2d; --accent3:#c084fc;
  --ring:0 0 0 2px rgba(123,223,246,.25), 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:linear-gradient(180deg,#0d1015 0%,#0b0e13 100%);
  color:var(--ink); font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  display:flex; flex-direction:column;
}

/* Topbar */
.topbar{display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid #1f2430; position:sticky; top:0; background:#0f1320; z-index:10}
.topbar h1{font-size:18px; margin:0 6px 0 0}
.presets{display:flex; align-items:center; gap:8px; margin-left:6px}
.presets label{color:#cdd8f6; font-size:13px}
.presets select, .presets button{background:#1a2030; color:#e9efff; border:1px solid #2b3350; padding:6px 10px; border-radius:8px; cursor:pointer}
.mode-switch{margin-left:auto; display:flex; gap:8px}
.mode-switch .tab{background:#1a2030; color:#e9efff; border:1px solid #2b3350; padding:8px 12px; border-radius:8px; cursor:pointer}
.mode-switch .tab.active{outline:2px solid #7bdff6; background:#162032}
.actions{display:flex; gap:8px}
.actions button{background:#1f2637; color:#f3f7ff; border:1px solid #2b3350; padding:8px 12px; border-radius:8px; cursor:pointer}

/* App grid */
.app{flex:1; display:grid; gap:12px; padding:12px; min-height:0; grid-template-columns: 340px minmax(0,1fr) 340px; grid-template-areas: "left stage right"}

/* Panels */
.panel{background:var(--card); border:1px solid #1f2430; border-radius:12px; padding:0; box-shadow:var(--ring); min-height:0; overflow:auto}
.panel h2{margin:12px 12px 8px; font-size:16px}
.panel .panel-content{padding:12px}
.formrow{display:flex; gap:10px; align-items:center; margin:8px 0}
.formrow label{display:flex; align-items:center; gap:8px; min-width:160px; color:#cdd8f6}
select{flex:1; min-width:0; padding:8px 10px; border-radius:10px; border:1px solid #334060; background:#21283a; color:#e9efff; font-weight:600}
select:focus{outline:2px solid var(--accent3)}
.chip{width:28px; height:28px; border-radius:6px; background:#111; border:1px solid #334060; display:inline-block; overflow:hidden}

/* Stage (auto-sized via JS; never distorts) */
.stage{grid-area:stage; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0}
.stage-frame{aspect-ratio:3/4; width:100%; max-width:900px; background:#fff; border-radius:12px; border:1px solid #dde3f5; box-shadow:0 10px 30px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; overflow:hidden}
#stage{width:100%; height:auto; display:block}

/* Tools */
.toolrow{display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap}
.tool{background:#1f2637; border:1px solid #2b3450; color:#f3f7ff; padding:8px 10px; border-radius:10px; cursor:pointer; font-weight:600}
.tool.active{outline:2px solid var(--accent2); background:#2a3147}
.palette{display:grid; grid-template-columns: repeat(8, 1fr); gap:6px}
.swatchColor{width:100%; aspect-ratio:1/1; border-radius:8px; border:1px solid rgba(255,255,255,.15); cursor:pointer}
.stickers{display:grid; grid-template-columns: repeat(6, 1fr); gap:6px}
.stickerBtn{font-size:20px; padding:8px; border-radius:10px; border:1px solid #2b3450; background:#1f2637; color:#f3f7ff; cursor:pointer; font-weight:600}

.foot{padding:8px 14px; border-top:1px solid #1f2430; color:#aeb8d6; background:#0f1320}
button{transition:transform .06s ease} button:active{transform:scale(.98)}

/* Gallery modal */
.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6); z-index:100}
.modal[hidden]{display:none !important;}
.modal-card{width:min(980px, 92vw); max-height:86vh; overflow:auto; background:#0f1320; border:1px solid #1f2430; border-radius:12px; box-shadow:var(--ring); padding:10px}
.modal-card header{display:flex; align-items:center; justify-content:space-between}
.gallery-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:12px; padding:10px 0}
.thumb{background:#fff; border:1px solid #dde3f5; border-radius:10px; overflow:hidden; position:relative}
.thumb img{display:block; width:100%; height:auto}
.thumb .thumb-actions{position:absolute; inset:auto 6px 6px 6px; display:flex; gap:6px; justify-content:space-between}
.thumb button{background:#1f2637; color:#e8f1ff; border:1px solid #283149; padding:6px 8px; border-radius:8px; cursor:pointer}

/* Collapsible panels on phones */
.collapsible .panel-toggle{display:none}
@media (max-width: 1100px){
  .app{grid-template-columns: 1fr; grid-template-areas: "stage" "left" "right"}
  .panel .panel-content{padding:12px}
  .collapsible .panel-toggle{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border-bottom:1px solid #22293a; cursor:pointer; background:#141a27; color:#e9efff; border-radius:12px 12px 0 0}
  .collapsible.collapsed .panel-content{display:none}
}