*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:#000;color:#fff;font:16px/1.4 Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:.75rem;justify-content:space-between;padding:.75rem 1rem;background:#fff;color:#111;border-bottom:1px solid #ddd}
.brand{font-weight:700}
.actions{display:flex;align-items:center;gap:.5rem}
.btn{background:#222;color:#fff;border:1px solid #444;border-radius:8px;padding:.55rem .8rem;cursor:pointer}
.btn.primary{background:#0ea5e9;border-color:#0ea5e9}
.btn.upload{background:#111;border-color:#333}
.select{background:#111;border:1px solid #333;color:#fff;border-radius:8px;padding:.5rem .6rem}
.wrap{display:grid;grid-template-columns:1fr 420px;gap:1.25rem;padding:1rem}
@media (max-width:1000px){.wrap{grid-template-columns:1fr}.panel{order:2}.stage-wrap{order:1}}
.stage-wrap{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.stage{position:relative;width:min(82vmin,720px);height:min(82vmin,720px);background:#000;margin:auto;border-radius:50%;border:4px solid #fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.stage .base{max-width:86%;height:auto;user-select:none;pointer-events:none}
.item{position:absolute;touch-action:none;transform-origin:center center}
.item .del{position:absolute;top:-12px;right:-12px;display:none;background:#e11d48;color:#fff;border-radius:999px;width:24px;height:24px;align-items:center;justify-content:center;font-size:14px;border:2px solid #fff}
.item.active .del{display:flex}
.hint{opacity:.75;font-size:.9rem}
.panel{background:#0b0b0b;border:1px solid #222;border-radius:12px;padding:1rem}
.picker{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.select-label{opacity:.7}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.8rem}
.thumb{background:#0f0f0f;border:1px solid #242424;border-radius:12px;padding:.6rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;cursor:pointer}
.thumb img{width:110px;height:110px;object-fit:contain;display:block}
.thumb figcaption{font-size:.85rem;opacity:.9}
.topbar .btn,.topbar .select{color:#fff}


/* v7.4 Free Transform styles */
.item { position:absolute; touch-action: none; min-width:24px; min-height:24px; }
.item.selected { outline: 3px solid #ff4b77; outline-offset: 2px; }
.delete-btn {
  position:absolute; top:-18px; right:-18px; width:28px; height:28px;
  background:red; color:#fff; border-radius:50%; text-align:center; line-height:28px;
  font-weight:700; font-size:18px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.3); z-index:10;
}
.resize-handle {
  position:absolute; bottom:-10px; right:-10px; width:20px; height:20px;
  background:#fff; border:2px solid #ff4b77; border-radius:4px; cursor:se-resize;
  box-shadow:0 1px 3px rgba(0,0,0,.25); z-index:12;
}
@media (max-width: 768px) {
  .resize-handle { bottom:-14px; right:-14px; width:28px; height:28px; border-width:3px; }
  .delete-btn { width:34px; height:34px; line-height:34px; top:-22px; right:-22px; font-size:20px; }
}


/* v7.5 Visual Stretch Fix: ensure smooth scaling */
.item.selected { outline: 3px solid #ff4b77; outline-offset: 2px; }


/* === Fixed Save-to-Photos button (mobile-first) === */
.save-fab{
  position:fixed;
  right:16px;
  top:16px;
  z-index:10000;
  padding:10px 16px;
  border:0;
  border-radius:999px;
  background:linear-gradient(90deg,#ff4b77,#ff7a59);
  color:#fff;
  font-weight:800;
  font-size:15px;
  box-shadow:0 6px 14px rgba(255,75,119,.35);
  cursor:pointer;
  transition:transform .1s ease-in-out, opacity .2s;
}
.save-fab:active{ transform:scale(.97); }
@media (max-width:768px){
  .save-fab{ padding:12px 18px; font-size:16px; }
}