@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cinzel:wght@600;700&family=Dancing+Script:wght@600;700&family=Exo+2:wght@500;700&family=Great+Vibes&family=Montserrat:wght@500;700&family=Oswald:wght@500;700&family=Pacifico&family=Playfair+Display:wght@600;700&family=Roboto+Slab:wght@500;700&family=Space+Grotesk:wght@500;700&display=swap');
.studio-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:25px}.studio-steps span{padding:10px;border-bottom:2px solid rgba(255,255,255,.12);font-size:10px;color:var(--muted)}.studio-steps span.active{border-color:#d4af37;color:#d4af37}.studio-wrap.pro-studio{grid-template-columns:300px minmax(420px,1fr) 270px;align-items:stretch}.pro-studio .toolbar,.pro-studio .layers{max-height:720px;overflow:auto}.tool-group{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.08)}.tool-group:first-of-type{padding-top:0}.tool-group h4{margin:0 0 12px;color:#d4af37;font:700 10px Orbitron;letter-spacing:.12em;text-transform:uppercase}.range-row{display:grid;grid-template-columns:1fr 45px;gap:10px;align-items:center}.range-value{text-align:center;padding:5px;border:1px solid var(--line);border-radius:6px;font-size:11px}.button-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.button-grid .btn{min-height:38px;padding:0 7px;font-size:11px}.color-row{display:grid;grid-template-columns:1fr 46px;gap:10px}.color-input{width:46px;height:46px;padding:3px;border:1px solid var(--line);border-radius:9px;background:#0c1119}.studio-upload{display:block;padding:16px;text-align:center;border:1px dashed rgba(212,175,55,.45);border-radius:10px;background:rgba(212,175,55,.04);cursor:pointer}.studio-upload:hover{background:rgba(109,44,255,.07);border-color:#6d2cff}.studio-upload input{display:none}.studio-canvas.pro-canvas{min-height:620px;background:radial-gradient(circle at 50% 46%,rgba(109,44,255,.1),transparent 40%),#07090d;overflow:hidden}.canvas-shell{position:relative;width:100%;height:100%;min-height:620px;display:grid;place-items:center;transform-origin:center;transition:transform .2s}.canvas-product{transition:.3s;overflow:hidden}.safe-area{position:absolute;inset:17%;border:1px dashed rgba(212,175,55,.55);border-radius:10px;pointer-events:none}.safe-area:before{content:"SAFE ENGRAVING AREA";position:absolute;top:-20px;left:0;color:rgba(212,175,55,.75);font:700 8px Orbitron;letter-spacing:.1em}.design-text{left:50%;top:50%;transform:translate(-50%,-50%);max-width:75%;white-space:nowrap;touch-action:none;z-index:3}.studio-artwork{position:absolute;left:50%;top:58%;width:110px;height:110px;object-fit:contain;transform:translate(-50%,-50%);filter:grayscale(1) contrast(1.4) drop-shadow(0 0 3px rgba(255,255,255,.4));mix-blend-mode:screen;cursor:move;touch-action:none;z-index:2}.studio-artwork.hide{display:none}.preview-mode .safe-area{display:none}.preview-mode .design-text,.preview-mode .studio-artwork{filter:grayscale(1) contrast(1.8) drop-shadow(0 0 2px rgba(255,255,255,.65));opacity:.88}.canvas-toolbar{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:center;z-index:8}.canvas-hint{padding:7px 10px;border-radius:20px;background:rgba(8,10,15,.72);color:var(--muted);font-size:10px}.layer-item.pro-layer{display:flex;align-items:center;gap:9px}.layer-item.pro-layer button{margin-left:auto;background:none;border:0;color:var(--muted)}.layer-dot{width:8px;height:8px;border-radius:50%;background:#d4af37;box-shadow:0 0 8px #d4af37}.layer-dot.blue{background:#6d2cff;box-shadow:0 0 8px #6d2cff}.studio-status{padding:12px;border:1px solid var(--line);border-radius:10px;margin-top:12px;color:var(--muted);font-size:11px}.studio-status b{color:#d4af37}.zoom-control{display:flex;align-items:center;gap:8px}.zoom-control input{flex:1}
html[data-theme="light"] .studio-canvas.pro-canvas{background:radial-gradient(circle,rgba(174,128,35,.08),transparent 42%),#eee6d8}html[data-theme="light"] .tool-group{border-bottom-color:rgba(80,64,36,.1)}html[data-theme="light"] .canvas-hint{background:rgba(255,255,255,.82);color:#545b69}@media(max-width:1000px){.studio-wrap.pro-studio{grid-template-columns:260px 1fr}.pro-studio .layers{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-height:none}.studio-canvas.pro-canvas,.canvas-shell{min-height:540px}}@media(max-width:720px){.studio-wrap.pro-studio{grid-template-columns:1fr}.pro-studio .toolbar{max-height:none}.pro-studio .layers{grid-template-columns:1fr}.studio-canvas.pro-canvas,.canvas-shell{min-height:460px}.studio-steps{grid-template-columns:1fr 1fr}}

.canvas-product.pink-tumbler{width:280px;height:410px;border-radius:34px 34px 55px 55px;background:linear-gradient(90deg,#a96f78 0,#e8aeb5 18%,#f6c6cb 46%,#d9959f 77%,#9d626d 100%);border:1px solid rgba(255,255,255,.38);box-shadow:inset 18px 0 28px rgba(255,255,255,.2),inset -24px 0 32px rgba(92,35,48,.3),0 35px 65px #000}.canvas-product.pink-tumbler:before{content:"";position:absolute;z-index:5;left:-2%;right:-2%;top:-9px;height:27px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(165,178,193,.58));border:2px solid rgba(226,232,240,.72);box-shadow:0 5px 12px rgba(0,0,0,.24);pointer-events:none}.canvas-product.pink-tumbler:after{content:"";position:absolute;left:10%;right:10%;bottom:-3px;height:26px;border-radius:0 0 28px 28px;background:linear-gradient(180deg,#e4e6ea,#8e969f);box-shadow:inset 0 2px 4px rgba(255,255,255,.7);pointer-events:none}.canvas-product.pink-tumbler .safe-area{inset:13% 18% 12%}
@media(max-width:720px){.canvas-product.pink-tumbler{height:340px;width:220px}}

/* Live inventory product picker and customer-owned item workflow */
.studio-wrap.pro-studio {
  grid-template-columns: 330px minmax(480px, 1fr) 290px;
  gap: 18px;
}

.pro-studio .toolbar,
.pro-studio .layers {
  max-height: none;
  overflow: visible;
  align-self: start;
}

.product-picker .field + .field { margin-top: 12px; }
.product-picker select { min-height: 54px; }
.inventory-status { min-height: 18px; margin: 8px 0 12px; color: var(--gold-soft); font-size: 9px; line-height: 1.5; }
.own-product-upload.hide { display: none; }
.product-photo-upload { padding: 19px 13px; border-color: rgba(212,175,55,.62); background: linear-gradient(145deg,rgba(212,175,55,.08),rgba(109,44,255,.055)); }
.product-photo-upload b { color: #fff; font: 700 11px Orbitron,sans-serif; }
.upload-guidance { margin: 9px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.selected-product-meta { display: grid; gap: 3px; margin-top: 12px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.025); }
.selected-product-meta b { color: #fff; font-size: 11px; }
.selected-product-meta span { color: var(--muted); font-size: 9px; }

.studio-canvas.pro-canvas,
.canvas-shell { min-height: 680px; }

.canvas-product.inventory-product {
  position: relative;
  width: min(86%,500px);
  height: 460px;
  overflow: hidden;
  border: 1px solid rgba(212,175,55,.26);
  border-radius: 26px;
  background:
    linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.025) 75%),
    linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.025) 75%),
    #11131a;
  background-position: 0 0,12px 12px;
  background-size: 24px 24px;
  box-shadow: inset 0 0 48px rgba(0,0,0,.42),0 36px 75px rgba(0,0,0,.48),0 0 36px rgba(109,44,255,.08);
}

.canvas-product.inventory-product.stock-product { background: #f5f5f5; }
.canvas-product.inventory-product::before,
.canvas-product.inventory-product::after { display: none; }

.surface-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #f4f4f4;
  pointer-events: none;
  user-select: none;
}

.surface-photo.hide { display: none; }
.product-placeholder { position: absolute; z-index: 0; inset: 0; display: grid; place-content: center; justify-items: center; gap: 7px; padding: 28px; color: #fff; text-align: center; background: radial-gradient(circle at 50% 45%,rgba(109,44,255,.13),transparent 42%); }
.product-placeholder.hide { display: none; }
.product-placeholder b { font: 700 15px Orbitron,sans-serif; }
.product-placeholder small { color: var(--muted); }
.own-product-mark { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 5px; border: 1px solid rgba(212,175,55,.52); border-radius: 17px; color: var(--gold); background: rgba(212,175,55,.065); font-size: 30px; box-shadow: 0 0 30px rgba(212,175,55,.12); }

.inventory-product .safe-area { z-index: 2; inset: 13% 18%; border-color: rgba(212,175,55,.72); background: rgba(7,8,13,.025); box-shadow: inset 0 0 28px rgba(212,175,55,.025); }
.inventory-product .design-text { z-index: 4; color: #151515; text-shadow: 0 1px 1px rgba(255,255,255,.25); }
.inventory-product .studio-artwork { z-index: 3; }
.inventory-product.mark-dark .studio-artwork:not(.photo-template) { filter: grayscale(1) contrast(1.75) brightness(.2); mix-blend-mode: multiply; }
.inventory-product.mark-light .studio-artwork:not(.photo-template) { filter: grayscale(1) contrast(1.7) drop-shadow(0 0 2px rgba(255,255,255,.7)); mix-blend-mode: screen; }

.layer-dot.product-dot { background: #f5f5f5; box-shadow: 0 0 8px rgba(255,255,255,.65); }
.design-summary { display: grid; gap: 7px; margin-top: 12px; }
.design-summary span { display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: baseline; padding: 8px 9px; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; background: rgba(255,255,255,.02); }
.design-summary small { color: var(--gold); font: 700 7px Orbitron,sans-serif; letter-spacing: .09em; }
.design-summary b { min-width: 0; overflow: hidden; color: #fff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.draft-status { min-height: 18px; margin: 11px 0 8px; color: var(--muted); font-size: 9px; }
.studio-action-row { display: grid; grid-template-columns: .7fr 1.3fr; gap: 8px; }
.studio-action-row .btn { min-width: 0; padding-inline: 10px; font-size: 10px; }
.layers .check { margin-top: 12px; }

html[data-theme="light"] .selected-product-meta,
html[data-theme="light"] .design-summary span { border-color: rgba(80,64,36,.1); background: rgba(255,255,255,.55); }
html[data-theme="light"] .selected-product-meta b,
html[data-theme="light"] .design-summary b { color: #171821; }
html[data-theme="light"] .canvas-product.inventory-product.own-product { background-color: #dfe3eb; }

@media(max-width:1100px) {
  .studio-wrap.pro-studio { grid-template-columns: 300px minmax(430px,1fr); }
  .pro-studio .layers { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
  .pro-studio .layers > h3 { grid-column: 1/-1; }
  .pro-studio .layers .design-library,
  .pro-studio .layers .notice { grid-column: 1/-1; }
}

@media(max-width:780px) {
  .studio-wrap.pro-studio { grid-template-columns: 1fr; }
  .pro-studio .layers { grid-template-columns: 1fr; }
  .studio-canvas.pro-canvas,.canvas-shell { min-height: 540px; }
  .canvas-product.inventory-product { width: min(88%,440px); height: 410px; }
}

@media(max-width:520px) {
  .studio-canvas.pro-canvas,.canvas-shell { min-height: 470px; }
  .canvas-product.inventory-product { width: 88%; height: 350px; border-radius: 18px; }
  .inventory-product .safe-area { inset: 14% 13%; }
  .canvas-toolbar { align-items: flex-start; gap: 8px; }
  .canvas-hint { max-width: 56%; }
  .studio-action-row { grid-template-columns: 1fr; }
}