:root{--ink:#151515;--muted:#747474;--line:#e7e7e7;--paper:#f7f7f7;--accent:#ff6b00;--danger:#b42318}
*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:#fff}button,input,select{font:inherit}.hidden{display:none!important}
header{height:62px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#fff;position:relative;z-index:20}.brand{display:flex;align-items:center;gap:14px}.brand img{height:39px;width:auto}.product-select{border:1px solid var(--line);border-radius:9px;padding:9px 34px 9px 11px;background:#fff;font-weight:600;max-width:280px}.top-actions{display:flex;gap:8px}.btn{border:1px solid #d9d9d9;background:#fff;color:#222;border-radius:9px;padding:9px 12px;font-weight:650;cursor:pointer}.btn:hover{background:#f8f8f8}.btn.primary{background:#111;color:#fff;border-color:#111}.btn.orange{background:var(--accent);color:#fff;border-color:var(--accent)}.btn.danger{color:var(--danger)}
.app{height:calc(100vh - 62px);display:grid;grid-template-columns:30% 1fr 305px;min-height:0}.preview-pane{border-right:1px solid var(--line);position:relative;background:#fff;min-width:0}.canvas-pane{position:relative;background:#fff;min-width:0;overflow:hidden}.control-pane{border-left:1px solid var(--line);background:#fff;overflow:auto;padding:12px}
.pane-head{position:absolute;top:12px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;z-index:5;pointer-events:none}.seg{pointer-events:auto;display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}.seg button{border:0;background:#fff;padding:8px 13px;cursor:pointer}.seg button.active{background:var(--accent);color:#fff;font-weight:700}.viewer-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);font-size:11px;color:#808080;background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:999px;padding:7px 10px;white-space:nowrap;z-index:4}.webgl{width:100%;height:100%;display:block;background:radial-gradient(circle at 50% 44%,#fff 0,#f3f3f3 72%)}
.editor-toolbar{height:48px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:5px;color:#8a8a8a;font-size:11px}.tool{display:flex;align-items:center;gap:6px;border:0;background:transparent;color:#858585;padding:7px 8px;border-radius:7px}.tool:disabled{opacity:.35}.editor-wrap{position:absolute;top:48px;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:#fff}.zone-rail{position:absolute;left:18px;top:50%;transform:translateY(-50%);display:grid;gap:9px;z-index:8}.zone-icon{width:50px;height:50px;border:1px solid #dedede;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:9px;text-align:center;padding:4px;color:#888}.zone-icon.active{border:1.5px solid var(--accent);color:var(--accent);box-shadow:0 0 0 1px rgba(255,107,0,.08)}
.workarea{width:min(70%,700px);height:min(84%,760px);display:flex;align-items:center;justify-content:center;position:relative}.workarea canvas{max-width:100%;max-height:100%;width:auto;height:auto;display:block;touch-action:none;cursor:grab}.workarea canvas.dragging{cursor:grabbing}.zone-title{position:absolute;top:-8px;left:50%;transform:translate(-50%,-100%);font-size:12px;color:#666;white-space:nowrap}.zone-title strong{color:#222}.zoom-stack{position:absolute;right:17px;bottom:90px;display:grid;gap:8px;z-index:5}.round-control{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:9px;cursor:pointer;font-weight:800}.bottom-controls{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:12px}.bottom-controls .toolbox{display:grid;place-items:center;gap:4px;font-size:10px;color:#777}.small-square{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}
.add-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.add-card{height:62px;border:1px dashed #9c9c9c;border-radius:8px;background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;color:#555}.add-card .ico{font-size:23px;line-height:1}.section{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}.section-title{font-size:12px;font-weight:700;display:flex;align-items:center;gap:7px;margin-bottom:9px}.section-title .caret{font-size:10px;color:#777}.row{display:flex;gap:8px;align-items:center}.row>*{min-width:0}.input{border:1px solid #d8d8d8;border-radius:7px;padding:8px 9px;width:100%;background:#fff}.color-input{width:48px;height:36px;border:1px solid #ddd;border-radius:7px;padding:2px;background:#fff}.subtle{font-size:10px;color:#888;line-height:1.4}.apply-all{border:0;background:transparent;color:var(--accent);font-size:10px;cursor:pointer;padding:0;white-space:nowrap}.layers{display:grid;gap:7px}.layer{border:1px solid var(--line);border-radius:8px;padding:8px;background:#fff;cursor:pointer}.layer.active{border-color:#222;background:#fafafa}.layer-head{display:flex;justify-content:space-between;gap:8px}.layer-name{font-size:11px;font-weight:700}.layer-meta{font-size:9px;color:#8b8b8b;margin-top:2px}.layer-controls{border:1px solid var(--line);border-radius:8px;padding:9px;background:#fafafa;margin-top:8px}.range-line{display:grid;grid-template-columns:62px 1fr 38px;gap:6px;align-items:center;font-size:10px;margin-top:8px}.range-line input[type=range]{width:100%}.range-line strong{text-align:right;font-size:10px}.action-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:9px}.action-row button{padding:7px;font-size:10px}.empty{font-size:10px;color:#999;padding:10px;border:1px dashed #ddd;border-radius:8px;text-align:center}.status{font-size:10px;color:#777;display:grid;gap:5px}.status div{display:flex;justify-content:space-between}.status strong{color:#333}.upload-input{display:none}
.owner-only{display:none!important}body.owner-mode .owner-only{display:inline-flex!important}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:50}.modal{width:min(1000px,90vw);max-height:85vh;background:#fff;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}.modal-body{overflow:auto;padding:16px}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.card{border:1px solid var(--line);border-radius:10px;padding:12px}.product-row{border:1px solid var(--line);border-radius:8px;padding:9px;margin-bottom:7px;display:grid;grid-template-columns:1fr auto;gap:10px}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{font-size:10px;background:#f4f4f4;border-radius:999px;padding:5px 7px}
@media(max-width:1100px){.app{grid-template-columns:34% 1fr 270px}}@media(max-width:850px){.app{grid-template-columns:1fr}.preview-pane,.control-pane{display:none}.canvas-pane{display:block}}
.image-quick{margin-top:10px;padding-top:9px;border-top:1px solid #e8e8e8}.quick-label{font-size:9px;color:#888;text-align:center;margin-bottom:6px}.nudge-pad{display:grid;grid-template-columns:34px 34px 34px;grid-template-areas:". up ." "left center right" ". down .";justify-content:center;gap:4px}.nudge-pad button{width:34px;height:30px;border:1px solid #d8d8d8;border-radius:7px;background:#fff;cursor:pointer;font-weight:800}.nudge-pad button:hover{background:#f2f2f2}.nudge-pad #nudgeUp{grid-area:up}.nudge-pad #nudgeLeft{grid-area:left}.nudge-pad #nudgeCenter{grid-area:center;color:#ff6b00}.nudge-pad #nudgeRight{grid-area:right}.nudge-pad #nudgeDown{grid-area:down}.crop-hint{margin-top:8px;border:1px solid #ffd1ad;background:#fff7f0;color:#9a4a0a;border-radius:7px;padding:7px;font-size:9px;line-height:1.35}.tool.active-tool{background:#fff0e5;color:#ff6b00;font-weight:800}

.order-options-section{padding-bottom:2px}.order-option-rows{display:grid;gap:8px}.order-option-row{display:grid;grid-template-columns:minmax(0,1fr) 88px 28px;gap:7px;align-items:end}.order-option-row.quantity-only{grid-template-columns:minmax(0,1fr) 28px}.order-option-field{display:grid;gap:5px}.order-option-label{font-size:9px;color:#888;font-weight:700}.order-size,.order-qty{height:38px;border:1px solid #d8d8d8;border-radius:9px;background:#fff;padding:0 10px;color:#222}.order-size{appearance:auto}.order-qty{width:100%}.remove-order-row{width:28px;height:38px;border:0;background:transparent;color:#aaa;font-size:18px;cursor:pointer;border-radius:8px}.remove-order-row:hover{background:#f7f7f7;color:#555}.add-size-row{margin-top:8px;width:100%;border:1px dashed #cfcfcf;background:#fff;border-radius:9px;padding:9px 10px;color:#555;font-weight:650;font-size:10px;cursor:pointer}.add-size-row:hover{border-color:var(--accent);color:var(--accent);background:#fff8f3}.add-size-row span{color:var(--accent);font-size:14px;vertical-align:-1px}.order-options-note{font-size:9px;color:#929292;margin-top:6px;line-height:1.35}.order-options-note.fit-warning{color:#d40000;font-size:11px;font-weight:800;line-height:1.4;margin-top:8px}

.account-modal{width:min(470px,92vw)}.auth-form{display:grid;gap:13px}.google-signin{display:flex;align-items:center;justify-content:center;gap:10px;min-height:42px;font-weight:700}.google-mark{width:20px;height:20px;border:1px solid #dadce0;border-radius:50%;display:grid;place-items:center;background:#fff;font:700 13px Arial,sans-serif;color:#4285f4}.auth-divider{display:flex;align-items:center;gap:10px;color:#999;font-size:10px;text-transform:uppercase}.auth-divider::before,.auth-divider::after{content:"";height:1px;background:var(--line);flex:1}.auth-form{display:grid;gap:13px}.auth-form label{display:grid;gap:6px;font-size:12px;font-weight:700}.account-message{min-height:18px;font-size:11px;line-height:1.4;color:#777}.account-message.error{color:var(--danger)}.account-message.success{color:#147a4b}.customer-modal{width:min(920px,94vw);height:min(720px,90vh)}.account-tabs{display:flex;gap:6px;padding:10px 16px 0;border-bottom:1px solid var(--line)}.account-tabs button,.design-filters button{border:0;background:transparent;padding:10px 12px;color:#777;cursor:pointer;font-weight:700;border-bottom:2px solid transparent}.account-tabs button.active,.design-filters button.active{color:var(--accent);border-bottom-color:var(--accent)}.design-filters{display:flex;gap:4px;margin-bottom:12px}.account-list{display:grid;gap:10px}.account-item{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:14px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:11px}.account-preview{width:88px;height:72px;object-fit:cover;border-radius:8px;background:#f3f3f3;border:1px solid #ececec}.account-preview.placeholder{display:grid;place-items:center;color:#aaa;font-size:22px}.account-item h3{font-size:14px;margin:0 0 4px}.account-meta{font-size:11px;color:#777;line-height:1.5}.account-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.account-actions .btn{font-size:11px;padding:8px 10px}.account-empty{border:1px dashed #d8d8d8;border-radius:11px;padding:24px;text-align:center;color:#888;font-size:12px}.order-badge{display:inline-block;border-radius:999px;background:#f1f1f1;padding:3px 7px;font-size:9px;font-weight:800;text-transform:uppercase}.order-badge.paid,.order-badge.completed{background:#e8fff4;color:#147a4b}
@media(max-width:760px){header{height:auto;min-height:62px;align-items:flex-start;gap:8px}.top-actions{flex-wrap:wrap;justify-content:flex-end}.account-item{grid-template-columns:64px minmax(0,1fr)}.account-preview{width:64px;height:58px}.account-actions{grid-column:1/-1;justify-content:flex-start}.customer-modal{height:94vh}}