:root{--orange:#f6821f;--orange-light:#fbad41;--orange-dark:#d96d10;--navy:#001835;--ink:#1d1f20;--ink-soft:#56606b;--line:#d9dde3;--bg:#fff;--bg-soft:#f6f8fa;--blue:#0051c3;--danger:#bf2600;--radius:8px;--shadow:0 1px 2px #0018350f, 0 4px 16px #00183512;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg-soft);font-size:15px;line-height:1.45}button{font:inherit;cursor:pointer}input,select{font:inherit}.app{flex-direction:column;height:100%;display:flex}.header{background:var(--navy);color:#fff;flex-shrink:0;align-items:center;gap:14px;height:58px;padding:0 22px;display:flex}.header .logo{letter-spacing:.2px;align-items:center;gap:10px;font-size:19px;font-weight:700;display:flex}.header .logo .mark{background:linear-gradient(135deg, var(--orange-light), var(--orange));border-radius:6px;place-items:center;width:28px;height:28px;font-size:15px;display:grid}.header .tagline{color:#a9b6c5;margin-top:2px;font-size:13px}.header .static-pill{color:var(--orange-light);white-space:nowrap;border:1px solid #fbad4173;border-radius:999px;margin-left:auto;padding:4px 12px;font-size:12.5px;font-weight:600}.main{flex:1;min-height:0;display:flex}.sidebar{background:var(--bg);border-right:1px solid var(--line);flex-direction:column;flex-shrink:0;width:270px;display:flex;overflow-y:auto}.workspace{flex-direction:column;flex:1;min-width:0;display:flex}.settings-col{background:var(--bg);border-left:1px solid var(--line);flex-direction:column;flex-shrink:0;gap:16px;width:300px;padding:16px;display:flex;overflow-y:auto}.side-section{border-bottom:1px solid var(--line);padding:16px}.side-title{text-transform:uppercase;letter-spacing:.8px;color:var(--ink-soft);margin:0 0 10px;font-size:12px;font-weight:700}.dropzone{border:2px dashed var(--line);border-radius:var(--radius);text-align:center;color:var(--ink-soft);cursor:pointer;padding:22px 14px;font-size:13.5px;transition:border-color .15s,background .15s}.dropzone:hover,.dropzone.drag{border-color:var(--orange);color:var(--orange-dark);background:#fff7ef}.dropzone strong{color:var(--orange)}.img-list{margin:0;padding:8px;list-style:none}.img-item{border-radius:var(--radius);text-align:left;background:0 0;border:1px solid #0000;align-items:center;gap:10px;width:100%;margin-bottom:2px;padding:9px 10px;display:flex}.img-item:hover{background:var(--bg-soft)}.img-item.active{border-color:var(--orange);background:#fff3e6}.img-item .thumb{object-fit:cover;border:1px solid var(--line);background:#fff;border-radius:6px;flex-shrink:0;width:42px;height:42px}.img-item .meta{flex:1;min-width:0}.img-item .meta .name{white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;font-weight:600;display:block;overflow:hidden}.img-item .meta .sub{color:var(--ink-soft);font-size:12px;display:block}.img-item .del{color:var(--ink-soft);visibility:hidden;background:0 0;border:none;border-radius:4px;padding:4px;font-size:15px}.img-item:hover .del{visibility:visible}.img-item .del:hover{color:var(--danger);background:#fde8e4}.toolbar{background:var(--bg);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:10px;padding:12px 18px;display:flex}.toolbar .spacer{flex:1}.btn{border:1px solid #0000;border-radius:6px;align-items:center;gap:7px;padding:8px 16px;font-size:14px;font-weight:600;transition:background .15s,border-color .15s;display:inline-flex}.btn.primary{background:linear-gradient(135deg, var(--orange-light), var(--orange));color:#fff}.btn.primary:hover{filter:brightness(1.05)}.btn.secondary{border-color:var(--line);color:var(--navy);background:#fff}.btn.secondary:hover{border-color:var(--orange);color:var(--orange-dark)}.btn.secondary.on{border-color:var(--orange);color:var(--orange-dark);background:#fff3e6}.btn.ghost{color:var(--blue);background:0 0;border:none;padding:8px}.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}.grid-form{color:var(--ink-soft);align-items:center;gap:6px;font-size:13.5px;display:inline-flex}.grid-form input{border:1px solid var(--line);border-radius:6px;width:62px;padding:7px 8px}.grid-form input:focus{outline:2px solid var(--orange-light);border-color:var(--orange)}.canvas-wrap{cursor:grab;background:repeating-conic-gradient(#eceef1 0% 25%,#f6f8fa 0% 50%) 0 0/22px 22px;flex:1;min-height:0;position:relative;overflow:hidden}.canvas-wrap[data-mode=calibrate],.canvas-wrap[data-mode=crop]{cursor:crosshair}body.dragging,body.dragging *{-webkit-user-select:none;user-select:none;cursor:inherit!important}.canvas-stage{transform-origin:0 0;box-shadow:var(--shadow);-webkit-user-select:none;user-select:none;will-change:transform;position:absolute;top:0;left:0}.canvas-stage img{pointer-events:none;-webkit-user-drag:none;display:block}.grid-overlay{pointer-events:none;position:absolute;inset:0}@keyframes gridBlink{0%,to{opacity:1}50%{opacity:0}}.cell-lines{animation:1.15s ease-in-out 3 gridBlink}@media (prefers-reduced-motion:reduce){.cell-lines{animation:none}}.sel-rect{border:2px solid var(--orange);pointer-events:none;background:#f6821f29;position:absolute;box-shadow:0 0 0 1px #ffffff80}.sel-rect.editing{background:#f6821f1a}.crop-rect{pointer-events:none;border:2px solid #fff;position:absolute;box-shadow:0 0 0 1px #00183580}.gizmo{z-index:3;background:#fff;border-radius:3px;width:12px;height:12px;margin:-6px 0 0 -6px;position:absolute;box-shadow:0 1px 3px #00183573}.gizmo-sel{border:2px solid var(--orange)}.gizmo-crop{border:2px solid var(--navy)}.gizmo:hover{background:var(--orange-light)}.sel-bar{background:var(--bg);border:1px solid var(--line);box-shadow:var(--shadow);z-index:5;white-space:nowrap;border-radius:8px;align-items:center;gap:6px;padding:6px 8px;display:flex;position:absolute;transform:translate(-50%)}.sel-bar label{color:var(--ink-soft);font-size:11.5px;font-weight:700}.sel-bar input{border:1px solid var(--line);border-radius:5px;width:62px;padding:4px 6px;font-size:12.5px}.btn.tiny{border-radius:5px;padding:4px 9px;font-size:12.5px}.btn.tiny.danger{color:var(--danger)}.btn.tiny.danger:hover{border-color:var(--danger);color:var(--danger);background:#fdeeea}.loupe{pointer-events:none;z-index:6;background:#fff;border:3px solid #fff;border-radius:50%;position:absolute;overflow:hidden;box-shadow:0 4px 18px #00183566}.loupe-img{image-rendering:pixelated;background-repeat:no-repeat;position:absolute;inset:0}.loupe-cross-v,.loupe-cross-h{background:#f6821fe6;position:absolute}.loupe-cross-v{width:1px;margin-left:-.5px;top:0;bottom:0;left:50%}.loupe-cross-h{height:1px;margin-top:-.5px;top:50%;left:0;right:0}.loupe-label{text-align:center;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #000000f2,0 0 6px #000c;font-size:10px;font-weight:700;position:absolute;bottom:8px;left:0;right:0}.region-label{z-index:2;background:var(--orange-dark);color:#fff;letter-spacing:.3px;pointer-events:none;white-space:nowrap;border-radius:5px;margin-top:-6px;padding:3px 9px;font-size:11px;font-weight:700;position:absolute;transform:translateY(-100%);box-shadow:0 1px 4px #00183559}.menu-catcher{z-index:9;position:fixed;inset:0}.ctx-menu{z-index:10;background:var(--bg);border:1px solid var(--line);border-radius:9px;min-width:214px;padding:6px;position:absolute;box-shadow:0 12px 34px #00183542}.ctx-title{letter-spacing:.7px;text-transform:uppercase;color:var(--ink-soft);margin:6px 8px 4px;font-size:10.5px;font-weight:700}.ctx-item{text-align:left;width:100%;color:var(--navy);background:0 0;border:none;border-radius:6px;padding:7px 9px;font-size:13.5px;display:block}.ctx-item:hover:not(:disabled){color:var(--orange-dark);background:#fff3e6}.ctx-item:disabled{opacity:.4;cursor:not-allowed}.ctx-item.danger{color:var(--danger)}.ctx-item.danger:hover{color:var(--danger);background:#fdeeea}.ctx-sep{background:var(--line);height:1px;margin:5px 0}.ctx-custom{color:var(--ink-soft);align-items:center;gap:5px;padding:4px 9px 6px;font-size:12.5px;display:flex}.ctx-custom input{border:1px solid var(--line);border-radius:5px;width:50px;padding:4px 6px}.tool-dock{z-index:5;border:1px solid var(--line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fffffff5;border-radius:10px;flex-direction:column;gap:3px;padding:4px;display:flex;position:absolute;top:14px;left:14px}.tool-dock .tool{width:38px;height:38px;color:var(--navy);background:0 0;border:1px solid #0000;border-radius:7px;place-items:center;display:grid;position:relative}.tool-dock .tool:hover:not(:disabled){background:var(--bg-soft);color:var(--orange-dark)}.tool-dock .tool.on{border-color:var(--orange);color:var(--orange-dark);background:#fff3e6}.tool-dock .tool:disabled{opacity:.35;cursor:not-allowed}.tool-key{color:var(--ink-soft);letter-spacing:.2px;font-size:8.5px;font-weight:700;position:absolute;bottom:1px;right:3px}.tool-dock .tool.on .tool-key{color:var(--orange)}.dock-sep{background:var(--line);height:1px;margin:3px 2px}.undo-pair{gap:4px;display:inline-flex}.btn.icon{place-items:center;padding:7px 9px;display:inline-grid}.zoom-float{z-index:4;border:1px solid var(--line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fffffff2;border-radius:8px;align-items:center;gap:2px;padding:3px;display:inline-flex;position:absolute;bottom:16px;right:16px}.zoom-btn{color:var(--navy);background:0 0;border:none;border-radius:4px;padding:4px 9px;font-size:14px;font-weight:700;line-height:1}.zoom-btn.wide{font-size:12.5px}.zoom-btn:hover{background:var(--bg-soft);color:var(--orange-dark)}.zoom-val{text-align:center;min-width:46px;color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600}.legend{font-size:12.5px}.legend b{color:var(--orange-dark)}.chip-x{color:inherit;opacity:.7;background:0 0;border:none;padding:0 0 0 6px;font-size:11px}.chip-x:hover{opacity:1}.error-hint{background:#fdeeea;border-color:#f3b6a9}.modal-lede{color:var(--ink-soft);margin-top:0;font-size:13.5px}.badge-row{background:var(--bg);border-bottom:1px solid var(--line);color:var(--ink-soft);flex-wrap:wrap;align-items:center;gap:8px;padding:10px 18px;font-size:13px;display:flex}.badge{background:var(--bg-soft);border:1px solid var(--line);color:var(--navy);border-radius:999px;padding:3px 12px;font-weight:600}.badge.orange{border-color:var(--orange-light);color:var(--orange-dark);background:#fff3e6}.empty-state{text-align:center;color:var(--ink-soft);max-width:420px;margin:auto}.empty-state h2{color:var(--navy);margin-bottom:8px}.hint{color:var(--ink-soft);background:#eef4fb;border:1px solid #c9dcf5;border-radius:6px;padding:8px 12px;font-size:12.5px}.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:14px}.card h3{text-transform:uppercase;letter-spacing:.7px;color:var(--ink-soft);margin:0 0 12px;font-size:13px}.field{margin-bottom:12px}.field:last-child{margin-bottom:0}.field label{color:var(--navy);margin-bottom:4px;font-size:13px;font-weight:600;display:block}.field input[type=number],.field select{border:1px solid var(--line);background:#fff;border-radius:6px;width:100%;padding:8px 10px}.field input:focus,.field select:focus{outline:2px solid var(--orange-light);border-color:var(--orange)}.field .note{color:var(--ink-soft);margin-top:3px;font-size:12px}.field .val{float:right;color:var(--orange-dark);font-weight:700}.card.advanced{padding:0}.card.advanced>summary{cursor:pointer;text-transform:uppercase;letter-spacing:.7px;color:var(--ink-soft);align-items:center;gap:8px;padding:12px 14px;font-size:13px;font-weight:700;list-style:none;display:flex}.card.advanced>summary::-webkit-details-marker{display:none}.card.advanced>summary:before{content:"▸";font-size:11px;transition:transform .15s}.card.advanced[open]>summary:before{transform:rotate(90deg)}.card.advanced>summary:hover{color:var(--orange-dark)}.adv-body{border-top:1px solid var(--line);padding:12px 14px 14px}.adv-group{color:var(--navy);margin:0 0 10px;font-size:12px;font-weight:700}.link-btn{border:1px solid var(--line);background:#fff;border-radius:6px;padding:5px 7px;font-size:12px;line-height:1}.link-btn.on{border-color:var(--orange);background:#fff3e6}.link-btn:hover{border-color:var(--orange)}.inline-check{color:var(--navy);white-space:nowrap;align-items:center;gap:5px;margin-left:10px;font-weight:600;display:inline-flex}.inline-check input{accent-color:var(--orange)}.field input[type=range]{width:100%;accent-color:var(--orange);margin:2px 0}.field.check{align-items:flex-start;gap:9px;display:flex}.field.check input{accent-color:var(--orange);margin-top:3px}.field.check label{margin:0;font-weight:500}.two-col{grid-template-columns:1fr 1fr;gap:10px;display:grid}.modal-backdrop{z-index:50;background:#0018358c;place-items:center;padding:30px;display:grid;position:fixed;inset:0}.modal{background:var(--bg);border-radius:12px;flex-direction:column;width:min(1020px,100%);max-height:90vh;display:flex;overflow:hidden;box-shadow:0 20px 60px #00000059}.modal-head{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:16px 22px;display:flex}.modal-head h2{color:var(--navy);flex:1;margin:0;font-size:18px}.modal-head .close{color:var(--ink-soft);background:0 0;border:none;border-radius:6px;padding:4px 8px;font-size:20px}.modal-head .close:hover{background:var(--bg-soft)}.modal-body{padding:18px 22px;overflow-y:auto}.page-grid{gap:14px;display:grid}.page-card{border:2px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#fff;transition:border-color .12s,opacity .12s;position:relative;overflow:hidden}.page-card.on{border-color:var(--orange)}.page-card.off{opacity:.45}.page-card .sheet{background:repeating-conic-gradient(#f0f2f5 0% 25%,#fff 0% 50%) 0 0/16px 16px;place-items:center;display:grid;position:relative}.page-card .sheet img{max-width:100%;max-height:100%;display:block}.page-card .label{border-top:1px solid var(--line);color:var(--ink-soft);background:var(--bg-soft);justify-content:space-between;align-items:center;padding:7px 10px;font-size:12px;display:flex}.page-card .label b{color:var(--navy)}.page-card .tick{background:var(--orange);color:#fff;border-radius:50%;place-items:center;width:22px;height:22px;font-size:13px;display:grid;position:absolute;top:8px;right:8px;box-shadow:0 1px 4px #0000004d}.page-card.off .tick{background:#9aa5b1}.page-card .dropped-tag{background:var(--danger);color:#fff;border-radius:4px;padding:2px 7px;font-size:11px;font-weight:700;position:absolute;top:8px;left:8px}.modal-foot{border-top:1px solid var(--line);background:var(--bg-soft);align-items:center;gap:12px;padding:14px 22px;display:flex}.modal-foot .info{color:var(--ink-soft);flex:1;font-size:13px}.modal-foot select{border:1px solid var(--line);background:#fff;border-radius:6px;padding:8px 10px}.toast{background:var(--navy);color:#fff;box-shadow:var(--shadow);z-index:100;border-radius:8px;padding:11px 20px;font-size:14px;position:fixed;bottom:22px;left:50%;transform:translate(-50%)}.toast.error{background:var(--danger)}.spinner{border:3px solid #fff6;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}.spinner.dark{border-color:#d9dde3;border-top-color:var(--orange)}@keyframes spin{to{transform:rotate(360deg)}}