:root{
  --bg-app:#111319;
  --bg-panel:#1a1d24;
  --bg-panel-2:#20242e;
  --bg-field:#262b36;
  --border:#323847;
  --border-soft:#2a2f3b;
  --text:#e9ebf1;
  --text-muted:#8b93a7;
  --text-dim:#5b6377;
  --accent:#ff7a3d;
  --accent-dim:#a04e26;
  --accent2:#35c2ff;
  --bleed-color:#ff4d6d;
  --safe-color:#35c2ff;
  --cut-color:#0d0f13;
  --canvas-bg:#282c36;
  --paper:#ffffff;
  --ok:#4ade80;
  --danger:#ff6b7a;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;background:var(--bg-app);}
body{font-family:'Inter',system-ui,sans-serif;color:var(--text);overflow-y:auto;overflow-x:hidden;-webkit-tap-highlight-color:transparent;user-select:none;}
input,select,button,textarea{font-family:inherit;}
.mono{font-family:'IBM Plex Mono',monospace;}
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;}

/* TOPBAR */
.topbar{display:flex;align-items:center;gap:8px;padding:0 12px;height:50px;flex:0 0 50px;background:var(--bg-panel);border-bottom:1px solid var(--border);z-index:20;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;white-space:nowrap;}
.brand .dot{width:9px;height:9px;border-radius:2px;background:var(--accent);transform:rotate(45deg);flex:0 0 auto;}
.topbar-spacer{flex:1;}
.count-pill{display:flex;align-items:center;gap:8px;background:var(--bg-field);border:1px solid var(--border);border-radius:20px;padding:6px 14px;font-size:12.5px;color:var(--text-muted);white-space:nowrap;}
.count-pill b{color:var(--accent);font-family:'IBM Plex Mono',monospace;font-size:14px;}
.btn{border:1px solid var(--border);background:var(--bg-field);color:var(--text);padding:8px 13px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:.12s;}
.btn:hover{background:#2d3340;border-color:#454d60;}
.btn:active{transform:translateY(1px);}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#1a0f08;font-weight:700;}
.btn-accent:hover{background:#ff8b56;border-color:#ff8b56;}
.btn-ghost{background:transparent;}
.btn-sm{padding:6px 10px;font-size:12px;}
.btn:disabled{opacity:.35;cursor:not-allowed;}
.swap-btn{align-self:flex-end;margin-bottom:8px;flex:0 0 auto;padding:8px 10px;}

/* SETTINGS PANEL (collapsible, full width, wraps responsively) */
.settings-panel{background:var(--bg-panel);border-bottom:1px solid var(--border);max-height:min(40vh, 480px);overflow-y:auto;transition:max-height .18s ease, padding .18s ease;}
.settings-panel.collapsed{max-height:0;overflow:hidden;border-bottom:none;}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));gap:1px;background:var(--border-soft);}
.setting-card{background:var(--bg-panel);padding:14px 16px;}
.card-title{font-size:11px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--text-dim);margin:0 0 10px 0;}

