:root{font-family:Inter,Arial,sans-serif;color:#171717;background:#f4f4f2}
*{box-sizing:border-box}body{margin:0}.app{max-width:1280px;margin:0 auto;padding:20px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.brand{font-weight:900;letter-spacing:.04em}.badge{font-size:11px;font-weight:800;letter-spacing:.12em;color:#8a6c43}.shell{display:grid;grid-template-columns:1fr 300px;gap:16px}.workspace{min-width:0;background:#fff;border:1px solid #deded9;border-radius:16px;padding:14px;box-shadow:0 5px 18px rgba(0,0,0,.05)}.toolbar{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:12px}.toolbar button,.side-tabs button,.panel button{border:1px solid #d7d7d2;background:#fff;border-radius:9px;min-height:36px;padding:8px 11px;font:inherit;font-weight:700;cursor:pointer}.toolbar button:hover,.side-tabs button:hover,.panel button:hover{border-color:#9e835f}.toolbar button:disabled,.panel button:disabled{opacity:.35;cursor:not-allowed}.toolbar .danger{color:#9f2020}.divider{width:1px;height:26px;background:#ddd}.side-tabs{display:flex;gap:6px;margin-left:auto}.side-tabs button.active{background:#171717;color:#fff;border-color:#171717}.stage-shell{position:relative;display:flex;justify-content:center;align-items:flex-start;min-height:520px;padding:28px 8px 52px;background:linear-gradient(145deg,#fafafa,#efefec);border-radius:13px;overflow:auto}.card-viewport{position:relative;width:min(100%,860px);height:540px}.card{position:absolute;left:0;top:0;width:860px;height:540px;transform-origin:top left;border-radius:34px;background:#161616;box-shadow:0 18px 38px rgba(0,0,0,.25);overflow:visible;touch-action:none}.card::before{display:none}.object-layer{position:absolute;inset:0;overflow:hidden;border-radius:34px}.design-object{position:absolute;transform-origin:center center;user-select:none;touch-action:none;cursor:move;display:flex;align-items:center;justify-content:center}.design-object.text{display:grid;align-content:center;justify-content:stretch;white-space:pre-wrap;line-height:1.05;overflow:visible}.design-object.selected{outline:none}.cutout{position:absolute;inset:0;width:100%;height:100%;z-index:30;pointer-events:none}.cutout path{fill:#f5f5f2;stroke:#070707;stroke-width:2.2;vector-effect:non-scaling-stroke}.selection{position:absolute;border:2px solid #5d7cff;z-index:50;pointer-events:none;display:none;transform-origin:center center}.handle{position:absolute;width:15px;height:15px;border:2px solid #5d7cff;background:#fff;border-radius:50%;pointer-events:auto}.handle.nw{left:-9px;top:-9px}.handle.ne{right:-9px;top:-9px}.handle.sw{left:-9px;bottom:-9px}.handle.se{right:-9px;bottom:-9px}.drag-edge{position:absolute;pointer-events:auto;cursor:move}.drag-edge.top{left:12px;right:12px;top:-7px;height:14px}.drag-edge.bottom{left:12px;right:12px;bottom:-7px;height:14px}.drag-edge.left{top:12px;bottom:12px;left:-7px;width:14px}.drag-edge.right{top:12px;bottom:12px;right:-7px;width:14px}.rotate-zone{position:absolute;width:30px;height:30px;pointer-events:auto;border-radius:50%;cursor:grab}.rotate-zone::after{content:"↻";position:absolute;inset:2px;display:grid;place-items:center;border:1px solid #5d7cff;border-radius:50%;background:#fff;color:#4567ef;font-size:18px;font-weight:800;opacity:0;transform:scale(.82);transition:opacity .12s ease,transform .12s ease}.rotate-zone:hover::after,.rotate-zone:active::after{opacity:1;transform:scale(1)}.rotate-zone.nw{left:-34px;top:-34px}.rotate-zone.ne{right:-34px;top:-34px}.rotate-zone.sw{left:-34px;bottom:-34px}.rotate-zone.se{right:-34px;bottom:-34px}.rotation-badge{display:none;position:absolute;left:50%;top:-42px;transform:translateX(-50%);background:#171717;color:#fff;padding:3px 7px;border-radius:6px;font-size:11px;white-space:nowrap}.selection.rotating .rotation-badge{display:block}.guide-v,.guide-h{position:absolute;display:none;z-index:45;pointer-events:none;background:#7d63ff}.guide-v{left:50%;top:0;bottom:0;width:1px}.guide-h{top:50%;left:0;right:0;height:1px}.guide-v.show,.guide-h.show{display:block}.panel{background:#fff;border:1px solid #deded9;border-radius:16px;padding:16px;box-shadow:0 5px 18px rgba(0,0,0,.05);align-self:start}.panel h2{margin:0 0 4px;font-size:18px}.panel .sub{font-size:12px;color:#777;margin-bottom:16px;line-height:1.45}.field{margin:12px 0}.field label{display:block;font-size:11px;font-weight:800;margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em}.field input,.field select,.field textarea{width:100%;border:1px solid #d7d7d2;border-radius:8px;padding:9px;font:inherit}.field textarea{min-height:82px;resize:vertical}.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metrics{margin-top:14px;padding-top:12px;border-top:1px solid #eee;font-size:12px;color:#666;line-height:1.7}.status{margin-top:12px;padding:10px;border-radius:9px;background:#f7f4ee;font-size:12px;line-height:1.45}.empty-editor{color:#888;font-size:13px;line-height:1.5}.mobile-note{display:none}
@media(max-width:900px){.shell{grid-template-columns:1fr}.panel{order:2}.stage-shell{min-height:400px}.mobile-note{display:block;font-size:11px;color:#777;margin-top:8px}}
@media(max-width:560px){.app{padding:10px}.workspace{padding:8px}.toolbar{gap:5px}.toolbar button{min-height:34px;padding:7px 8px;font-size:12px}.side-tabs{width:100%;margin-left:0}.side-tabs button{flex:1}.stage-shell{padding-left:0;padding-right:0}.panel{padding:13px}}

.pricing-box{margin-top:14px;padding-top:14px;border-top:1px solid #ecece8}
.pricing-label{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#777;margin-bottom:3px}
.pricing-box strong{font-size:16px}
.price-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-top:1px solid #f0f0ed;font-size:13px}
.price-row.total{font-size:15px}.price-row.total strong{font-size:20px}
.pricing-note{font-size:11px;line-height:1.4;color:#777;margin-top:8px}
#invertImageBtn{width:100%}

.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.segmented button{min-height:34px;padding:6px 8px}
.segmented button.active{background:#171717;color:#fff;border-color:#171717}
.toggle-row{align-items:center;margin:10px 0}
.toggle-row label{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700}
.toggle-row input{width:auto}
.permission-note{font-size:11px;line-height:1.4;color:#80663f;margin-top:8px}
.template-locked{opacity:.96}
@media(max-width:560px){
  .handle{width:34px;height:34px;border-width:3px}
  .handle.nw{left:-18px;top:-18px}.handle.ne{right:-18px;top:-18px}
  .handle.sw{left:-18px;bottom:-18px}.handle.se{right:-18px;bottom:-18px}
  .rotate-stem{top:-55px;height:38px}
  .rotate-handle{top:-78px;width:38px;height:38px;border-width:3px}
  .rotation-badge{top:-112px;font-size:18px;padding:6px 10px}
  .panel{position:relative}
}

.card.portrait{width:540px;height:860px}
.card.portrait .cutout{
  width:860px;
  height:540px;
  transform-origin:top left;
  transform:translateX(540px) rotate(90deg);
}
#rotateProductBtn.active{background:#171717;color:#fff;border-color:#171717}

/* v22-inspired contextual toolbar */
.toolbar{
  position:sticky;
  top:8px;
  z-index:80;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  padding:7px 9px;
  border:1px solid #e4d9cb;
  border-radius:14px;
  background:rgba(255,253,249,.97);
  box-shadow:0 7px 20px rgba(88,65,42,.11);
  transition:box-shadow .18s ease,transform .18s ease;
}
.toolbar::-webkit-scrollbar{display:none}
.toolbar button,.toolbar select,.toolbar input{
  flex:0 0 auto;
}
.toolbar button{
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.toolbar button:hover{background:#fff2e5;transform:translateY(-1px)}
.toolbar button.active{background:#2f7d6d;color:#fff;border-color:#2f7d6d}
.toolbar-context{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.toolbar-text-value{
  width:132px;
  height:36px;
  border:1px solid #d7d7d2;
  border-radius:8px;
  padding:0 9px;
}
.toolbar-font{
  width:150px;
  height:36px;
  border:1px solid #d7d7d2;
  border-radius:8px;
  padding:0 8px;
  background:#fff;
}
.toolbar-size{
  display:flex;
  height:36px;
  border:1px solid #d7d7d2;
  border-radius:8px;
  overflow:hidden;
  flex:0 0 auto;
}
.toolbar-size button{
  min-height:34px;
  min-width:30px;
  padding:0;
  border:0;
  border-radius:0;
}
.toolbar-size input{
  width:48px;
  border:0;
  border-left:1px solid #eee;
  border-right:1px solid #eee;
  text-align:center;
  outline:none;
}
.quick-price{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  padding:4px 7px;
  border:1px solid #e4d9cb;
  border-radius:9px;
  background:#fffaf3;
  font-size:12px;
}
.quick-price label{display:flex;align-items:center;gap:4px;font-weight:700}
.quick-price input{
  width:48px;
  height:28px;
  padding:0 4px;
  border:1px solid #ddd;
  border-radius:6px;
  text-align:center;
}
.quick-price strong{font-size:14px;color:#2f7d6d}
.details-btn{display:none}
.card{
  transition:width .28s cubic-bezier(.22,.72,.18,1),height .28s cubic-bezier(.22,.72,.18,1),box-shadow .2s ease;
}
.design-object{transition:opacity .12s ease}
.stage-shell{background:
  radial-gradient(circle at 8% 12%,rgba(243,185,120,.10),transparent 30%),
  radial-gradient(circle at 91% 9%,rgba(47,125,109,.08),transparent 34%),
  linear-gradient(145deg,#fffaf3,#f4f9f7);
}

@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .toolbar{margin-bottom:8px}
  .panel{display:none}
  .panel.mobile-open{display:block}
  .details-btn{display:inline-flex}
  .mobile-note{display:none}
  .toolbar-text-value{width:116px}
  .toolbar-font{width:118px}
  .quick-price{position:sticky;right:0}
}
@media(max-width:560px){
  .toolbar{margin-left:-2px;margin-right:-2px;padding:6px;gap:4px}
  .toolbar button{white-space:nowrap}
  .toolbar-font{width:108px}
  .toolbar-text-value{width:105px}
  .quick-price{padding:3px 5px}
}

/* Artwork crop modal */
.crop-modal{
  position:fixed;
  inset:0;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(22,22,22,.58);
  backdrop-filter:blur(3px);
}
.crop-modal[hidden]{display:none}
.crop-box{
  position:relative;
  width:min(760px,96vw);
  max-height:94vh;
  overflow:auto;
  padding:18px;
  border:1px solid #e4d9cb;
  border-radius:16px;
  background:#fffdf9;
  box-shadow:0 22px 70px rgba(0,0,0,.25);
}
.crop-box h3{margin:0 0 6px;font-size:20px}
.crop-box p{margin:0 34px 12px 0;color:#6f6962;font-size:12px;line-height:1.45}
.crop-close{
  position:absolute;
  right:12px;
  top:10px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#f3eee8;
  font-size:24px;
  cursor:pointer;
}
.crop-stage{
  position:relative;
  width:100%;
  height:min(54vh,480px);
  min-height:300px;
  overflow:hidden;
  border:1px solid #ddd7cf;
  border-radius:12px;
  background:
    linear-gradient(45deg,#eee 25%,transparent 25%),
    linear-gradient(-45deg,#eee 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#eee 75%),
    linear-gradient(-45deg,transparent 75%,#eee 75%);
  background-size:20px 20px;
  background-position:0 0,0 10px,10px -10px,-10px 0;
}
.crop-image{
  position:absolute;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
}
.crop-frame{
  position:absolute;
  border:2px solid #fff;
  box-shadow:0 0 0 9999px rgba(0,0,0,.38);
  cursor:move;
  touch-action:none;
}
.crop-frame.circle,.crop-frame.oval{border-radius:50%}
.crop-frame.rounded{border-radius:18px}
.crop-handle{
  position:absolute;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  border:2px solid #2f7d6d;
  touch-action:none;
}
.crop-handle.tl{left:-10px;top:-10px;cursor:nwse-resize}
.crop-handle.tr{right:-10px;top:-10px;cursor:nesw-resize}
.crop-handle.bl{left:-10px;bottom:-10px;cursor:nesw-resize}
.crop-handle.br{right:-10px;bottom:-10px;cursor:nwse-resize}
.crop-toolbar{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:12px;
}
.crop-toolbar button{
  min-height:34px;
  border:1px solid #d8dbe1;
  background:#fff;
  border-radius:8px;
  padding:0 10px;
  font:inherit;
  font-size:12px;
  cursor:pointer;
}
.crop-toolbar button.active{background:#2f7d6d;color:#fff;border-color:#2f7d6d}
.crop-toolbar .primary{background:#171717;color:#fff;border-color:#171717}
.crop-spacer{flex:1}
.crop-note{margin-top:8px;color:#777;font-size:11px;line-height:1.4}
#cropImageBtn{width:100%}
@media(max-width:560px){
  .crop-modal{padding:8px}
  .crop-box{padding:12px;border-radius:12px}
  .crop-stage{min-height:260px;height:48vh}
  .crop-handle{width:30px;height:30px}
  .crop-handle.tl{left:-16px;top:-16px}.crop-handle.tr{right:-16px;top:-16px}
  .crop-handle.bl{left:-16px;bottom:-16px}.crop-handle.br{right:-16px;bottom:-16px}
}

.design-object.text.inline-editing{cursor:text;user-select:text;outline:1px dashed rgba(93,124,255,.65);background:rgba(255,255,255,.04)}
.guide-v.object-guide,.guide-h.object-guide{background:#8d5cf6;box-shadow:0 0 0 1px rgba(255,255,255,.22)}