@import url('style.css');
.mockup-studio{display:grid;grid-template-columns:318px minmax(0,1fr);min-height:calc(100dvh - 84px)}
.mockup-tools{background:#fff;border-right:1px solid var(--line);padding:25px 24px;max-height:calc(100dvh - 84px);overflow:auto}
.tool-intro p{font-size:13px;line-height:1.55;color:var(--muted);margin:8px 0 0}.category-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:#eceeef;border-radius:9px;margin:20px 0 14px}.category-tabs button{border:0;background:transparent;padding:9px 6px;font-size:12px}.category-tabs button.active{background:#fff;box-shadow:0 1px 4px #0001}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.product-card{padding:5px;border:1px solid var(--line);background:#f7f8f8;text-align:left;min-width:0}.product-card img{width:100%;aspect-ratio:1;object-fit:contain;display:block;background:linear-gradient(145deg,#f7f8f8,#e5e8e9);border-radius:4px}.product-card span{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:5px 2px 2px}.product-card.active{outline:2px solid var(--ink);outline-offset:1px;background:#fff}
.compact-upload{padding:14px 8px;display:grid;grid-template-columns:28px 1fr;column-gap:8px;text-align:left;align-items:center}.compact-upload svg{grid-row:1/3;margin:0}.compact-upload span{grid-column:2}.design-info{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;overflow-wrap:anywhere}.design-info .text-button{flex:0 0 auto;margin:0}.swatches{display:flex;gap:8px;flex-wrap:wrap}.swatches button{width:30px;height:30px;padding:0;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #0002}.swatches button[data-color="#17191b"]{background:#17191b}.swatches button[data-color="#ffffff"]{background:#fff}.swatches button[data-color="#74787c"]{background:#74787c}.swatches button[data-color="#152a45"]{background:#152a45}.swatches button[data-color="#12613d"]{background:#12613d}.swatches button[data-color="#9f1f28"]{background:#9f1f28}.swatches button[data-color="#dc789b"]{background:#dc789b}
.mockup-workspace{padding:18px 20px 16px;display:flex;flex-direction:column;min-width:0;max-height:calc(100dvh - 84px)}.mockup-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:16px}.mockup-toolbar strong{display:block;font:500 18px 'Space Grotesk',sans-serif;margin-top:5px}.toolbar-controls{display:flex;align-items:center;gap:18px}.toolbar-controls label{margin:0;display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}.toolbar-controls select{margin:0;width:150px;background:#fff}.toolbar-controls .check{color:var(--ink)}
.mockup-canvas-wrap{flex:1;min-height:320px;position:relative;overflow:auto;display:flex;align-items:safe center;justify-content:safe center;border:1px solid #d4d7d9;border-radius:12px;background-color:#f4f5f6}.mockup-canvas-wrap canvas{display:block;max-width:none;max-height:none;touch-action:none;cursor:grab;flex:none}.mockup-canvas-wrap canvas.dragging{cursor:grabbing}.mockup-footer{border-top:1px solid var(--line);padding-top:17px;margin-top:17px;display:flex;justify-content:space-between;gap:15px}.mockup-footer strong{display:block;margin-top:5px;font:500 16px 'Space Grotesk',sans-serif}.mockup-footer p{font-size:12px;line-height:1.6;text-align:right;color:var(--muted);margin:0}
@media(max-width:1000px){.mockup-studio{grid-template-columns:320px minmax(0,1fr)}.mockup-workspace{padding:18px}.product-grid{grid-template-columns:repeat(2,1fr)}.toolbar-controls{gap:8px;flex-wrap:wrap;justify-content:flex-end}}
@media(max-width:700px){.mockup-studio{display:flex;flex-direction:column}.mockup-workspace{order:0;max-height:none;height:620px}.mockup-tools{order:1;max-height:none;border-right:0;border-top:1px solid var(--line);padding:24px 20px}.mockup-toolbar{align-items:flex-start}.toolbar-controls{flex-direction:column;align-items:flex-end}.mockup-canvas-wrap{min-height:390px}.mockup-footer p{display:none}.product-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:440px){.mockup-workspace{height:560px;padding:14px}.mockup-toolbar strong{font-size:15px}.toolbar-controls label:first-child{display:none}.mockup-canvas-wrap{min-height:340px}.mockup-footer{margin-top:12px;padding-top:12px}.mockup-tools{padding:22px 16px}.product-grid{grid-template-columns:repeat(2,1fr)}}