.field-row{display:flex;gap:8px;margin-bottom:8px;align-items:flex-end;}
.field{flex:1;min-width:0;}
.field label{display:block;font-size:11px;color:var(--text-muted);margin-bottom:4px;}
.field input[type=text],.field input[type=number],.field select{width:100%;background:var(--bg-field);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:8px 9px;font-size:13px;outline:none;transition:.12s;}
.field input:focus,.field select:focus{border-color:var(--accent);background:#2a2f3c;}

.unit-suffix{position:relative;}
.unit-suffix input{padding-right:30px;}
.unit-suffix span{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:10.5px;color:var(--text-dim);pointer-events:none;}

.preset-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.chip{background:var(--bg-field);border:1px solid var(--border);color:var(--text-muted);padding:6px 10px;border-radius:6px;font-size:11.5px;cursor:pointer;transition:.12s;}
.chip:hover{border-color:var(--accent);color:var(--text);}
.chip.active{background:var(--accent);border-color:var(--accent);color:#1a0f08;font-weight:700;}
.chip.custom-chip{display:inline-flex;align-items:center;gap:6px;}
.chip.custom-chip .del{color:var(--danger);font-weight:800;padding-left:2px;}

.hint{font-size:11px;color:var(--text-dim);line-height:1.5;margin:6px 0;}
.hint b{color:var(--text-muted);}
.save-preset{display:flex;gap:6px;margin-top:8px;}
.save-preset input{flex:1;}

.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;}
.toggle-row .lbl{font-size:12.5px;color:var(--text);}
.toggle-row .sub{font-size:10.5px;color:var(--text-dim);}
.switch{position:relative;width:36px;height:20px;flex:0 0 auto;}
.switch input{opacity:0;width:0;height:0;}
.slider{position:absolute;inset:0;background:var(--bg-field);border:1px solid var(--border);border-radius:20px;cursor:pointer;transition:.15s;}
.slider:before{content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;background:var(--text-dim);border-radius:50%;transition:.15s;}
input:checked + .slider{background:var(--accent-dim);border-color:var(--accent);}
input:checked + .slider:before{transform:translateX(16px);background:var(--accent);}

.upload-box{border:1.5px dashed var(--border);border-radius:8px;padding:16px;text-align:center;cursor:pointer;transition:.12s;position:relative;overflow:hidden;}
.upload-box:hover{border-color:var(--accent);background:#20242e;}
.upload-box.has-img{padding:8px;}
.upload-box img{max-width:100%;max-height:90px;border-radius:5px;display:block;margin:0 auto;}
.upload-box .up-icon{font-size:20px;color:var(--text-dim);margin-bottom:6px;}
.upload-box .up-text{font-size:11.5px;color:var(--text-muted);}
.upload-box input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;}

.grid-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px;}
.grid-actions .btn{justify-content:center;width:100%;}

.mini-stat{background:var(--bg-field);border:1px solid var(--border);border-radius:7px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;margin-top:4px;margin-bottom:8px;}
.mini-stat .lbl{font-size:11px;color:var(--text-muted);}
.mini-stat .val{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13px;color:var(--text);}

.order-result{margin-top:10px;background:#1c2a22;border:1px solid #2b4636;border-radius:7px;padding:10px 12px;font-size:12px;color:#a9e6bf;display:none;}
.order-result.show{display:block;}
.order-result b{color:var(--ok);font-family:'IBM Plex Mono',monospace;}

/* BODY / WORKSPACE */
.body{flex:1;display:flex;min-height:0;position:relative;}
.workspace{flex:1;display:flex;flex-direction:column;min-width:0;min-height:180px;background:var(--canvas-bg);position:relative;}
.canvas-toolbar{min-height:44px;flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:6px 14px;background:var(--bg-panel);border-bottom:1px solid var(--border);flex-wrap:wrap;}
.paper-label{font-size:12px;color:var(--text-dim);white-space:nowrap;}
.seg{display:flex;background:var(--bg-field);border:1px solid var(--border);border-radius:7px;overflow:hidden;}
.seg button{border:none;background:transparent;color:var(--text-muted);padding:7px 13px;font-size:12px;font-weight:600;cursor:pointer;transition:.12s;}
.seg button.active{background:var(--accent);color:#1a0f08;}
.zoom-controls{display:flex;align-items:center;gap:4px;margin-left:auto;}
.zoom-controls button{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:var(--bg-field);color:var(--text-muted);cursor:pointer;font-size:14px;line-height:1;}
.zoom-controls .zoom-val{font-size:11.5px;color:var(--text-dim);width:42px;text-align:center;font-family:'IBM Plex Mono',monospace;}

.canvas-scroll{flex:1;overflow:auto;position:relative;min-height:160px;}
.canvas-holder{min-width:100%;min-height:100%;display:grid;grid-template-columns:22px 1fr;grid-template-rows:22px 1fr;place-items:start;padding:30px;}
.ruler{background:#1c1f26;position:relative;overflow:hidden;}
.ruler-top{grid-column:2;grid-row:1;height:22px;}
.ruler-left{grid-column:1;grid-row:2;width:22px;}
.ruler-corner{grid-column:1;grid-row:1;background:#1c1f26;}
.paper-stage{grid-column:2;grid-row:2;position:relative;touch-action:pan-x pan-y;}
.paper-stage.marquee-mode{touch-action:none;}
.paper-sheet{position:relative;background:#ffffff;box-shadow:0 8px 30px rgba(0,0,0,.45);}
.guide-margin{position:absolute;border:1px dashed #c7cbd4;pointer-events:none;}
.empty-hint{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;color:#9aa1b0;font-size:12px;line-height:1.6;pointer-events:none;padding:12px;overflow:hidden;}
.empty-hint span{font-size:10px;color:#b9bfca;display:block;margin-top:4px;}
.empty-hint.show{display:flex;}

#objectsLayer{position:absolute;inset:0;}
.obj-el{position:absolute;cursor:grab;box-sizing:border-box;overflow:hidden;background:#dfe3ea;background-image:repeating-linear-gradient(45deg, #b7bcc7 0, #b7bcc7 1px, transparent 1px, transparent 9px);border:1px solid #0d0f13;touch-action:none;}
.obj-el.circle-shape{border-radius:50%;}
.obj-el img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.obj-el.selected{outline:2px solid var(--accent);outline-offset:1px;z-index:5;}
.obj-el .bleed-vis{position:absolute;border:1px dashed var(--bleed-color);pointer-events:none;}
.obj-el.dragging{cursor:grabbing;opacity:.85;z-index:10;}
.guide-line{position:absolute;background:var(--accent2);pointer-events:none;z-index:6;}
.guide-line.v{width:1px;top:0;bottom:0;}
.guide-line.h{height:1px;left:0;right:0;}
.marquee{position:absolute;border:1px solid var(--accent2);background:rgba(53,194,255,.12);pointer-events:none;z-index:8;}
.grid-helper{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right, rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.5) 1px, transparent 1px);}

.statusbar{height:28px;flex:0 0 28px;display:flex;align-items:center;gap:16px;padding:0 14px;background:var(--bg-panel);border-top:1px solid var(--border);font-size:11px;color:var(--text-dim);overflow:hidden;white-space:nowrap;}
.statusbar b{color:var(--text-muted);font-family:'IBM Plex Mono',monospace;}
.statusbar-spacer{flex:1;}

/* BOTTOM TOOLBAR */
.bottom-toolbar-wrap{flex:0 0 auto;background:var(--bg-panel);border-top:1px solid var(--border);position:relative;z-index:15;}
.bottom-toolbar{display:flex;align-items:stretch;gap:2px;overflow-x:auto;overflow-y:visible;padding:6px 10px;scrollbar-width:thin;}
.bottom-toolbar::-webkit-scrollbar{height:6px;}
.bottom-toolbar::-webkit-scrollbar-thumb{background:#2d3340;border-radius:4px;}
.tbtn{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:transparent;border:1px solid transparent;color:var(--text-muted);cursor:pointer;padding:6px 10px;border-radius:8px;min-width:52px;transition:.12s;}
.tbtn:hover{background:var(--bg-field);color:var(--text);}
.tbtn:active{transform:translateY(1px);}
.tbtn .ic{font-size:15px;line-height:1;}
.tbtn .lb{font-size:9.5px;font-weight:600;white-space:nowrap;}
.tbtn.toggle-tbtn.active{background:var(--accent-dim);border-color:var(--accent);color:#ffd9c2;}
.tbtn:disabled{opacity:.3;cursor:not-allowed;}
.tsep{flex:0 0 auto;width:1px;background:var(--border);margin:4px 6px;}
.tbtn-popover-wrap{position:relative;flex:0 0 auto;}
.popover{position:fixed;background:var(--bg-panel-2);border:1px solid var(--border);border-radius:10px;padding:14px;width:260px;box-shadow:0 12px 32px rgba(0,0,0,.5);z-index:150;}
.popover[hidden]{display:none;}
.pop-title{font-size:12px;font-weight:700;color:var(--text);margin:0 0 10px 0;}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(8,9,12,.75);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal-overlay.hidden{display:none;}
.modal{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;width:100%;max-width:1100px;height:90vh;display:flex;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);}
.modal-narrow{max-width:480px;height:auto;max-height:80vh;}
.modal-tiny{max-width:360px;height:auto;}
.modal-side{width:260px;flex:0 0 260px;border-right:1px solid var(--border);padding:18px;overflow-y:auto;background:var(--bg-panel-2);}
.modal-side h3{font-size:13px;margin:0 0 14px 0;color:var(--text);}
.modal-side .field{margin-bottom:0;}
.modal-side .field label{margin-top:0;}
.modal-side input[type=number]{width:100%;background:var(--bg-field);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:8px 9px;font-size:13px;}
.modal-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.modal-header{height:52px;flex:0 0 52px;display:flex;align-items:center;padding:0 18px;gap:10px;border-bottom:1px solid var(--border);}
.modal-header .title{font-weight:700;font-size:14px;flex:1;}
.modal-body{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;background:var(--canvas-bg);padding:30px;}
.modal-body-list{display:block;align-items:stretch;background:var(--bg-panel);padding:18px;}
.modal-body-form{display:flex;flex-direction:column;gap:10px;background:var(--bg-panel);padding:18px;}
.modal-body-form input{background:var(--bg-field);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:9px 10px;font-size:13px;}
.close-x{width:30px;height:30px;border-radius:7px;border:1px solid var(--border);background:var(--bg-field);color:var(--text-muted);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;}
.close-x:hover{color:#fff;border-color:var(--danger);background:#2a1c20;}

.legend-row{display:flex;align-items:center;gap:8px;margin-top:4px;}
.legend-swatch{width:14px;height:3px;border-radius:2px;flex:0 0 auto;}
.legend-txt{font-size:11.5px;color:var(--text-muted);}

.project-list{display:flex;flex-direction:column;gap:8px;}
.project-item{display:flex;align-items:center;gap:10px;background:var(--bg-field);border:1px solid var(--border);border-radius:8px;padding:10px 12px;cursor:pointer;transition:.12s;}
.project-item:hover{border-color:var(--accent);}
.project-item.current{border-color:var(--accent);background:#2a2015;}
.project-item .pi-info{flex:1;min-width:0;}
.project-item .pi-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.project-item .pi-meta{font-size:10.5px;color:var(--text-dim);}
.project-item .pi-actions{display:flex;gap:4px;}
.project-item .pi-actions button{width:26px;height:26px;border-radius:6px;border:1px solid var(--border);background:var(--bg-panel);color:var(--text-muted);cursor:pointer;font-size:12px;}
.project-item .pi-actions button:hover{color:#fff;}
.project-item .pi-actions .del-btn:hover{border-color:var(--danger);background:#2a1c20;}

.toast{position:fixed;bottom:76px;left:50%;transform:translateX(-50%) translateY(20px);background:#1a1d24;border:1px solid var(--border);color:var(--text);padding:10px 18px;border-radius:8px;font-size:12.5px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:200;opacity:0;pointer-events:none;transition:.2s;max-width:90vw;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (max-width: 720px){
  .brand{display:none;}
  .topbar{padding:0 8px;gap:6px;}
  .count-pill{padding:6px 10px;font-size:11px;}
  .settings-grid{grid-template-columns:1fr;}
  .modal{flex-direction:column;height:100vh;max-width:100%;border-radius:0;}
  .modal-side{width:100%;flex:0 0 auto;max-height:40vh;}
  .canvas-toolbar{justify-content:space-between;}
  .popover{width:calc(100vw - 24px);max-width:300px;}
  .tbtn{min-width:46px;padding:6px 7px;}
  .tbtn .lb{font-size:9px;}
}